【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. この記事へのトラックバックはありません。

SNSでデザガクと繋がろう

ラジオはじめました!

デザインのWAKA、YOUTUBERのこあら、投資のろっく。ビジネスのジャンルが全く違う3人が、ゆるーくビジネスについて語ります。

クライアント様サイト

zaki

せどり・輸入・物販を始めたいならこのサイト!ザキさんがあなたを稼がせます!

ページ上部へ戻る