これぞプロのデザイン！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。
UI&UXデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。

UI & UX Micro-Tips: Volume One.
by Marc Andrew

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 1. 装飾的な要素をたまに使うのは全く問題ありません
• 2. UIの要素は互いに区別できるようにする
• 3. シャドウはわずかな量があるだけで十分
• 4. 見た目的に分かりやすいフォントを選択する
• 5. パンくずはユーザーが理解しやすいようにする
• 6. 彩度の高いカラーは慎重に

はじめに

次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがあります。

UIのデザインにちょっとした一手間を加えるだけで、クライアント、ユーザー、そしてあなた自身が本当に満足できるものを作ることができるかもしれません。

この記事では、デザインとユーザーエクスペリエンスの両方を改善するのに役立つ小さな、そして簡単に実行できるデザインのヒントをまとめてみました。

1. 装飾的な要素をたまに使うのは全く問題ありません

スクリーン上のテキストコンテンツの大部分は、ユーザービリティのベストプラクティスに従うべきです。それに対して疑問はありません。

しかし、純粋に装飾目的でテキストを追加したい場合もあります。すべてのデザインが当たり障りのない領域に分類される必要はありません。

装飾的な理由で要素を使用しても、その要素がないことでユーザーエクスペリエンスに何らかの影響を与えるのであれば、アクセシビリティに準拠させないことはまったく問題ありません。

装飾目的にテキストを使用

2. UIの要素は互いに区別できるようにする

ボタンと通知、この2つの要素はUIにおいて異なる役割を持つ重要な要素です。UIの要素を使用する時は、ユーザーがその要素をすばやく簡単に区別できるようにしてください。

ボタンと通知はほとんどの場合、ボタンの方が優先されるので、最も目立つアイテムになるようデザインし、他の要素と簡単に区別できるようにします。

左: ボタンに似た要素がある、右: ボタンだけを目立たせる

3. シャドウはわずかな量があるだけで十分

美しいドロップシャドウが好きですか？
シャドウは適度に使用すると、デザインで繊細な、しかしとても強力な視覚的手がかりとして機能します。この「繊細」というのが非常に重要なポイントです。

現実の世界においてシャドウはあまり目立たない存在で、UIでもそれを模倣すべきです。たっぷりの暗いシャドウは捨てて、不透明度を下げて、繊細でリアルなシャドウをデザインに使用してみてください。

左: よろしくないシャドウ、右: 繊細で美しいシャドウ

4. 見た目的に分かりやすいフォントを選択する

デザインでオールキャップス（大文字）を適度に使用するのは良いことです。
特定のテキスト要素をオールキャップスにすることで、デザイン内の他のテキスト要素に対して多様性とコントラストを実現し、全体的なビジュアルを向上させることができます。

オールキャップスを使用する場合は、ユーザーが目で見て分かりやすいように、x-heightが高く、ウェイトが重い適切なフォントを選ぶようにしてください。

フォントは見た目的に分かりやすいものを選ぶ

5. パンくずはユーザーが理解しやすいようにする

パンくずはあらゆるサイトに存在します。特に、コンテンツの多いサイトで頻繁に使用されますが、それに見合うだけの愛情が常に注がれているわけではありません。

デザインのほんのわずかな調整で、ユーザーがサイト内のどこにいるのか、どこに行く必要があるのかを簡単に特定できるようにすることができます。例えば、ユーザーがサイト内の奥深くにいる場合に特に便利です。

パンくずの最後のアイテムを他のアイテムと視覚的に異なるようにデザインします。リンクの箇所は、リンクに見えるようにデザインします。

パンくずに愛を注いでください。

下: 現在位置を目立たせるようにデザインしたパンくず

6. 彩度の高いカラーは慎重に

彩度の高いカラー（鮮やかなブルー・レッド・グリーンなど）は見栄えしますが、使いすぎると、特にテキストの多いコンテンツで使用すると、ユーザーの目を疲れさせます。

あなたができることは、彩度の高いカラーは適度に使用し、目の疲労を避けるために飽和色の落ち着いたカラー（ティントまたはシェード）と組み合わせるようにしてください。

このテクニックを使用することで、飽和色に注意を向けることができ、最も重要なコンテンツを前面に出し、より控えめなカラーをあまり目立たない役割を果たし、ユーザーの目に少しの休息を与えることができます。

デザインは見た目を大切にしてください。

左: 彩度の高いカラー、右: 落ち着いたカラー

デザインにちょっとした調整を加えるだけで、あなた自身とユーザーの両方にとってより良い結果が得られるということを少しでも理解いただけたらと思います。