構図とバランス
釣り合いの取れた画面は、止まって見えます。崩すなら、事故に見えないところまで崩します。
図の中身を文字で読む
- 対称 格式・信頼・静けさ／視線は中央で止まる 非対称 動き・現代性／視線が動きだす 余白 周りが空くほど、その要素は高く見える
- 構図で見ているのは「面積」ではなく「視覚的な重さ」。小さくても濃い要素は、大きくて淡い要素と釣り合う。
- 対称は釣り合いが自動で成立する。非対称は自分で重さを計算する。だから非対称のほうが難しい。
ひと目で#
- バランス
- 視覚的な重さが釣り合い、不安定に見えない状態
- 対称
- 軸を挟んで鏡写し。格式、信頼、静けさ。視線は中央で止まる
- 非対称
- 軸を持たず、重さの計算で釣り合わせる。動きが生まれる
- 余白
- 空いている量。周りが空くほど、その要素は高く見える
- 緊張
- わざと釣り合いを崩して生む効果。半端に崩すと事故に見える
使い分け#
| こうしたい | 選ぶ構図 |
|---|---|
| 信頼と格式を出したい（士業、医療、金融、行政） | 対称 |
| 動きと今らしさを出したい | 非対称 |
| 1つの要素の価値を高く見せたい | 余白を大きく取る |
| 情報を探しに来る読者が多い | 余白を抑えて密度を上げる |
| 印象に残したい、わざと不安定にしたい | 緊張。思い切って外す |
間違えやすいところ#
- バランスとは左右対称のこと対称は取り方の1つ。非対称でも釣り合いは取れる
- 面積で釣り合いを判断する小さくても、彩度が高ければ重い
- 余白は多いほど良い求人、物件検索、業務画面では、余白はただの移動距離になる
- 左に寄せたから非対称右に釣り合う何かがなければ、ただの空白
- 数十pxだけ位置を外す意図ではなく事故に見える。外すなら思い切って外す
図の中身を文字で読む
- ✕ 面積で判断する ○ 重さで釣り合わせる
- 同じ大きさでも、彩度の高い面が重い 面積の差で、彩度の差を打ち消す
- 同じ面積を並べたのに、濃い面のほうへ傾く 大きい淡い面と、小さい濃い面が釣り合う
- 重さは面積だけでは決まらない。彩度、明度差、孤立、動きが全部足される。
比率について#
黄金比（約1:1.618）や三分割法は、分割の候補を1つに絞るための道具です。美しさを保証はしません。同じ役目は 3:2 や 2:1 でも果たせます。根拠として持ち出すなら、その前提ごと持ち出します。
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
建築事務所のトップページです。全セクションが中央揃えの左右対称で、施工写真もコピーも同じ幅の帯に収まって流れていきます。整ってはいるが、どこにも重心がなく、主役のはずの写真が並列の1枚に埋もれています。
ヒーローを非対称に組み替えます。grid-template-columns: 2fr 1fr で写真に2、コピーに1の幅を与え、視線が写真から入ってコピーへ抜ける流れを作ります。代わりに会社概要と問い合わせは対称のまま残します。信頼を担うページまで崩すと、事務所全体が落ち着きを失うからです。崩す場所と守る場所を分けるのが構図の判断です。
確認する#
- 主役のブロックが画面面積の6割以上を占める
- 左に寄せた要素の対角に、釣り合う相手が置かれている
- ずらした位置が、事故ではなく意図に見えるまで外れている
使えるパターン#
このページで扱う語#
このページで扱う語を並べる本文では太字5 語
語の名前から引くなら用語索引へ。
- リズム
- 要素と間隔の繰り返しが生む、視線を運ぶ規則的な流れ。
- 黄金比
- 約 1 : 1.618 の比率。全体と大部分の比が、大部分と小部分の比に等しくなる分割。
- 三分割法
- 画面を縦横それぞれ3等分し、その分割線または交点上に主要素を置く構図法。
- 比率
- 2つ以上の量の比の関係。デザインでは寸法・面積・分量の割り当てを決める根拠になる。
- スケール
- 要素どうしの大きさの関係。および、その関係を体系化した値の集合。
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
揃っていない端を探す。左端が1本の線に乗っているか、余白が同じ刻みかを見る。
このコードで動いている見本です
左揃えに戻す。中央揃えは端が揃わないので、要素が増えるほど落ち着かなくなる。
このコードで動いている見本です
先に版面を決め、写真を断ち落とすかどうかを決める。半々にすると、どちらも主役にならない。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は並べる・揃えるにまとめてある。逆引きには全188件。
構図を見比べる#
同じ見出しと同じ写真枠で、左右対称のヒーローと非対称のヒーローを組みました。違いは配置だけです。
左右対称
石窯の火は、朝三時から。
常盤野のパン工房 つきひ。焼きたてを、いちばん近くで。
店舗のご案内
非対称（2fr / 1fr）
石窯の火は、朝三時から。
常盤野のパン工房 つきひ。焼きたてを、いちばん近くで。
店舗のご案内
対称は重心が中央に据わって視線も中央から入り、非対称は重さが左の見出しへ寄って、視線は見出しから右の写真へ抜けます。
実装の形はパターン集にあります: テキストのみのヒーロー（対称）・左右分割ヒーロー（非対称）
出典#
- Kimberly Elam『Geometry of Design』
- Interaction Design Foundation「What is User Interface (UI) Design?」