Web関連

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

0

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

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

サービス・商品別

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

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

 

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

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

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

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

よく使われる機能別

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

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

情報の種類別

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

▼auのwebサイト

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

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

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

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

いかがでしょうか?

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

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

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

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

関連するサービス

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

関連コラム

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    O2O、海外ではおもしろい展開をしているようですよ

    マクドナルドのアプリのクーポン機能が最近変わりましたよね!テレビの…

  2. AI関連

    人工知能×Webがもたらす未来を予測してみた

    最近になってよく耳にする言葉のひとつに「人工知能(AI)」と言われてい…

  3. Web関連

    クラウドサービスを利用する上で最低限注意すべきセキュリティ5箇条

    こんにちは!外出時に何かと荷物が多くなり両手がふさがってしまう中條です…

  4. Web関連

    就活解禁前に知っておきたい、面接の4つの心得!

    こんにちは。今ではすっかりオタクキャラが定着した真野です。年末…

  5. Web関連

    webサイトで顧客満足を上げるポイントは意外なところにあった!?

    こんにちは。ティファナコラム編集部 担当の遠藤です。コラムのタ…

  6. Web関連

    Web制作 システム開発とフレームワークについて

    こんにちはサーバーエンジニアの橋本です。最近だいぶ暖かい日が増…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    美味しく健康的な料理はAIの活用で
  2. AI関連

    IoT技術とAIの連携で、業務はより便利かつ安全になる
  3. Web関連

    ホームページ制作会社が教えるインフォグラフィックの基礎、ピクトグラムの作り方
  4. SNS関連

    【ホームページ制作】気軽さゆえの危険~SNSの正しい使い方~
  5. AI関連

    新型コロナウイルスで日本の働き方改革が起こる
PAGE TOP