UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない

[coliss]

目の錯覚による違和感を取り除くUIデザインのテクニック。

[yoshitetsu]

ul

[tokuninac]

“背景にピュア ブラックを使用すると、眼精疲労を引き起こす”昔のサイトに多いやつだ

[konishika]

なるほど！パワポ資料作っているときの違和感はコレか！

[tossy_yukky]

なにこれめっちゃいい。知らなかったけど確かにそうやってるの多い、みたいなのばっか。

[suekunhello]

コーダーもコレくらいのデザイン知識は押さえておこう。

[taktsu]

サイズや位置を合わせているはずなのに違和感があったのは錯視だったのかー

[piripenko]

“新機能が追加されると（適切なデザインプロセスを経ずに）、不思議なことにフレームやボーダーが追加されます” デザインプロセスを経ずに！不思議なことに！

[inuinumandx]

書籍の文字の流し込みなんか面倒の極み。

[hiromikov]

アプリの更新で「ブラックテーマが使えます！」となったときの絶望感の一つがコレ。

[mrpotas]

素人の「なんか違うんだよなぁ」が言語化されてて格好良い

[jakalada]

“残念なことに、ほとんどのAppleのデフォルトアプリは背景にピュア ブラックを使用しており、過剰な刺激を引き起こしています。”

[strawberryhunter]

01.小さい字を使うこと自体が間違いである事にまだ気が付かないデザイナー。05.どう見ても左が正しい。最後: やたらコントラスト下げる駄目デザイナーが量産される。

[adsty]

錯覚による違和感は改善前後を見比べるとよく分かる。

[mmmmmasao]

天使も悪魔も使えるtipsだ/こういうものは悪魔が使うものと断定して生きた方がいい気がする

[ultimatebreak]

錯視が起こるようなデザインを出来るだけ避けるようにすることから始めるべき。どうしても発生する場合はガイドライン出しておかないとコーダーが死ぬ。とくにプログラマ上がりのコーダーは例外が増えると死ぬ

[KoshianX]

フォームが揃わないやつはこれブラウザ側でちゃんとして欲しいんだけどな……。

[karutt]

デザイナーが感覚でやってるような事を、非デザイナーに言語化して説明できそう。凄く参考になった。

[mayumayu_nimolove]

あとで見ない

[Windblume2007]

UIって微妙な調整が入ってて手間隙かかってるんだなって思う

[onehiro]

デザイナーはこういうのを「感覚が大事」とか言ってるのかな。おもいっきりロジカルだけど。

[airj12]

綺麗に並べたはずのアイコンに違和感を感じることはよくある、光学的な位置揃えってどうやるんだろ

[shioken]

iPhoneのカレンダーアイコン、1日が右にずれてるように見えるのあったな

[Dragoonriders]

色々なるほど／"ほとんどのAppleのデフォルトアプリは背景にピュア ブラックを使用しており、過剰な刺激を引き起こしています"　そうかな、もうテーブルビューとか、ダークグレーに変わってないか？

[gogatsu26]

“数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります”

[securecat]

はなから錯覚じゃないよな

[kiyo560808]

これはあるある。気をつける必要がある。

[yodelx]

“背景にピュア ブラックを使用すると、眼精疲労を引き起こす。対策は濃いグレーを使用すること。”

[tettekete37564]

難しいやつ / “13. 角丸内の角丸”< これは度々ハマってた記憶

[totoon]

「三角形は少しずらすと真ん中に見える」の三角形が気持ち右にズレてるように見えるので、更に調整してほしい……

[otihateten3510]

“05. 整列されたのに揃っているように見えない”　これめっちゃあるよな。仕様を優先するか見た目を優先するか迷う。／アイコンもあるわ

[kosn]

視覚調整ですね