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

シンプルで洗練されたヒーローセクション

余白を大きくとり、見出しとCTAだけで価値を伝えるミニマルなヒーローセクション。SaaSや個人開発のランディングページ最上部に向いた、装飾を削って要点を立てる構成。

保存した一覧を見る 0 →

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

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

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

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

プレビュー

AIへの指示文

SaaSのランディングページ向けのミニマルなヒーローセクションを作ってください。

要件:
- ページ内リンクには移動先を用意し、登録・予約・購読・決済が未実装の例では、その説明へ移動する。ブランド・実績・価格は架空の設定と明示する。リンクは44px以上の操作領域とフォーカス表示を持つ。
- 中央寄せ、最大幅 980px 程度、上下に大きな余白。
- H1 は 2 段構成。通常テキスト + グラデーションで強調するフレーズ。
- デスクトップ幅で 2 行以内に収まるリード文を1つ。
- プライマリCTAは、矢印アイコン付きの暗色ソリッドボタン。
- セカンダリCTAは、控えめなゴーストリンク。
- H1 の上に、小さな大文字スタイルの "eyebrow" ピル。
- 背景は柔らかいパステルの放射状グラデーション(右上がパープル、左下がティール)。
- ライトテーマ。Inter または system sans を使用。
- ヘッダーは左にロゴ、右に 4 つのナビリンク。
- 下部に控えめなブランド名の見本を並べる。架空のブランドと明記し、実在する導入企業や実績を捏造しない。
- フルレスポンシブ。JS 不要、外部アセット不要。

バリエーション

ダークテーマ版

同じ構造のまま、配色を反転:
- 背景 #0b0b10 に、淡いパープル/ティールの放射状グラデーション。
- 見出しのグラデーションはそのまま鮮やかに、リード文はミュートのグレー。
- CTA は暗背景上のライトピル。

より大胆な版

同じレイアウトのまま、表現を強めます:
- 見出しを clamp(3rem, 9vw, 6rem) まで拡大。
- グラデーションに 2 色のシマーアニメーションを軽く加える。
- 1024px 以上の幅で、右半分にループ動画または Lottie を追加。

このプレビューのコード

HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。リンクや製品名は架空のデモです。認証や申込みは実装していません。

CC0 · 改変・商用利用自由 · revision 1a5a0dc2dffd

コードを表示

