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

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

第10弾は、デザインの原則とフォントやシャドウに関するデザインのテクニックです。

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

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

• はじめに
• 1. 近接: 重要なデザインの原則です、上手く使いましょう
• 2. UIに含まれる要素は常に区別できるようにデザインする
• 3. 見出しと本文の両方に最適なサンセリフフォント
• 4. 見出しと本文の両方に最適なセリフフォント
• 5. フォントの組み合わせを探す時はSuperfamilies
• 6. シャドウは繊細に

はじめに

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

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

第10弾となる今回のテーマは、デザインの原則とフォントやシャドウです。前回までの小技は、以前の記事をご覧ください。

• 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
• UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9
• 2021年、最も注目されたUIデザインのテクニックのまとめ

1. 近接: 重要なデザインの原則です、上手く使いましょう

近接とは、より明確なUIを生み出すのに役立つデザインの原則の一つです。

近接を使用すると、配置するデザイン要素の関係性が示され、関連したデザイン要素が一緒に配置され、サイトやアプリを使用する際のユーザーの認知を早めることができます。

定期的に使用し、上手に活用しましょう。

左: 要素を均等に配置、右: 近接を使用すると要素の関係性が示される

2. UIに含まれる要素は常に区別できるようにデザインする

ユーザーエクスペリエンスを向上させるために、UIに含まれる重要な要素は常に互いに容易に区別できるようにデザインする必要があります。

たとえば、ボタンとラベルを考えてみましょう。

ボタンとラベルはほとんどの場合、ボタンが優先されます。ボタンは目立つようにデザインし、ラベルは他のコンポーネントと簡単に区別できるようにデザインします。

左: ボタンとラベルがほぼ同じデザイン、右: ボタンを目立つようにデザイン

3. 見出しと本文の両方に最適なサンセリフフォント

優れたフォントはデザインを即座に改善し、サイトやアプリのエンドユーザーに正しいメッセージを伝えるのにいかに役立つかを私は知っています。

私は今までに何度もこれらのサンセリフフォントを使用しており、見出しと本文のどちらにも同じように使用できます。

これらの素晴らしいフォントはすべてfonts.adobe.comにあります。

見出しと本文の両方に最適なサンセリフフォント

4. 見出しと本文の両方に最適なセリフフォント

前述したように、優れたフォントはデザインを「まぁまぁ」から「素晴らしい」に変える重要な要素の一つです。今度は、セリフフォントを紹介します。

私はこれらのフォントを見出しと本文の両方に使用しており、非常におすすめです。

これらの素晴らしいフォントもすべてfonts.adobe.comにあります。

見出しと本文の両方に最適なセリフフォント

5. フォントの組み合わせを探す時はSuperfamilies

以前にもSuperfamiliesを紹介しましたが、素晴らしいフォントの組み合わせを見つけるのに苦労したときにとても役に立つので、もう一度紹介したいと思います。

Superfamiliesは、セリフとサンセリフの書体のセットで、視覚的に完璧に調和するようにデザインされています。

もしあなたがフォントの組み合わせで悩んだ時は、Superfamiliesは素晴らしいスタート地点になります。

• Superfamilies -Google

右: Superfamiliesによるフォントの組み合わせ

6. シャドウは繊細に

シャドウはさりげなく使うことで、デザインにおける強力な視覚的手がかりとして機能します。

覚えておいてください。現実世界でのシャドウはほとんどの場合、気づかないものです。したがって、UIでのシャドウも同様の動作を再現することを目指すべきです。

UIにシャドウをつけるならさりげなく、目立たないように繊細に使用しましょう。

左: シャドウが目立ちすぎ、右: 繊細なシャドウ

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