概要
グラフィックデザインの文脈でよく共有される視覚調整のTips、見たことある人も多いのではないでしょうか。
「形状の違うもの、例えば四角・円・三角を並べるとき、円と三角は余白を詰めて少し大きくした方が視覚的に揃って見える」
これはグラフィックデザインでは正しいテクニックです。
しかし、UIデザインで必ず適用した方が良いかというと、筆者はNoだと考えます。
この記事では、UIデザインで視覚調整を控えめにすべきケースと、その場合代わりにどうすべきかを解説します。
この視覚調整の問題は画像、ボタンなど様々なグラフィック要素で発生しますが、この記事では説明をシンプルにするため、一貫してアイコンを例に挙げて進めていきます。
グラフィックデザインにおける視覚調整
最初に貼ったTipsについて、画像を見ただけでは理解しづらい部分もあるかと思うので解説します。
いまいち（補正なし）
四角・円・三角の端から端までの距離を20pxで統一しています。
一見正しそうですが、円と三角は離れて見えるのと、視覚的に小さく見えてしまいます。
平均的（距離補正あり）
図形の法線方向（垂直に引いた補助線）からの距離を20pxで統一しています。
これにより視覚的な図形の間隔は揃いますが、まだ円と三角が小さく見えます。
良い（距離・サイズ補正あり）
法線方向の距離を20pxで統一し、さらに円と三角を少し大きくしています。
これにより、3つの図形の距離も大きさも揃って見えます。
この「良い」アプローチは、グラフィックデザインでは間違いなく正しいテクニックです。
では、なぜこれがUIデザインでは問題になるのでしょうか。
UIデザインではこの手法が向いていない理由
理由1: 実装の複雑さ
Webにしてもネイティブアプリにしても、UIは最終的にコードで表現されます。
今回のものがアイコンだとして、視覚調整を施すなら次のようなコードになるでしょう。
例としてCSSで記載します。
.icon-list {
display: flex;
align-items: center;
}
.icon-square {
width: 40px;
height: 40px;
}
.icon-circle {
width: 43px; /* サイズ調整 */
height: 43px;
margin-left: 20px; /* 四角と円の距離はそのまま20px */
}
.icon-triangle {
width: 48px; /* サイズ調整 */
height: 41px;
margin-top: 0.5px; /* 重心を調整 */
margin-left: 14px; /* 円と三角の距離を水平方向に直すとこれくらい */
}
問題点としては次のようなものが挙げられます。
- どの値がどの意図なのか、後から見ても分からない
- 法線方向の距離を結局水平垂直の距離に直す必要がある
- サイズや重心の調整に小数点の値を使わないといけない場合がある
- デザインシステムやコンポーネントライブラリとして扱いづらい
理由2: 変更への弱さ
チラシやポスターなどであれば、一度作った後に細々とした変更は発生しません。
しかしUIは違います。
リリースした次の日に「やっぱり並び順を変えたい」とか「2番目と3番目の間に別の要素を入れたい」とかのタスクが発生する可能性も十分にあります。
その場合、並び順が変わるたびに全ての間隔を再調整する必要が出てきます。
例えば
- 「四角・円・三角」→「円・三角・四角」に変更
- デザインツールで再度視覚調整
- 各図形の左右の余白を測定し直し
- 開発者に新しい数値を共有
これを毎回繰り返すのは非効率的です。
その度に細かい視覚調整をしていてはいたずらにリードタイムが伸びてしまいます。
細部まで美しさに拘ることは良いことですが、一般的には視覚調整で得られるアウトカムは少なく、そこに時間をかけていては他の仕事に支障が出てしまうでしょう。
理由3: デザイナーとエンジニアのコミュニケーションコスト
視覚調整を施した場合、しっかりした申し送りが無いとデザイナーとエンジニア間のコミュニケーションコストも増加します。
「0.5pxの違いは意図的なのか、測定誤差なのか?」
「微妙な位置調整は全てのブレークポイントで必要なのか?」
「この調整値は他の類似要素にも適用すべきなのか?」
こうした細かい確認のやり取りが頻繁に発生し、双方の生産性を下げてしまいます。
推奨する解決策: 固定サイズのWrapper
基本的な考え方
ではどうすれば良いかというと、初めから固定サイズのwrapperを用意しておくか、そのように作られた素材を使うのが良いです。
このように、形状が違ってもそれを吸収できるようなwrapperを作っておきます。
各アイコンsvgのviewPortとviewBoxを固定サイズ（例: 24x24px）にして、図形を視覚的な中央に配置しておきます。
これにより、形状に関わらず常に同じ扱いができます。
GoogleのMaterial SymbolsやAppleのSF Symbolsなど、実際の大規模デザインシステムでもこの方式が採用されています。
実装例
<div class="icon-list">
<img class="icon" src="path/to/icon-square" alt="..."/>
<img class="icon" src="path/to/icon-circle" alt="..."/>
<img class="icon" src="path/to/icon-triangle" alt="..."/>
</div>
.icon-list {
display: flex;
gap: 20px; /* シンプルに20pxの間隔 */
}
.icon {
width: 40px;
height: 40px;
}
メリット
- 実装が簡単: 整数値のみ、複雑な計算不要
- 変更に強い: 並び順を変えても再調整不要
- デザインシステム化しやすい: 全てのアイコンで同じルール
- 開発者フレンドリー: 意図が明確、保守しやすい
デメリット
見た目の完璧さは視覚調整に劣ります。
手動で視覚調整を施したものが100点だとしたら、こちらのやり方では90点くらいになるでしょうか。
「90点で十分」の考え方
視覚調整あり（100点）の場合
- 見た目: 完璧
- 実装コスト: 毎回30分
- 変更コスト: 毎回15分
Wrapper方式（90点）の場合
- 見た目: 十分良い
- 実装コスト: 初回30分
- 変更コスト: ほぼ0
上の図のように、どんな並び順でも90点の見た目になります。
そのため浮いた実装時間で他のことを考えることができます。
限界効用逓減の法則
90点→100点に上げるコストと、50点→90点に上げるコストを比較すると、前者の方が圧倒的に高くつきます。
もちろん毎回100点を狙うに越したことはありませんが、限界効用逓減を考えると、ほとんど手間なく90点くらいのアウトプットができるのは良い選択肢だと思っています。
プロダクト開発では、「素早く90点」を積み重ねる方が、「ゆっくり100点」より価値が高いことがほとんどです。
例外: 視覚調整が必要なケース
もちろん、全てのケースでwrapper方式が正解というわけではありません。
視覚調整を検討すべき場面
1. ロゴ・ブランディング要素
企業ロゴ、アプリアイコンなど、見た目の印象が重要かつ、一度作ったら変更頻度が低いものは視覚調整の価値が高いです。
2. ランディングページのヒーローセクション
ファーストビューの印象が重要で、A/Bテスト後は固定化されるような場所では、100点を目指す価値があります。
3. プレゼンテーション資料
UIではありませんが、スクリーン上のグラフィックでもあるという意味で挙げます。
一度限りの成果物で、実装の保守性を考慮する必要がない場合などは、視覚調整を施した方が良い仕上がりになるでしょう。
判断基準
以下の質問に「はい」が多いほど、視覚調整の価値が高まります。
- この要素は頻繁に変更されないか？
- この要素はユーザーの第一印象に大きく影響するか？
- 実装の複雑さを吸収できる開発リソースがあるか？
- 見た目の完璧さがビジネス価値に直結するか？
逆に、管理画面やダッシュボードなどの機能重視のUIでは、wrapper方式が適しています。
まとめ
- グラフィックデザインの視覚調整テクニックは、UIデザインに常にそのまま適用すべきではない
- UIは数値で実装され、頻繁に変更されるため、視覚調整はコストが高い
- 固定サイズのwrapperを使えば、実装コストを抑えつつ90点の見た目を維持できる
- デザインシステムやコンポーネントライブラリとして運用することで、チーム全体の生産性が向上する
- ただし、ロゴやランディングページなど、変更頻度が低く印象が重要な要素では視覚調整も検討する価値がある
「完璧な100点」より「素早く届けられる90点」の方が、プロダクト開発では価値があることも多いのため、常にグラフィックデザインのセオリーで視覚調整をした方が良いわけでもないという主張でした。