TOP UX用語 デザイン・情報設計 1/3の法則

1/3の法則 Rule of Thirds

デザインや写真などのレイアウトを美しくみせ、全体の安定感を保つレイアウト技法。

デザインや写真のレイアウトを美しくみせるための技法の1つ。「三分割法」ともいう。
1/3の法則を適用する際は、対象の紙面を縦横に均等に3分割、合計9分割する。
分割した線上や分割線の交差点(クラッシュポイント)上に、デザインの重要な要素を配置する。

1/3の法則を適用していない場合の例

1/3の法則を適用していない場合の例

分割線を適用

分割線を適用

1/3の法則を適用し、全体的な構図を捉え直した場合の例。分割線の交差点上に主要な要素である人物を配置している。

1/3の法則を使用しレイアウトを変更した例

1/3の法則を使用しレイアウトを変更した例

レイアウトが最も安定するパターンは、全体の中央に要素を配置すること(中心構造)である。
中心構造の場合、レイアウトが安定することで安定感や堅実さといった印象はうまれるがメリハリのない凡庸なレイアウトになりがちである。1/3の法則を用いることにより、中心構造の様に安定感を保ちつつ、強弱のあるメッセージ性の強いレイアウトを組める。例えば上記の写真の場合、海の領域が大きく確保され、これによって海の広大さが強調されたり釣り人が気ままに釣りを楽しむ様子がより強く伝わってくる。

「1/3の法則」は1797年に彫刻師・製図者であったJohn Tomas Smithジョン・トーマス・スミスの著書「Remarks on Rural Scenery」で提唱された。

John Thomas Smith

(引用:Wikipedia「John Thomas Smith (engraver)」より)

構図を美しくみせる1/3の法則のポイント

「1/3の法則」を適用し、構図を美しくみせるポイントは以下の2点だ。

  1. 分割された線の交差点や分割線上に、重要な要素を配置する。
  2. 縦横3分割された領域を使う方法を考える。

具体例1:人物写真のレイアウト

例えば、以下の写真をみて、無意識に美しいと感じないだろうか?

無意識に美しいと感じる女性の写真

無意識に美しいと感じる女性の写真

人物がやや左側に配置されているが、バランスが悪い印象は受けず、人物に視線が集中する。美しいと感じる理由は、1/3の法則が用いられているからだ。確認するために、1/3の法則を適用して、写真の領域を縦と横にそれぞれ3等分、合計9等分にしてみる。

写真に1/3の法則を適用する

写真に1/3の法則を適用する

縦横3分割して交差点を取る。1/3の法則のポイントと照らし合わせると下記の通りになる。

ポイント1:9分割された線の交差点や分割線上に、重要な要素を配置する。

重要な要素である人物の顔と交差点が重なっている。

ポイント2:縦横3分割された領域のレイアウトを使う方法を考える。

横軸(水平方向)におけるレイアウト比率をみると人物と背景が2:1の比率で分割している。

2:1に分かれた比率

2:1に分かれた比率

人物の領域:背景の領域 = 2:1
同じ様に、縦軸(垂直方向)におけるレイアウト比率をみると、顔と顔以外の要素の比率が2:1に分割されている。

縦に2:1

縦に2:1

顔の領域:顔以外の領域 = 2:1
今回のレイアウト比率では、縦軸・横軸ともに2:1というレイアウト比率が用いられていて、縦軸・横軸どちらもこの写真における重要な要素である「人物の顔」に多くの領域が充てられている。

具体例2:紙面のレイアウト

今度は1/3の法則を、紙面のレイアウトに活用してみる。例えば、WebデザインやUIデザインにおいて、写真とテキストを併用したレイアウトデザインを行う場面は多く、1/3の法則を適用するとキレイなレイアウトを実現できる。

1/3の法則を利用した人物紹介ページ

1/3の法則を利用した人物紹介ページ

1/3の法則を用いて、架空の人物紹介ページをイメージしたサンプルを作成した。1/3の法則を適用し、縦横3分割に線を引く。

1/3の法則を適用させる

1/3の法則を適用させる

ポイント1:比率を「人物:人物以外 = 1:2」に分ける。

人物と人物以外の領域を1:2の比率に分ける。人物紹介ページであるため、人物の写真より人物名やプロフィールのテキストの方が重要な意味を持つ。

ポイント2:個別の領域に注目する人物以外の領域を2分割し、比率を「人物名:プロフィール詳細 = 2:1」に分ける。

縦軸(垂直方向)をみると、Izabella Tabakovaという人物名の領域とMODEL・ACTRESS以下のプロフィール詳細の領域が2:1の比率である。人物名の方が重要であるため、領域の比率を大きくしている。

1/3の法則を適用すると美しく見える理由

「フィボナッチ数列」による整数比によって自然に美しく見える。

フィボナッチ数列は、「最初の2項が1で3項以降のすべての項が直前の2項の和」になっている数列だ。イタリアの数学者、レオナルド・フィボナッチにちなんで命名された。具体的には、次の様な数列だ。

フィボナッチ数列の図解

フィボナッチ数列の図解

フィボナッチ数列の整数比を適用すると美しくみえる理由は、隣り合う2つの整数比が全て黄金比に近いからだ。黄金比とは、約1:1.618の比率で表現される、最も美しいとされている比率の1つである。
フィボナッチ数列の場合、整数が大きくなればなるほど、その比率がより黄金比に近づいていく。

1/3の法則とフィボナッチ数列の関係

1/3の法則とフィボナッチ数列の関係

1/3の法則では、このフィボナッチ数列上の「3」「2」「1」という整数比を適用しており、全体を通して黄金比に近いレイアウト比率が取られている。これが美しく安定感を与える理由のひとつである。

初心者でも簡単にキレイなレイアウトを組める便利な技法

WebデザインやUIデザイン初心者の方にとって、バランスよくレイアウトするのは、難しい。紙面を縦横に1/3に均等に分割するだけで、レイアウトの基礎が完成するので1/3の法則はデザイン初心者にオススメだ。
レイアウトの基礎が完成したらデザインで重要な要素は何かを考え、2つのポイントに従ってレイアウトを考えてみると、だんだん最適なレイアウトが浮かび上がってくる。

関連用語

参考文献

「UX用語」のカテゴリー