なぜズレて見える?UIデザインに潜む「錯視」と幾何学的バランスの補正テクニック
FigmaやAdobe XDなどのUIデザインツールで、丸いボタンの中に三角形の「再生(Play)アイコン」を配置し、ツール上の「中央揃え(Align Center)」機能を使ったとき、なぜかアイコンが左に寄っていて、見た目のバランスが悪く感じたことはないでしょうか。数学的には「完璧に中央」であるはずの配置が、なぜ私たちの目には「ズレて」見えてしまうのか。その背景には、人間の脳の知覚メカニズムである錯視(視覚的な錯覚)が深く関わっています。今回は、UIデザインにおける幾何学的中心と視覚的重心の乖離を解消する「光学調整(Optical Alignment)」のテクニックを解説します。
数学的な中心と、脳が感じる「視覚的重心」の乖離
デザインツールは、オブジェクトを配置する際、その形状を囲む仮想の長方形である「境界ボックス(Bounding Box)」を基準に整列を計算します。 しかし、人間の脳は境界ボックスではなく、図形自体の「質量(ビジュアルウェイト)」の分布に基づいて中心を感じ取っています。
1. 三角形の「重心」の罠
再生ボタンのような正三角形は、底辺側に最も多くのピクセルが集まり、頂点に向かうにつれて質量が減少します。 数学的に境界ボックスの幅の中央で揃えると、面積の大きい底辺側に視覚的重心が偏るため、脳は「左に寄っている(右側が軽すぎる)」と知覚してしまうのです。この不快感を防ぐため、デザイナーは直感的に三角形を右側に数ピクセル「押し出す(nudge)」必要があります。
2. 丸と四角の錯視(ミュラー・リヤー錯視との類似性)
丸型と四角型のアイコンを横に並べ、同じ幅・高さ(例: 40px)で配置した場合、丸型のアイコンの方が小さく見えます。
これは、四角形が四隅までピクセルで埋まっているのに対し、円形は四隅が削られているため、視覚的な表面積が小さくなるからです。これを均等に見せるためには、丸型アイコンの直径を数ピクセル大きく設計する(例えば 42px にする)ことで、視覚的なバランスを取ります。
現場で役立つ「光学調整」の補正テクニック
デジタルデザインにおける美しさは、ツールの数値ではなく、人間の知覚に適合して初めて成立します。以下は、デザイン現場で実践されている代表的な光学補正の手法です。
1. 三角形の「面積重心」でアラインする
再生ボタンなどの三角形を円の中央に配置する際は、境界ボックスではなく、三角形の幾何学的な「重心(Centroid = 3つの頂点から対辺の中点に引いた線の交点)」を計算し、そこを円の中心に合わせます。 正三角形の場合、境界ボックスの中央から右側に「底辺の幅の約1/6(または境界ボックス幅の8%程度)」シフトさせると、人間の目にはほぼ完璧な中央配置に見えます。
2. テキストとアイコンの垂直揃え
リストやメニューでアイコンとテキストを並べる際、ツールの「垂直方向中央(Align Middle)」を適用すると、英語のフォントの「ディセンダー(yやgの下に突き出た部分)」やアセンダーの影響で、微妙にベースラインが狂って見えることがあります。この場合は、大文字の高さ(Cap Height)を基準に視覚的な中心を見極め、手動で1〜2ピクセル微調整を行います。
3. 太さの異なるオブジェクトの整列
太い線の矢印と、細い文字を同じラインに揃える際も、線幅が細い方が視覚的に引っ込んで見えるため、わずかに外側にずらすことで整列感を強調します。
まとめ:目にとっての「正しさ」を信じる
デザインツールがどれほど進化し、整列の自動化が進んでも、最終的にデザインを解釈するのは人間の「目」と「脳」です。ツールの「数学的な完璧さ」に依存せず、自分の目の違和感を信じて、手動で数ピクセルを調整するクラフトマンシップが、UI全体の洗練されたクオリティを生み出します。「完璧に整列しているのに、何か気持ち悪い」と感じたら、それはあなたの目が錯視を捉えている証拠であり、光学調整が必要なサインなのです。
お役立ち情報
- 📄 Figma Blog - Designing with optical effects
- Figma公式による、幾何学的な形状と視覚的な整列における光学調整の具体的なチュートリアルです(英語)。
- 📄 note - デザインにおける「錯視」と光学調整の基本
- 日本のプロダクトデザイナーが解説する、アフォーダンスと錯視補正の具体例をまとめた日本語の記事です。
- 📄 Interaction Design Foundation - Gestalt Principles: Figure-Ground and Visual Weight
- UXデザインにおけるゲシュタルト原則と、視覚的重みのバランス設計に関する詳細な解説記事(英語)です。
出典: