| |
Layout
基本的なレイアウトについて説明していきます。どんなにcoolな画像やフォントを使ってもレイアウトが良くなきゃ台無しだからね。
|
| [基本的なフレームレイアウト][複雑なフレームレイアウト][COOLレイアウトUP] |
|
基本的なフレームレイアウト
レイアウトと一口に言っても、いろいろなレイアウトがありますが、ここではフレームを使った代表的なものを取り上げていきたいと思います。
基本的には以下の３つのパターンに分かれるのではないでしょうか？ |
 |
|
基本１は、ページ上部のフレームにメニュー系統を集め、ページ下部のフレームにコンテンツを表示するというパターンです。当サイトもこのパターンを使用しています。
右はシボレージャパンのHP(http://www.chevrolet.co.jp/)ですが、このHPは基本1のパターンです。
このレイアウトパターンでのメリットは、コンテンツ表示部分が大きく取れるというものです。 |  |
|
基本2は、ページ左側のフレームにメニュー系統を集め、ページ右側にコンテンツを表示するというものです。
東京日産自動車販売のHP(http://www.tokyo-nissan.co.jp/)
です。
左側がメニューです。
横幅を800ピクセルで作成する場合、左側のメニュー部分は200ピクセル以内に押さえたいところです。
現在のHPの横幅の主流が640ピクセルから800ピクセルに変化していることもあり、このようなレイアウトを組んでも、コンテンツページ（右フレーム）が小さくなるというデメリットも解消されてきました。 |  |
|
基本3は、1と2をあわせたパターンでページ上部にメニュー系統を集め、ページ下部左側には、サブメニューを表示し、ページ下部右側にコンテンツを表示するというものです。よくECサイトで見る形ですね。
YELLOW HATのECサイト(http://www.yellowhat.co.jp/frame_es.html)です。 |  |
|
複雑なフレームレイアウト
基本3にさらにもうひとつフレームを設けるパターンもあります。
一番下のフレームには、Copyrightが表示されることが多いですね。
右の図ではわかりやすいようにフレーム部分の表示箇所を大きくしていますが、実際には20ピクセル程度の細いものになると思います。
各フレームに同色を使うことによって、統一感はでますが、コンテンツ表示部分が小さくなりますので、コンテンツ表示部分をすっきりとまとめなければなりません。
|  |
|
TOYATA VISTAのHP(http://www.toyota.co.jp/toyota-vista/index2.html)
です。
ページ上部はグローバルナビゲーションとなっており、 TOYOTAのHP、企業・IR情報などのメニューがあります。左側のメニューはこのTOYOTA
VISTAのHPのメニューとなっております。
コンテンツ表示部分も小さなスペースですが、Flash・バナー・テキストをうまく使いまとめられています。 |  |
|
COOLレイアウト
参考になるかわかりませんが、COOLなレイアウト案（デザイン案）を作ってみました。
皆様のインスピレーションの足しなればと思いますが・・・
|
