on:2021年12月22日sponsorsデザインはちょっとした一手間を加えるだけで、ぐっとよくなります。プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。今年公開した中で最も注目されたUIデザインのテクニックをまとめました。Andrew下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。書体の読みやすさは、x-heightまたはIl1で確認はじめに次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがあります。UIのデザインにちょっとした一手間を加えるだけで、クライアント、ユーザー、そしてあなた自身が本当に満足できるものを作ることができるかもしれません。ユーザーの混乱を避けるために、UIで確立されたアイコンを使用するアイコンを使用するときは、実行するアクションが明確に分かる確立されたアイコンを選択してください。「確立された」とは正しい意味と機能性が伝わるアイコンのことで、そうでない場合はユーザーの混乱を招き、認知障害につながります。アイコンを冒険的に使用するのはやめましょう。4ptベースライン+8ptグリッド=調和のとれた縦のリズムテキストを使用する場合、4ptのベースラインと8ptのグリッドを一緒に使用することで、より調和のとれた縦方向のリズムをデザインにもたらすことができます。line-heightの値に4の倍数(16,20,24,28など)を使用して、テキストを4ptのベースラインに揃えるだけです。4なのか?個人的には、過去に8の倍数でスケーリングすることは特定のテキストサイズで作業する場合に汎用性が低いということが分かっています。4ptベースライン+8ptグリッドの縦のハーモニーを使用してみてください。フォントで階層を示すにはウェイト、サイズ、カラーを使用するデザインでフォントを扱う時、エレメントを過度に強調させる必要はありません。重要なのは、バランスの取れた階層です。これを実現するために必要なのはウェイト、サイズ、カラーを使用した微妙な調整だけです。フォントのデザインに適切な階層があることで、ユーザーは最も重要な要素をすぐに見つけだすことができ、プロセスの混乱を避けることができます。ホワイトスペースはたっぷり使用してくださいホワイトスペース、ネガティブスペース、空白スペース、これらはすべて同じです。あなたへのアドバイスは、ホワイトスペースは惜しみなくたっぷり使用、または適度にうまく使用してください。デザインにホワイトスペースを加えることはデザインを改善する最も簡単な方法の一つで、デザインに息を吹き込み、より洗練された印象を与えることができます。アイコンをグリッドシステムで使用する際の注意点アイコンと8ptグリッドシステムを使用する場合、よくできたアイコンセットは8の倍数(16×16、24×24、32×32など)でデザインされていることが分かります。常にそうであるとは限りません。ない場合は、使用するアイコンを8ptグリッド値(例えば、24×24)のコンテナ内に収まるように配置してください。することで、デザイン内のアイコンが一貫してレイアウトされます。アクションを実行した際に何が起きるのか分かるようにする結果をもたらす可能性のあるアクションを使用する際は、常にユーザーに詳細な情報を伝えるようにしてください。何かを完全に削除するなど取り返しのつかない結果を伴うアクションに当てはまります。「削除する」と書かれた赤いボタンをクリックする前に、それをクリックすると何が起こるのか分かりやすく伝え、確認を求めるようにします。タブバーには重要なアイテムだけを表示するアプリのタブバーは、スクリーンのスペースを有効に利用できるので、賢く使用してください。アプリで最も頻繁に使用するアイテムのためにタブバーのエリアを確保し、使用頻度が高くないアイテムは「その他」の中に隠します。小さなタブバーには重要なものだけを置くスペースがあります。スマホではタップ可能な領域を広くするスマホのデザインでは、指で簡単にタップできるようにタップ領域を十分に大きくしてください。iOSとAndroidで推奨される最小のタップ領域は、下記の通りです。Android人間の指にはさまざまなサイズがあるので、余裕を持たせて、ユーザーがイライラせずに正確にタップしやすいようにしてください。Scaleを使用すると便利です。1.25)に基づいて動作します。キャプションやボタンなど)のフォントサイズを得るという方法です。Scaleを使用すると、調和のとれたテキストを作成することができ、タイポグラフィに一貫性、リズム、階層性をもたらすことができます。空の状態を工夫することで、ユーザーの初期行動を促す空の状態(エンプティステータス)は、ユーザーエクスペリエンスを向上させる上で非常に有益ですが、軽視されてしまうことがよくあります。空の状態のデザインを工夫することで、ユーザーが自分に役立つ情報・機能をすばやく見つけ、目標をより早く達成できるように、サイトやアプリを意図したとおりに使用する機会として利用しましょう。ユーザーが最初に何をすべきかわからない状態にはしないで、どうすればよいのかを案内してください。最適な読みやすさのために、x-heightに基づいてline-heightを決める読みやすさの最適化を実現するには、フォントのx-heightに基づいてline-heightの値を設定するようにしてください。Merriweatherはx-heightが大きい書体であるため、line-heightを大きくする必要があります。Sansのようにx-heightが小さい書体で読みやすさを実現するためには、line-heightを少し小さくします。書体の読みやすさは、x-heightまたはIl1で確認x-heightとは小文字の「x」の高さのことです。フォントのx-heightが大きいと、特に本文で使用した場合に読みやすさがかなり向上します。書体の読みやすさを判断するもうひとつの方法として、「Il1テスト」があります。同じ書体の3つの文字、大文字の「I」、小文字の「l」、数字の「1」を比較します。文字の形がそれぞれどのように異なるかで読みやすさを判断することができます。本文に使用する書体を選ぶ際には、x-height、Il1、またはその両方を使用して常に最高の読みやすさを目指しましょう。大文字の「I」、小文字の「l」、数字の「1」が読みやすいかこれまでのすべての記事は、下記をご覧ください。