フレームワーク活用ガイド
押さえておきたい用語
- 三分割法: 画面を縦横それぞれ3等分し、交点や線上に重要な要素を配置する構図テクニック
- パワーポイント（交点）: 4つの分割線が交わる点。視覚的に最も注目を集めやすい位置
- ネガティブスペース: 余白。三分割法では意図的に余白を配置しバランスを取る
- 視覚的重心: 画面の中でもっとも目が引かれるポイント。三分割法の交点と一致させると安定する
1
グリッド作成
画面を縦横3等分する補助線を引く → 交点の活用
こんな悩みに効く#
- 「バナーやヒーロー画像の構図がいつも中央寄りで単調になる」
- 「LPのどこにCTAを配置すれば最も目立つか分からない」
- 「余白の取り方に自信がなく、詰め込みがちになる」
使い方#
補助グリッドを引く
デザインツール（Figma、Sketch等）で画面を縦3等分・横3等分する補助線を表示する。これで9つのブロックと4つの交点が可視化される。ほとんどのツールにはグリッドオーバーレイ機能がある。
主役要素を交点に配置する
最も伝えたい要素（見出し、キービジュアル、CTA）を4つの交点のいずれかに配置する。中央ではなく交点にずらすことで、構図に動きと緊張感が生まれる。
余白を意図的に確保する
9分割のうち3〜4ブロックは余白（ネガティブスペース）として残す。余白が主役要素を引き立て、視線の流れを誘導する役割を果たす。
バランスを確認する
画面全体を引きで見て、視覚的重心が極端に偏っていないか確認する。左上に要素を集中させたなら、右下に対になる要素（テキストやCTA）を配置すると対角線バランスが取れる。
具体例#
アパレルEC — ヒーロー画像の構図改善
状況: トップページのヒーロー画像でモデルを中央配置していたが、CTAボタンとの視線動線が分断されクリック率が低迷していた。
適用プロセス:
- 三分割グリッドを適用し、モデルを左の縦線上に配置
- CTAボタン「新作を見る」を右下の交点付近に移動
- 右上の交点にブランドロゴを配置し、左1/3をモデル、右2/3を余白+テキスト+CTAで構成
成果: CTAクリック率が2.3%→4.1%に改善。ヒートマップで視線がモデル→テキスト→CTAの対角線を自然にたどっていることが確認された。
SaaS LP — 料金セクションのレイアウト最適化
状況: 3つの料金プランを横並びで等間隔に配置していたが、推奨プランが目立たずプラン選択の迷いが生じていた。
適用プロセス:
- 三分割法を適用し、推奨プラン（中央）を上1/3帯にせり上げて視覚的に強調
- 推奨プランのCTAボタンを交点D付近に配置
- 左右の非推奨プランは下2/3帯に控えめに配置し、余白で推奨プランとの差を演出
成果: 推奨プランの選択率が38%→57%に上昇。ユーザーの平均検討時間が45秒→28秒に短縮され、プラン選択の迷いが軽減された。
メディア — サムネイル画像のクリック率向上
状況: 記事サムネイルの被写体が常に中央配置で、一覧ページでの記事間の差別化ができずCTRが低かった。
適用プロセス:
- サムネイル制作ガイドラインに三分割法を導入。被写体を左または右の縦線上に配置するルールを策定
- テキストオーバーレイは被写体の対角の交点付近に配置
- 40枚のサムネイルをA/Bテスト（中央配置 vs 三分割法配置）
成果: 三分割法を適用したサムネイルのCTRが平均28%向上。特に人物写真で効果が顕著で、顔を左上交点に配置したパターンが最も高いCTRを記録した。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| 機械的な交点配置 | 全要素を交点に乗せると逆に不自然になる | 主役1〜2要素だけを交点に配置し他は流れに任せる |
| 余白の恐怖 | クライアントの「もっと入れて」要求で余白を潰す | 余白の視線誘導効果をデータで説明する |
| 三分割法の絶対視 | シンメトリーが効果的な場面でも無理にずらす | 厳格さ・安定感が必要な場面では中央配置を選ぶ |
| モバイル無視 | 横の三分割が狭い画面で機能しない | モバイルでは上下方向の三分割を中心に考える |
まとめ#
三分割法は写真・絵画の世界で数百年使われてきた構図原則であり、デジタルデザインでもその効果は健在だ。中央配置を交点配置に変えるだけで構図に動きが生まれ、視線を意図したCTAへ誘導しやすくなる。ただし万能ではなく、フォーマルなレイアウトや左右対称が求められる場面では中央配置が適切な場合もある。「まず三分割で考え、合わなければ崩す」 というアプローチが実践的だ。