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

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

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

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

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

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

はじめに

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

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

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

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

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

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

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

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

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

3. 書体は1つだけ

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

書体は1つだけ

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

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

ベースカラーを効果的に

5. CTAは目立たせる

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

CTAは目立たせる

6. 常に情報を提供する

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

常に情報を提供する

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

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

目立たせることが大事

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

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

アイコンにはラベルを

9. 近接させること

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

近接させること

10. 検索を輝かせる

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

検索を輝かせる

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

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

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

12. ローディングを表示

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

ローディングを表示

13. line-heightを小さくする

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

line-heightを小さくする

14. letter-spacingも小さくする

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

letter-spacingも小さくする

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

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

すべて大文字の見出し

16. 階層は王道

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

階層は王道

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

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

コンテンツが空の場合

18. line-heightを拡げる

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

line-heightを拡げる

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

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

余計なものは削除する

20. アクセシブルにする

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

アクセシブルにする

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

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

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

22. 親指の法則は健在

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

親指の法則は健在

23. 太陽は一つです

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

太陽は一つです

24. CTAを優遇する

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

CTAを優遇する

25. パンくずにも愛情を

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

パンくずにも愛情を

26. ノイズはカットする

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

ノイズはカットする

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

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

文字が呼吸するように

28. ユーザーを引き込む

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

ユーザーを引き込む

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

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

数値に余裕を持たせる

30. ゴールを明確にする

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

ゴールを明確にする

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

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

シンプル・イズ・ベター

32. 縦方向のリズム

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

縦方向のリズム

33. UとIが大事

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

UとIが大事

34. 光学系は控えめに

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

光学系は控えめに

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

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

ダークサイドのパワー

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

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

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

参考:

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

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

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

sponsors

top of page

©2022 coliss