プロのデザインを解説、UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.2

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

先日の記事の続編で、プロのデザインを学べます。

UI & UX Micro-Tips: Volume Two.
by Marc Andrew

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

• はじめに
• 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する
• 2. 近接を使用して、要素間の関係性を伝える
• 3. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム
• 4. 見出しのline-heightを減らすのは良いこと
• 5. 配色で困ったら、類似色で探してみる
• 6. UIデザインから不要なノイズを取り除く

はじめに

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

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

前回（当ブログの翻訳記事）に続き、この記事では、デザインとユーザーエクスペリエンスの両方を改善するのに役立つ小さな、そして簡単に実行できるデザインのヒントをまとめました。

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

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

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

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

2. 近接を使用して、要素間の関係性を伝える

デザインの原則（コントラスト、スペース、反復など）の中には、ユーザーにとってより明確なUIを作成するのに役立つ重要なものがあります。

特に、近接は重要です。

近接とは、関連するデザイン要素が一緒に配置され、お互いの関係性を示すことで、ユーザーの認識を向上させることができます。

左: 要素間が離れすぎ、右: 近接を使用して要素間の関係性を伝える

3. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム

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

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

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

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

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

4. 見出しのline-heightを減らすのは良いこと

読みやすくするために十分な量のline-heightが必要な本文のテキストとは対照的に、見出しは本文より短いので、line-heightを少し減らすことができます。

見出しで推奨されるline-heightの値は、font-sizeの1.3倍くらいです。

もし本文とline-heightの値を同じにしているなら、減らしてみてください。

左: line-heightが本文と同じ、右: line-heightを減らした見出し

5. 配色で困ったら、類似色で探してみる

隣接、または隣接色相と呼ばれる類似色は、配色の中で最も調和のとれたものの一つで、色を追加したい時に非常に役立ちます。

一次色、二次色、三次色で構成される隣接する色相のセットは、シンプルなカラースキームをすぐに作成できます。

UIデザインで色の調和をもたらす必要がある場合は、類似色を使用してください。

色を追加したい時は、類似色が役立つ

6. UIデザインから不要なノイズを取り除く

シグナルを最大化し、ノイズを最小化することで、デザインの明瞭さと使いやすさを実現できます。これにより、高いシグナルtoノイズ比が得られます。

関連する情報（シグナル）を効率的に提示し、無関係な情報（ノイズ）を減らしたり、完全になくすことで達成することができます。

曖昧さを取り除き、物事をより明確にします。
これでシグナルtoノイズ比が上がります。

左: 不要な情報（ノイズ）がある、右: 関連する情報（シグナル）を最大化する

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