WEBデザイン

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

どーも、学長です。

今日の授業は

 

 

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

左袖ナビゲーション型とは?

 

 

前回は、上部ナビゲーション型についてお話ししました。

今回お伝えするのは、左袖ナビゲーション型です。

左袖ナビゲーション型も、上部ナビゲーション型と同様に人気のあるレイアウトですので

しっかり覚えていきましょう。

 

 

それでは授業を始めます。

 

左袖ナビゲーション型の基本を知る

ページを縦に2分割し、

ナビゲーションとコンテンツを分けるレイアウトです。

weindow

このレイアウトデザインは、常に左側にナビゲーションが表示されるため、

操作性が非常に高く、ユーザーにとって操作しやすいサイトですね。

 

 

左下に伸ばせばいくらでも項目が増やせます。

メニュー項目数の増減に対してもフレキシブルに対応することが可能です。

 

 

しかし、WEBサイトの構造が第2層、第3層にまで及ぶ場合は、

階層化された情報構造を訪問ユーザーが理解しやすい構成にまとめなくてはいけません。 

 

 

また、ナビゲーションが多くなりすぎた場合、画面を下にスクロールしなくてはいけないので

いくつか項目がユーザーに気付かれずにサイトを閉じられてしまう危険性があります。

 

左袖ナビゲーション型のサンプルサイト

ここで左袖ナビゲーションが採用されているサイトを見ていきましょう。

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

岡田珈琲様から引用

岡田珈琲様のサイトは左袖ナビゲーション型になっていますね。

ナビゲーションが多くないので、下までスクロールの必要がないですね。

凄くバランスの良いサイトにまとまっています。

川口市立科学館様の左袖ナビゲーション型を採用しています。

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

川口市立科学館様の左袖ナビゲーション型は、ただ背景色を加えているだけではなく、

「天文の部屋」には惑星のイラストを背景に、

「太陽の部屋」には太陽のイラストを入れていますね。

イラストでジャンルを区別していて、ユーザーにとって見やすいサイトになっています。

ただ単に背景色を入れるより、デザイン的にもいいですよね。

ナビゲーションをどこに配置するかによって、ユーザーの滞在率はもちろん、

デザインもかなり変わってきます。

今回の左袖ナビゲーションを採用したい場合は、

左袖ナビゲーションを使用しているサイトをくまなく調べ、研究しましょう。

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

不明な点などありましたら学長まで連絡ください。



お名前 (必須)

メールアドレス (必須)

ピックアップ記事

  1. 学園長から挨拶

関連記事

  1. WEBデザイン

    【WEBデザインを独学で学ぶ】フォントの意味を学ぶ

    どーも!学長です。今日の授業は・・・…

  2. WEBデザイン

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

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

  3. WEBデザイン

    サイト直帰率の理想は?直帰率を下げる為のポイントを伝授!

    どーも!学長です!今日は直帰率について解説をしていきた…

  4. WEBデザイン

    【WEBデザインを独学で学ぶ】レイアウトを基礎から学ぼう!

    どーも。学長です。今日はWEBデザインの授業です。&n…

  5. WEBデザイン

    ヘッダー画像の作り方を学ぶ!(個人用ブログ編)

    どーも!学長です!今日はヘッダー制作の授業をします。&…

コメント

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

最近の記事

ラジオはじめました!

クライアント様サイト

  1. 起業の心得

    選り好みしない・時間を守る
  2. WEBデザイン

    【ご自由にどうぞ】404エラー ページを面白くしてみた!
  3. 日記

    ぐんまちゃんの和菓子がかわいい!
  4. RADIO

    【RGBラジオ第12回】WAKAのデザイン講座その1 サイトやバナーのデザインと…
  5. ネットビジネス

    物販アフィリエイトで報酬を上げる方法!
PAGE TOP