ヒーローセクション
グラデーション背景の上に、見出し・サブコピー・CTAを中央に重ねたページ最上部の主役ブロック。LPやサービス紹介の第一印象をつくる型。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- サービス紹介のページ最上部
- 見出し・一行・主副 CTA を中央に置く第一印象
- グラデーション背景で主役感を出したいとき
- 避ける場面
- 製品画面や写真を主役にしたいヒーロー
- 淡い背景に白文字のまま置く場面（可読性）
- 構成要素
- バッジ
- 見出し
- サブコピー
- 主 CTA
- 副 CTA
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab で主 CTA→副 CTA の順に移動し Enter で遷移
- 支援技術
h1 が見出し、バッジ→見出し→サブ→CTA の順に読まれる。白文字は藍グラデーション上でコントラストを確保。CTA は focus-visible で白の枠線。reduced-motion で遷移無効
- 動き
CTA を押した瞬間に透明度 0.75 へ 150ms
デザインの要点
- 主 CTA は白地に藍、副 CTA は透過＋白枠。同じ高さ 44px で並べ、色の強さだけで主従を分ける
- サブコピーは max-width 260px で 2 行に折る。1 行に伸びると見出しより長くなり、中央寄せの塊が崩れる
- 白文字は藍の濃い側に乗せる。グラデーションの淡い側（#eef1fb）に白文字が重なるとコントラストが足りない
実装メモ
背景の白抜き文字は藍グラデーション上での可読性を確保しています。淡い背景に置く場合は文字色を #2c2823 系へ戻してください。
コード（コピーして使えます）
<div class="stage">
<section class="hero">
<span class="hero-badge">ちいさな道具箱</span>
<h1 class="hero-title">必要なものだけを、すぐ手元に。</h1>
<p class="hero-sub">軽くて速い小さなWebツール集。開いてすぐ使えます。</p>
<div class="hero-actions">
<a class="hero-cta" href="#">無料ではじめる</a>
<a class="hero-ghost" href="#">ツールを見る</a>
</div>
</section>
</div>