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

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

第9弾は見出しや本文など、テキストのデザインのテクニックです。

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

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

• はじめに
• 1. ホワイトスペースはデザイン要素
• 2. 明るいテキストと画像のコントラスト比を適切に保つ
• 3. 見出しや本文にぴったりな垂直のリズム
• 4. 書体の読みやすさは、x-heightまたはIl1で確認
• 5. テキストブロックのサイズに応じてline-heightを調整
• 6. テキストのカラーパレットはシンプルにし、濃淡だけを変える

はじめに

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

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

第9弾となる今回のテーマは、テキストです。前回までの小技は、以前の記事をご覧ください。

• 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

1. ホワイトスペースはデザイン要素

ホワイトスペースは、Webサイトやアプリのメッセージを明確に伝え、ユーザーエクスペリエンスを大幅に向上させるために、タイポグラフィ・カラー、画像と同様に重要なデザイン要素です。

デザインを詰め込みすぎないでください。デザインとユーザーの両方に息吹を与えましょう。

スペースを利用できるからといって、スペースをすべて埋める必要はありません。他のデザイン要素と同じように、ホワイトスペースを適切に使用しましょう。

ホワイトスペースをデザイン要素としてデザインする

2. 明るいテキストと画像のコントラスト比を適切に保つ

明るいテキストが明るい画像背景で読めるかどうか、常にチェックしましょう。

テキストの後ろに少し暗い不透明な背景を使用するだけで、コントラスト比を保つことができます。

また、テキストのカラーを変更せずに、暗い画像と明るい画像を素早く切り替えることができます。

画像に明るいテキストを載せる時は常に読めるかどうかチェックする

3. 見出しや本文にぴったりな垂直のリズム

垂直のリズムでテキスト要素間の視覚的階層を実現するには、適切なスペースを設定する必要があります。

多くのデザインを見てきましたが、最も一般的なのは記事リストで、見出しの上下のスペースを均等にした結果、その下の本文とのつながりが失われていました。

このような場合、見出しの上のスペースを多めにとり、下のスペースを少し少なめにします。そうすることで、見出しとその下の本文とのつながりがより強固になり、優れた垂直のリズムと視覚的階層がリストのすべての記事間で維持されます。

スペースは均等にするのではなく、見出しの上を多め、下を少なめに

4. 書体の読みやすさは、x-heightまたはIl1で確認

x-heightとは小文字の「x」の高さのことです。フォントのx-heightが大きいと、特に本文で使用した場合に読みやすさがかなり向上します。

書体の読みやすさを判断するもうひとつの方法として、「Il1テスト」があります。同じ書体の3つの文字、大文字の「I」、小文字の「l」、数字の「1」を比較します。文字の形がそれぞれどのように異なるかで読みやすさを判断することができます。

本文に使用する書体を選ぶ際には、x-height、Il1、またはその両方を使用して常に最高の読みやすさを目指しましょう。

大文字の「I」、小文字の「l」、数字の「1」が読みやすいか

5. テキストブロックのサイズに応じてline-heightを調整

すべてのline-height（行の高さ）が同じというわけではありません。さまざまなサイズのテキストブロックを扱う場合、それぞれのブロックに適したline-heightを見つける必要があります。

たとえば、テキストのブロックが長い場合、line-heightを増やすことで、行末と次の行の始まりを区別しやすくなり、大きなテキストブロックをスムーズに移動することができます。

また、テキストブロックが短く、行の長さも短い場合は、読みやすさの問題を心配することなく、標準的なline-heightにするか、わずかに減らすことができます。

テキストの量や長さに応じて、line-heightを調整する

6. テキストのカラーパレットはシンプルにし、濃淡だけを変える

メッセージを表現するために、テキストのカラーを大量に使用する必要はありません。相性の良いカラーの組み合わせを見つけるのに苦労する人もいるでしょう。

ティント（薄い色）やシェード（濃い色）を使用してみましょう。

Tint & Shade Generatorで、指定したカラーのティントとシェードをすばやく生成できます。

テキストティント（薄い色）やシェード（濃い色）を使用する

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