サイトのナビゲーションシステムについて整理する【CCG管理者向け】

このブログについて

本ブログは ナレッジサイトである Classmethod Cloud Guidebook(CCG) ¹ の運営・改善チーム向けに連携したナレッジです。 情報アーキテクチャを考えるに当たって、一般に参考になる部分もあるため、ブログにて公開しています。

CCGのサイト構成をより良くするための情報アーキテクチャを考えます。 特に今回は情報アーキテクチャの1要素である ナビゲーションシステム について取り上げます。

なお、本ブログは以下の O'Reilly 情報アーキテクチャ書籍を大いに参考にしています。

前提

そもそも情報アーキテクチャとは？

情報アーキテクチャは 情報を見つけやすく、分かりやすいものにするための考え方 のことを言います。

特に、大量にある情報をもつサイト(システム)において、重要になってきます。

ナビゲーションシステムとは？

情報アーキテクチャの1要素であり、 現在地の把握 や 情報の探索 を可能にするシステムです。 ユーザーがサイト内で迷わないために、様々な工夫ができる重要な要素です。

詳細は後述しますが、例えば DevelopersIO においても 以下のような工夫(ナビゲーションシステム)が施されています。

埋め込み型ナビゲーションシステム

サイトに埋め込む形のナビゲーションとして、 大きく以下 3つの分類があります。

	役割
グローバルナビゲーション	どこにいるのか？
ローカルナビゲーション	近くに何があるのか？
コンテキストナビゲーション	ここにあるものと関連するものは何か？

以降でそれぞれのナビゲーションを説明します。

✅ グローバルナビゲーション

サイトの全ページで表示される ナビゲーションです。 どこにいるのか をユーザーに伝えます。

例えば Classmethodの企業サイトの グローバルナビゲーションは以下の部分になります。

[classmethod] のロゴが左上にあり、 「いま居るところが Classmethod のサイトである」ことがはっきりと分かります。

また、 [特徴] や [得意分野] などのリンクは サイトの構造(提供している情報)を表しています。 グローバルナビゲーションのリンクから、 ユーザーは欲しい情報を探索することができます。

一方で、2023-08 時点の CCG のグローバルナビゲーションを見てみます。

まずは以下CCGのアイコン部分です。 CCGアイコンをクリックするとトップページへ遷移できます。

もう一つ、左部にあるコンテンツ階層もグローバルナビゲーションと言えるでしょう。 CCGが提供するコンテンツ全体、階層構造を俯瞰できます。

✅ ローカルナビゲーション

近くに何があるのか を把握し、その領域を探索できるように するためのナビゲーションです。

例えば、AWSのマネジメントコンソールは AWSのサービス単位でローカルナビゲーションが提供されています。

「そのAWSサービスの構成要素や機能」を把握し、探索することができます。

一方で、2023-08 時点の CCG のローカルナビゲーションについて考えてみます。 現状は右部にある [目次] が該当します。

目次に記載されている見出しタイトルをクリックすることで、 その見出しまでジャンプできます。

✅ コンテキストナビゲーション

関連するもの を探索できるようにするためのナビゲーションです。

「参照(See Also)」として、関連する製品やサービスへ案内することが多いです。 冒頭で紹介した DevelopersIO ブログの 「関連記事」が、まさにコンテキストナビゲーションです。

ハイパーリンクとして、関連記事を埋め込むのも コンテキストナビゲーションです。 例えばCCGの以下部分です。

補足型ナビゲーションシステム

サイトの階層外にあり、 コンテンツの発見を補足するナビゲーションです。

いくつか補足型ナビゲーションシステムを紹介します。

✅ サイトマップ

サイトマップは「そのサイトにある 全コンテンツを一望 する」ためにあります。

以下は Classmethodのサイトマップ です。

コンテンツの階層構造を視覚化して、 ユーザーがコンテンツ全容を理解できるように工夫されています。

✅ サイトインデックス

キーワードや語句を 辞書順に表示 したものです。 探したいものが明確であるときに役に立ちます。

例えば AWS CLI リファレンス 冒頭には コマンド一覧が辞書順に並んでいます。

✅ 検索

ユーザーが キーワードを入力して、コンテンツを探せる ようにするためのシステムです。

2023-08 時点の CCGではサイト内コンテンツの検索が可能です。

ほか(パンくずリスト)

パンくずリストは今後の改善で役立ちそうなので紹介します。

パンくずリストは、 サイトの現在地(階層)を表示 するナビゲーションです。

例えば Classmethodの 製造業ページ における パンくずリストは以下部分です。

見ているサイトが「どこにあるコンテンツか」を把握できます。 また、「>」 で区切られた各要素はハイパーリンクになっているので、 ここから上位の階層へ移動することもできます。

まとめ(伝えたいこと)

色々とナビゲーションについて列挙しました。 まとめます。

ナレッジサイトである Classmethod Cloud Guidebook は今後も情報量が増え続けます。 そのために ユーザーがサイト内で迷わないための工夫 を考慮し続ける必要があります。

その工夫を考える際に、情報アーキテクチャは役に立ちます。 そして、本ブログでは ナビゲーションシステム について考えました。

ナビゲーションシステムにおいてはユーザー目線で、以下を考えます。

• どこにいるのか？ (グローバルナビゲーション)
• 近くに何があるのか？ (ローカルナビゲーション)
• ここにあるものと関連するものは何か？ (コンテキストナビゲーション)

また、補足的にサイトマップや検索などを活用して、 ユーザーの「情報へのアクセス」を補助できます。

直近、2023-08 時点の CCG にはサイトマップやパンくずリストが無いので、それらの導入を考えても良いかもしれません。

参考