Web関連

ホームページ制作会社が紹介するグローバルナビゲーションの情報分類4パターン

0

みなさんは、「グローバルナビゲーション」と呼ばれるものをご存じでしょうか?
WEBサイトにおいて、どのページに行っても、共通して表示されるナビゲーションリンクの事ですが、このグローバルナビゲーションに設定する項目によって、WEBサイトの構造も大きく左右されると言っても過言ではありません。

そんなUI設計において重要なファクターとなるグローバルナビゲーションですが、WEBサイトの性質によって様々な種類があります。
今回は、その中から代表的な4種類をご紹介します。

サービス・商品別

商品別やサービスの種類別に分類したパターンです。
提供する商品数の多いECサイトや、サービス情報が多岐にわたるで企業サイトで、よく使用される分類方法です。

▼Appleの公式サイト。提供商品の種類別にナビゲーションが設けられています。

 

ユーザー種類/ユーザー目的別

訪問するユーザーのタイプや、目的別に分類する方法です。
学校や病院・自治体など、様々なユーザーの利用が予想されるサイトに多いのが、このタイプです。
ユーザーや利用目的によって、提供する情報の種類が違う場合には、この分類方法が適しています。

▼東京医科大学WEBサイト。「受験生の方へ」「在校生の方へ」「卒業生の方へ」と、ユーザータイプ別にナビゲーションを分類しています。

▼SHARPのWEBサイト。「個人向け製品」と「法人向け製品」など、ユーザータイプ別の分類をしています。

よく使われる機能別

ユーザーがよく使用する機能別にナビゲーションを配置する方法です。
WEBサービス、アプリに使用されるのが、このパターンです。

▼mixiのホーム画面。機能別に分類されていて、どのページにいてもすぐに自分の使いたいページに遷移できます。

情報の種類別

同じ種類の情報ごとに分類したのが、このパターンです。
コーポレートサイトやポータルサイトで、この方法が用いられます。

▼auのwebサイト

(おまけ)ドロップダウンメニュー

グローバルナビゲーションにオンマウスすると、表示されるのがドロップダウンメニュー。選択したカテゴリを更に細分化した、下層カテゴリを表示します。
取扱い商品数が膨大なサイトによく使われます。
こうしてナビゲーションを細分化することで、ユーザーは目的のページまで、最短でたどり着くことが出来るのです。
ドロップダウンメニューをオンマウスすると、さらに下層ページが表示される、「メガドロップダウンメニュー」も存在します。

▼住友商事コーポレートサイト。ドロップダウンした項目をオンマウスすると、更に横にメニューが展開されます。

▼富士ゼロックス株式会社のメガドロップダウンメニュー。階層構造をわかりやすくし、サイトマップ化して表示しています。

いかがでしょうか?

WEBサイトの目的や、ユーザーニーズ、情報の種類など、様々なことを見極めることが大事だとわかりましたね。
訪問したユーザーを、適切な情報へ誘導するために、グローバルナビゲーションを効果的に設定しましょう。

WEBサイト設計の際は、是非参考にしてみてください。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作
Webデザイン制作
CMS構築

関連コラム

0

ロボットも好みはやっぱりスリムでイケメン!前のページ

趣味で生活!!youtuberという職業次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. AIに求められているものは、実は意外な物だった
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    影響が大きい!IEのサポートポリシーの変更!

    今回、Web業界にとってとても大きな変動がありました。それは、Micr…

  2. Web関連

    WEBサイトにおけるセキュリティ対策

    こんにちはサーバーエンジニアの橋本です。先日インターネットで調…

  3. Web関連

    良質な睡眠で快適に生活しよう!オススメアプリ3選

    皆様は、毎日快適な睡眠が取れていますか?私は眠るのが下手で、いつも…

  4. Web関連

    今話題のマーケティングオートメーション(MA)を考えてみた!

    みなさん、マーケティングオートメーション(MA)という言葉をお聞きにな…

  5. Web関連

    クラウドデータベースサービスによりエンジニアのしごとが無くなる!?

    どもっ!SEの岸沢です。エンジニアの仕事は多岐にわたります。メイ…

  6. Web関連

    ワンピースの『悪魔の実』専門ECサイトを構築しよう

    こんにちは、デザイナーの石塚です。ユーザーが目的の情報に迷わずたどり…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    ECサイトは個別接客が売れる!
  2. Web関連

    コンセプトのないデザインは味のない料理
  3. Web関連

    「OK Google」の便利な使い方4つ!
  4. Web関連

    WEB制作に欠かせない知識とは?
  5. Web関連

    WordPressのプラグイン PS Disable Auto Formatti…
PAGE TOP