ガイド /tokibo に第1〜8章を俯瞰する『イントロダクション』を入れて、各章へのSVG地図リンクを埋め込んだ

開発mdx-playground

何をしたか

不動産登記簿の見方ガイド /tokibo の入口に、第1章から第8章までを俯瞰する「イントロダクション」セクションを独立ページとして追加した。1枚のSVG地図で全章の地形を見せ、章別カードで各章を要約しながら、章ごとに2〜3枚のSVG図を差し込む構成にした。地図上の章カードと本文の章カードからは、それぞれの章ページに直接飛べる。SVGはどれもクリックでモーダルが開き、ESCで閉じる挙動に揃えた。

ハブの入口に立つと、まず全体の地図が目に入る。読者は気になった章に直接ジャンプできるし、順番に読み下す道も残してある。

なぜ独立ページに切り出したか

最初は導入を /tokibo ハブの中に小さなセクションとして置こうとした。地図のSVGを差し込んで、その下に章ごとの一言サマリーを並べる素朴な作りだった。

ところが置いてみると、ハブの「各章へのリンク一覧」と導入の「章サマリー」が同じ画面に重なって読み筋が崩れた。ハブはあくまでメニュー、導入はガイドの全体像を伝える別の役割だ。1枚の画面に同居させると、どちらの目的でも中途半端になる。

そこで導入を /tokibo/intro という独立ページに切り出し、ハブには「イントロダクションを読む」というカードを1枚だけ置く構成に変えた。マゼンタの左ボーダーを差して、章カードと視覚的に区別した。ハブの第一印象は「8章のメニュー＋導入カード1枚」とすっきりした。

地図の繰り返しを許す設計

イントロを独立ページに切り出した段階で、地図SVGをハブと導入ページの両方に置くか迷った。

最初は「同じ画像を2回表示するのは冗長」と考えて、ハブから地図を外して導入ページにだけ置こうとした。だが、それだと「ハブ → 導入を開く → 地図を見る」と2ステップ必要になり、ハブをブクマしている読者が全体像にたどり着けない。

逆に「ハブにも導入にも地図を置く。繰り返してよい」と腹をくくった。地図はガイドの背骨だから、入口の両方に出しても損はない。ハブの地図と導入の地図は同じコンポーネントを使い回したので、メンテナンスは1か所で済む。

章ごとに2〜3枚のSVG図を入れた理由

章カードに一言サマリーだけ載せても、抽象的な紹介で終わる。「第3章はタイムラインで登記の流れを示す」と書くより、その章で出てくるタイムライン図をそのまま小さく見せる方が伝わる。

そこで章ごとに2〜3枚のSVG図を差し込んだ。たとえば第3章は登記の時系列タイムライン、第5章は「一棟＋部屋の2段重ね」を示す建物構造図、第7章は3ステージのタイムライン、第8章は「通常 vs 所有者不明」の対比テーブル。導入ページを1枚スクロールするだけで、各章で何を見ることになるかが目に入る。

8章分のSVG＋地図1枚で、合計9枚の図解が縦に並ぶ。重くないか心配したが、SVGはテキスト主体で軽く、レンダリングは即時だった。

モーダル拡大をすべてのSVGに揃えた

実装が一段落したところで、ユーザーから「他のページで採用しているSVGクリック→モーダル拡大→ESCで閉じる挙動を、ここにも適用してほしい」と指摘が入った。

useZoomableSvg というcomposableが他ページで動いていたので、それを TokiboIntroMap.vue と TokiboIntroBody.vue の両方に差し込んだ。地図SVGでは少し工夫が必要だった。地図には9枚の章カードが埋め込まれていて、それぞれが章ページへの遷移リンクになっている。素直にズーム挙動を入れると、カードをクリックした瞬間にモーダルが開いてしまい、章ページに飛べなくなる。

カード側の @click を @click.stop に書き換えて、9個のカードでイベント伝播を止めた。SVG地図のカード以外の余白をクリックするとモーダルが開き、カードをクリックすると章ページに遷移する。挙動を分けたら、両方の役割が同じSVG内で共存できた。

各SVGの右下には「クリックで拡大」のヒントを添え、モーダルには閉じるボタンを置いた。ESCキーでも閉じる。他のコンテンツページと同じ挙動を導入ページにも揃えたので、読者は迷わない。

目次サイドバーで章ページと体裁を統一

導入ページの本文（TokiboIntroBody.vue）には10個の見出しが並ぶ。地図セクション、第1章、第2章、…、第8章、おわりに、という構成だ。

このままだと縦に長いだけのページになる。章ページ側はすでに目次サイドバーがついていて、左に本文、右に目次という2カラムレイアウトを採っていた。導入ページも同じ体裁に揃えるべきだと考え、本文幅 788px ＋ 目次サイドバー 280px の2カラムに書き直した。サイドバーはスクロールに追従して、現在読んでいる見出しをハイライトする。

ヘッダーも章ページと揃え、navyの左ボーダーを差した。ハブ → 導入 → 章ページの3階層を、視覚的に統一感のある順路として歩けるようになった。

検証

dev サーバで /tokibo と /tokibo/intro を交互に開いて確認した。

  • ハブにイントロダクションカードが1枚表示され、左ボーダーがマゼンタで他の章カードと区別できる
  • /tokibo/intro を開くと、10個の見出し、9枚のSVG図、9個のCTAリンクが揃って表示される
  • 地図SVGの章カードをクリックすると /tokibo/soron などの章ページに遷移する
  • 地図SVGの余白部分をクリックするとモーダルが開く
  • 各章のSVG図をクリックするとモーダルで拡大表示される
  • ESCキーでモーダルが閉じる
  • 目次サイドバーがスクロールに追従する

ブラウザでクリックハンドラを直接叩いて、9枚の章カードがすべて期待座標に配置されていることも確認した。

ファイル

  • apps/web/app/pages/tokibo/intro.vue（新規・導入ページのエントリ）
  • apps/web/app/components/tokibo/TokiboIntroBody.vue（新規・本文と8章分のSVG）
  • apps/web/app/components/tokibo/TokiboIntroMap.vue（新規・1枚地図SVG、ハブと導入で共用）
  • apps/web/app/components/tokibo/TokiboHub.vue（イントロカードを追加）
  • apps/web/app/composables/useZoomableSvg.ts（既存・他ページから流用）
  • apps/web/app/data/breadcrumbs.ts（/tokibo/intro のパンくず追加）

コミット: 03d95713、6ファイル、+1442行。

学び

  • 「導入」はハブの一部に詰め込まず、独立ページに切り出した方が両方の役割が立つ。視覚的な交通整理も楽になる
  • 同じSVGを複数ページに置く繰り返しを許すと、入口ごとに必要な情報が揃う。共通コンポーネント化していればメンテナンスのコストは増えない
  • ハブ → 導入 → 章ページの3階層で、レイアウトのルール（左ボーダーの色、目次サイドバーの幅、SVGモーダルの挙動）を揃えると、読者は階層を意識せずに歩ける
  • リンクが埋め込まれたSVGにモーダル拡大を後付けするときは、リンク要素の @click.stop でイベント伝播を切る。1か所の挙動を増やすたびに、既存の挙動が壊れていないかを確認する

次にやること

  • /fudosan-toshi 側にも同じパターンで導入ページを作る（計画書は本セッションで起こした）
  • 地図SVGの章カードに hover ホバー時の視覚フィードバックを足す
  • モーダル内でも章ページへのリンクを押せるようにする（現状はモーダルを閉じてから押す必要がある）
#tokibo #SVG#ナビゲーション #Vue #Nuxt