未分類

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

どーも、学長です。

今日の授業は・・・

 

 

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

逆L字ナビゲーション型とは?

 

 

今回もナビゲーションのお話です。

簡単に言うと、逆L字型ナビゲーションとは過去にお話しした、

上部ナビゲーション型左袖ナビゲーション型を、

組み合わせたナビゲーションです。

主に情報系サイトなどで使われている事が多いですね。
それでは授業を始めます!

 

逆L字ナビゲーション型の基本を知る

最近では非常に情報量が多いサイトが非常に多いです。

主に逆L字ナビゲーション型は、情報量が多いサイトデザインに多いですね。

gyakuL

 

上部グローバルナビゲーション型を配置して、常に同じ項目を表示させます。

左袖にはローカルナビゲーションを配置することによって、

ページ数の多い、大規模なサイトでも細分化してカテゴリを見やすく整理することができます。

 

 

また、階層構造を2つのナビゲーションで管理できるため、

ツリー型のサイト構造を持つWEBサイトにも適したレイアウトパターンです。

 

逆L字ナビゲーション型のサンプルサイト

逆L字型のサンプルサイトを見ていきましょう。

スクリーンショット 2014-11-17 22.24.12

http://toyota.jp/index.htmlから引用

TOYOTA様のホームページから引用させていただきました。

サイト構造の第1階層を上部のグローバルナビゲーションに割り当てています。

第2階層以降のローカルナビゲーションを左に持って行っています。

これでアルファードのことを調べたい場合は、ローカルナビゲーションへ。

違う車を調べたい場合は、グローバルナビゲーションへ移動できます。

ローカルナビゲーションが右に配置されている

「逆L字ナビゲーション型変形」のサイトも結構多く見られますね。

次に紹介するのは

「逆L字ナビゲーション型+バナーエリア」です。

スクリーンショット 2014-11-17 22.48.48

http://www.softbank.jp/mobile/から引用

ソフトバンク様のサイトは右側にバナーが設置しているサイトデザインです。

外部のWEBページのリンクは、WEBサイト内のリンクと差別化する必要があります。

一般的には、ベースとなるWEBデザインとは別に右袖にバナーエリアを配置します。

このレイアウトデザインを用いることによって、

将来的にバナーが増えたり、各種広告が増えても対応できます。

様々な問題点を解決するために、レイアウトデザインは将来的なことも考え作成していきましょう。

 

 

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

不明な点は学長までお願いします。

ABOUT ME
若旅 宏和
1979年生まれ群馬県在住のグラフィックデザイナー兼ウェブデザイナー。 2014年からデザイン情報発信サイト『デザガク』を開設。 主にクチコミとウェブからの集客で受注し、一切営業しないスタイルを貫いている。 制作実績では3,000万円以上稼ぐアフィリエイターのLP、数千万の売り上げを達成した教材LP、さらに、メジャー格闘技団体「RIZIN」のスポンサーポスターや、ブランディングデザインにおいても好評を得ている。 公益社団法人日本グラフィックデザイナー協会(JAGDA)正会員。