Web関連

【ホームページ制作】UI設計の基礎の基礎!WEBサイトに必要不可欠なナビゲーション5種類

0

多様化を極め飽和状態にあるWEBデザイン。どんなにカッコイイサイトでも使いやすくなければユーザーは離脱してしまいます。

WEBサイトの使いやすさを決めるのは正しいナビゲーションの配置です。
基本に立ち返って、ナビゲーションの種類をおさらいしてみましょう。

1)グローバルナビゲーション

WEBサイトで一番クリックされるナビゲーションです。「メニューバー」とも呼ばれます。
どのページに飛んでも常にページ上部の固定位置に表示されているもので、情報のカテゴリ別、機能別などの目的に合わせて設定をします。

uinavi515030201.png

2)ドロップダウンメニュー

グローバルナビゲーションやローカルナビゲーションをオンマウスしたときにデローンと出てくるアレです。
コンテンツのカテゴリ数の多いECサイト等によく用いられ、ユーザーのクリック数を減らし目的のページにたどり着きやすくするものです。

ドロップダウンメニューをオンマウスすると、更にドロップダウンが展開する、「メガドロップダウンメニュー」なんていうものもあります。

uinavi515030202.png

参考:http://www.sumitomocorp.co.jp/

3)パンくずナビゲーション

第2階層目以降に表示されるナビゲーションです。
読んで字のごとく、自分がどの道をたどってそのページに辿りついたのかを、パンくずを落として目印を付けていくように階層構造を表示するナビゲーションです。

例)「TOP > サービス > WEBコンサルティング > SEO、SEM」

と表示することで、今自分がサービスカテゴリの中のWEBコンサルティングページの更に深い階層の「SEO、SEM」ページにいる事がわかります。

4)ローカルナビゲーション

グローバルナビゲーションで設定したカテゴリを更に細分化し、サブメニュー化したものになります。
例えば、「企業情報」というグローバルナビゲーション配下のローカルナビゲーションは、「会社概要」「代表メッセージ」「組織図」「決算報告」などが並ぶようなイメージです。

ページの左右に設けたカラムを「サイドナビゲーション」と呼んだりします。

uinavi515030203.png

5)フッターナビゲーション

どのページに行っても、共通してフッターに設置されているナビゲーションです。
常設されている点ではグローバルナビゲーションと同じですが、カテゴリトップページほどの優先度を持たないコンテンツで、かつユーザーには読んで欲しいコンテンツを配置します。

「ご利用規約」「推奨環境」「個人情報保護方針」「運営会社」など、サポート的コンテンツが並ぶ事が多いです。

uinavi515030204.png

いかがでしたか?
先進的なWEBデザインが流行ってきたりして、UI設計に悩んだら基本に立ち返って、ユーザーにとって使いやすい、わかりやすいWEBサイト設計を心がけましょう。
見た目の格好よさはその次です。

0

今さら聞けない!アクセスログ解析のやり方コラム ~3つの基本指標編~前のページ

ホームページ制作費用の落し穴次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    ツイッター活用は今がチャンス

    皆さま、twitterはご利用されていますでしょうか?ラインやイン…

  2. Web関連

    そうだったのか! 簡単にわかる「モバイルファースト」の考え方

    現在、ほとんどの企業がコーポレートサイトやECサイトを持っています。…

  3. Web関連

    システムのシームレス化!SOA導入で作業効率大幅アップ

    シームレスとは日本語に訳すと「繋ぎ目のない」「一つの構造」という意味で…

  4. Web関連

    初心者Webデザイナーおすすめ!Webデザインのコツ

    今回は、初心者Webデザイナーの方々に向けて、Webデザインのコツをご…

  5. Web関連

    ブライダルサイトを見て、真剣に考えたこと

    気になって、考えました。最近、周囲で結婚する人が増えてきました。季…

  6. SNS関連

    SNSマーケティングって何すればいいの? - 第1弾! –

    みなさんも1つは持っているSNSアカウント、企業ではどのように運用をす…

おすすめ記事

最近の記事

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

アーカイブ

  1. AIさくらさん

    AIさくらさんとAIチャットボットはどう違う?!他社製品との違いを徹底解説!
  2. Web関連

    プロジェクトマネジメントについて考えてみよう
  3. Web関連

    一石三鳥!?マルチデバイスに対応したブラウザ「Blisk」
  4. Web関連

    OpenPNEを使うと、何が出来るの?
  5. SNS関連

    SNSマーケティング
PAGE TOP