ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
Post on:2012年5月25日
sponsors
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。
10 Evergreen Website Layouts (that will never go out of style)
[ad#ad-2]
下記は各ポイントを意訳したものです。
[ad#ad-2]
2カラム、広いヘッダ
これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。
慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイトでは左に置くのが多いです。
3カラム、広いヘッダ
BloggerやWordPressによって流行ったレイアウトで、前述の2カラムと異なる点は、狭い二つのカラムで広い一つのカラムを挟むことです。狭いカラムはナビゲーションなどのエレメントを含み、中央の広いカラムはプライマリコンテンツを配置します。
広いヘッダは三つのカラムをまたぐように配置します。
フォーボックス
プロダクトやニュースブログでよく見かけるレイアウトで、広いヘッダと同じ幅のボックスが一つあり、その下に小さいボックスが並んだレイアウトです。小さいボックスは2～5個くらいです。
大きいボックスには打ち出しコンテンツを配置し、小さいボックスにはそれを補足するものや第二の情報を提供します。非常にシンプルですが、ビジュアル的に劇的なレイアウトです。
不確定なグリッド
不確定なグリッドレイアウトは従来のグリッドベースのレイアウトと比べて、非常に歪んでいるようにします。各エレメントをサイトの幅に広げた不確定なボックスに配置します。これらのボックスの高さと幅は変化することができ、それはレイアウトにビジュアルのエネルギーを加えます。
このレイアウトは非常に難しく、またユーザビリティの問題がつきまといます。しかし、独創的な印象を与えるのは間違いないです。
大きいスクリーンショット
ウェブアプリケーションやソフトウェアに適したレイアウトで、ヘッダの直下に大きいサイズのスクリーンショットを配置します。画像は高精細のものを使い、プロダクトを魅力的なものにします。
大きいスクリーンショットに続く情報は、グリッドベースのボックスに、数は倍数（2か4）にします。
シングルカラム
このレイアウトはミニマリズムなデザインではまり、ポートフォリオサイトなどでよく見かけます。たった一つのカラムはだいたい640pxくらいの狭いもので、追加のナビゲーションなどはフッタに追いやられます。ナビゲートすることは難しいですが、ミニマリズムのデザインには最適なレイアウトです。
打ち出し画像
このレイアウトはスマートフォンアプリなどでよく見かけます。大きな打ち出し画像を左に配置し、それに続くコンテンツを一つのカラムに配置します。ヘッダは通常ミニマリズムなものにするか無しで、フッタは最低限のものだけにし、メインとなるダウンロードページへユーザーを誘導します。
固定サイドバー
すべてのナビゲーションエレメントを含んだサイドバーを固定表示にするレイアウトで、プライマリコンテンツはスクロールが可能です。固定サイドバーはナビゲーションを容易にしますが、ユーザビリティに影響を与えてしまいます。
グリッドベースのギャラリー
フォトグラファーやデザイナーに人気の高いレイアウトで、彼らのポートフォリオに理想的なレイアウトです。横列は2～6カラムにし、縦列でギャラリーに必要な数を増やします。エフェクトはクリエイティブなものが多く、非常にビジュアル的なものが多いのも特徴です。
マガジンスタイル
このレイアウトは従うべき規則はほとんどありません。デザイナーはかなり大きなカンバスを使ってデザインをします。典型的にはもっとも重要なコンテンツが目立つよう配置し、ほかの情報もそのプライオリティに従って整理します。
レイアウトの複雑さはユーザビリティに影響を与えますが、ニュースサイトやオンライン雑誌では多くの情報を掲載することができます。
sponsors
