プロのUIデザイナーに学ぶ特別編！ UIとUXの印象がよくなるデザインの知識とテクニックのまとめ 8ビットのドットUI

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

今回は特別編として、8ビットのドットUIに関するデザインのテクニックです。

UI & UX Micro-Tips: 8-Bit Edition
by Marc Andrew

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

はじめに

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

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

今回のテーマは、8ビットのドットUIです。前回までの小技は、以前の記事をご覧ください。

• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.1
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.2
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.4
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.5
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.6
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.7
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9
• 2021年、最も注目されたUIデザインのテクニックのまとめ
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.10
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.11
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.12
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.13

1. ホワイトスペースはUIデザインの味方

ホワイトスペースはあなたのデザインの味方です。ホワイトスペースを効果的に使用することで、ユーザーにとって読みやすく、使いやすいUIに改善されます。

2. テキストにコントラストをつける

テキストにはコントラストをしっかりつけてください。デザインは装飾だけにこだわるのではなく、アクセシビリティにも配慮しましょう。

3. 書体は1つだけ

デザインで使用する書体を1つだけにするのは良いことです。

4. ベースカラーを効果的に

ベースカラーを決めたら、その色を元にティントとシェードでUIに統一感を与えることができます。

5. CTAは目立たせる

コールトゥアクション（CTA）のために1色を確保しておきましょう。UIの中でCTAを目立たせてください。

6. 常に情報を提供する

次のステップをユーザーに推測させないでください。ユーザーがボタンをクリックする前に、クリックするとどうなるのか情報を提供しましょう。

7. 目立たせることが大事

スクリーン上で最も重要な要素をより目立たせるようにデザインしてください。

8. アイコンにはラベルを

アイコンを分かりやすくするために、テキストのラベルを付けましょう。

9. 近接させること

近接は、デザインの重要な原則です。デザインで近接を定期的に使用し、情報構造を分かりやすくしてください。

10. 検索を輝かせる

コンテンツが多いサイトですか？ 検索機能を充実させましょう。

11. ユーザーに情報を提供する

アクションを適用すると何が起こるかをユーザーに伝えましょう。

12. ローディングを表示

ロード中に何も表示しないのはユーザーに不安を与えます。ローディングを表示して、何が起こっているかをユーザーに知らせてください。

13. line-heightを小さくする

見出しのline-heightの値をすこし小さくすると、読みやすくなります。

14. letter-spacingも小さくする

見出しの視覚的なバランスを改善するには、letter-spacingを小さくします。

15. すべて大文字の見出し

すべてを大文字にするのは、短いテキストにのみ使用します（見出しの上に配置されるラベルなど）。

16. 階層は王道

テキストをデザインする時は、サイズ・ウェイト・カラーを使用して階層をつくります。

17. コンテンツが空の場合

コンテンツが空の場合は「空です」を表示するのではなく、ユーザーにどうすればよいか役立つアクションを提供しましょう。

18. line-heightを拡げる

フォントのサイズは小さいほど、line-heightを大きくする必要があります。

19. 余計なものは削除する

メッセージは簡潔に、そして短くしましょう。不要な言葉は必要ありません。

20. アクセシブルにする

アクセシビリティに配慮し、フォームのエラーメッセージを色だけで表現せずに、テキストでも伝えてください。

21. 重要なアクションを隠さない

ドロップダウンの中に重要なアクションを隠さないでください。 前面に出し、分かる場所に配置しましょう。

22. 親指の法則は健在

ユーザーのオンボーディングエクスペリエンスを向上させましょう。タップは指が届くところに、親指で楽に操作できる場所が最適です。

23. 太陽は一つです

シャドウは1つの光源からできていることを確認してください。わたし達が住んでいる地球には、太陽は一つしかありません。

24. CTAを優遇する

「コールトゥアクション（CTA）」は常に、スクリーン上で最も目立つようにデザインします。

25. パンくずにも愛情を

ページ上のパンくずを目立たせて、ユーザーにとってナビゲートしやすいようにしましょう。パンくずにも愛情を注いでください。

26. ノイズはカットする

有益な情報（シグナル）と雑音（ノイズ）との量の比率を最大化しましょう。ノイズはカットし、シグナルをより明確にします。

27. 文字が呼吸するように

大文字で書かれたテキストを扱うときは、「大文字＋文字間隔を広げる＝読みやすくなる」と覚えておきましょう。

28. ユーザーを引き込む

長文コンテンツを扱う場合は、冒頭の段落でユーザーを引き込むようなスタイルにしましょう。

29. 数値に余裕を持たせる

スマホではタップ可能な領域を広く取るようにしましょう。指の大きさはさまざまなので、少し余裕を持たせてください。

30. ゴールを明確にする

ユーザーが目的を達成するために必要なアクションを説明するときは、はじめに操作方法を説明するのではなく、操作するとどうなるのかから始めます。

31. シンプル・イズ・ベター

シンプルなオーバーレイで、明るいテキストと画像の適切なコントラスト比を維持できます。

32. 縦方向のリズム

見出しと本文の間に完璧な縦方向のリズムを実現するために、見出しと本文のセットごとのスペースを正しく設定しましょう。

33. UとIが大事

UIの要素は常に、互いに容易に区別できるようにします。ボタンとラベルのデザインが似ていたら、ユーザーは混乱します。

34. 光学系は控えめに

ダークテーマで作業するときは、テキストのコントラストを下げて真っ暗にならないようにしましょう。真っ暗だと、目に負担がかかります。

35. ダークサイドのパワー

ダークテーマで作業するときは、グレーの濃淡を利用して、要素の奥行きを効果的に伝えることができます。

36. 角丸が「揃っている」ことを確認する

ボーダーの半径を補完的に使用してください。角丸を入れ子で使用する時に、「ずれてない」ようにしましょう。

参考:

角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法

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