ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン

実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。

サイトのキャプチャ

10 Evergreen Website Layouts (that will never go out of style)

下記は各ポイントを意訳したものです。

2カラム、広いヘッダ

これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。
慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイトでは左に置くのが多いです。

サイトのキャプチャ

Uncrunched

3カラム、広いヘッダ

BloggerやWordPressによって流行ったレイアウトで、前述の2カラムと異なる点は、狭い二つのカラムで広い一つのカラムを挟むことです。狭いカラムはナビゲーションなどのエレメントを含み、中央の広いカラムはプライマリコンテンツを配置します。
広いヘッダは三つのカラムをまたぐように配置します。

サイトのキャプチャ

Gary Vaynerchuk

フォーボックス

プロダクトやニュースブログでよく見かけるレイアウトで、広いヘッダと同じ幅のボックスが一つあり、その下に小さいボックスが並んだレイアウトです。小さいボックスは2~5個くらいです。
大きいボックスには打ち出しコンテンツを配置し、小さいボックスにはそれを補足するものや第二の情報を提供します。非常にシンプルですが、ビジュアル的に劇的なレイアウトです。

サイトのキャプチャ

Flickr

不確定なグリッド

不確定なグリッドレイアウトは従来のグリッドベースのレイアウトと比べて、非常に歪んでいるようにします。各エレメントをサイトの幅に広げた不確定なボックスに配置します。これらのボックスの高さと幅は変化することができ、それはレイアウトにビジュアルのエネルギーを加えます。
このレイアウトは非常に難しく、またユーザビリティの問題がつきまといます。しかし、独創的な印象を与えるのは間違いないです。

サイトのキャプチャ

Siete De Febrero

大きいスクリーンショット

ウェブアプリケーションやソフトウェアに適したレイアウトで、ヘッダの直下に大きいサイズのスクリーンショットを配置します。画像は高精細のものを使い、プロダクトを魅力的なものにします。
大きいスクリーンショットに続く情報は、グリッドベースのボックスに、数は倍数(2か4)にします。

サイトのキャプチャ

Paper

シングルカラム

このレイアウトはミニマリズムなデザインではまり、ポートフォリオサイトなどでよく見かけます。たった一つのカラムはだいたい640pxくらいの狭いもので、追加のナビゲーションなどはフッタに追いやられます。ナビゲートすることは難しいですが、ミニマリズムのデザインには最適なレイアウトです。

サイトのキャプチャ

Visual Craftsman

打ち出し画像

このレイアウトはスマートフォンアプリなどでよく見かけます。大きな打ち出し画像を左に配置し、それに続くコンテンツを一つのカラムに配置します。ヘッダは通常ミニマリズムなものにするか無しで、フッタは最低限のものだけにし、メインとなるダウンロードページへユーザーを誘導します。

サイトのキャプチャ

Instagram

固定サイドバー

すべてのナビゲーションエレメントを含んだサイドバーを固定表示にするレイアウトで、プライマリコンテンツはスクロールが可能です。固定サイドバーはナビゲーションを容易にしますが、ユーザビリティに影響を与えてしまいます。

サイトのキャプチャ

Gawker

グリッドベースのギャラリー

フォトグラファーやデザイナーに人気の高いレイアウトで、彼らのポートフォリオに理想的なレイアウトです。横列は2~6カラムにし、縦列でギャラリーに必要な数を増やします。エフェクトはクリエイティブなものが多く、非常にビジュアル的なものが多いのも特徴です。

サイトのキャプチャ

YourNeighbors.de

マガジンスタイル

このレイアウトは従うべき規則はほとんどありません。デザイナーはかなり大きなカンバスを使ってデザインをします。典型的にはもっとも重要なコンテンツが目立つよう配置し、ほかの情報もそのプライオリティに従って整理します。
レイアウトの複雑さはユーザビリティに影響を与えますが、ニュースサイトやオンライン雑誌では多くの情報を掲載することができます。

サイトのキャプチャ

New York Times

top of page

©2016 coliss
o