プロのデザイナーに学ぶ！ひと手間加えて、UIデザインの印象を改善するデザインのテクニックのまとめ

UIデザイナーの仕事は試行錯誤の繰り返しで、ちょっとしたことで印象が大きく改善されます。デザインを改善するために役立つ実践的なテクニックを紹介します。

今手がけているUIデザインを改善するだけでなく、次のプロジェクトを開始する際の指針としても簡単で実践しやすいテクニックです。

9 tips to quickly improve your UI designs
by Marc Andrew (mrcndrw.com)

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

• はじめに
• 1. 要素をより明確に表示する
• 2. デザインに使用する書体は1つで十分
• 3. 長いコンテンツは文字のサイズに気をつける
• 4. ユーザーのオンボーディングエクスペリエンスを改善する
• 5. シャドウを使う時は光源を意識する
• 6. テキストと画像のコントラストを改善する
• 7. 中央揃えのテキストを適度に使用する
• 8. ホワイトスペースを効果的に使う
• 9. 明るい背景のテキストは暗くする

はじめに

美しく、使いやすく、効果的なUIをデザインするには時間がかかり、その間に多くのデザイン変更が行われます。クライアントやユーザー、そして自分自身が本当に満足するものを生み出すためには、こうした絶え間ない微調整が必要です。

私が長年をかけて気づいた、デザインの見た目を微調整するシンプルな方法をいくつか紹介します。これらは作成しようとしているビジュアルを素早く改善できます。

この記事では、今しているデザインを改善するのに役立つだけでなく、次のプロジェクトを開始する際の指針としても簡単で実践しやすいテクニックをまとめました。

1. 要素をより明確に表示する

複数のドロップシャドウ、または繊細なボーダー（実際のシャドウよりも暗い色合い）を使用して、要素をよりシャープにすることで、明確に表示することができます。混乱するようなシャドウは避けてください。

シャドウは効果的に使用して、要素をより明確に表示する

2. デザインに使用する書体は1つで十分

アートワークを作成する時は、1つの書体のみを使用するだけで十分です。使う書体を1つにすることで、より強力で一貫性のある結果を得られる場合があります。

「常に2つの書体を使用する」は無視します。ミニマルでいきましょう。書体のウェイト・サイズ・カラーを組み合わせることで、満足できる結果を得られます。

書体のウェイト・サイズ・カラーを組み合わせる

3. 長いコンテンツは文字のサイズに気をつける

長い形式のコンテンツ（例えば、ブログ記事、プロジェクト説明など）の場合は、本文の文字サイズを20pt（またはそれ以上）を選択してみてください。

もちろんサイズは選択した書体に依存しますが、人気のある書体のほとんどは20ptで問題なく機能します。ユーザーがテキストだらけのページに直面したときに、優れた読書体験をもたらします。以前の標準だった18ptは読みにくいです。

本文の文字サイズは、20pt（またはそれ以上）を選択

4. ユーザーのオンボーディングエクスペリエンスを改善する

スマホアプリで、ユーザーがオンボーディングシーケンスをシーケンスをいつでもスキップできるように、スキップリンクを簡単にタップできる位置に配置します。

2020年も親指ルールを忘れないでください！

ボタンは簡単にタップできる位置に配置

5. シャドウを使う時は光源を意識する

シャドウは常に1つの光源から来るようにしてください。これは単純なことですが、見過ごされがちです。

わたし達が住んでいる世界には、太陽は1つしかありません。

シャドウは常に1つの光源から来るようにする

6. テキストと画像のコントラストを改善する

テキストを画像のどこに配置するかによって、画像全体のオーバーレイにするか、繊細なグラデーションオーバーレイ（下から上、または上から下）にするかを選択して、2つの要素間のコントラストを実現できます。

オーバーレイにすると、テキストと画像のコントラストが改善される

7. 中央揃えのテキストを適度に使用する

テキストの見出しや少ない語句には、中央揃えも検討してみてください。それ以外の場合は、左揃えにしておきましょう。

少ない語句には、中央揃えも検討

8. ホワイトスペースを効果的に使う

ホワイトスペース、ネガティブスペース、空白、あなたはもちろん知っているでしょう。適度に使用するものですが、効果的に使用してください。

ほんのわずかなホワイトスペースがデザインに息吹きを与え、より洗練された印象を与えることができます。デザインを改善するために最も早く最も簡単にできる方法の1つです。

ホワイトスペースを与えると、タップしやすくなる

9. 明るい背景のテキストは暗くする

背景が明るい場合は、テキストをあまり明るくしないようにします。クールな子供たちは（まだ）しているように見えるかもしれませんが、あなたは賢く、よりアクセシブルなインターフェイスを作りたいと思っているでしょう。

明るい背景には、テキストが暗い方が見やすい

さらに多くのUIとUXのデザインのヒントと記事を読みたい人は、私のブログmrcndrw.comもチェックしてみてください。