#002
心理学・認知バイアス
#0023分割の法則
3分割の法則
別名・表記:Rule Of Thirds
UIXHERO Definition
画面を縦横に3等分し、そのグリッド線や交点に重要な要素を配置することで、バランスの取れた美しい構図を作るテクニック。
概要
写真撮影や絵画における基本テクニックの一つ。画面を縦横に3等分する線を引き、その線の上や交点(4つのポイント)に重要な被写体や要素を配置すると、バランスが良く、安定感のある美しい構図になるという法則。 人間の目は自然とこれらのポイントに多くの場合、視線誘導がしやすいとされている。
UXでの活用
- ヒーローエリア: メインのキャッチコピーやCTA(Call To Action)ボタンを3分割の交点付近に配置することで、視線を自然に誘導する。
- レイアウト比率: 画面全体を均等に使うのではなく、1:2の比率(3分の1をサイドバー、3分の2をメインコンテンツ)でカラムを分けるデザインは、黄金比と同様に、視覚的に安定すると感じられやすい
💡 使いどころ
ヒーロー画像の構図や、LPのレイアウト。画面を3分割した交点に重要な要素(CTAやキャッチコピー)を配置すると、バランス良く見える。
⚠️ 注意点・誤用
あくまでガイドラインであり、絶対的なルールではない。あえて崩すことでインパクトを与える(シンメトリーなど)手法もある。
具体例
- カメラのグリッド表示
- Webサイトのサイドバー(1/3)とメインカラム(2/3)の構成
出典・参考文献:
- The Photographer’s Eye(Michael Freeman)