Web制作者がチェックしておきたい、最近のWebサイトで使用されているナビゲーションのデザインとアイデア
Post on:2017年12月22日
sponsors
最近のWebサイトで使用されているデザイン的にも機能的にも優れたヘッダ ナビゲーションを紹介します。
テキストをリスト状に配置するだけでなく、アイコンや画像を添えたり、タブを効果的に採用したり、配置自体を工夫したり、さまざまなアイデアが取り入れられています。
11 Ways to Design the Perfect Site Navigation
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
Sistrix
SistrixはSEOソフトウェアパッケージを扱うドイツの会社で、非常に人気が高いSEOのブログでトラフィックを得ています。
Webサイトを見てみましょう。ナビゲーションは「Toolbox」「Blog」「Resources」「Support」の4つで構成されており、それぞれをホバーすることでリンクのリストをドロップダウンで表示します。同じくらいのコンテンツを持っているサイトにとって、参考になるアイデアだと思います。
注目すべきはリンクのリストで、アイコンを使用していることです。テキストのみだと内容を理解しにくいですが、アイコンを使用することでビジターが訪れたいページに導くことができます。
例えば、「スマホでのSEO」を探しているとします。そのリンクにはスマホのアイコンがあり、素早く見つけることができます。ビジターのための優れたユーザエクスペリエンスとは、優れたナビゲーションを提供することも大切です。
Reiss
ファッションを扱うサイトであれば、新しいデザインを取り入れることは賢い選択です。
よく見かけるドロップダウンメニューはテキストベースですが、Reissでは主要カテゴリのドロップダウンで画像を使用して新着アイテムやニュースを表示します。ナビゲーションのエクスペリエンスの重要なところに、こういった目立たせたいコンテンツの画像を使用することは効果的なアイデアです。
Vibrains
VibrainsはWeb制作者のポートフォリオです。宇宙という明確なデザインのモチーフを採用することで、サイト全体が一貫して見えます。ロゴのデザインをはじめ、アイコンや背景などにも宇宙が利用されています。
ヘッダで使われているアニメーションは宇宙空間に浮かぶサイトをイメージさせますが、卓越したデザイン機能は「Process」セクションに移動した時の上部にある太陽系のアニメーションです。惑星をスケールアップして表現することで、ビジターがサイト内を移動するのを邪魔することなく、人々が宇宙に抱いている子供らしい魅力を呼び起こします。
こういったアニメーションに興味があるなら、CodePenのSolar System animationにソースコードが公開されています。
Weecom
Weecomはブラジルに拠点を置くデジタル代理店で、ハンバーガーメニューを使用してサイトのデザインをミニマルに見せています。ナビゲーションのオプションはアイコンをホバー・タップするだけで表示されます。
ハンバーガーメニューを上部に配置するのは一般的なアプローチですが、このサイトではページを下にスクロールすると、位置が右下に変わります。これはページの主要なコンテンツを回遊するナビゲーションメニューの重要性を証明する、シンプルでダイナミックなアイデアです。
Mashable
Mashableのようなコンテンツの集合体であれば、従来のナビゲーションメニューですべてのコンテンツを表示することができます。見出し、小見出し、サブ小見出しを明確にすることは、ビジターに優れたユーザーエクスペリエンスを提供する上で重要です。
このサイトで注目すべきは、メガメニューを使用している場所です。メガメニューは右端の「more」を選択した時のみ、そのドロップダウンが表示されます。このようにすることで「Channels」や「Company」などのスペースを提供し、その下に小見出しのリストを表示することができます。たくさんのコンテンツがあるサイトのナビゲーションをどうするか考える場合、このようなメガメニューを候補にするのも戦略的な方法です。
Oars
もう一つメガメニューを見てましょう。Oarsは旅行サービスのサイトで、ビジターが望むものを見つけるのを助ける明確なナビゲーションレイアウトを使用しています。例えば「Destinations」をホバーすると、Oarsの地元である米国を範囲とした目的地、世界を範囲とした目的地、人気の高い目的地に分かれたメガメニューが表示されます。
このメガメニューのもう一つの大きな特徴は「Your Experience」「Stories+Video」「Plan+Reserve」で画像を使用していることです。メガメニューのスペースを最大限に活用し、これらの画像はビジターの目にとまり、クリックを促します。
Paper Collective
Paper Collectiveは家庭やオフィス向けの素晴らしいアートプリントを専門とする会社で、優れたデザインのサイトです。
このサイトではスライドアウトのサイドバーメニューを巧みに使用しています。通常はスライドした際にコンテンツを覆い隠しますが、このサイトではコンテンツを覆い隠すことなく右に押し出すように表示します。
Olympics
オリンピックの大会で、デザイナーであるわたし達が楽しみにしている一つは開催都市ごとに異なるロゴのデザインです。その時代の文化やデザインに触れることができます。
IOCのOlympicsのサイトでは、このロゴにすぐに触れることができます。シンプルで合理的な方法で配置されており、年代順にもナビゲートしやすく、このサイトは優れたメニューデザインのゴールドスタンダードを設定しています。
Next
Nextは洋服から靴、フラワーアレンジメントや家具などを販売する英国のブランドです。多種多様なプロダクトを扱っているため、ナビゲーションはプロダクトを包括的に表示するために多大な労力を必要とします。
ここで使用されているテクニックの1つにアコーディオンのタブがあります。「Home & Furniture」をホバーするとサブメニューが表示され、そこから更にタブでカテゴリを選択できます。もし幅広いジャンルのプロダクトを扱うサイトであるなら、見出し・小見出し・サブ小見出しと分割するこの方法は素晴らしい方法です。
ESPN
スマートなナビゲーションデザインとは、ビジターが探しているものを知り、できるだけ簡単に表示することを意味します。ESPNはスポーツメディアで、探しているものを見つけ出せるナビゲーションを使用しています。
ESPNでは通常のナビーションの上にイベントのナビゲーションを配置し、最も人気のある試合の最新スコアが表示されています。チームのロゴを利用して簡単に閲覧できる標準メニューと組み合わせることで、その試合の詳しい情報も知ることができます。
Bentley
Bentleyは洗練された車のデザインが高く評価されているブランドで、Webサイトも非常に洗練されたデザインです。巧妙なレイアウトは、サイトのナビゲートが楽しくなります。
トップメニューの「Models」をクリックすると、サイドバーが表示されます。各モデルをホバーすると、それぞれのモデルの車が画像で表示され、クリックしてスライドさせると、さらに詳しい情報にアクセスできます。
sponsors
