プロのUIデザイナーに学ぶ！ UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.13

Post on:2022年3月2日

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

第13弾は、配色とユーザーエクスペリエンスに関するデザインのテクニックです。

UIとUXの印象がよくなるデザインの知識とテクニックのまとめ

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

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

はじめに

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

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

第13弾となる今回のテーマは、配色とユーザーエクスペリエンスです。前回までの小技は、以前の記事をご覧ください。

1. 色彩理論を知らなくてもデザインに統一感を与えられる

もしも、自由にカラーを選択できるデザインプロジェクトがあったときに、いろいろなカラーを使用しないでください。たくさんのカラーにしてしまうと、視覚的にちぐはぐになる可能性があります。

シンプルにベースカラーを用意し、そのカラーを元に色合いや陰影をつけるだけで、あなたのデザインに統一感やまとまりを与え、よりプロフェッショナルな外観にすることができます。

ベースカラーから色合いや陰影をすばやく作りたい時は、Tint & Shade Generatorがお勧めです。

色彩理論を知らなくてもデザインに統一感を与えられる

左: デザインに統一感がない、右: ベースカラーから色合いや陰影をつける

2. ユーザーが選択したアイテムを目立たせる

UIはクリーンで、削ぎ落とされた、わかりやすいものが一番です。それは間違いありません。しかし、ユーザーエクスペリエンスを犠牲にしてはダメです。

下記のようにシンプルなUIコンポーネントであれば、選択したアイテムがパッと見てすぐにわかるようにしましょう。

無理に奇をてらう必要はありません。シンプルかつ大胆に、どのアイテムを選択したのか、自分の入力が認識されているのか、ユーザーが簡単に見分けられるようにデザインしましょう。

ユーザーが選択したアイテムを目立たせる

左: 選択したアイテムがわかりにく、右: パッと見てわかる

3. 細いフォントは暗いカラーにする

長文コンテンツをデザインするとき、中間色のグレーを使いたくなるかもしれませんが、これは軽いウエイトのフォントを使う前まではよいかもしれませんが、さまざまなサイズのスクリーンで読みやすさに大きな影響を与えます。

視力の弱いユーザーが戻るボタンに手を伸ばすようなことがないように、テキストを暗いカラーにしてこの問題を解決し、誰もがアクセスしやすいようにしましょう。

ウェイトが軽いフォントでは、ほんの少し暗いカラーにするだけで、読みやすさが大幅に向上します。

細いフォントは暗いカラーにする

左: 中間色のグレー、右: ほんの少し暗いカラー

4. 最も重要な要素をより目立たせる

スクリーン上の最も重要な要素にユーザーの目を素早く、効率的に、そして最小限の認知的労力で集められるようする必要があります。

フォントサイズ、太さ、カラー、レイアウトなどの視覚的階層の原則を用いることで、最も重要な要素を簡単に目立たせることができます。

この原則に従うことで、ユーザーエクスペリエンスを向上させ、より合理的な方法でユーザーを誘導することができます。

最も重要な要素をより目立たせる

左: 目立っていない、右: 重要な要素が目立っている

5. 次のステップの情報を提供する

ユーザーがアクションを起こす前に（特にアクションの種類によっては）、次に何が起こるか分からないまま放置するのはやめましょう。

ボタンをクリックしたときに何が起こるのか、ユーザーがアクションを起こす前に、常にユーザーに十分な情報を提供しましょう。

すべてのステップでユーザーエクスペリエンスを向上させ、ユーザーが迷うことのないようにしてください。

次のステップの情報を提供する

左: ボタンをクリックすると何が起こるかわからない、右: 十分な情報を提供

6. CTA用にカラーを1つ確保しておく

CTA（コールトゥアクション）は、スクリーン上で最も重要な要素の一つです。CTAを独自のカラーで輝かせましょう。

ユーザーがスクリーン上の他の要素（通知やタグ）と混同しないようにします。CTAは他の要素と簡単に区別できる必要があり、そのためには、CTAのためにカラーを1つ確保し、他のカラーは使用しないようにします。

もちろん、サイズや形状などでさらに工夫を凝らすこともできますが、CTAのために1つのカラーを確保するだけで、ほとんどの摩擦を減らすことができます。

CTA用にカラーを1つ確保しておく

左: 同じカラーが他の要素に使用されている、右: CTA用のカラーは1つ

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

sponsors

top of page

©2024 coliss