投稿日：2019年3月16日
ウェブナビゲーションを理解する｜UXデザイン／情報アーキテクチャ実践
情報アーキテクチャの特集を始めてみたのですが、今日は「ウェブナビゲーション」について深めていきたいと思います。ウェブナビゲーションとはウェブサイトのページ間を遷移するための仕掛けのことです。ウェブナビゲーションにもさまざまな種類がありますのでそれぞれ見ていくことにしましょう。
ナビゲーションパターン
ウェブナビゲーションには以下の種類があると言われています。それぞれ見ていきましょう。
- 階層型ナビゲーション
- 機能ナビゲーション
- 関連ナビゲーション
- ダイレクトナビゲーション
- パンくずナビゲーション
- ステップナビゲーション
- ダイナミックナビゲーション
階層型ナビゲーション
サイトストラクチャ／サイトマップに沿う形でサイト内のぺージ間を遷移するためのナビゲーション。主にサイトのグローバルナビゲーションやフッターナビゲーション、サイトマップなどに用いられる場合が多く、ナビゲーションの中での最も基本と考えられるものとして広く利用されています。
これまでの経験則から考えると、階層型ナビゲーションの無いサイトは使いにくいと個人的には思いますので確実に設置したほうがユーザーにとっては扱いやすいサイトになるでしょう。
上記はFLARESのグローバルナビゲ―ション。
機能ナビゲーション
階層構造とは独立した、機能やコンテンツへのナビゲーション。お問い合わせやサイトマップ、プライバシーポリシーなど、サイト内のメインコンテンツとは独立した意味合いを持つコンテンツへの遷移を行うために設置されるナビゲーションでグローバルナビゲーションの近くに別途設けられることが多いと感じています。
最近の小規模なサイト制作においては、お問い合わせをグローバルナビゲ―ション内に設置することも多いですが、メインコンテンツと切り離して目立たせてどこからでも遷移できるような位置に機能ナビゲーションとして設置することも有効でしょう。
上記はFLARESの機能ナビゲーション。
関連ナビゲーション
主に下層ページなどに用いられ、同一コンテンツ内を横軸に横断的に遷移するためのナビゲーション。関連ナビゲーションを設置することによって横軸でのページ遷移を促すことができるため、より多くのページをユーザーに閲覧していただくことにつながったり、関連するページへの遷移が容易になることからユーザーにとっての利便性も向上すると考えることができます。同一の軸コンテンツが複数ある場合には関連ナビゲーションを設置したほうが良い可能性が高いということを意識しておくとナビゲーションを設計する上で役に立つと思います。
上記は名古屋の住宅設備関連会社のアクティブ様のウェブサイトより引用。
ダイレクトナビゲーション
アイキャッチとしての目を引く位置に設置され、特に注目を集めたいコンテンツへのナビゲーション。FLARESを例にとってみると現在最も訴求したい内容をトップページのファーストビューに設置しています。ファーストビューやセカンドビューなど、目に留まる可能性の高い位置に設置することによってウェブサイト閲覧ユーザーへの強い訴求力を発揮する可能性が高いと言えます。
実際に以下のダイレクトナビゲーションを公開してから2ヶ月程度の時間が経過していますが、ユーザーが閲覧した回数は500回を超えています。現在も日に日にアクセス数を伸ばしています。
上記はFLARESのダイレクトナビゲーション。
パンくずナビゲーション
サイト内での階層を順に表示し、位置を明示するためのナビゲーション。主に上位階層への遷移が可能。パンくずナビゲーションはウェブサイト閲覧ユーザーにとっての利便性の面からも有用とされていますが、Googleなどの検索エンジンに対しても一定の効果があると言われています（SEO効果あり）。デザイン面などによって設置しないと判断をすることもあるかとは思いますが、パンくずナビゲーション経由での離脱を極力防止したい場合など以外には、基本的には全てのページに設置することをお勧めします。設置メリット非常に大きいと言えるでしょう。
上記はFLARESのパンくずナビゲーションの例。
ステップナビゲーション
手順が2段階以上ある場合に用いられる次のステップに進んだり、前のステップに戻ったりするためのナビゲーション。ステップナビゲーションを用いることによってページ遷移の流れをユーザーに伝えることにつながったり、ステップ間の移動を自由に行えるようにするなどの効果もあります。段階を踏んでユーザーアクションを行っていただく必要がある場合などには設置しておくことでユーザーにとっての利便性の高いウェブサイト制作につながっていくでしょう。
上記は朝日新聞のセールスを行っている朝日サポートセンター様のお問い合わせページに設置されたステップナビゲーションの例。
ダイナミックナビゲーション
検索などのユーザーアクションをもとに動的に生成されるナビゲーション。ユーザーアクションによって内容が変化するのが特徴です。
上記はGoogle検索で「WordPress プラグイン 四日市」と検索した例。1～4位までFLARESがランクインしています。
ナビゲーションエリア
ナビゲーションエリアとは主にウェブサイトのレイアウトを行う上での位置のことを指しています。具体的には現代のブログなどで良く用いられる以下の構成を参考に名前を付けた状態です。
| グローバルエリア（ヘッダー）
メインナビゲーション、機能ナビゲーションなどを設置 |
|
| コンテンツエリア
メインコンテンツを設置 |
ローカルエリア
関連ナビゲーションなどを設置 |
| グローバルエリア（フッター）
ヘッダーよりも低優先度のナビゲーションを設置 |
|
グローバルエリア
サイト内の共通要素を設置し、全ページ共通で表示することによって、サイトのブランド情報やコンテンツ間を横断するためのグローバルナビゲーションなどを設置するための場所として利用されます。ヘッダーにはより重要な情報を設置することが重要です。SEO的観点においてもフッターよりもヘッダーの方が優先度が高いと評価される傾向が強いと言われています。
コンテンツエリア
コンテンツエリアはそのページのメインとなる情報を配置するための場所です。コンテンツエリアには主に３つの形式があると言われています。トップ、一覧、詳細、の３分類です。
トップ
トップはウェブサイトのトップページのように様々な情報が横断的に配置されているページとなり、各コンテンツへのハブとしての機能を果たします。例えば例を示すとすると、サイトの一番トップのことを総合トップということもあるとは思いますが、それに対して採用ページのトップを採用トップとして、その下層ページに当たる社員紹介や福利厚生、募集要項などの各ページへのリンクを提供する役割などを持つ場合が多いです。
FLARESのトップページを例に出すと、スキルマップやサービスラインナップなどの各下層ページへのリンクを提供しており、サイト全体のハブとなっていることがわかると思います。
一覧
一覧とは同じような分類の情報が一覧表示さているページのことです。FLARESのサイトにおいては採用情報のページが一覧ページに当たり、募集要項が一覧表示されています。
詳細
詳細ページは一覧からさらにもう一階層下に降りたページのことで、個別の情報の詳細が掲載されているページのことです。
参考例として、FLARESの採用情報からウェブデザイナーの個別ページに入ってみると以下のような内容になっています。
ローカルエリア
ローカルエリアとはブログにおけるサイドバーに当たり、メインエリアの補助的な役割を果たすコンテンツや関連ナビゲーションなどが設置されるケースが多いです。
FLARESのブログを例に挙げると、ローカルエリアには月別のアーカイブ（一覧）やカテゴリアーカイブ（一覧）、新着投稿などが並んでいます。
利用シーン別ナビゲーション
目的やニーズ別のナビゲーション
以下はAmazonのサイトマップですが、お客様の利用用途（ニーズ）別のナビゲーションになっていますね。現代におけるナビゲーションの用途としてもっとも利用される機会が多いのがこの目的やニーズ別のナビゲーションかもしれません。
ランキング形式のナビゲーション
こちらはAmazonの売れ筋ランキングです。ランキング形式のナビゲーションは他のユーザーの人気などを伺うことができるため、ユーザー判断を助けることができます。
ちなみに、左側はニーズ別のナビゲーション、右側は関連のあるランキング形式のナビゲーションですね（関連ナビゲージョン × ランキング形式ナビゲーション）。このように複数のナビゲーションの考え方を掛け合わせて利用したり、複数のナビゲーションをウェブサイト利用ユーザーのウェブサイトの利用の流れに沿って目につく場所に設置することによってユーザーの利便性を上げていくことが可能となります。
ウェブサイトにおける設置位置による人間の重要性判断
ウェブサイトにおいては、人は上から下へ行くにしたがって、また左から右に行くにしたがって興味関心などの重要度が下がっていくと言われています。この法則にしたがうとユーザーのアクションを想定している重要な要素はページの左上の方に設置することが一つの手法として考えることができます。ただし、ウェブサイト閲覧ユーザーに対する製品やサービスなどの訴求によってユーザーの興味関心を向上させる効果もあると考えることができるため、ストーリーに沿って一番最後にアクションにつながる要素を設置するなどの考えもまた一つでしょう。
少し脱線しましたが、要するにユーザーにとっての利便性を考える上ではより右下ではなく左上に重要な情報を設置したほうが、ユーザーにとって受け止めて頂きやすい状況につながると言えるでしょう。コンテンツを制作する上での一つの参考として頭の片隅に置いておくとよいかもしれません。
ウェブナビゲーションの課題と向き合う
ウェブナビゲーションにおける重要な項目として「使いやすさ」と「見つけやすさ」の2つの項目があると言われています。ウェブナビゲーションを設計する上ではこれら「使いやすさ」と「見つけやすさ」の2つの項目に配慮したデザインを置こうなっていくことがユーザーにとって利便性の高いものになると言えそうです。
- ナビゲーションがバラバラでまとまりがない
- ナビゲーションとページ内のタイトルや見出しの文言が一致していない
- ラベリング（テキストの決め方）にSEOなどのが考慮されていない
ナビゲーションがバラバラでまとまりがない
ナビゲーションはグルーピングすることが基本となります。階層型ナビゲーションであるグローバルナビゲ―ションや下層ページにおける関連ナビゲーションなど、適切なナビゲーション単位でグルーピングすることによってユーザーがナビゲーションを扱いやすくなるといった効果がありそうです。情報として整理し、秩序だててナビゲーションを設置することによってウェブサイト閲覧ユーザーの利便性を上げていくことが可能となります。
ナビゲーションとページ内のタイトルや見出しの文言が一致していない
私が制作をしているときにもよくあることなのですが、デザイナーさんが書いたデザインをそのままコーディングすると「パンくず」の内容と「ページタイトル」の内容が異なるといったことが普通にあります。例えばお知らせを新着情報としてページタイトルには記載されているのにパンくずには最新情報となっている場合などです。多くの場合は制作の最終チェックの段階で修正されることが多くクオリティが担保されていると思いますが、ページのデザインを制作する上ではこういったナビゲーションとページ内要素の表記ゆれなどがあるとユーザーを混乱させてしまう恐れがあるため好ましくありません。
言葉を定義した一覧を作成するのが最も効果的ですがそこまで時間が取れない場合もあると思うので、デザイナーさんがデザインカンプを制作する上での注意事項として一つ頭の片隅に入れておいていただけると幸いです。ナビゲーションにおける表記揺れはユーザーの利便性を下げます。
ラベリング（テキストの決め方）にSEOが考慮されていない
ナビゲーションのテキストの決め方のことをラべリングやラベリングシステムといますが、ラベリングにおいてSEOを意識してキーワードを適宜盛り込むということを行った方が最終的に集客につながるウェブサイトに育て上げることにつながっていきます。
特にa要素で実装されることの多いナビゲーションはSEOにおける効果が大きいとされているため、ラベリングがSEOの効果を語るうえでは非常に重要というわけです。私のSEOの先生に言わせてみるとグローバルナビゲ―ションやパンくずの一番左側にある「HOME」という表記すら否定されたほどです。SEO効果を最大限に狙うのであれば、サイト全体を表すテキストを入れるべきだと言われてしまいました。
参考は運転免許相談所の例です。例えば上記の例を参考にすると、パンくずのトップに当たる部分が運転免許証となっています。これが非常に重要とのことです。ユーザーの利便性を追求することは当然のことですが、検索エンジンにとっての利便性も同時に追求するという視点を忘れないことがアクセスアップにつなげていく上で重要な要素となります。もちろんユーザーの利便性もアクセスアップの重要な要素の一つなので確実に押さえるようにしてください。
設計と実装とテスト
さて、ウェブナビゲーションのデザインの基本を学んできましたが、ウェブにおいてはデザインカンプをデザインツールで作ったところが終わりではないので実際にナビゲーションがコーディングデータとして実装されてから使って試してみるということを行うことによって使い勝手を検証することも非常に重要な工程となります。
もちろん利用用途や利用シーンを想定することはデザインを行う上での基本なのですが。ユーザーの立場に立って、より具体的にユーザーの利用用途や利用シーンを想像した結果のナビゲーション利用というアクションを綿密に想像することが重要だと言えるでしょう。
予算に余裕がある場合やユーザーのアクションがサービスの利益に直結する場合など、ユーザーの利便性を追求することによって成果に繋げていくことができるということが明確であれば実際に創ったものを利用してテストするということからの変更や追加といった次の制作に繋げていくことが一つ重要です。ただ、制作は無料でできることではありませんから予算に余裕がないとこれらの改善アクションを行うことはできないでしょう。
ウェブサイトは想像以上に予算が必要なケースが多いので、改善が収益につながるといった優れたビジネスモデルを想定されているといったことが前提となりますので、その点には注意が必要です。ビジネスモデルがない場合には予算を捻出しても回収する術がありませんからね。
まとめ
ウェブナビゲーションについての理論を学んでみると、何のことはない当たり前のことと感じるかもしれません。しかし、ウェブナビゲーションについての用法やメリットなどを当たり前のようにきちんと押さえておくことによって取りこぼしを少なくしていくことが可能だと思います。適切なウェブナビゲーションをウェブサイトに設置してユーザー体験をより良いものに変えていけると良いですね。
私自身はサイトマップの制作やコーディング（ウェブプログラミング）などがメインでユーザー体験デザインの根幹の部分を担当することは少ないのですが、何が良くて何が良くないのかということを把握したり判断するための知識はエンジニアとしても必要なので最低限の知識としてユーザー体験デザインや情報アーキテクチャについての各論を押さえています。
特に四日市市などの地方都市においてはデザイナーやエンジニアといった技術職は非常に限られた人数で地域のデザインシーンを支えているといっても過言ではないでしょう。一人生産方式ではないですが、職務を拡大し、幅広い知見をもって、お客様のウェブデザインシーンをリードしていけるように日々の業務と並行して今後も学習を継続していこうと思います。
書籍のご紹介
昨日紹介した書籍は情報アーキテクチャに関する3冊だけだったのですが、今日のテーマであるウェブナビゲーションに関する書籍としてはデザイニング・ウェブナビゲーションという書籍も本棚にったのでこちらもご紹介させていただきます。ただし注意すべき点があります。2009年くらいの本も含まれているので内容が古いです。古いといっても陳腐化しない知識も多いとは思いますが目次を見てみて参考になりそうな場合だけ購入されるようにしてください。
INFORMATION ARCHITECT 100
ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計
https://amzn.to/2TGEwMF
100ページすべてに図解があり、デザイナーの方にオススメです。非常に視覚的にわかりやすい。
IAシンキング
Web制作者・担当者のためのIA思考術
https://amzn.to/2HsZWGo
ウェブディレクター向けです。実践的でわかりやすい。
情報アーキテクチャ
見つけやすく理解しやすい情報設計
https://amzn.to/2TLuYQo
内容は非常に学術的で難しいです。ボリュームも一番。実践するにはかみ砕いて理解する力と応用力が必要です。
デザイニング・ウェブナビゲーション ―最適なユーザーエクスペリエンスの設計
オススメ記事
UXデザインに関する他のおすすめ記事です。もしよろしければご確認ください。
https://flares.jp/digimag/how-to-make-site-structure-and-site-map/
