#493
視覚設計
#493しかくほせい
視覚補正 (Optical Adjustment)
別名・表記:Optical Adjustmentオプティカルアジャストメント視覚調整オプティカルバランス
UIXHERO Definition
「目の錯覚を直す」。定規で測った中心ではなく、目で見心地よい中心に合わせること。
概要
人間の視覚は、物理的に同一のサイズや位置であっても、形状・周囲との関係・重心・明度差などの影響によって異なって知覚されることがある（錯視）。 視覚補正（オプティカル・アジャストメント）は、そのズレを修正し、人間にとって「正しく見える」ように微調整を行う技術。 「数値的に正しい（Mathematical Correctness）」ことと、「視覚的に正しい（Optical Correctness）」ことは異なるため、UIや視覚設計の領域では、多くの場合「視覚的に正しい」ことがユーザー体験上優先される。
UXでの活用
- アイコンの整合性: 異なる形状のアイコン（円、正方形、縦長、横長）を並べる際、全ての高さや幅を数値で揃えると、円や三角形は小さく見えてしまう。視覚補正を行い、見た目の「重さ（Visual Weight）」を揃えることで、リスト全体が美しく整って見える。
- 垂直居中の調整: テキストをボタンの上下中央に配置する際、フォントによっては数値上の中心に置くと少し下がって見えることがある。この場合、1px程度上にずらすことで、ユーザーには「ど真ん中」にあるように感じさせることができる。
💡 使いどころ
アイコンのデザイン、ロゴ制作、タイポグラフィ（カーニング）、UIパーツの整列など、精密な配置が求められる場面。
⚠️ 注意点・誤用
エンジニア実装時に「なぜ数値がズレているのか」と混乱を招くことがある。デザイン意図（視覚補正）であることをスタイルガイドなどで共有する必要がある。
具体例
- 再生ボタンの三角形を、幾何学的中心より少し右にずらして重心を中心に合わせる。
- 丸いアイコン（○）を、四角いアイコン（□）より少しだけ大きくして、見た目の重さを揃える（オーバーシュート）。
- 文字間隔（カーニング）を、機械的な等幅ではなく、文字の形状に合わせて調整し、均一なリズムを作る。
出典・参考文献:
- Google Material Design: Iconography - Visual corrections
- Apple Human Interface Guidelines: App Icons
- Arnheim, R. (1974). Art and Visual Perception: A Psychology of the Creative Eye. University of California Press.