ヒーロー · ヒーローセクション

極太フォントのヒーローセクション

画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/bold-hero/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由

PUBLISHED — 2026年4月23日 UPDATED — 2026年10月14日 CATEGORY — ヒーロー LICENSE — CC0 1.0

プレビュー

AIへの指示文

シリーズシード規模のスタートアップ向けに、エディトリアル寄りの大胆なヒーローセクションを作ってください。

意図: 大きな文字、1 色、1 CTA。見出しを 2 秒で認識できること。
ページ内リンクには移動先を用意する。トライアルや登録が未実装の例では、その説明へ移動する。ブランド・実績・価格は架空の設定と明示し、リンクは44px以上の操作領域とフォーカス表示を持つ。

キャンバス:
- off-white (#faf9f5) の背景、近黒 (#0a0a0c) のインク。
- 1 色のアクセント: 鮮やかなオレンジ (#ff4d1a)。使う場所は eyebrow バー、イタリック強調語、CTA の hover シャドウのみ。

ヘッダー:
- absolute で上部配置。左: ボールドな "◼︎ Stack/07" ワードマーク。右: 4 つのナビリンクを弱めの太さで。720px 未満ではナビを非表示。

ヒーロー本体:
- eyebrow 行は短いオレンジバーと「架空の製品 · 2026」。
- H1は2行を基本に、font-size clamp(2.8rem, 10vw, 8rem)、weight 900、和文のletter-spacingは0、line-heightは1.3。540px以下ではclamp(2rem, 9vw, 2.8rem)に下げ、日本語が1文字だけ次の行に残らないか確認する。
  - 1 行目: 「Ship <span オレンジ イタリック>faster</span>,」
  - 2 行目: 「<span アウトライン>decide</span> slower.」
    アウトライン語は `-webkit-text-stroke: 2px <インク>` + `color: transparent` で実装。
- H1 の下は、デスクトップで 2 カラム、720px 未満では縦積み:
  左: 最大 42ch のリード文 1段落、ミュートのグレー。
  右: CTA クラスタ(縦並び):
    - プライマリCTA: 黒ソリッドボタン、ラジアス 2px、ボールド、矢印アイコン付き。ラベル "Start the 14-day trial"。hover で translate(2px, -2px) + -4px/4px のオレンジ オフセットシャドウ。
    - 下にゴーストリンク: "No credit card · cancel anytime →"。

下部ストリップ:
- 上辺に 1px の境界線。「架空のブランド例」のラベルと、NORTH・PLAIN・FRAME・ORBIT・FIELDの5つのワードマーク。実績がない企業や投資家の名前を出資元として載せない。

純粋な HTML/CSS、フルレスポンシブ、JS 不要。

バリエーション

ダークテーマ版

構造はそのままで配色を反転:
- 背景 #0b0c0f、インク #faf9f5、アクセントはオレンジのまま。
- アウトライン語は `-webkit-text-stroke` をライトインク色に。
- CTA は明色ボタン、hover シャドウはオレンジのまま。

プロダクト画像あり版

1024px 以上でレイアウトを拡張:
- 60/40 グリッド。左 60%: 既存のヒーローコンテンツ(eyebrow、見出し、リード、CTA)。
- 右 40%: 傾けたブラウザ/アプリのモック(フェイクの chrome + フルブリードのスクリーンショット)。rotate(-3deg) を適用。
- カードに hover で translateY(-4px) の浮き上がり。

このプレビューのコード

HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。製品・ブランド・利用条件は架空の例です。リンクは構成や条件の説明へ移動し、登録や決済は行いません。

CC0 · 改変・商用利用自由 · revision 0d286e1f9efd

コードを表示

<!doctype html>
<!-- Vibehaus / CC0 — 改変・商用利用可能。架空のサービスのデザイン例。 -->
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>極太フォントのヒーローセクション — Vibehaus プレビュー</title>
    <style>
      :root {
        --bg: #faf9f5;
        --ink: #0a0a0c;
        --muted: #5a5a66;
        --accent: #ff4d1a;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", "Meiryo", ui-sans-serif, system-ui, sans-serif;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.7;
      }
      header {
        position: absolute;
        top: 0; left: 0; right: 0;
        padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
      }
      header .brand { font-size: 1.1rem; letter-spacing: -0.02em; }
      header nav a {
        margin-left: 1.5rem;
        color: inherit;
        text-decoration: none;
        font-size: 0.92rem;
        font-weight: 500;
        opacity: 0.75;
      }
      header nav a:hover { opacity: 1; }

      main {
        min-height: 100dvh;
        padding: clamp(5rem, 14vw, 9rem) clamp(1rem, 4vw, 2.5rem) 4rem;
        max-width: 1320px;
        margin: 0 auto;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 1.2rem;
      }
      .eyebrow .bar {
        width: 28px;
        height: 2px;
        background: var(--accent);
      }
      h1.headline {
        font-weight: 900;
        font-size: clamp(2.8rem, 10vw, 8rem);
        line-height: 1.3;
        letter-spacing: 0;
        margin: 0 0 1.5rem;
        text-transform: none;
      }
      h1.headline .orange {
        color: var(--accent);
        font-style: normal;
        font-weight: 900;
      }
      h1.headline .line {
        display: block;
      }
      h1.headline .outlined {
        -webkit-text-stroke: 2px var(--ink);
        color: transparent;
      }
      .body-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2rem;
        align-items: end;
        margin-top: 2rem;
      }
      p.lede {
        max-width: 42ch;
        font-size: clamp(1.05rem, 1.6vw, 1.2rem);
        color: var(--muted);
        margin: 0;
      }
      .cta-col {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        min-width: 240px;
      }
      a.cta {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1.1rem 1.4rem;
        background: var(--ink);
        color: var(--bg);
        font-weight: 700;
        font-size: 1rem;
        border-radius: 2px;
        text-decoration: none;
        transition: transform 0.15s;
      }
      a.cta:hover { transform: translate(2px, -2px); box-shadow: -4px 4px 0 var(--accent); }
      a.cta svg { flex-shrink: 0; }
      a.ghost {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 0;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--muted);
        text-decoration: none;
      }
      a.ghost:hover { color: var(--ink); }

      .strip {
        margin-top: clamp(3rem, 7vw, 5rem);
        border-top: 1px solid rgba(10, 10, 12, 0.1);
        padding-top: 1.5rem;
        display: flex;
        align-items: center;
        gap: clamp(1rem, 3vw, 2.5rem);
        color: var(--muted);
        font-size: 0.82rem;
        flex-wrap: wrap;
        letter-spacing: 0.04em;
      }
      .strip .label {
        font-weight: 700;
        color: var(--ink);
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .strip .logo {
        font-weight: 800;
        font-size: 0.95rem;
        letter-spacing: -0.015em;
        opacity: 0.7;
      }

      @media (max-width: 720px) {
        header nav { display: none; }
        .body-row { grid-template-columns: 1fr; }
      }

      /* 配布デモの操作先。外部通信・登録・決済は行わない。 */
      a:focus-visible { outline: 3px solid #0a0a0c; outline-offset: 4px; }
      header nav a, header .logo, header .login { min-height: 44px; display: inline-flex; align-items: center; }
      header nav { flex-wrap: wrap; }
      .sample-details { position: relative; z-index: 10; color: #0a0a0c; background: #faf9f5; padding: 32px clamp(20px,4vw,48px); font-family: system-ui,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; line-height: 1.8; letter-spacing: 0; }
      .sample-details > p { margin: 0 0 24px; font-size: 13px; }
      .sample-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; max-width: 1160px; margin: auto; }
      .sample-sections section { border-top: 1px solid currentColor; padding-top: 16px; scroll-margin-top: 24px; min-width: 0; }
      .sample-sections h2 { font-size: 18px; line-height: 1.5; margin: 0 0 12px; font-weight: 700; letter-spacing: 0; }
      .sample-sections p { font-size: 14px; line-height: 1.8; margin: 0; letter-spacing: 0; }
      @media(max-width:720px) { .sample-sections { grid-template-columns: 1fr; } }
      @media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
      @media(max-width:540px) { h1.headline { font-size:clamp(2rem,9vw,2.8rem); } }
    </style>
  </head>
  <body>
    <header>
      <div class="brand">◼︎ Stack/07</div>
      <nav>
        <a href="#product">製品</a>
        <a href="#cases">導入事例</a>
        <a href="#pricing">料金</a>
        <a href="#updates">更新履歴</a>
      </nav>
    </header>

    <main>
      <span class="eyebrow"><span class="bar"></span>架空の製品 · 2026</span>
      <h1 class="headline">
        <span class="line">素早く<span class="orange">出して、</span></span>
        <span class="line">じっくり<span class="outlined">決める。</span></span>
      </h1>
      <div class="body-row">
        <p class="lede">あえて騒がしく作られたLP。ひとつの言い切り、ひとつの行動ボタン、オレンジ一色だけで勝負する。確信をタイポグラフィに載せられるスタートアップのためのLP。</p>
        <div class="cta-col">
          <a href="#start" class="cta">
            14日間の無料トライアル
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
          </a>
          <a href="#terms" class="ghost">クレジットカード不要 · いつでも解約 →</a>
        </div>
      </div>

      <div class="strip">
        <span class="label">架空のブランド例</span>
        <span class="logo">NORTH</span>
        <span class="logo">PLAIN</span>
        <span class="logo">FRAME</span>
        <span class="logo">ORBIT</span>
        <span class="logo">FIELD</span>
      </div>
    </main>
  <aside class="sample-details" aria-label="デザイン例の説明"><p id="sample-disclaimer">架空の企画・サービスのデザイン例です。完全無料・著作権フリー（CC0）。リンクはこのページ内の説明へ移動します。</p><div class="sample-sections"><section id="product" aria-labelledby="product-heading"><h2 id="product-heading">製品の構成例</h2><p>大きな文字で方針を伝え、本文と主要操作を下段に並べた架空の製品紹介です。</p></section><section id="cases" aria-labelledby="cases-heading"><h2 id="cases-heading">導入事例について</h2><p>導入先や出資元の掲載位置の見本です。画面内のブランド名は架空で、実績を示すものではありません。</p></section><section id="pricing" aria-labelledby="pricing-heading"><h2 id="pricing-heading">料金について</h2><p>実際のプランや価格は未設定です。運用するサービスの確認済みの条件を表示してください。</p></section><section id="updates" aria-labelledby="updates-heading"><h2 id="updates-heading">更新履歴の例</h2><p>ここには実際の変更日と改善内容を載せます。このデモに製品のリリース履歴はありません。</p></section><section id="start" aria-labelledby="start-heading"><h2 id="start-heading">トライアルについて</h2><p>14日間という期間は架空の条件例です。アカウント作成や申込みは実装していません。</p></section><section id="terms" aria-labelledby="terms-heading"><h2 id="terms-heading">利用条件について</h2><p>クレジットカード不要・いつでも解約という文言も架空の例です。実サービスの契約条件を確認して差し替えてください。</p></section></div></aside>
</body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

極太フォントのヒーローは、文字を「読ませる」のではなく「価値そのものとして提示する」設計です。可読性を多少譲ってでも、ファーストビューの数秒で価値提案とブランドの温度を同時に叩き込む——スタートアップのランディングページで特に有効な戦法です。

機能で差をつけられないとき

シードからシリーズAのスタートアップは、機能の量で勝負できません。プロダクトはまだ全部が揃っていないからです。そこで問われるのは「この会社は何を信じているか」という姿勢。極太フォントと1色のアクセント運用は、その姿勢をもっとも効率よく視覚化します。情報を増やすのではなく、態度を一枚の画面で言い切る。それが極太ヒーローの役割です。

太さがコントラストを作る

このスタイルの面白さは、同じ書体のままで階層を作れる点にあります。一部をイタリックに、一部をアウトライン（袋文字）に——ウェイトと処理の差だけで、色を増やさずともタイポグラフィに強弱が生まれる。色数を絞るからこそ、たった1色のアクセントが画面のシグナル色として強烈に効きます。

崩れる形色を足して階層を作る

見出し・小見出し・強調で色を増やすと、どれが本当のシグナルかが分からなくなります。CTAの色も相対的に弱まり、押してほしい場所が沈みます。

効く形ウェイトと処理で階層を作る

同じ書体のまま、一部をイタリックに、一部をアウトラインに。色を増やさずに強弱が生まれるぶん、たった1色のアクセントが画面全体のシグナルとして効きます。

仕上げの判断軸

冒頭に小さなeyebrowバー（アクセント色のラベル）を置き、ページ全体で使うシグナル色を予告します。大見出しの直下は2カラムにせず、その下のリード文だけを2カラムに——読む要素と押す要素を順序立てて提示するためです。CTAはhoverでtranslateと色付きシャドウを与え、エディトリアルな温度を保ちつつ遊びを加えます。

最下部は架空のブランド名をテキストで並べる見本です。実際の出資元や導入先を紹介するときは、確認できる実績に合わせて名前とラベルを変えてください。