← ラボノート

見つけやすさの問題：私が捨てなければならなかったナビゲーションの定説

14分で読めます

ナビゲーションはありませんでした。簡素だったのではなく、皆無でした。その時点でラボには、遊べるゲームが2本、ブラウザ上のAI実験が2件、制作記録が9本ありましたが、ヘッダーもフッターもゲーム一覧も、一つ上の階層へクリックして移動する手段もありませんでした。

コンテンツを公開し続ける一方で、そこへ至る経路は消えていました。新しいゲームと実験のハブ、サイトヘッダー、リンク付きパンくずリストは、その修復です。

夕暮れの様式化された都市にあるネオンの屋上広場を描いたフラットなベクターイラスト。無地の矢印板が付いた光るオレンジ色の道標が三方向を指し、壁のシアン色の案内板にはハブ・アンド・スポーク型のノードグラフが表示され、光るシアン色の経由地点の点が三つの屋上に続き、その上に小さなシアン色のランナーのシルエットが立っています。
サイトに欠けていた三つのもの：道標、案内図、そして戻るための印が付いた道筋。

このサイトとAI Maker Labチャンネルは私が所有し、制作しています。これは制作記録であり、第三者による独立したレビューではありません。

サイトが経路より先に育ってしまった

失敗は構造上のものであり、そのすべてを変更前のソースで測定できます。

サイト全体に共通するものが何もありませんでした。 ルートレイアウトがページコンテンツの上に配置していたものは、テーマ切り替え、言語切り替え、ページ本体のちょうど三つだけでした。ヘッダーもフッターもなかったため、どのルートにも別のセクションへのリンクがありませんでした。セクションを移動する唯一の方法は、ブラウザの戻るボタンかURLバーでした。

各ページが独自のマストヘッドを再実装していましたが、どれもナビゲーションではありませんでした。 7ページそれぞれに、ブランドマーク、ホームへのリンク、現在位置の文字列を備えた手作りのヘッダーがありました。文字列は、/ games / skyline-run / ai-lab、/ blog / posts / game-grammarのようなものでした。パンくずリストのように見えても、動作は装飾と同じでした。単なるテキストのspanだったからです。Skyline Run AI Labページの読者は、Skyline Runの中で2階層下にいることを確認できましたが、どちらの階層もクリックできませんでした。419px未満では、現在位置の文字列は完全に非表示になりました。

二つのAI実験は、実質的に一覧のどこにも載っていませんでした。 ルートツリー全体で、Skyline Run AI LabとSkyline Run トレーナーAIの名前が出るページは、Skyline Runのゲームページただ一つでした。ホームページは二つのゲームを紹介していましたが、どちらの実験も紹介していませんでした。/gamesルートそのものが存在せず、一覧はページではなくフォルダーとして存在していました。さらに悪いことに、リンクグラフは一方通行でした。二つのAIページは互いにリンクしていましたが、どちらも訓練対象である遊べるゲームへ戻るリンクを持っていませんでした。

ホームページの注目記事は手作業で選ばれていたため、気づかないうちに古くなっていました。 ホームはテンプレートにハードコードされた一つの調査記事、measuring-the-jumpへリンクしていました。この記事の日付は2026-08-20です。確認した時点では、その後ろに2026-08-21付の記事が6本公開されていました。制作記録サイトのトップページは6記事分も古くなっていましたが、コードにはそれを検知する方法がありませんでした。

正直に要約すると、コンテンツは公開され続けましたが、そこへ至る経路は整備されませんでした。

定説が崩れ、見える経路だけが残った

「ナビゲーション項目は5から7個」という定説は、別の記憶研究を誤って借りています。 Millerの7±2は想起の話です。Kate MoranによるNN/gのチャンク化の記事は、選択肢が表示されたままのメニューは再認の課題であり、意味のある構造を持つ大きなメニューを7項目で止めてもユーザビリティ上の利点はないと説明しています。助言は実在しますが、根拠は成り立ちません。

3クリックの定説を支える公開済みのしきい値はありません。 Page Laubheimerによる“The 3-Click Rule for Navigation Is False”は、しきい値を恣意的だとし、Josh Porterによる2003年の研究結果を紹介しています。3クリックを超えても、離脱は増えず、満足度も下がりませんでした。より重要なのは、ラベルが持つ情報の匂い、パンくずリスト、ローカルナビゲーション、ホームから見える課題、そして説明付きリンクをまとめて横方向の移動を支えるハブです。

