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

Post on:2019年10月31日

01. ボタンと同じ色だとテキストは明るく見える

塗りつぶされた図形の隣に同じ色のテキストを配置すると、テキストが明るく見えることに気がついたことはありませんか？この現象はテキストが元の色よりも明るく感じられるフォントのスムージング効果で、フォントが小さいほどこの視覚効果が強くなります。

ボタンの下のテキストに注目

左側は同じ色を使用していますが、テキストの方がボタンより明るく見えます。
右側はテキストに少し濃いグリーンを使用することで、同じ明るさに見えます。

02. 同じフォントでも小さいサイズだと細く見える

一部のフォントでは小さいサイズを使用すると、テキストが細く半透明に感じられます（これもフォントのスムージング効果です）。

小さいサイズのフォントを使用したい場合は、太いウェイトを使用します。

小さいサイズのフォントは細く、半透明に見える

太いウェイトのフォントを使用すると、デザインはクリーンなままで、テキストが小さいサイズでも目立ちやすく、間違いなく読みやすくなります。

03. 背景画像の上のテキストは読みにくい

背景画像の上にテキストを配置するのは一般的なデザインですが、画像が動的に変化する場合は、背景色に関係なくテキストを読みやすい状態に保つ方法が必要です。

これはグラデーションで適切なコントラストを確保することで実現できます。

グラデーションをテキストの下に配置すると、読みやすくなる

半透明のグラデーションのレイヤーは、明るいカラーの背景画像の上にテキストを配置した場合でも、テキストを読みやすい状態に保つのに適しています。Ensure High Contrast for Text Over Imagesでは、デザインの美しさに影響を与えずにコントラストを高めるデザインのテクニックがいくつか紹介されています。

また、私はプレゼンを見る時にこの問題をよく見るので、プレゼンのスライドにもこのテクニックが適用されるべきだと思います。
参考: 12 Reasons Your Presentation Sucks

04. 行間が間違っているテキスト

テキストといえば、もう一つ重要な問題があります。UX writingからテキストをデザインするためのルールで、見出しと本文に使用される行間についてです。

行間は読みやすさに大きな影響を与える

目安としては、使用するフォントに応じて、行間を文字サイズより2pt~5pt大きく設定します。
参考: 8 Simple Typography Tips For Your Designs

84 cognitive biasesにはコンバージョンを改善するデザインのテクニックがまとめられています。

形の扱い方

異なる形を並べて配置すると、予期せぬ錯覚を引き起こす可能性があります。下記は、ミュラー・リヤー錯視として知られる例です。

ミュラー・リヤー錯視

上の2つの形は同じ位置に配置されていますが、位置がずれているように感じられます。また、下の矢印は長さが違うように見えますが、線の長さはまったく同じです。

このような錯覚によって、デザインが不正確に感じられることがあります。100%正確になるように懸命にデザインしたことを考えると、残念な気持ちになります。

解決策は、形を少し動かしたり、線を少し長くしたりするします。錯覚をなくし、整列させるために必要なことを行います。

錯覚しないように調整する

実際のUIで、形の扱い方をいくつか見てみましょう。

05. 整列されたのに揃っているように見えない

これはUIデザインで昔からよくある例です。

形が異なると、揃って見えない

左側はボタンの角丸が原因で発生する視角的な位置ずれ現象です。
右側はこの現象を修正したもので、オーバーシュートと呼ばれるテクニックです（フォントでよく使用されます）。ボタンを少し左に動かすことで、位置ずれの錯覚を修正しています。

06. 一貫性のないフォームの配置

フォームで異なる要素（形・線・テキストなど）を使用している場合、錯覚が起きやすく、フォームの配置がずれているように感じられます。

フォームは普通に並べると、ずれているように見える

左側はすべての要素がわずかに異なり（矩形・テキスト・角丸）、配置がずれているように見えます。これを修正するテクニックはたくさんありますが、ここではすべての角を鋭角にし、ラベルのツラに揃えました。

要素が一貫して見えるようになると、左揃えが適切に機能し、フォーム全体がすっきりとしたデザインになります。

Webサイトやプロダクトをデザインする際には、20 Dark Patternsを参考にしてください。

アイコンの扱い方

アイコンの配置がずれているように感じたことはありませんか？
同じサイズのアイコンを使用していても、アイコンの性質（視角重量）上、揃えて配置するにはテクニックが必要です。

アイコンはそれぞれ視角重量が異なる

07. 揃っているように見えないアイコン

アイコンを整列させるためには、アイコンを移動したりサイズを変更したりする必要があります。

アイコンを移動したりサイズを変更したりする必要がある

左側は同じサイズのアイコンを均等に配置しています。一部のアイコン（電話・ラジオ）が少し大きく見え、一部のアイコンは物理的中心が異なるので位置がずれているように見えます。
これを修正するには、類似した形状のアイコンを選択し、一貫性のある外観（円形アイコンなど）にすることです。

右側は別の解決策で、各アイコンを並べて配置した際に均等になるように改善します。この方法は実際のデザインにアイコンを配置し、いくつかのアイコンを修正し、デザインが完璧に見えるようになるまで修正を繰り返す必要があるかもしれません。

