見出し→本文→CTA の順出し
ヒーローの要素を、見出し・本文・CTA の順に 80ms ずつ遅らせて fade+rise で出す。読む順番と現れる順番を揃えると、視線が自然に CTA へ着地する。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- LP のファーストビューで視線を CTA へ導く
- 見出し→本文→CTA の読む順を強調したい
- 初回表示だけの登場演出
- 避ける場面
- ページ内の全ブロックへの適用（毎回待たせる）
- スクロール後に現れる下部セクション
- 構成要素
- アイブロウ
- 見出し
- 本文
- CTA と補足
- 再生ボタン
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で CTA「無料で始める」と「もう一度再生」へ、Enter／Space で操作（CTA は見本のためダミー）
- 支援技術
DOM 順＝読む順＝出現順。初期 opacity 0 でも読み上げ可能。CTA は button で focus-visible の輪郭あり。reduced-motion では最初から全表示
- 動き
見出し→本文→CTA を 90ms 間隔で fade＋14px rise 500ms ease-out(.16,1,.3,1)。読む順に出し視線を CTA へ着地させる
原則認知負荷
目的待たせる
デザインの要点
- 遅延は読む順（見出し→本文→CTA）。CTA を先に出すと視線が散り、最後に出すと自然に着地する
- 1 要素 500ms・間隔 80〜100ms。合計 1 秒を超えると「まだ出てくるのか」と待たされる
- rise は 12〜16px で十分。大きく動かすと要素がバラバラに見え、静止後の位置が読みにくい
- ページ内の全ブロックに使わない。最初の 1 画面だけの演出にし、スクロール後は即表示にする
コード（コピーして使えます）
<div class="pr-wrap">
<section class="pr-hero" id="prHero">
<p class="pr-eyebrow pr-el">請求書ソフト「ハルカ」</p>
<h2 class="pr-title pr-el">請求書づくりを、月 3 時間から 15 分に。</h2>
<p class="pr-text pr-el">納品データから自動で作成し、期日に送付。フリーランス 12,800 人が使っています。</p>
<div class="pr-actions pr-el">
<button class="pr-cta" type="button">無料で始める</button>
<span class="pr-sub">クレジットカード不要・いつでも解約できます</span>
</div>
</section>
<button class="pr-replay" id="prReplay" type="button">もう一度再生</button>
</div>