長文記事のナビゲーション設計

導入#

長文記事では、読者が現在地を見失いやすいという問題があります。ここでは複数の見出しを用意して、目次機能の挙動を検証します。

記事構造の考え方#

情報の段組み#

長文は、導入・本論・結論の3つに分けるのが基本です。

見出し階層の粒度#

H2 と H3 の使い分けが、目次の読みやすさを左右します。

ナビゲーションの構成要素#

目次（TOC）#

記事冒頭に現在位置を示す目次を置きます。

固定表示#

スクロールに合わせて現在の見出しを追従させる方式です。

スクロールスパイ#

ハイライト表示を更新するために、各見出しの位置を監視します。

前後記事リンク#

記事末尾で前後の記事へ移動する導線です。

ページネーション#

記事一覧を複数ページに分割する方式です。

トピック別分割#

カテゴリごとにページを分けると、目的の記事にたどり着きやすくなります。

日付順分割#

時系列で一覧を並べる方式です。

アクセシビリティの観点#

キーボード操作#

目次へのフォーカス移動を Tab キーだけで完結させます。

ランドマーク#

nav 要素と main 要素で領域を明示します。

検証手順#

この記事は、以下の手順でテーマごとの見た目を確認するために使われます。

目次の表示位置と階層表示を確認する
スクロール時の現在位置ハイライトを確認する
前後記事リンクの有無を確認する
ページネーションの表示を確認する

まとめ#

長文記事のナビゲーションは、目次・前後リンク・ページネーションを組み合わせて設計します。

導入#