08. 非対称の形

三角形のような非対称の形をデザインで使用する場合、幾何学的な中心によって、形が誤って配置されているような錯覚が生じます。

UIでよく見かけるのは、三角形を使用したボタンです。

三角形は少しずらすと真ん中に見える

左側は三角形を円の中心に配置していますが、右側の方が見栄えがよくです。この解決策は、非対称のは幾何学的な位置揃えではなく、視角的な位置揃えを行います。

視角的な位置揃えについて、The PLAY button is not optical alignmentに実践的なテクニックがあります。

09. テーマが異なるアイコン

既製のアイコンを使用している場合は、同じコレクションのアイコンを使用することが重要です。

アイコンを探す時は、見栄えのよいアイコンを見つけるだけではなく、アイコンの視覚的な違いにも十分に注意を払う必要があります。

同じコレクションのアイコンを使用する

上の例からも分かるように、異なるコレクション（形・ウェイトなど）のアイコンを使用すると、UIがプロフェッショナルでないように感じられます。ユーザーは、何が間違っているのか指摘するほど知識がないかもしれませんが、何かが間違っていることには気がつくでしょう。

同じカラーパレット、テーマ、太さ、線幅を共有するアイコンを選択してください。

10. ボタンの複数行のラベル

コピーよりデザインの方が勝ることがあります。

ボタンのラベルは揃える

確かに「add to favorites（お気に入りに追加する）」は「favorite（お気に入り）」よりボタンの動作をうまく説明していますが、ボタンの下に2行のテキストがあることは受け入れがたいことです。表示がずれることだけではなく、ボタンの下に配置されるコンテンツにも影響を与えます。

このような場合は、デザインを優先し、コピーをデザインの制約に合わせて変更する必要があります。すべてのラベルを2行にするか、「favorite」の1行にします。

11. 長いコピー

UXにおけるライティングは、デザインプロセスの一部として考えるべきです。デザインの考慮事項によってテキストの長さが決まり、テキストの考慮事項によってデザインが決まります。
経験則としては、テキストは簡潔にした方がよいでしょう。

デザインとライティングは密接に

長く書くのは簡単です、あなたがしなければならないのは間違った言葉を消すことだけです。

12. タップするエリアが小さすぎる

12年経った今も、デザイナー(そしてデベロッパーも)はタップするには小さすぎるボタンを作成しています。

見た目よりタップできるエリアを大きくする

Nielsen Normanによると、太い指でも誤操作しないように、インタラクティブな要素のサイズは1cm×1cmが必要であると、述べています。

Appleは12年前にそう言っていましたが、タップしにくボタンはあちこちで見かけます。この問題を解決するには、タップできるエリアは、ボタン（アイコンやテキストも）の視覚的なサイズより大きくする必要があります。

13. 角丸内の角丸

ジャストロー錯視（別名、ブーメラン錯視）を知っていますか？

ジャストロー錯視

内側の角丸の半径が大きく見えますが、これは錯覚です。実際には両方とも同じ半径ですが、目はそれを捕らえることができません。
ジャストロー錯視はUIデザインでも起こります、角丸のフレームに角丸のボタンを配置します。

UIデザインにおけるジャストロー錯視

上の例では、フレームとボタンの両方に同じ角丸がありますが、一貫性がないように見えます。錯覚を取り除くには、フレームとは異なる角丸をボタンに使用します。

14. 必要のない境界線

境界線と言えば、ラインが多すぎるとデザインが混み合って見えます。
デザイナーは空白について多くを語りますが、新機能が追加されると（適切なデザインプロセスを経ずに）、不思議なことにフレームやボーダーが追加されます。

コンテンツが追加されると、なぜか境界線も増える

デザインをする時には境界線を取り除き、代わりに空白を使用して、要素のグルーピングを行うよう心がけてください。

15. グレーの代わりに不透明度を使用する

UIのデザインではさまざまな階調のグレーを使用して、タイトル・サブタイトル・本文などの間に階層を作成します。しかし残念なことに、テキストをカラフルな要素の上に配置すると、グレーは機能しなくなります。

グレーの代わりに、要素が背景色を吸収できるように、ホワイトの不透明度を調整します。

不透明度を調整したホワイトを使用

グレーの代わりに不透明度を調整したホワイトを使用すると、半透明の要素が背景色と組み合わされ、より自然な感じにデザインすることができます。

これはデザインの小さなテクニックで、大きな良い結果をもらします。

ボーナス: ダークモードの迷惑な例

iOS 13がリリースされ、Androidだけでなく、iPhoneでもダークモードが利用できるようになりました。Appleは「スクリーン上のすべての要素が目に優しいように考えられて設計されている」と主張していますが、実際にダークモードを使用した人は、そうではないことに気がついていると思います。その理由は、背景にピュアブラックを使用すると、眼精疲労を引き起こすからです。

UX Movementによると、「ホワイトの明度は100%で、ブラックの明度は0%です。色の明るさのこのような大きなコントラストで、見る明るさの不均衡につながります。人の目は読むときの明るさに順応するため、眼精疲労につながります。」

解決策は、ピュアブラックを使用する代わりに濃いグレーを使用することです。