プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.7

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

第7弾は、テキストや要素をより分かりやすく魅せるデザインのテクニックです。

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

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

• はじめに
• 1. メッセージは分かりやすく簡潔に
• 2. 長文コンテンツには、20ptを試してみてください
• 3. エラーメッセージは色だけで情報を伝えないように
• 4. 4ptベースラインと8ptグリッドで調和のとれた縦のリズムを作成
• 5. 見出しは文字間隔と行の高さを小さくする
• 6. 要素をよりはっきりと魅せる

はじめに

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

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

第7弾となる今回のテーマは、テキストと要素を魅せるテクニックです。前回までの小技は、以前の記事をご覧ください。

• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.1
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.2
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.3
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.4
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.5
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.6

1. メッセージは分かりやすく簡潔に

Webページやスマホアプリに表示するメッセージは常に短く、要点を絞って、ユーザーが理解しやすい言葉を使用してください。専門用語を使う必要がないのであれば、専門用語は使わないようにしましょう。くだらないことは避けてください。

簡潔で明瞭なメッセージをユーザーに提示することで、ユーザーは目的を達成しやすくなります。

上: 「注文が送信されました。」
下: 「注文済み」

2. 長文コンテンツには、20ptを試してみてください

長文コンテンツ（記事やプロジェクトの説明など）の場合、本文には20pt（またはそれ以上）を使用してください。

もちろん、使用する書体にもよりますが、一般的な本文用の書体は20ptで見栄えがよく、ユーザーが大量のテキストを目にしたときの読みやすさが格段に向上します。

長文コンテンツでは20ptがお勧め

3. エラーメッセージは色だけで情報を伝えないように

色はデザインにおいて強力な力を発揮しますが、重要な情報をユーザーに伝えるために、色だけに頼ってはいけません。例えば、フォームのエラー表示で「想像力をかきたてる」レッドのボーダーで表示しても、多くのユーザーには役立ちません。

アイコンや説明文などを加えることで、メッセージをより詳しく伝えることができ、同時にアクセシビリティも向上します。

上: レッドのボーダーで囲んだだけのエラー表示
下: アイコンと説明文を加えたエラー表示

4. 4ptベースラインと8ptグリッドで調和のとれた縦のリズムを作成

テキスト周りのデザインに関しては、4ptベースラインと8ptグリッドを組み合わせることで、デザイン全体の垂直方向のリズムがより調和したものになります。

テキストは4ptベースラインのグリッドに揃え、line-height値は4の倍数（4, 8, 12, 16, 20など）を採用します。

なぜ4なのか？
これは私の経験則ですが、8の倍数にすると特定の書体サイズで作業する際に行が離れすぎてしまうことがあるためです。4ptベースラインのグリッドを使用すると、より細かいコントロールが可能になり、結果が大幅に向上しました。

4ptベースラインのグリッドで、垂直方向のリズムをつくる

5. 見出しは文字間隔と行の高さを小さくする

前述の長文コンテンツとは対照的に、見出しは一般的に非常に短いので、行の高さを少し小さくします。

また、見出しのフォントサイズは大きいため、文字間隔は視覚的に大きく見えます。そのため、文字間隔を狭くすることで、見出しの視覚的なバランスが良くなります。

見出しを読みやすくするために、文字間隔と行の高さを減らしてください。

上: 読みにくい見出し
下: 文字間隔と行の高さを小さくした見出し

6. 要素をよりはっきりと魅せる

複数のドロップシャドウを使用したり、要素の周りに1pxのボーダー（実際のシャドウよりも1〜2段階暗い色）を付けたりすることで、要素をよりシャープに、よりはっきりと見せることができます。

このシンプルな方法を実践することで、要素がよりポップになり、濁った印象のシャドウを避けることができ、デザインにさりげない磨きをかけることができます。

シャドウは複数のレイヤーで重ねて使用する

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