目次 ( 概要 )
長い文章のページに含まれる見出し要素を取り出して、ページの冒頭に目次として配置するためのコンポーネントです。「箇条書きリスト」と組み合わせて、階層化することもできます。
ユースケース
- 長い文章のページで全体の構成を示すとき
- ページの冒頭に見出しを一覧表示することで、ユーザーは本文を読む前にページ全体の構成を把握できます。
- 特定のセクションへ素早く移動したいとき
- 目次のリンクから該当するセクションへ直接移動できるようにしたい場合に使用します。
注意が必要なケース
- 「このページの目次」という見出しを削除しないでください
- 目次であることが分かるように、コンポーネントに含まれる「このページの目次」という見出しは削除しないでください。
- 見出しの文言を変えずにそのまま使う
- 目次の項目には見出しの文言をそのまま使用してください。見出しと目次のラベルが一致していないと、ユーザーは目的の場所を見つけられなくなります。
- 見出しの階層構造が複雑な場合は階層を絞ってください
- すべての階層の見出しを目次に含めると、項目数が多くなりすぎて逆に見づらくなります。必要に応じて、含める見出しの階層を限定してください。
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | Figmaデザインデータ(v2) | 提供中 |
| HTML版実装 | ソースコード(GitHub) | 提供中 |
| サンプル(Storybook) | 提供中 | |
| React版実装 | ソースコード(GitHub) | 提供予定 |
| サンプル(Storybook) | 提供予定 |