kaze風
Hero
ヒーローセクション
プレビュー
美しいUIを、もっと速く
最小限のコードで最大限のデザインを。
使いどころ
使う場面
- LP の最上部。何が手に入るかを 1 文で伝え、次の行動を 1 つ示す
- title は h1 で出力される。ページに h1 は 1 つなので、LP のほかの場所で h1 を使わない
- subtitle に title の根拠を 1 から 2 文で添える
- children には CTA を置く。主な操作を 1 つ（primary）、補助を 1 つまで
使わない場面
- ページの 2 番目以降のセクション。Section と SectionHeader を使う
- 見出しの上のバッジ（badge は非推奨で、v2 で削除）。ページ上部のお知らせは AnnouncementBar を使う
- 多色のグラデーション背景。bg と bgImage には Zinc 系の単色か、単一のアクセント色を使う。複数の色相を混ぜない
- title に絵文字を入れること
- 文字が読めない画像を敷くこと。bgImage を使うときは overlay で暗くし、文字が読めるコントラストを確かめる
使い方
<Hero title="メインタイトル" subtitle="説明テキスト">
<Button>はじめる</Button>
</Hero>
{/* 背景色付き */}
<Hero title="タイトル" subtitle="説明" bg="var(--blue-500)">
<Button>CTA</Button>
</Hero>
{/* 背景画像 + オーバーレイ */}
<Hero title="タイトル" bgImage="url(...)" overlay={0.4}>
<Button>CTA</Button>
</Hero>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
title必須 | string | なし | メインタイトル |
subtitle | string | なし | サブタイトル |
bg | string | なし | 背景色。例: "var(--blue-500)" |
bgImage | string | なし | 背景画像 URL または CSS gradient |
overlay | boolean | number | なし | 暗めオーバーレイの不透明度。true = 0.5 |
children | React.ReactNode | なし | CTAボタンなどのアクション要素 |
badge非推奨 | string | なし | ページ上部のお知らせは AnnouncementBar を使う。v2 で削除 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- title は <h1> として読み上げられ、ページの主題になる。ページの <title> と合わせる
- bg、bgImage の背景は装飾で、読み上げられない。伝えたい内容は title と subtitle に文字で書く
- 背景色と文字色のコントラスト比は 4.5:1 以上にする。bgImage の上は overlay で確保する
文言
- title は「何が手に入るか」を 1 文で言い切る。例: 「請求から入金確認まで、1 つの画面で終わる」。「次世代の」「革新的な」のような形容は避け、数字か具体的な成果を入れる
- subtitle は title を言い換えず、対象や条件を足す（誰向けか、どれくらいで始められるか）
- CTA は動詞で書く（「無料で始める」「資料を請求する」）。「こちら」「詳しくはこちら」は避ける