どーも、学長です。
今日の授業は
【WEBデザインを独学で学ぶ】
左袖ナビゲーション型とは?
前回は、上部ナビゲーション型についてお話ししました。
今回お伝えするのは、左袖ナビゲーション型です。
左袖ナビゲーション型も、上部ナビゲーション型と同様に人気のあるレイアウトですので
しっかり覚えていきましょう。
それでは授業を始めます。
左袖ナビゲーション型の基本を知る
ページを縦に2分割し、
ナビゲーションとコンテンツを分けるレイアウトです。
![weindow](https://dezagaku.com/wp-content/uploads/2014/11/weindow.jpg)
このレイアウトデザインは、常に左側にナビゲーションが表示されるため、
操作性が非常に高く、ユーザーにとって操作しやすいサイトですね。
左下に伸ばせばいくらでも項目が増やせます。
メニュー項目数の増減に対してもフレキシブルに対応することが可能です。
しかし、WEBサイトの構造が第2層、第3層にまで及ぶ場合は、
階層化された情報構造を訪問ユーザーが理解しやすい構成にまとめなくてはいけません。
また、ナビゲーションが多くなりすぎた場合、画面を下にスクロールしなくてはいけないので
いくつか項目がユーザーに気付かれずにサイトを閉じられてしまう危険性があります。
左袖ナビゲーション型のサンプルサイト
ここで左袖ナビゲーションが採用されているサイトを見ていきましょう。
![スクリーンショット 2014-11-16 16.07.47](https://dezagaku.com/wp-content/uploads/2014/11/4c42551dac596d9a8ecb3d50ee400fe2.png)
岡田珈琲様から引用
岡田珈琲様のサイトは左袖ナビゲーション型になっていますね。
ナビゲーションが多くないので、下までスクロールの必要がないですね。
凄くバランスの良いサイトにまとまっています。
川口市立科学館様の左袖ナビゲーション型を採用しています。
川口市立科学館様の左袖ナビゲーション型は、ただ背景色を加えているだけではなく、
「天文の部屋」には惑星のイラストを背景に、
「太陽の部屋」には太陽のイラストを入れていますね。
イラストでジャンルを区別していて、ユーザーにとって見やすいサイトになっています。
ただ単に背景色を入れるより、デザイン的にもいいですよね。
ナビゲーションをどこに配置するかによって、ユーザーの滞在率はもちろん、
デザインもかなり変わってきます。
今回の左袖ナビゲーションを採用したい場合は、
左袖ナビゲーションを使用しているサイトをくまなく調べ、研究しましょう。
さて今日の授業はここまでです。
不明な点などありましたら学長まで連絡ください。
![](https://dezagaku.com/wp-content/uploads/2017/08/dezamaga.png)