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

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

第4弾は、UIに一貫性・統一感を持たせるためのデザインテクニックです。

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

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

• はじめに
• 1. デザイン要素に一貫性を持たせる
• 2. ホワイトスペースはたっぷり使用してください
• 3. 冒頭のパラグラフをスタイルして、ユーザーを引き込む
• 4. 短いパラグラフを効果的に使用する
• 5. カラーパレットを定義し、デザインに統一感を持たせる
• 6. アイコンをグリッドシステムで使用する際の注意点

はじめに

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

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

第4弾となる今回は、UIに一貫性・統一感を持たせるためのデザインテクニックです。前回までの小技は、以前の記事をご覧ください。

• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.1
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.2
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3

1. デザイン要素に一貫性を持たせる

わたし達は習慣性の生き物であるため、プロダクトがなじみのある方法で提供されることを期待しています。Webサイトやアプリを利用する際には全体的に一貫性があることが期待されており、一貫性を持たせることは重要なデザインの原則です。

レイアウト、アイコン、カラー、ボタンなど、さまざまな方法で一貫性を保ちましょう。そうすることで、ユーザーの混乱を減らし、ユーザーエクスペリエンスを向上させます。

左: デザイン要素に一貫性がない、右: 一貫性がある

2. ホワイトスペースはたっぷり使用してください

ホワイトスペース、ネガティブスペース、空白スペース、これらはすべて同じです。

あなたへのアドバイスは、ホワイトスペースは惜しみなくたっぷり使用、または適度にうまく使用してください。

デザインにホワイトスペースを加えることはデザインを改善する最も簡単な方法の一つで、デザインに息を吹き込み、より洗練された印象を与えることができます。

右: ホワイトスペースをたっぷり与え改善したデザイン

3. 冒頭のパラグラフをスタイルして、ユーザーを引き込む

ブログや記事などの長文コンテンツを扱う場合、読者をコンテンツに引き込むことが重要です。

冒頭のパラグラフの外観は、コンテンツに引き込むことを達成する上でコンテンツ自体と同じくらい重要になります。フォントサイズ、太さ、カラー、行の高さなどの簡単なスタイルの調整だけで、第一印象を改善できます。

右: 冒頭のパラグラフのスタイルを調整する

4. 短いパラグラフを効果的に使用する

テキストがたくさんあるコンテンツを扱う場合、パラグラフを短くしてパンチの効いた文章にするのが効果的です。

わたし達は飛ばし読みをよくし、できるだけ早く情報を消化したいと考えています。可能な限り短く明快なパラフラフで表現することは、ユーザーに情報をよりよく読んでもらい、消化してもらうための確実な方法です。

右: テキストがたくさんある場合はパラグラフを短くする

5. カラーパレットを定義し、デザインに統一感を持たせる

よりプロフェッショナルなUIを作りたいと思いませんか？
カラーパレットを定義しましょう。

カラーを適当に選んで、デザインに使用してはダメです。

デザインをする最初にしっかりとしたカラーパレットを作成し、維持しましょう。そうすることで悩むことなく、デザイン全体に統一感を持たせることができます。

左: バラバラのカラー、右: カラーパレットを使用したデザイン

6. アイコンをグリッドシステムで使用する際の注意点

アイコンと8ptグリッドシステムを使用する場合、よくできたアイコンセットは8の倍数（16×16、24×24、32×32など）でデザインされていることが分かります。

しかし、常にそうであるとは限りません。

そうでない場合は、使用するアイコンを8ptグリッド値（例えば、24×24）のコンテナ内に収まるように配置してください。そうすることで、デザイン内のアイコンが一貫してレイアウトされます。

上: 微妙にずれて配置されている、下: グリッドに合わせて配置

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