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. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. AIに求められているものは、実は意外な物だった
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    関係あるのは映像業界だけじゃない!押し寄せる超・高解像度「4K解像度」の波!

    みなさんは「4K解像度」という言葉はもうご存知ですか?テレビなどの画面…

  2. Web関連

    紙媒体のものから電子○○へ

    皆さんは電子書籍を利用していますか?私は使用しています。某携帯電話会社…

  3. Web関連

    初めてのFintech

    Fintechとはなにかみなさんご存じでしょうか?Fintechと…

  4. AI関連

    家計簿にAI機能搭載で便利になる!

    みなさん家計簿ってつけていますか?私は、つけていません。なぜならめ…

  5. Web関連

    マーケターの常識!?プライベートDMPとオープンDMPの違い

    マーケティングに関わるようになり、「プライベートDMP」、「オープンD…

  6. Web関連

    マーケ担当必見!国内ECマーケティングオートメーション(MA)事例

    マーケティングオートメーションという言葉はご存知でしょうか?O…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    寿命が延びてるのはビッグデータのおかげ!ビッグデータで長生きしよう!
  2. Web関連

    赤ペン先生は消滅する!?学習システムはeラーニングが主流!
  3. Web関連

    そもそもUI/UXデザインって何?
  4. Web関連

    WEBサイトリニューアル時におけるサーバー選びのポイント
  5. Web関連

    顧客ロイヤリティを上げる為に…信頼されるWebサイトを 作るのに必要…
PAGE TOP