<!doctype html>
<!-- Vibehaus 提供のデザイン例。CC0 1.0。商用利用・改変・再配布可。外部依存なし。認証・申込みは未実装。 -->
<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>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        min-height: 100dvh;
        font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          "Hiragino Sans", "Noto Sans JP", sans-serif;
        background:
          radial-gradient(1000px 600px at 80% -10%, #eadcff 0%, transparent 60%),
          radial-gradient(800px 500px at -10% 110%, #d4f1ef 0%, transparent 55%),
          #fafafb;
        color: #0f0f14;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }
      header.site {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem clamp(1rem, 5vw, 3rem);
      }
      header.site .logo {
        font-weight: 800;
        letter-spacing: -0.01em;
      }
      header.site nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: inherit;
        text-decoration: none;
        margin-left: 1.25rem;
        font-size: 0.95rem;
        opacity: 0.75;
      }
      header.site nav a:hover {
        opacity: 1;
      }
      main {
        max-width: 980px;
        margin-inline: auto;
        padding: clamp(3rem, 10vw, 7rem) clamp(1rem, 5vw, 3rem) 6rem;
        text-align: center;
      }
      .eyebrow {
        display: inline-block;
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 0.3rem 0.9rem;
        border: 1px solid rgba(15, 15, 20, 0.15);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(8px);
        margin-bottom: 1.5rem;
      }
      h1 {
        font-size: clamp(2.2rem, 5.5vw, 4rem);
        line-height: 1.3;
        letter-spacing: 0;
        margin: 0 0 1.25rem;
        font-weight: 800;
      }
      h1 em {
        font-style: normal;
        background: linear-gradient(120deg, #9b7cff, #5ec8c6);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      p.lede {
        font-size: clamp(1.05rem, 1.8vw, 1.25rem);
        max-width: 54ch;
        margin: 0 auto 2.25rem;
        color: #3b3b48;
      }
      .cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.9rem 1.4rem;
        border-radius: 12px;
        background: #0f0f14;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        box-shadow: 0 10px 30px rgba(15, 15, 20, 0.15);
      }
      .cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 40px rgba(15, 15, 20, 0.22);
      }
      .cta svg {
        transition: transform 0.15s;
      }
      .cta:hover svg {
        transform: translateX(2px);
      }
      .ghost {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.9rem 1.25rem;
        margin-left: 0.5rem;
        border-radius: 12px;
        color: inherit;
        text-decoration: none;
        opacity: 0.75;
      }
      .ghost:hover {
        opacity: 1;
      }
      .proof {
        margin-top: 4rem;
        display: flex;
        gap: 2rem;
        justify-content: center;
        flex-wrap: wrap;
        opacity: 0.6;
        font-size: 0.85rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      a:focus-visible { outline: 3px solid #6750b8; outline-offset: 4px; }
      .demo-note { color: #555565; font-size: 0.85rem; margin-top: 2rem; line-height: 1.8; }
      @media (max-width: 540px) {
        header.site { align-items: flex-start; gap: 1rem; }
        header.site nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 0.75rem; }
        header.site nav a { margin: 0; }
        main { padding-block: 2rem; }
        .cta, .ghost { margin: 0.25rem; }
      }
      @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

      /* 配布デモの操作先。外部通信・登録・決済は行わない。 */
      a:focus-visible { outline: 3px solid #1d1d24; 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: #1d1d24; background: #fafaf9; 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; } }
</style>
  </head>
  <body>
    <header class="site">
      <div class="logo">Acme</div>
      <nav>
        <a href="#product">製品</a>
        <a href="#pricing">料金</a>
        <a href="#docs">ドキュメント</a>
        <a href="#signup">ログイン</a>
      </nav>
    </header>
    <main>
      <span class="eyebrow">v2.0 · 公開中</span>
      <h1>思いついた速度で、<em>形にする。</em></h1>
      <p class="lede">静かな構えのヒーロー。ひとつの約束、ひとつの行動、そのあいだに十分な余白。SaaS、開発者ツール、個人プロダクトの最上部に。</p>
      <a href="#signup" class="cta">
        無料ではじめる
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M5 12h14" />
          <path d="m12 5 7 7-7 7" />
        </svg>
      </a>
      <a href="#docs" class="ghost">使い方を見る →</a>
      <div class="proof">
        <span>架空のブランド例</span>
        <span>NORTH</span>
        <span>PLAIN</span>
        <span>FRAME</span>
        <span>ORBIT</span>
      </div>
      <p class="demo-note">デザイン例です。リンクから構成と利用の説明へ移動できます。登録・認証の機能はありません。</p>
    </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>短い約束を見出しで伝え、説明と主要リンクを続けます。Acmeは架空の製品です。</p></section><section id="pricing" aria-labelledby="pricing-heading"><h2 id="pricing-heading">料金の表示について</h2><p>無料ではじめるという文言はデザイン上の例です。実際の料金や利用条件はサービスに合わせて設定してください。</p></section><section id="docs" aria-labelledby="docs-heading"><h2 id="docs-heading">使い方の例</h2><p>このHTMLを保存して開き、見出し・説明・リンク先を自分の内容へ差し替えます。外部ライブラリは不要です。</p></section><section id="signup" aria-labelledby="signup-heading"><h2 id="signup-heading">登録・ログインについて</h2><p>登録や認証は実装していません。実サービスでは申込み先や認証の処理を接続してください。</p></section></div></aside>
</body>
</html>

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

概要

ミニマル・ヒーローは、「足りないから少ない」のではなく「選び抜いた結果、少ない」デザインです。残すのは二つだけ——「何を売っているのか」と「次に何をしてほしいのか」。それ以外の装飾を意図的に削り、余白そのものをコンテンツの一部として働かせます。

削るほど、視線が集中する

人間の注意は有限です。画面に要素が増えるほど、一つひとつへの注目は薄まる。ミニマル・ヒーローは、この原理を逆手に取ります。装飾を削れば削るほど、残った見出し・CTA・ブランド名に視線が集中します。とりわけSaaSや開発者向けツールのように、訪問者が明確な問題意識を持って訪れるケースでは、冗長な説明はむしろ邪魔です。「最初の一歩を踏み出す敷居」を下げることが、そのままコンバージョンに直結します。

余白は「何もない」ではない

ミニマルデザインで最も誤解されるのが余白です。余白は埋め忘れた空白ではなく、要素に「ここに注目してよい」という許可を与える装置です。たっぷりの余白に囲まれた見出しは、それだけで重要に見える。逆に、余白を恐れて要素を詰めると、せっかく絞り込んだ情報の格が下がります。何を置くかと同じだけ、何を置かないかが効いてきます。

崩れる形余白を恐れて要素を詰める

空白を埋め忘れと捉えると、せっかく絞り込んだ情報の格が下がります。要素が増えるほど一つひとつへの注目は薄まり、削った意味が消えます。

効く形余白で注目の許可を与える

たっぷりの余白に囲まれた見出しは、それだけで重要に見えます。何を置くかと同じだけ、何を置かないかが効いてきます。

構成要素と仕上げの判断軸

典型的な部品は限られています。ステータスを示すeyebrowピル（「Live」「New」やバージョン表示）、2段構成のH1（通常テキスト＋グラデーションの強調フレーズ）、2行以内のリード文、暗色ソリッドのプライマリCTA、まだ決めかねている訪問者向けのゴーストリンク、ロゴやテキストで信頼を補強するproof行——これだけで十分に機能します。

要素を足したくなったら、足す前にこれは売り物とCTAの2つを助けるかを自問してください。助けないなら、それは削るべきものです。