「なんかバランス悪いね」
デザインを提出して、こう言われた経験はないでしょうか。
私自身、先輩に言われたことも、後輩に言ったことが何度もあります。
本人は一生懸命作っている。
でも見た瞬間に「なんか違う」と感じる。
その違和感を、当時の私はうまく言葉にできませんでした。
「どこがですか?」と聞き返されて、答えに詰まる。「うーん、なんか左に寄って見えるんだよね」としか言えない。
経験では分かるのに、ロジックで説明できない。
Webデザインを10年近く続けてきても、この場面は何度も繰り返してきました。
逆の立場、つまり「バランスが悪い」と指摘された側に立つと、これはかなりつらいフィードバックです。
具体的にどこを直せばいいのか分からないまま、なんとなく要素を動かして、結局よく分からないまま提出してしまう。
この記事は、その「なんとなく」を抜け出すための話です。
なぜ「バランスが悪い」は直しにくいのか
このフィードバックが厄介なのは、指摘が”感覚”で、修正対象が”具体”だからです。
言っている側は、見た瞬間の印象として「重い」「傾いている」を感じ取っています。
でもその感覚は、位置・色・コントラスト・視線の流れといった複数の要素が絡み合った結果なので、「ここを直せ」と一点に絞れない。受け取る側は、何を動かせば印象が変わるのか分からない。
だから「バランスが悪い」は、指摘した人もされた人も困る言葉なのです。
これを直すには、感覚を分解する物差しが要ります。
私がたどり着いたのは、「視覚的重心」という考え方でした。
「バランスが悪い」の正体は“視覚的重心”のズレ
デザインを平面として見たとき、人の目は全体を均等には見ていません。
明るい部分、色の濃い部分、顔、文字が密集した場所…そういう「目を引っ張る場所」に視線が偏ります。
この「目を引っ張る度合い」を、私は視覚的な重さと呼んでいます。
重い要素が片側に寄っていると、盤面はその方向に傾いて見える。これが「バランスが悪い」の正体です。
たとえば右上に人物の顔が来たら、その盤面は右上に傾きます。
バランスを取るには、反対側の左下にキャッチコピーなどの「重さ」を置いて釣り合わせる。
やじろべえと同じで、左右の重さが釣り合うと、安定して見えます。
つまり「バランスが悪い」は、視覚的な重さが偏っていて、重心がデザインの中心からズレている状態だと言い換えられます。こう捉えると、直すべきポイントが見えてきます。
どこを見れば直せるか
重心のズレを生む要因は、だいたい次の4つに整理できます。
自分のデザインを見直すときは、上から順にチェックしてみてください。
1. 要素の位置の偏り
最も分かりやすい原因です。主要な要素(写真・見出し・ロゴ)が片側に固まっていないか確認します。
片側が密で反対側がスカスカなら、重心はその密な側に寄っています。
直し方はシンプルで、軽い側に要素を足すか、重い側の要素を散らすか、全体を少しずらして余白を再配分します。
2. 色のトーンと彩度
位置が均等でも、色で重さが偏ることがあります。彩度の高い差し色や濃い色は、面積が小さくても重く感じます。
赤や黒の小さなボタンが片隅にあるだけで、その方向に視線が引っ張られる。
差し色が片側に集中していないか、反対側に同じくらい目を引く色がないかを見ます。
色で釣り合いを取るのは効果的なので、あえて反対側に小さな差し色を一点足すだけで安定することもあります。
3. コントラストと視線の集中点
人の顔や、背景とのコントラストが強い部分、文字が密集したブロックは、強い「重さ」を持ちます。
とくに顔は無条件で視線を集めるので、人物写真を使うときは顔の位置が重心を大きく左右します。
顔がどちらを向いているかも重要です。
視線の先に空間を空けると安定し、視線が画面の外に向くと落ち着かなく見えます。
4. 余白の不均衡
余白は「何もない場所」ですが、重心には大きく効きます。
要素の周りの余白が上下左右で不均等だと、詰まっている方向が重く見える。
意図のない余白の偏りは、たいてい違和感の原因になっています。
自分のバナーで“重心”を客観視する方法
ここまで読んで、「理屈は分かったけど、自分のデザインのどこが重いのかは結局分からない」と感じた方もいると思います。
これは当然で、自分が作ったデザインは、客観的に見るのが一番難しいからです。
どこに何を置いたか分かっているぶん、フラットな目で見られない。私もそうでした。
そこで、視覚的な重心を自動で可視化するツールを作りました。
画像をアップロードすると、その画像の「視覚的な重心」がどこにあるかを、ヒートマップとスコアで表示します。
明度・彩度・色相・顔検出などを組み合わせて、人が「重い」と感じる場所を推定する仕組みです。
完全無料で、アップロードした画像はサーバーに送られないので、制作中のデザインでも安心して使えます。
自分のバナーを入れてみて、重心がどちらに寄っているかを一度見てみてください。
「やっぱり右に寄ってた」と数値で確認できると、どこを直せばいいかの当たりがつきやすくなります。
それでも判断に迷うときの考え方
最後に少しだけ、これからの話を。
AIが大量にデザインを生成できるようになるほど、「それを判断する力」の価値が上がると私は考えています。
作業はAIがやり、品質チェックは人がやる。そのチェックをロジカルにできる人が、デザイナーとして残っていく。
その「ロジカルな判断」の第一歩が、感覚を言語化できる解像度です。
「なんかバランスが悪い」を「重心が右上に寄っているから、左下に重さを足そう」と言い換えられること。
これは小さな違いに見えて、後輩への伝え方も、自分の修正スピードもAIへのプロンプト精度も明確に変わります。
まとめ
「バランスが悪い」と言われたら、まず視覚的重心がどちらに寄っているかを考えてみてください。
原因は、位置・色・コントラスト・余白の4つに整理できます。
そして、自分のデザインは客観視が難しいので、迷ったら重心を可視化して確かめる。
物差しを1つ持つだけで、「なんとなく直す」から「理由を持って直す」に変われます。
ツールがどんなアルゴリズムで重心を判定しているのか、6つの係数の設計やソースコードまで踏み込んで知りたい方は、解説noteにすべてまとめています。
「使う」だけでなく「理解して自分のものにしたい」という方は、こちらもどうぞ。