クリック数より情報の匂いが重要です。 情報の匂いとは、リンク先に何があるかをリンク自体が予測させる手がかりです。Raluca Budiuによる“Information Scent”は、人がラベル、周囲のテキストや画像、事前知識から判断し、文脈が足りなければ探索せずに離れると説明しています。必要だったのは、リンクだけの一覧ではなく、名前と説明のあるカードでした。

関連する監査記事「監査で見えた、ゲート通過後の文章のぶれ」も、契約済みの確認項目と未管理の品質項目を分けて扱います。

深さは注意力を消費しますが、際限のない幅も同じです。 Kathryn Whitentonによる“Flat vs. Deep Website Hierarchies”は、中間階層がコンテンツを見つけにくくする一方、広すぎるメニューも利用者を圧倒し、項目が重複すると述べています。浅い構造なら、より具体的なラベルも使えます。下位コンテンツへのショートカットと2階層を超えるサイトのパンくずリストは役立ちますが、最大の深さも項目数も示されていないので、私は作り上げません。

パンくずリストは現在位置を示しますが、悪い構造は直しません。 Jakob Nielsenによる“Breadcrumb Navigation Increasingly Useful”は、特に深いリンクや検索から来た人に利点があり、観察された欠点はなかったと報告しています。推奨する形式は、ホームから現在のページまでを水平に並べ、すべての祖先をリンクする経路ですが、主要メニューと検索の方が重要です。RogersとChaparroの“Breadcrumb Navigation: Further Investigation of Usage”が示す効果は控えめです。45人の実験でパンくずリストは全ナビゲーションの6%を占め、閲覧ページ数と課題時間に有意差はなく、ページタイトルの下に置いた場合は199クリックの82%を集めました。

フッターは役立ちますが、最初の修復ではありません。 Therese Fessendenによる“Web Page Footers 101”は、上部で目的のものを見つけられなかった人がフッターを使うことと、ドアマットパターン、つまりヘッダーから下へ展開する大きなナビゲーションパネルを説明しています。肥大化を戒め、グローバルナビゲーションを優先しています。

アクセシブルなパンくずリストの形は、すでに仕様化されています。 W3C WAI-ARIA Authoring Practicesのパンくずリストパターンは、ラベル付きのナビゲーションランドマークと順序付きリストを使います。aria-current="page"は、リンクの集合のうち現在いるページを示し、CSSの区切り記号はスクリーンリーダーに読まれません。WCAGのテクニックG65は、現在位置にリンクがない場合、それより前の項目をすべてリンクにするよう求めています。

検索の公式文書は、通説ほど多くを約束しません。 Googleのパンくずリスト構造化データのリファレンスは、BreadcrumbListのJSON-LD、つまり検索エンジン向けの機械可読なパンくずリストが検索結果でページ情報を分類できると説明しています。最低二つのListItemと、最後を除く項目のitemを必須とし、最後には省略を認めます。もっと良いパンくずリストがランキングを上げるとは述べていません。サイトマップの文書も同様に慎重です。サイトマップはクロールの助けにはなりますが、インデックス登録やランキングを保証しません。クロール可能なリンクの文書は、実際のhrefを持つ<a>要素と説明的なアンカーテキストを推奨しています。つまり、実用的な教訓は順位向上の約束ではなく、リンクを検索エンジンが追え、説明できるようにすることです。

魅力的な三つの統計には、使える出典がありませんでした。 分かりにくいナビゲーションで38%の人が離れる、情報アーキテクチャで探す時間が70%短くなる、明確なナビゲーションで目標達成率が50%上がるという主張は、研究、標本、手法を示さないマーケティングページにしか行き着かず、一つは根拠のない断言で終わりました。一次資料がないため、証拠として引用しませんでした。Baymardのナビゲーションベンチマークは、その範囲では裏付けがあります。主要な電子商取引サイト180+件のうち、デスクトップの58%とモバイルの67%がホームとカテゴリのナビゲーションで並以下から低水準でした。これはBaymardが評価した標本の結果であり、このサイトの結果ではありません。

五つの修復ですべてのルートが行き先を持った

調査結果は五つの具体的な変更を示したため、変更内容も五つです。

一度だけ配置するグローバルヘッダー。 SiteHeader.svelteはルートレイアウトでレンダリングされます。ブランドマーク、ホームへのリンク、ラベル付きナビゲーションランドマークには二つのリンク、つまりゲームと実験のハブとラボノートがあり、以前は画面隅の固定ボックスに浮いていたテーマ切り替えと言語切り替えも含まれます。2項目なのは、7項目の定説に敬意を表したからではありません。現在存在する最上位セクションの数です。

