UIXHERO
#002
心理学・認知バイアス
#002

3分割の法則

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)
作成: 2026年1月27日
更新: 2026年2月14日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: