ナビゲーションは左？右？WEB屋は何を考えているか

以前、ちょっと現実逃避にWEBのナビゲーションについてただひたすらグダグダ書きたいと呟いたところ、他分野が中心のデザイナーさんが興味を持ってくださったのでひたすら書いてみました。ナビゲーションと言ってもどの？となると思いますか、今回書いたのはメニュー、グローバルナビゲーションと呼ばれる、サイトのどこかに固定でまとまってリンクが並んでいるアレです。ここで記載している内容は個人的な見解ですが、部分的にはWEB業界の暗黙知の様な部分もあると思うので、そういえば！いや！違うよなど、このパーツの役割に関する言語化の材料になったらいいかなと思います。

　―　
WEBサイトにおけるナビゲーションの役割

□WEBにおけるナビゲーションは、ほぼ当たり前のように存在しますが、その体験を他のデザインと比較して考え直すと結構ややこしく、悩みどころの多い要素だなぁといつも思っています。 何故ややこしいのかと言うと、そこにはリストとしてコンテンツを明示する役割と、それぞれのコンテンツに遷移する導線という役割の二つがあるからです。

例えば、アナログの書籍で
コンテンツのリストとして似たような役割を担っている「目次」の場合は最初に掲載しているコンテンツをざっくりと把握させる要素になるわけですが、その後は、読む側が必要とし、あえて目次ページをめくるまでは一切主張しない要素です。 では、遷移はどうしているか？ もちろんページをめくるわけですね。おそらくですが、本を「めくる」という行為はアフォードされた無意識レベルの行為で完結するもので、メインコンテンツの内容理解に対してはほぼ負荷をかけない優れた導線だと思います。 一応デメリットを挙げておくと、パラパラめくった先が狙ったページとは限らない為、ノンブルを目安に探すという行為が発生するという所です。

テレビでも考えてみます。 コンテンツのリストとしての役割は番組情報的な画面か新聞、雑誌などが担います。テレビ自体の特性も出ていますが、かなり切り離された世界で場合によっては一度も確認される事なく終わる要素かもしれません。 導線はリモコンです。 表示しているコンテンツを切り替える道具として機能しているあれも、見たい番組を見ている最中には必要のないものです。 デメリットは、リモコンも新聞・雑誌もテレビとは別の実態を持つオブジェクトであるため、それ自体を見失いがちな点です。あれはまぁ、困りますよねw

これらの例で共通しているのは、コンテンツのリストも導線もコンテンツを見ている時に邪魔をしないという事です。 そして、邪魔をしないという構造は対象となるメインコンテンツの画面に入り込まないという事で成り立っています。

一方でWebサイトでは、リストと遷移導線が一体化しており、多くの場合、メインコンテンツと同時に表示されています。 これがまぁ、ざっくり言うとうっとうしいわけです。理由は集中したい本コンテンツの周りにその瞬間にとっては関係ない要素がちらついているからですね。

では何故、こんな鬱陶しいものが多くのサイトで居座っているのか？
それはWEBサイトでコンテンツを提供する目的が主に事業、商品、又は自分等、何かしらを知ってもらうためにあり、その達成は、単体コンテンツで為すことが難いケースが多いからです。 WEBサイトのコンテンツとの出会い（ランディング）の多くは検索エンジンからの流入です。何万、何億というページの中からユーザーがある一定の目的を持って表示するそのページをきっかけに、他も見てねと主張するのがこのコンテンツリストであり、遷移導線であり、ナビゲーションとなります。

こう書くと、コンテンツ提供者のエゴだけが現れているようですが、当然、見にきたエンドユーザー側も知りたいポイントがその単体ページだけとは限りませんし、もともとそれを通して関連コンテンツを知りたいと思っている可能性も高いので、双方にとって必要な要素でもあるわけです。

もしこれをWEBでも分離させたら？
一見良さそうに感じますが、 実際それに近い状態として提供されるスマホサイトのハンバーガーメニュー。遷移機能の存在は明示でき、かつコンテンツと同じ画面に入り込まない要素ですが、これにはアクセシビリティの懸念（どんなコンテンツがあるかわかりづらい。そもそもナビゲーションと気づかない）が挙げられています。

つまり、スマホは画面の実サイズの小ささ故に初期の表示にナビゲーション項目が含まれない事を許容されてはいるが（とは言え多くの場合は主要導線をページ内でも表示するなどフォローが必要だったりさる）まだWEBサイトにおいてはいわゆるナビゲーションがわかりやすく存在する方がエンドユーザーにとっても有益であると見られているという事になります。

