WEBデザイン

【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デザインとは別に右袖にバナーエリアを配置します。

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

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

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

 

 

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

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



お名前 (必須)

メールアドレス (必須)

ピックアップ記事

  1. 学園長から挨拶

関連記事

  1. WEBデザイン

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

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

  2. WEBデザイン

    【WEBデザインの配色を学ぶ】WEBを参考にしよう!

    どーも!学長です!今日はデザ学に届いたメールを紹介します。…

  3. WEBデザイン

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

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

  4. WEBデザイン

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

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

コメント

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

  1. この記事へのトラックバックはありません。

最近の記事

ラジオはじめました!

クライアント様サイト

  1. GIMP

    【GIMPの使い方】グラデーションの作成方法
  2. WEBデザイン

    【WEBデザインを独学で学ぶ】WEBページの構成要素を学ぶ
  3. RADIO

    【RGBラジオ第7回】はじめて買った情報商材について
  4. 日記

    FNS歌謡祭2014 冬 出演者 第4弾が発表された!
  5. 未分類

    【デザインマインド】質量転化の法則とは?
PAGE TOP