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

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

第3弾となる今回は、フォントやテキストに関するデザインのテクニックです。

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

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

• はじめに
• 1. フォントによって伝わり方が変わる
• 2. フォントで階層を示すにはウェイト、サイズ、カラーを使用する
• 3. ダークで見やすくするためにはフォントを重くする
• 4. 書体の選択によって、感情表現を生み出すことができる
• 5. 複数の書体を使用する場合は、最大2種類のルールを守る
• 6. すべて大文字で読みやすくするには、文字間隔が重要

はじめに

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

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

第3弾となる今回は、フォントやテキストで簡単に実践できるUIとUXの小技をまとめました。前回までの小技は、以前の記事をご覧ください。

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

1. フォントによって伝わり方が変わる

より太いフォントを使用すると、少しフォーマルな印象を与えてしまい、時には大声で叫んでいるような印象を与えてしまいます。そのような場合は、フォントを少し細くして、軽くしてみてください。

これにより、よりカジュアルで親しみやすいメッセージを伝えることができます。

左: 大きな声で威圧感がある、右: カジュアルで親しみやすい

2. フォントで階層を示すにはウェイト、サイズ、カラーを使用する

デザインでフォントを扱う時、エレメントを過度に強調させる必要はありません。重要なのは、バランスの取れた階層です。

これを実現するために必要なのはウェイト、サイズ、カラーを使用した微妙な調整だけです。

フォントのデザインに適切な階層があることで、ユーザーは最も重要な要素をすぐに見つけだすことができ、プロセスの混乱を避けることができます。

左: テキストがいっぱいあるだけ、右: 重要なテキストが目にはいる

3. ダークで見やすくするためにはフォントを重くする

ライトテーマに暗いカラーのテキストを使用する場合、デザインでフォントのウェイトを軽くする場合があります。しかし逆に、ダークテーマに明るいテキストの場合はどうでしょうか？

特に、長いテキストの場合、フォントのウェイトを少し重くすることを検討する必要があります。

ユーザーの目に負担をかけないように、最高の読みやすさを目指しましょう。

左: ウェイトが軽いフォント、右: 重くすると読みやすくなる

4. 書体の選択によって、感情表現を生み出すことができる

コンテンツに適した書体を選ぶようにしましょう。

ユーザーは知識が豊富で、コンテンツが自分に語りかけている時とそうでない時を直感的に感じ取っています。

書体を正しく選択することは、コンテンツを感情的なレベルで直接話すようにするための鍵となります。

左: コンテンツにあっていない書体、右: 適した書体

5. 複数の書体を使用する場合は、最大2種類のルールを守る

私はデザインする際に、可能な限り1書体のルールを守るようにしています。しかし、プロジェクトが必要とする場合は、書体の組み合わせを最大で2つにすることをお勧めします。

書体をうまく組み合わせるのは、経験の浅いデザイナーにとっては難しいかもしれません。無理して書体を増やさないようにしましょう。

最大2種類の書体を使用し、ウェイト、サイズ、カラーを組み合わせることで、デザインに視覚的な調和をもたらします。

左: いろいろな種類の書体を使いすぎ、右: 最大2種類の書体を使用

6. すべて大文字で読みやすくするには、文字間隔が重要

短いテキストをすべて大文字で処理しますか？

ユーザーの読みやすさを向上させるためには、文字間隔を広げるのがよいでしょう。そうすることで、文字の区別がつきやすくなり、読みやすくなります。

文字間隔を少し広げるだけで、読みやすさが向上し、大文字に洗練された印象を与えることができます。

左: 文字間隔が狭いと読みにくい、右: 広げると読みやすさが向上する

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