kaze風
LPFooter
サイトフッター
プレビュー
使いどころ
使う場面
- LP とプロダクトサイトの最下部。ブランド、リンクの列、著作権や規約へのリンクを置く
- columns に { title, links } の配列を渡す。列は 2 から 4 つ、1 列のリンクは 5 個程度まで
- bottomLeft に著作権表示、bottomRight に利用規約・プライバシーポリシーなどを置く
- logo と description でブランドを 1 から 2 文で紹介する
使わない場面
- 業務アプリの画面下部。LPFooter はマーケティングサイト用
- ナビゲーションの全複製。Navbar と同じ項目を並べず、補助リンク（会社情報、規約、サポート）を中心にする
- リンクの列に CTA を詰め込むこと。行動の促しは CTABanner に任せる
使い方
<LPFooter
logo={<Logo />}
description="ブランド説明"
columns={[
{ title: "プロダクト", links: [{ label: "機能", href: "/features" }] },
]}
bottomLeft={<span>© 2026 Kaze</span>}
/>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
logo | ReactNode | なし | ロゴ要素 |
description | string | なし | ブランド説明文 |
columns必須 | FooterColumn[] | なし | フッターリンク列 { title, links: { label, href }[] } |
bottomLeft | ReactNode | なし | フッター下部左側 |
bottomRight | ReactNode | なし | フッター下部右側 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | フッター内のリンクを順にフォーカスする |
| Enter | フォーカスしたリンクを開く |
アクセシビリティ
- <footer> で出力され、本文の後ろにあれば contentinfo のランドマークになる
- 列のタイトルは <h4> で出力される。直前の見出しが h2 のページでは h3 を飛ばすことになるので、見出し一覧での階層を確認する
- リンクは <a> と <ul> で出力され、列ごとに項目数が伝わる。Navbar が <nav> を持つので、フッターのリンク群に名前が必要なら列を <nav aria-label> で囲む（利用側の対応）
文言
- 列のタイトルは「プロダクト」「会社」「サポート」のように名詞で。リンクも名詞で短く
- 著作権表示は「© 2026 ノルン株式会社」の形。社名はデモではプールから選ぶ