1画面1メッセージのヒーロー

見出し＋一行＋CTA 1つだけを1画面に置き、スクロールすると同じ構造の次のメッセージが現れます。スナップで1画面ずつ止まります。

ENGLISH

One Message Per Screen Hero

約87行画面のかたち / 実用サンプル: LP・マーケページの一覧 →

プレビュー

スクロール

操作枠内をスクロールすると動きます。

デザインの要点

1画面に見出し・一行・CTA 1つ以外を置かない。見せ場が2つあればどちらも見せ場ではない
CTA はボタンでなく文字リンク。主役は言葉と製品で、ボタンは脇役に格下げする
画面ごとに地色を変える（白→黒→薄灰）と、同じ構造でも「次の話」に切り替わったと分かる
scroll-snap で1画面ずつ止めると、読み手のペースで1メッセージずつ受け取れる

プロのサイトでの実例

Apple別サイト ↗トップは1画面1メッセージ。見出し＋一行＋CTA 1つ以外を置かず、下へ同じ構造を繰り返す

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

実装メモ

実ページではスクロールコンテナを外し、各 section を min-height:100svh にして html 側で scroll-snap-type を指定する。

コード（コピーして使えます）

<div class="hom">
  <div class="hom-scroll" tabindex="0" aria-label="製品メッセージ。縦にスクロールできます">
    <section class="hom-sec hom-sec--a">
      <p class="hom-eyebrow">Sora Pro</p>
      <h2 class="hom-h">薄さの先へ。</h2>
      <p class="hom-p">5.1mm。手にした瞬間に分かる軽さ。</p>
      <a class="hom-cta" href="#">詳しく見る<span aria-hidden="true"> ›</span></a>
      <div class="hom-visual hom-visual--slab" aria-hidden="true"></div>
    </section>
    <section class="hom-sec hom-sec--b">
      <p class="hom-eyebrow">バッテリー</p>
      <h2 class="hom-h">一日中、つづく。</h2>
      <p class="hom-p">最大 28 時間の動画再生。充電は寝ている間だけ。</p>
      <a class="hom-cta" href="#">詳しく見る<span aria-hidden="true"> ›</span></a>
      <div class="hom-visual hom-visual--ring" aria-hidden="true"></div>
    </section>
    <section class="hom-sec hom-sec--c">
      <p class="hom-eyebrow">オーディオ</p>
      <h2 class="hom-h">音が、ここに。</h2>
      <p class="hom-p">6 つのスピーカーで、空間そのものが鳴る。</p>
      <a class="hom-cta" href="#">詳しく見る<span aria-hidden="true"> ›</span></a>
      <div class="hom-visual hom-visual--bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
    </section>
  </div>
  <button class="hom-next" type="button" aria-label="次のメッセージへ">
    <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 8l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
  </button>
</div>