「インタラクティブ」「一貫性」「ミニマル」は、Webサイトのナビゲーションが話題となるときに共通して聞かれる言葉です。しかしこのリストにはもう１つ「シンプル」という言葉を加えなくてはなりません。
シンプルナビゲーションは、Webデザイン要素の中でもっとも美しいものの１つです。インタラクティブとミニマルデザイン、それぞれの特性を組み合わせることでWebサイトに一貫性をもらたします。
シンプルナビゲーションには以下の２つの特徴があります。
- Webサイトのメインナビゲーションには、３～７つのセクションしかありません。これは、ドロップダウンメニューやメガメニューによる表示またはサブ的なナビゲーションの場合は当てはまりません。
- デフォルトの状態で、ナビゲーションのリンクをアイコンやボタンで隠すことは一切ありません。モバイルのビューであってもです。またナビゲーションを隠す場合があっても、わかりやすいラベルを貼り付け、常に目に見えるかたちで表示されています。
これらの特徴は些細なものに思えるかもしれませんが、Webサイトのユーザビリティにたいして大きな影響力をもちます。この記事では、シンプルナビゲーションに切り替えることで得られる利益について追求していきます。
コンテンツの構造を改良する
ナビゲーションをシンプルにすることは、Webサイトの構造に大きな影響をもたらします。シンプルなナビゲートのサイトでは、見出しごとにセクションが構成されます。より良いユーザー体験のため、ナビゲーションとコンテンツの両方を再構築することが要求されるからです。
コンテンツベースの構造
多くのWebサイトがコンテンツをベースとした構造を持っています。コンテンツベースの構造では、ユーザーが求めているものによって論理的にページが構成されます。そのため、ユーザーはサイト内を探索しやすくなります。
１つの例がCafe Rioのサイトです。このサイトではコンテンツが、メニュー、本日のおすすめ、お客様への約束、ケータリング、リワードプログラムに分かれ、さらに位置情報とオーダーのコンテンツが加わります。
もう１つの例がDribbbleのサイトです。サイトのコンテンツはユーザーが検索するものごとに分類されており、画像、デザイナー、ブログ、ポッドキャスト、イベント、求人募集など複数のカテゴリーに分かれています。
閲覧者ベースの構造
Webサイトの閲覧者をいくつかのグループに分類できるのであれば、閲覧者ベースの構造は有用です。閲覧者ベースの構造では、ユーザーごとにセクションを分割して設計します。
この事例の１つに、ナブラスカ大学リンカーン校のサイトがあります。ナビゲーションメニューから、訪問者、入学予定者、在学生、教員およびスタッフという４つのグループがWebサイトを利用することを予想していることが分かります。
もう１つの例がHumane Society of Charlotteのサイトです。このサイトでは犬や猫の里親を対象としており、医療サービスやボランティア、寄付などのニーズのある人々の利用を想定しています。
よりよいコミュニケーション
ナビゲーションの表示を変えることで、ユーザーへの伝わり方も変わってしまいます。一般的に、シンプルナビゲーションではセクションに単一の言葉を用いたラベルを使い表示します。そのため、これらの言葉は慎重に選ばなければなりません。
目的ベースのラベル
このようなサイトでは、コンテンツの内容に応じてエリアごとに分割されることが多いです。各ページはいくつかのカテゴリーに振り分けられ、カテゴリーには単一の名詞のラベルが付けられます。
目的ベースのラベルはWebサイトでよく使われ、コンテンツに応じて特定のエリアごとに分割する傾向があります。ページは複数のカテゴリーに割り当てられのカテゴリーには単一の名詞のラベルが付けられます。Hak5のサイトでは、会社紹介、フォーラム、動画一覧、会員登録、ストアページのようにカテゴリーに分けて表示しています。
行動ベースのラベル
ナビゲーションのラベルを行動ベースの名称にすることで、サイト訪問の目的を示せるので、ユーザーを次の行動に導くことができます。ナビゲーションはユーザーの行動によって分類され、単一の動詞を使ってラベルされます。TEDのサイトでは、見る、発見する、出席する、参加するのラベルを使ってリンクを提供しています。
より直感的かつ魅力的に
最後に、シンプルナビゲーションはユーザーがサイト内を探索するのを促す効果があり、ユーザーも目的のページにたどり着きやすくなります。
直感的に
タブレットやモバイルのビューで、一般的に使われている「ハンバーガーメニュー」などのボタンでナビゲーションのリンクを隠さずに、表示することもできます。この場合、ユーザーはWebサイトのナビゲーションをより直感的に理解することができるでしょう。
Momentumのサイトは、とても直感的なナビゲーションを利用しています。これはデスクトップとモバイルの両方で使われています。またどちらのビューでもナビゲーションリンクを同じ位置に配置することが可能です。
ナビゲーションを隠してしまうと、Webサイトは複雑化します。まず、ボタンを開いて使用するものだと気づかない人もいるかもしれません。また、どのようにしてナビゲーションを開くのかが分わからなかったり、全体を一瞬で把握することができなくなったりします。このような状況を防ぐために、ユーザーに推測させないようにし、より良いユーザー体験を作りましょう。
魅力的に
「ハンバーガーメニュー」を使わずにナビゲーションを表示することは、すべてのWebサイトに適用できることではありません。特に、リンクが最大で７つあるときや、ドロップダウンメニューを使ってより深い階層まで閲覧するときがそれに当たります。このような場合ナビゲーションは隠しますが、ボタンが常に見えるようにしなくてはなりません。
ナビゲーションが常に表示されていないような場合であっても、ユーザーが常にボタンを押せるようにします。また、ユーザーを惹きこむために、「メニュー」や「検索する」など、わかりやすい言葉でボタンにラベルを付けて、クリックを促すようにしましょう。
SUBARUのサイトは、ユーザーを惹きこむナビゲーションを使った良い例です。モバイルビューのときにメニューがわかりやすくラベル付けされているだけでなく、「製造」と「販売店」のラベルでクイックリンクも配置されています。
結論
正しく使うことで、ナビゲーションのシンプル化はユーザビリティを向上させ、Webサイトに利益をもたらします。しかし間違って使うと、ユーザー体験を損なってしまうでしょう。あなたのWebサイトになにが最適かを決定するのは、あなたです。
