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

サイト構築 -デザイン

Post on:2021年12月22日

はじめに

次のプロジェクトのために効率的で美しい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. 空の状態を工夫することで、ユーザーの初期行動を促す

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

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