美しいUIを作るために デザイナーが意識している ちょっとした考え方

Amebaのデザイナーが、UIを整えるときに数値ではなく目を信じて微調整している箇所を、自社サイトの実例で開いたスライド。29枚。

3つ挙げている。ひとつめは上下マージンの錯視。ブログ20周年サイトでは数値上は中央（317pxと295px）でも、上の余白が勝って要素が下がって見えるので、上マージンをあえて広げて視覚的な中央に合わせる。ふたつめは色の面積効果。同じ緑でも広い面では印象が変わるため、オンラインレッスンサイトでは #237B31と#298737 を面積に応じて使い分ける。みっつめは重心。ブランドサイトのふかわりょう特集では193px対193pxの左右対称でも、文字と写真の密度差で左に寄って見えるので、重さを見てマージンを変える。

「なんでちょっとだけ数値が違うの」という違和感の正体は、デザイナーが数値の正しさより見た目の正しさを取っているからだ、という話。ピクセルを揃えて終わりにしない理由が具体例で分かる。