ですが、WEBより紙の本の方が読みやすいと言われる等、本来の目的であるはずのコンテンツ理解において遅れをとっているWEBでその原因の一つがナビゲーションであると考えるとデザイナーとしては常に扱いに困る存在という事になるわけです。

　―　
基本的な特性

さてこのグローバルナビゲーションはざっくりいうと、上横並び、左縦並び、右縦並びのどれかになると思うので、まずはそれぞれの特性を考えてみます。（今回はアプリケーションとフルスクラッチのゴリゴリ動く系WEBアプリを入れると無限にパターンが出てしまうのでそこはあまりふれません。）

■上横並び
コーポレートサイト、LPにすごく多い。

□メリット
・ヘッダー固定表示がしやすく、その場合、コンパクトに収められる為メインコンテンツの邪魔をし難い。
・ヘッダーコンテンツと並べたときの相性も良くレイアウトしやすい

□デメリット
・平均的なウィンドウサイズに横幅が収まる文字量でなければならない。
・大きなサイトのカテゴライズの場合、幅に収めるために相当にざっくりとした分類になりがち
・リンクの数が絶妙なため、スマホ版では画面内に主要導線として掲載する事もあるが、情報構造、関係性が微妙に変化する為、メッセージがブレない様にコントロールが必要になる。

■左縦並び
ブログやシステムサイトなどに多い

□メリット
・WEBサイトは縦スクロールが基本のためメニューが増えても見落とされ難く情報の増減に対応しやすい
・画面サイズの制限を気にしないで済むため掲載コンテンツが具体的に認識しやすい

□デメリット
・横組み左揃えが基本のWEBで視線が流れやすいところに配置するため、メインコンテンツの内容理解を阻害しやすい。邪魔。
・情報の増減に対応しやすいため、逆に情報の整理が疎かになりやすい

□その他
ページの多いサイトで上横並びのグローバルナビゲーションと合わせて下層ページからサブナビゲーションとしても使われる事もある

■右縦並び
ブログやシステムサイトなどに多い

□メリット
・WEBサイトは縦スクロールが基本のためメニューが増えても見落とされ難く情報の増減に対応しやすい
・メインコンテンツ利用中も横組み左揃えが基本のWEBで視線の流れの邪魔をし難い
・右利きだとマウス、トラックパッドなどの移動距離が小さく身体的には優しいとも

□デメリット
・情報の増減に対応しやすいため、逆に情報の整理が疎かになりやすい
・左縦並びと比べれば認知し難い

□その他
ページの多いサイトで上横並びのグローバルナビゲーションと合わせてサブナビゲーションとしても使われる事もある

これらの特性から使い分けパターンを記載していきます。以下の記載はあくまで初期要件の段階でまず考えている事を書き起こしているだけで、当然ですが、正解を定義するものでも必ず私がこれをルールとして採用しているもというわけでもありません。個人が目安として考えているものと捉えて下さい。

　―　
コンテンツのタイプで考える

WEB上で設計に関わるタイプの違いとして私が考えているのは大きく3つで、目的がその開いたページだけを見てもらうものなのか、それをきっかけに何かをしてもらうのか、そもそもデータの入出力などが主体となるものかになります。ナビゲーションに関してはもう少し細かくなりますが、まずはこの大分類を下記３系統として整理していきます。

・メディア系　・フロー系　・操作系

■メディア系
情報の提供を主体とし、ランディングしたページがエンドユーザーにとって最も重要。ブログ、申し込みなどの重要度の低いページ完結の商品紹介LP、コーポレートサイト（企業サイト）の基本ページがこれにあたる。
このタイプはナビの重要度がグラデーションになる。

もし発信側のメッセージ含めてランディングしたページで完結する体験設計になっていればナビがなくともエンドユーザーとのコミュニケーションは完結するのでハンバーガーなど本コンテンツを阻害しない形でも成り立つ可能性がある。

□ブログ系
個々の記事で完結する事が多く、アフィリエイトなどもページ内で完結（掲載）されているためページ単体の重要度が高い。グローバルナビゲーションに相当するメインナビゲーションよりも関連記事などのレコメンドの方が重要度が高いが、ナビゲーションからブログの傾向を伝える事もできるためファン化→再訪の一つとしては有効。
コンテンツ量の増加を見越して設計するため左右縦並びとの相性がいい 。

□商品紹介LP
商品を紹介することが主な目的の場合、スクロールすれば一通り閲覧可能な状態のページで各コンテンツへのショートカットとしてナビが提供される。
ナビゲーションがなくとも閲覧は可能なため、スマホ展開を考慮してハンバーガーメニューで統一することもある。
1ページ完結型の小規模コーポレートサイトもこれに準じる。
ナビゲーションはショートカットとして必要な時にアクセスしやすくするため前横並びとの相性がいい。レイアウトの自由度が高いため同様の意図を縦並びで表現することも出来るがあくまで補助的要素のため左に持っていくことは少ない。

