2021年、最も注目されたUIデザインのテクニックのまとめ
Post on:2021年12月22日
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。
プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。
今年公開した中で最も注目されたUIデザインのテクニックをまとめました。
UI & UX Micro-Tips: Best of 2021
by Marc Andrew
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- はじめに
- 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する
- 2. 4ptベースライン+8ptグリッド=調和のとれた縦のリズム
- 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する
- 4. ホワイトスペースはたっぷり使用してください
- 5. アイコンをグリッドシステムで使用する際の注意点
- 6. アクションを実行した際に何が起きるのか分かるようにする
- 7. タブバーには重要なアイテムだけを表示する
- 8. スマホではタップ可能な領域を広くする
- 9. 適当にフォントサイズを選ぶのではなく Type Scaleを使う
- 10. 空の状態を工夫することで、ユーザーの初期行動を促す
- 11. 最適な読みやすさのために、x-heightに基づいてline-heightを決める
- 12. 書体の読みやすさは、x-heightまたはIl1で確認
はじめに
次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがあります。
UIのデザインにちょっとした一手間を加えるだけで、クライアント、ユーザー、そしてあなた自身が本当に満足できるものを作ることができるかもしれません。
1. ユーザーの混乱を避けるために、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)のコンテナ内に収まるように配置してください。そうすることで、デザイン内のアイコンが一貫してレイアウトされます。
上: 微妙にずれて配置されている、下: グリッドに合わせて配置
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で作成したフォントのデザインガイド
10. 空の状態を工夫することで、ユーザーの初期行動を促す
空の状態(エンプティステータス)は、ユーザーエクスペリエンスを向上させる上で非常に有益ですが、軽視されてしまうことがよくあります。空の状態のデザインを工夫することで、ユーザーが自分に役立つ情報・機能をすばやく見つけ、目標をより早く達成できるように、サイトやアプリを意図したとおりに使用する機会として利用しましょう。
ユーザーが最初に何をすべきかわからない状態にはしないで、どうすればよいのかを案内してください。
左: 空の状態であることだけが分かる
右: 空の状態のときに何をすべきか案内をする
11. 最適な読みやすさのために、x-heightに基づいてline-heightを決める
読みやすさの最適化を実現するには、フォントのx-heightに基づいてline-height
の値を設定するようにしてください。
例えば、Merriweatherはx-heightが大きい書体であるため、line-height
を大きくする必要があります。それとは対照的に、Mr Eaves Sansのように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、またはその両方を使用して常に最高の読みやすさを目指しましょう。
大文字の「I」、小文字の「l」、数字の「1」が読みやすいか
これまでのすべての記事は、下記をご覧ください。
- 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
sponsors