配置をマスターして「機能するレイアウト」を作る大切なポイント

サイト構築 -デザイン

Post on:2010年7月6日

はじめに

レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。

もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。

下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。

このレイアウトでは、見出し、テキスト、モデルの顔が1/3ルールに従って配置されており、見出しとリンクはモデルの唇から抽出したカラーを使用し、モデルの肩のカーブが行動への呼びかけへと導いているといったテクニックを使用しています。

このレイアウトで重要なのは、テキスト、写真、見出しの構図です。もし、この中の一つでも適切ではない使い方すると、レイアウトは失敗したものとなるでしょう。

相互尊重に基づいた配置

では、配置はどのようにすればよいのでしょうか？
グラフィック、写真、テキストなどはページに配置するときにはっきりと分かります。いくつかのものは他のものよりよく機能し、いくつかのものは特定の方法で配置されたときだけ機能します。下記の二つのレイアウトでこの機能をみてみましょう。

「Figure1」は上記のレイアウトで使用しているものです。グレーのブロックがそれぞれ見出し、写真、テキストを表しています。「Figure2」はそれを逆転させたものです。二つの小さいエレメントによってバランスがとられた一つの大きいエレメントという構成です。

写真で使用しているモデルは左を見ていることに注目してください。「Figure1」ではモデルはテキストを見ています。
「Figure2」ではテキストから目をそらしたものとなっています。これはモデルがカメラを見ている正面のものであれば、うまく機能したかもしれません。しかし目をそらしているため、インパクトを失っています。これは重要なポイントです。

モデルはテキストに興味を示して、逆転させるとテキストを無視します。エレメントの配置はポジティブであるのか、ネガティブであるのかを決めるものとなります。

ランドマークに基づいた配置

エレメントは時々、スペースや配置についてヒントを与えることがあります。
前述ではモデルの目が左を見ていることについて注意を払いました。ここでは写真とテキストから導かれるビジュアルのヒントをみてみましょう。

上記の構成には、タイポグラフィとイメージのランドマークから導かれる暗黙のラインがたくさんあります。

モデルの目と唇と鼻を結んだ線は、右のテキストのカラムの端になります。（図左上）
左のテキストのカラムは見出しの左端と合っています。テキストの右端はモデルの髪に合っていますが、右のカラムと矛盾させないためには短すぎます。（図左上）
モデルの顔（特に目と口）は見出しの縦のスペースを定義します。（図左下）
写真の下は1/3ルールの下として構成されています。（図右下）
モデルの目は1/3ルールの構成の先頭に位置しています。（図右下）
モデルの顔の中心と見出しの右側がそれぞれ、1/3, 2/3の位置になります。（図右上）

いくつかのランドマークは他のものより多くの影響力をもっています。例えばモデルの目がシルエットよりいっそう影響力をもっているかどうかデザイナーと写真家で討論することができますが、ランドマークに基づいたレイアウトはずっと効果があります。

メインとなるもので調和した配置

時々、非デザイナーがページにあった適切な方法に基づいてエレメントの配置します。その際、スペースは確かに重要です。しかし、むやみに使用するだけでは良いデザインになりません。

「Figure5」はページのスペースにエレメントを一列に並べたものです。「Figure6」は写真を中心にレイアウトの基礎を築いたものです。合理化された外観になりました。

「Figure7」は見出しから下に顔、そして上にテキストと視線が跳ねるので非能率的です。最もシンプルなラインは直線です。「Figure8」はその直線に配置したもので、簡単に視線を方向付けます。このレイアウトのポイントは見出し、顔、テキストの配置が狭い領域に収まっていることです。

ユーザーは通常、モデルの顔、見出し、テキストに目を向けます。それは見るべき三つの異なるエリアです。この三つを一列に配置することはレイアウトにフォーカスを与えます。

機能するレイアウトとは

下の三つのレイアウトではすべて同じエレメント（見出し、写真、テキスト）を使用しています。

「1」のレイアウトは最も多くの「十分な空間」を持っています。「2」のレイアウトはテキストに重心をおいたものです。「3」のレイアウトはバランスを得るためにネガティブなスペースを使用しています。
これら三つのレイアウトではすべてランドマークを使用していますが、すべて異なる方法です。どれが一番よくみえますか？

ビジュアルのランドマークはルールではなく、オポチュニティです。最初のデザインをもう一度見てみてください。