□コーポレートサイト（企業サイト）
最初に辿りついたページをフックにサイト内回遊を計りたい提供側としてはナビゲーションが重要な位置を占める。

コンテンツ量と運用体制（オウンドメディアとして積極的に運用されるか）を考慮して決めるが、その企業が提供するサービスをエンドユーザーにとってわかりやすい大分類にして数を絞ったカテゴリとして提示する事が多く前横並びを置く事が多い。

■フロー系
最終目的はフォーム等への購入、申し込みボタンへ導く事。
商品を扱うサイトが複数商品を持ち、そのサイトを通してサービスを利用するというモデルが確立している場合、サイト内回遊のためのナビゲーションはコーポレートサイト（企業サイト）に準じるが、購入、申し込みボタンがより重要な要素になる。
単体商品などが中心の場合はナビゲーション自体はあまり重要ではない。

■操作系
□データの入出力によって得られる結果が最重要。その為、機能によっては単体ページで完結し、ナビゲーションが必要のない場合も考えられるが、多くは他の機能も必要になるためその機能の数と、後に開発、提供される機能の増加予定にもよる。
継続的な追加開発が見込まれる場合は左右縦並びで、特に機能の存在認知を優先したい場合は左にナビゲーション間の移動が操作時に多く発生する場合は右でカーソルや手の動きを少なく抑えられるように考える。

　―　
コンテンツの量で考える

前提としてはナビを使わずに目的にたどり着くに越した事はない訳で、考えなしにコンテンツを量産する事自体を避けるようにまずは注意深く考える事を心がけます。その上で、様々な制限、要件から下記コンテンツ量の差分を考えていきます。

■コンテンツ量が5項目程度
割と上横並び一択。ヘッダー固定がしやすくナビゲーション項目へのアクセスが気軽で相性がとても良い
左右縦並びでもコンテンツ量が少なければ固定にしやすいが、メインコンテンツとヘッダーとの仕切りにもなる上横並びがいないのでビジュアルなどを挟むか空間の仕切りをなくす方向で考えるかとなり、その場合下層ページの設計は？など、サイトの目的とも合わせてより慎重に検討が必要。

■コンテンツ量が6〜99程度
ヘッダー、メインビジュアル込みのコピー、ページタイトルエリアとセットで左右縦並びを優先的に検討。
数が増えていくほどカテゴライズして開閉、ドロップダウンなどのギミック？とセットで上横並びを再検討。

■コンテンツ量が2桁以上
カテゴライズして開閉、ドロップダウンなどのギミック？とセットで上横並びを再検討し、下層ページでは左右縦並びのナビゲーションを補足的に採用 。

　―　
ページタイトルから考える

出来れば避けたいですが、事情があって複数なページタイトルやカテゴリ名になる場合、その文字数が多いと必然的に上横並びが厳しい。となります。
例えばページタイトル、カテゴリ名を10文字以内に（出来れば7文字前後くらいが嬉しい）納められれば、desktopで1040px相当を横5分割にアイコンスペースを加味してもレイアウトに収められるが、仮にそれをスマホサイトのハンバーガーメニューなどのタップで表示される要素ではなく、元の画面内に表示したいと思った場合、改行が多くなりとても見にくくなる為、サイトの目的とも合わせて導線のユーザビリティがどうあるべきかの見極めとセットで考える必要が出てきます。

　―　
開発・運用コストで考える

全てのデバイスでハンバーガーメニューで表示するとでもしない限りは大抵desktop とモバイル端末はナビゲーションの表示を切り替えるが、要素自体（html）はどちらも共通、端末に合わせて要素も出し分け（もうあまりないかもしれませんがhtmlもわける。それはわけないが表示だけわける）などいくつか段階があり、その差分をチェック出来る運用体制があるかどうかなども考えます。

　―　
まとめ

ここでは書ききれないポイントもまだありますが、初期に検討するポイントはざっと出せたかなと思います。
こう言った開ける、押せるなどの分野は本来装丁であったりプロダクトデザイナー（リアルプロダクト）であったりと専門のデザイナーがいてもおかしくはない中で、デジタルプロダクトは模索している状態なのかなと思います。もちろん、その答えが出る頃にはもう画面で操作すると言う行為もなくなっているかもしれませんが、ウェブ単体でも10年以上作ってきている人間の脳内はこんな感じなのかとお楽しみいただけたなら嬉しいです。