PROJECTナビと記事内目次を分ける。長いシリーズで迷わないサイドバー設計

2026年10月8日2026年10月23日

WEB

MANIARUのPROJECT記事が増えると、サイドバーには二つの案内が必要になりました。一つは「このPROJECTのどこを読んでいるか」、もう一つは「この記事のどこを読んでいるか」です。

どちらも目次に見えますが、役割は異なります。そこでPROJECTナビと記事内目次を分け、通常のサイドバーを含めた三段構造に整理しました。この記事では、長いシリーズで迷いにくくするために決めた配置と確認方法をまとめます。

PROJECT記事には二つの現在地がある

PROJECT記事を読んでいる人は、シリーズ全体と記事本文の二つの階層を移動します。たとえば「PROJECT 002のSTEP 07を読んでいる」という位置と、「その記事の検索結果の説明を読んでいる」という位置です。

一つの目次へまとめると、STEPとH2が同じ階層に並び、リンク先の種類が分かりにくくなります。MANIARUでは、シリーズの移動と本文内の移動を別のUIとして扱うことにしました。

PROJECT記事でも、検索、最近の投稿、カテゴリーなど、サイト全体を移動する通常サイドバーは残します。PROJECT専用画面だからといって共通の入口を消すと、シリーズの外へ移動しにくくなるためです。

通常記事とPROJECT記事で基本部分を共有し、PROJECT記事にだけ必要な案内を追加する形にしました。これにより、ページごとにサイドバーの使い方が大きく変わりません。

PROJECTナビには、そのPROJECTに含まれるSTEPを順番に並べます。役割は、今読んでいる記事が全体のどこにあるかを示し、前後のSTEPへ移動できるようにすることです。

PROJECTナビは本文をスクロールしている間ずっと追従させません。まずシリーズ全体を確認するための案内として、通常の流れの中に置きます。

記事内目次は本文のH2とH3だけを取得します。PROJECTナビのラベルやサイドバー内の見出しまで拾うと、記事の構造とは関係のない項目が混ざるため、取得範囲を本文に限定しました。

H2を大きな区切り、H3を直前のH2に属する項目として表示します。リンク先には本文見出しのIDを使い、クリックした項目と実際の移動先が一致するようにします。

三段すべてを固定すると、画面の縦幅を使い切り、下の項目へ届きにくくなります。そこで、通常サイドバーとPROJECTナビは通常フローのままにし、最後にある記事内目次だけを追従させます。

ページ上部では、通常サイドバー、PROJECTナビ、記事内目次の順に流れます。記事内目次が固定ヘッダー下の位置へ到達してから、その部分だけが追従します。サイト内、PROJECT内、記事内という順序も保てました。

PROJECTナビの現在表示は「現在のSTEP」、記事内目次のactive表示は「現在読んでいる見出し」を示します。同じ青のアクセントを使っていても、対象の階層は別です。

記事内目次は実際のスクロール位置に合わせてH2またはH3を一つだけ強調します。下方向だけでなく上へ戻ったときも切り替わること、ページ末尾で最後の項目が不自然に外れないことを確認しました。

スマートフォンでは、PCの三段構造を狭い画面へそのまま押し込みません。PROJECTナビと記事内目次を必要なときに開ける形にし、常時追従させず本文の読みやすさを優先しました。

共通化では、PROJECT側だけを見て終わらせないことが大切でした。通常記事では「通常サイドバー→記事内目次」、PROJECT記事では「通常サイドバー→PROJECTナビ→記事内目次」になることを代表記事で確認しました。

PROJECT 001とPROJECT 002で、それぞれ正しいSTEP一覧が出ることも確認対象です。記事内目次については、見出しの順序、リンク、追従、active表示を確認し、PROJECTナビの項目を本文見出しとして拾わないことを確かめます。

サイドバーへ情報を増やすだけでは、案内は分かりやすくなりません。どの範囲を移動するためのリンクかを分け、追従が必要な部分だけを残すことで、長いPROJECTと長い記事の両方を扱いやすくなりました。

通常記事で作った追従目次の考え方は、WordPressの記事に追従する目次を作るにまとめています。PROJECT記事ではその仕組みを土台にし、シリーズ全体を示すPROJECTナビを一段追加しました。

サイト内、PROJECT内、記事内。それぞれの現在地を別の案内として示すことで、読む人が次にどこへ進めばよいか判断しやすい構造になりました。