2021年、最も注目されたUIデザインのテクニックのまとめ

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

今年公開した中で最も注目されたUIデザインのテクニックをまとめました。

2021年、最も注目されたUIデザインのテクニックのまとめ

UI & UX Micro-Tips: Best of 2021
by Marc Andrew

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

はじめに

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

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

1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する

アイコンを使用するときは、実行するアクションが明確に分かる確立されたアイコンを選択してください。「確立された」とは正しい意味と機能性が伝わるアイコンのことで、そうでない場合はユーザーの混乱を招き、認知障害につながります。

アイコンを冒険的に使用するのはやめましょう。

UIで確立されたアイコンを使用する

左: 冒険したアイコン、右: 慣れ親しんでいるアイコン

2. 4ptベースライン+8ptグリッド=調和のとれた縦のリズム

テキストを使用する場合、4ptのベースラインと8ptのグリッドを一緒に使用することで、より調和のとれた縦方向のリズムをデザインにもたらすことができます。

line-heightの値に4の倍数(16,20,24,28など)を使用して、テキストを4ptのベースラインに揃えるだけです。

なぜ、4なのか?
個人的には、過去に8の倍数でスケーリングすることは特定のテキストサイズで作業する場合に汎用性が低いということが分かっています。

4ptベースライン+8ptグリッドの縦のハーモニーを使用してみてください。

調和のとれた縦のリズム

line-heightを4の倍数にして、4ptのベースラインに揃える

3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する

デザインでフォントを扱う時、エレメントを過度に強調させる必要はありません。重要なのは、バランスの取れた階層です。

これを実現するために必要なのはウェイト、サイズ、カラーを使用した微妙な調整だけです。

フォントのデザインに適切な階層があることで、ユーザーは最も重要な要素をすぐに見つけだすことができ、プロセスの混乱を避けることができます。

フォントで階層を示すにはウェイト、サイズ、カラーを使用

左: テキストがいっぱいあるだけ、右: 重要なテキストが目にはいる

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

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

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

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

ホワイトスペースはたっぷり使用する

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

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

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

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

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

8ptグリッドシステムを使用する場合は、アイコンを一貫してレイアウトする

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

6. アクションを実行した際に何が起きるのか分かるようにする

結果をもたらす可能性のあるアクションを使用する際は、常にユーザーに詳細な情報を伝えるようにしてください。特に、何かを完全に削除するなど取り返しのつかない結果を伴うアクションに当てはまります。

例えば、「削除する」と書かれた赤いボタンをクリックする前に、それをクリックすると何が起こるのか分かりやすく伝え、確認を求めるようにします。

アクションをした際に何が起きるのか分かるようにする

左: ボタンのみ、右: リセットするボタンであることを詳細に伝える

7. タブバーには重要なアイテムだけを表示する

アプリのタブバーは、スクリーンのスペースを有効に利用できるので、賢く使用してください。アプリで最も頻繁に使用するアイテムのためにタブバーのエリアを確保し、使用頻度が高くないアイテムは「その他」の中に隠します。

小さなタブバーには重要なものだけを置くスペースがあります。

最も重要なアイテムがタブバーで優先表示されるようにする

下: 使用頻度が高くないアイテムは「その他(More)」の中に隠す

8. スマホではタップ可能な領域を広くする

スマホのデザインでは、指で簡単にタップできるようにタップ領域を十分に大きくしてください。iOSとAndroidで推奨される最小のタップ領域は、下記の通りです。

  • 44 x 44pt for iOS
  • 48 x 48dp for Android

人間の指にはさまざまなサイズがあるので、余裕を持たせて、ユーザーがイライラせずに正確にタップしやすいようにしてください。

スマホではタップ可能な領域を広くする

左: タップ可能な領域が狭い、右: 十分な大きさを確保

9. 適当にフォントサイズを選ぶのではなく Type Scaleを使う

フォントサイズを決める時はなんとなくではなく、迅速かつ実用的に、推測なしで定義する必要がある場合は、Type Scaleを使用すると便利です。その名の通り、Type Scaleはスケール係数(例: 1.25)に基づいて動作します。

使い方は簡単です。基本フォントサイズ(例: 18px)を設定し、それにスケール係数(例: 1.25)で乗算(または除算)し、上位階層(例: 見出しなど)または下位階層(例: キャプションやボタンなど)のフォントサイズを得るという方法です。Type Scaleを使用すると、調和のとれたテキストを作成することができ、タイポグラフィに一貫性、リズム、階層性をもたらすことができます。

適当にフォントサイズを選ぶのではなく Type Scaleを使う

Type Scaleで作成したフォントのデザインガイド

10. 空の状態を工夫することで、ユーザーの初期行動を促す

空の状態(エンプティステータス)は、ユーザーエクスペリエンスを向上させる上で非常に有益ですが、軽視されてしまうことがよくあります。空の状態のデザインを工夫することで、ユーザーが自分に役立つ情報・機能をすばやく見つけ、目標をより早く達成できるように、サイトやアプリを意図したとおりに使用する機会として利用しましょう。

ユーザーが最初に何をすべきかわからない状態にはしないで、どうすればよいのかを案内してください。

空の状態を工夫することで、ユーザーの初期行動を促す

左: 空の状態であることだけが分かる
右: 空の状態のときに何をすべきか案内をする

11. 最適な読みやすさのために、x-heightに基づいてline-heightを決める

読みやすさの最適化を実現するには、フォントのx-heightに基づいてline-heightの値を設定するようにしてください。

例えば、Merriweatherはx-heightが大きい書体であるため、line-heightを大きくする必要があります。それとは対照的に、Mr Eaves Sansのようにx-heightが小さい書体で読みやすさを実現するためには、line-heightを少し小さくします。

最適な読みやすさのために、x-heightに基づいてline-heightを決める

上: line-heightの値がフォントのx-heightに合っていない
下: フォントのx-heightにあった適切なline-heightの値

12. 書体の読みやすさは、x-heightまたはIl1で確認

x-heightとは小文字の「x」の高さのことです。フォントのx-heightが大きいと、特に本文で使用した場合に読みやすさがかなり向上します。

書体の読みやすさを判断するもうひとつの方法として、「Il1テスト」があります。同じ書体の3つの文字、大文字の「I」、小文字の「l」、数字の「1」を比較します。文字の形がそれぞれどのように異なるかで読みやすさを判断することができます。

本文に使用する書体を選ぶ際には、x-height、Il1、またはその両方を使用して常に最高の読みやすさを目指しましょう。

書体の読みやすさは、x-heightまたはIl1で確認

大文字の「I」、小文字の「l」、数字の「1」が読みやすいか

これまでのすべての記事は、下記をご覧ください。

sponsors

top of page

©2022 coliss