レイアウト・構造
ヒーローセクション
グラデーション背景の上に、見出し・サブコピー・CTAを中央に重ねたページ最上部の主役ブロック。LPやサービス紹介の第一印象をつくる型。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
実装メモ
背景の白抜き文字は藍グラデーション上での可読性を確保しています。淡い背景に置く場合は文字色を #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>