説明付きエントリーを持つハブページ。 /gamesは、遊べるゲームとAI実験というラベル付きの二つのグループに、四つの制作物をすべて一覧表示します。それぞれが、名前、内容を説明する一文、アクションラベルを持つカードです。ハブとホームページはどちらも、src/lib/games/catalog.tsの一つのソース、GAME_CATALOGからレンダリングされます。そのため二つの表示内容が食い違うことはなく、5番目の制作物を追加するときも、二つのテンプレートを手で編集するのではなく、一つのエントリーを追加するだけです。

実際にリンクとして機能するパンくずリスト。 一つのBreadcrumbs.svelteコンポーネントが、手作りの7個のマストヘッドを置き換え、現在は8ページで動作しています。コンポーネント自身がホームを先頭に追加し、すべての祖先をリンクし、APGパターンに従った順序付きリストを持つラベル付きnav内で、現在のページをaria-current="page"によって示します。区切り記号はCSSに置き、狭い幅でも非表示にせず表示し続けます。また、すべてのエントリーにpositionとname、リンクされたすべての祖先に絶対URL形式のローカライズ済みitemを持ち、現在のページにはitemを持たないBreadcrumbListのJSON-LDも出力します。これはGoogleが文書化している形式そのものです。サイトで最も短い経路はハブ自体にあり、ホームと現在のページだけですが、それでも最低二つという要件を満たします。

私の記憶ではなく、コンテンツから読み込むホームページ。 ホームは、listPosts(getLocale())から新しい順に3本の記事をレンダリングし、タイトル、説明、日付、読了時間に加え、ラボノート全体へのリンクを表示するようになりました。6記事分古くなっていた注目記事のテンプレートはなくなりました。また、ホームにはAI実験セクションが追加され、二つの実験が初めてトップページに明記されました。

フッターと、サイトマップの新しいエントリー一つ。 SiteFooter.svelteはドアマットパターンに従い、主要な三つの行き先を繰り返す「探す」グループと、チャンネルへのリンクを持つ「フォロー」グループを備え、意図的に小さくしています。/gamesがサイトマップのSTATIC_PATHSに加わり、静的パスは6個から7個になりました。各パスは三つのロケールすべてで、相互参照するhreflang代替、つまりどのURLがどの言語を提供するかを検索エンジンへ伝える参照と、x-defaultとともに出力され、Googleが求める相互性を満たします。

構造は変わったが、読者行動はまだ未計測

構造上の変更前後については、条件を付けずに述べられます。重要な対比は、クリック距離だけが2クリックのまま変わらず、それ以外はすべてゼロまたは古い状態から、リンクされ自動生成される状態へ変わったことです。

項目変更前変更後
サイト全体のナビゲーションがあるページ0ルートレイアウトを通じたすべてのルート
ページのマストヘッドにあるクリック可能な祖先リンク0リンク付き経路を持つ8ページ
いずれかのAI実験を明記するルート13、さらに各実験にパンくずリストの経路
ゲームへ戻るリンクを持つAI実験ページ0パンくずリストを通じた2ページ
ホームのラボノートへのリンク手作業で選んだ1本、6記事分古い新しい順に生成した3本
サイトマップの静的パス67
パンくずリストの構造化データなし8ページにBreadcrumbList

意図的に変えなかった数字が一つあります。この変更前にホームページからSkyline Run トレーナーAIへ到達するには2クリック必要で、今も2クリックです。3クリックの定説を基準にするなら、古いサイトは実際には使いにくかったにもかかわらず、すでに合格していました。これは、NN/gがその定説を誤りと呼ぶ理由を、私が示せる中で最も明確に表しています。変わったのは距離ではなく、経路が見えるかどうかです。以前、Skyline Run トレーナーAIへ至る唯一のルートは、実験の存在に触れていないゲームページを経由していました。今ではホームページに名前があり、ハブに掲載され、サイトのすべてのページのヘッダーから到達できます。

計測していないこと：これによってページビューが増えるかどうか。 アナリティクスは導入済みですが、変更前後のデータはまだなく、この記事は変更と同時に公開されます。リンクグラフの構造改善は、読者の行動変化を証明しません。次は同じ長さの期間を比べ、複数セクションを訪れたセッション、Skyline Run以外からハブとSkyline Run AI Labへ入った流入、ハブURLの検索インプレッションを計測し、何も変わらなくても結果を報告します。今回証明できたことは限定的です。すべてのルートにサイト全体のナビゲーションがあり、実験が一覧に載り、パンくずリストのすべての祖先がリンクになりました。制作記録の出発点へ戻るなら、ゲームの流れ、情報、反応を調べた最初の記事から読めます。

出典

このサイトとAI Maker Labチャンネルは私が所有し、制作しています。これは制作記録であり、第三者による独立したレビューではありません。

あわせて読む