WEBデザイン

【WEBデザインを独学で学ぶ】上部ナビゲーションとは?

どーも、学長です。

 

今回の授業は

 

【WEBデザインを独学で学ぶ】

上部ナビゲーションとは?

 

上部ナビゲーションは、WEBページの上部にナビゲーションを

配置するレイアウトパターンです。

 

 

現在、もっとも普及しているレイアウトパターンでもありますね。

ヘッダー周辺は一番、ユーザーにとって目に付く場所ですので一番使いやすいレイアウトです。

 

上部ナビゲーション型の基本を知る

上部ナビゲーション型のレイアウトでは、基本的にサイトIDのすぐ下に、

グローバルナビゲーションをレイアウトします。

window

もっとも目立つ位置にレイアウトされる為、

訪問ユーザーは迷うことなくWEBサイトを閲覧できますね。

 

 

このレイアウトパターンは、画面左右に固定されるメニューがない為、

画面幅いっぱいにコンテンツを配置できます。

他のレイアウトパターンと比べ、

アイディア次第でさまざまなデザインを実現することができます。

 

一方、ナビゲーション幅が画面幅に制約されてしまう為、

掲載できるメニューに限りがあります。

メニューが多い場合は、違うレイアウトパターンを検討しましょう。

 

上部ナビゲーション型のサンプルサイト

上部ナビゲーションを使用しているサイトを、

見てみましょう。

 

スクリーンショット 2014-11-10 23.25.02

 

デザ学も上部ナビゲーションを採用していますね。

グローバルナビゲーションが2列に配列されています。

これが3列以上になってしまうと、見栄えが悪くなってしまいますね。

 

 

またアップルのサイトも上部ナビゲーションを使用しています。

スクリーンショット 2014-11-16 14.27.26

 http://www.apple.com/jp/から引用

アップルのサイトの場合は、IDとナビゲーションが一緒になっていますね。

元々すごくシンプルのサイトですので、ユーザーにとってよりわかりやすいサイトですね。

また画像を大きく使っていることから、シンプルながら

凄くインパクトのあるサイトです!

 

 

新製品発表はもちろん、キャンペーンを扱う企業であれば有効ですね。

上部ナビゲーションサイトは、非常に人気のあるレイアウトデザインです。

たくさんのサイトで扱われているので、制作する際には色々なサイトを見て、

研究するようにしましょう。

 

 

さて今日の授業はここまで。

不明な点は学長まで連絡ください。



お名前 (必須)

メールアドレス (必須)

ピックアップ記事

  1. 学園長から挨拶

関連記事

  1. WEBデザイン

    【WEBデザインを独学で学ぶ】対比の原則を学ぼう!

    どーも。学長です。今回もレイアウトデザインについて授業をします…

  2. WEBデザイン

    【WEBデザインを独学で学ぶ】近接の原則を学ぼう!

    どーも。学長です。今日の授業は【W…

  3. WEBデザイン

    WEBデザイナーがオススメする7つのフリー素材サイト!

    どーも!学長です!今日はフリー素材のサイトについて解説…

コメント

  1. この記事へのコメントはありません。

最近の記事

ラジオはじめました!

クライアント様サイト

  1. 日記

    選挙のポスターデザインは面白い!
  2. RADIO

    【RGBラジオ第8回】年末ジャンボなどの宝くじや年末年始の過ごし方について
  3. ネットビジネス

    アドセンスのクリック率はデザインで決まる!
  4. WORDPRESS

    素人臭く見えるワードプレス アイキャッチ画像の3つの特徴
  5. WEBデザイン

    1分でできる!アメブロのヘッダーを画像にカスタマイズ!
PAGE TOP