kaze風
FAQ
よくある質問
プレビュー
使いどころ
使う場面
- よくある疑問と答えを、開閉式で並べる。導入前の不安（料金、期間、対応範囲）を解く
- FAQItem の question に質問、answer か children に答えを渡す。答えにリンクや段落を入れるなら children
- headingLevel は置く場所の階層に合わせる（Section の h2 の下なら既定の 3）
- 質問は 5 から 8 個。読者が迷う順に並べる
使わない場面
- 操作手順や詳しいドキュメント。リンク先のヘルプに書き、FAQ では要点だけ答える
- 項目が多すぎる一覧。10 個を超えるなら分類するか、検索のあるヘルプに移す
- 常に読ませたい重要事項。開閉の中に隠さず、本文に書く
- アプリ内の設定などの開閉。Disclosure を使う
使い方
<FAQ>
<FAQItem question="質問テキスト" answer="回答テキスト" />
</FAQ>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
question | string | なし | 質問テキスト（FAQItem） |
answer | string | なし | 回答テキスト（FAQItem） |
children | React.ReactNode | なし | 回答コンテンツ（FAQItem、answerの代替） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | 次の質問にフォーカスを移す |
| Enter / Space | フォーカスした質問の答えを開く・閉じる |
アクセシビリティ
- 質問は見出し（既定 h3）の中のボタンで出力され、aria-expanded で開閉の状態が伝わる。見出し一覧から質問に移動できる
- 閉じている答えは inert と aria-hidden で隠れ、フォーカスも読み上げもされない
- 1 つを開いても、ほかの質問は閉じない。複数を同時に開ける
- FAQ 全体を囲む見出し（SectionHeader の h2 など）を先に置き、headingLevel を階層に合わせる
文言
- question は読者の言葉で書く（「無料プランに期限はありますか」）。社内の用語は使わない
- answer は結論から書く。「はい」「いいえ」「できる」で始め、1 から 3 文で理由と条件を足す