これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ

サイト構築 -デザイン

Post on:2018年3月6日

1. テキストは重要、より大きく！

フォントの階層構造が必要なコンテンツに直面した時に、テキストを大きくして強調と重要性を与えても、通常は下記のように問題を解決できません。

サイズを変えただけでは、効果は薄い

フォントの階層構造とは、小さいサイズと大きいサイズを使用するだけではありません。コントラストを作り出すには、フォントのサイズ、ウェイト、カラーを組み合わせるのが重要です。より大きいコントラストがあるほど、より良い階層構造を作ります。

フォントのサイズ、ウェイト、カラーを組みあせた階層構造

どのようにコントラストを改善するのですか？

フォントでコントラストと階層を作成するために、1種類のウェイトでサイズだけを変化させて使用しないでください。
その代わりに、プライマリコンテンツでは大胆でダークなスタイルを使用し、セカンダリコンテンツでは小さくし、ウェイトを軽くします（ウェイトは重要ではありません）。
テキストのカラーは、ダークからライトまで3種類を作成します（下の例を参照）。私は中央のベースカラーをボディテキスト用カラーとして使用します。
アイテムに大きなフォントのギャップ（ヘッダに24px、本文に16px本文、メタに10pxなど）を適用することは大切です。サイズに大きなギャップがあると、より良いコントラストを作ります。
より良いフォントの階層構造を作成するには、オンラインツール「Modularscale」をお勧めします。
重要なポイントは、「コントラストとは = サイズ+ウェイト+カラー」です。
最後に、コントラスト比を確認します。「contrast ratio」を使用してアクセシビリティをチェックできます。

ベースのカラーを作成し、そこからダークがヘッダ用、ライトがメタ用です。

2. 複数のブラックを作成しない

テキストでブラックの異なる色合いを作成するために、カラーピッカーで一生懸命に調整する必要はありません。

わたし達は、ブラックのテキストカラー（#000000）を使用するとユーザーの目に負担をかけることを知っています。それに対する解決策は、代替としてブラックのバリエーションを作成することです。
その際に、ブラックのカラー値を調整するのではなく、ブラックの不透明度を調整するだけで、素晴らしい結果を得られます。

ブラックの不透明度を調整

上記の例では、私はプライマリカラー（#000000）としてブラックを使用し、適用先に応じて不透明度を減少させました。

3. カラーを理解するためには数学が大切

わたし達デザイナーの多くは、適切なカラーの組み合わせを選ぶことに没頭します。十分に調整されたカラーパレットを使ったデザインを見るたびに、その組み合わせをどのように作ったのか興味を持つでしょう。

illust by momoandsprits

私がカラーを理解できるようになったのは、色相、彩度、明度（HSB）を単純な足し算と引き算することで素敵な魔法をかけることができることを学んだからです（RGBではなく、HSBを使用します）。あなたは色のついた背景の上から退屈なホワイトを簡単に取り除くことができ、下記のような素晴らしいデザインに変えることができます。

退屈なデザインから素晴らしいデザインに

HSBの足し算と引き算はどのようにするのでしょうか？

色を理解するための2つのアプローチ

カラーの足し算と引き算には、2つのアプローチがあります。
Option AもBも同じベースカラー#B9F4BC（背景のサークル）ですが、フォルダとストリップのカラーが異なります。HSBの最初の数字は色相（Hue）で、次は彩度（Saturation）で、最後は明度（Brightness）に対応することを常に覚えておいてください。

Option A

Option Aでは、シェイプ（サークル、フォルダ、ストリップ）のそれぞれで色相値123をすべて保持しているのに対し、彩度と明度の値が変化しているのが分かります。

ベースカラーのサークルの値に注目してください。フォルダに濃いグリーンを適用するために彩度と明度の値が変化しています。彩度の24は+16で40に、明度の96は-14で82に、良いコントラストを作るために彩度と明度を反比例に調整しているのが分かります（逆もまた同様です）。
ストリップでも同じように、彩度の40は+4で44に、明度の82は-7で75に、増減しています。これは、下記のルールに基づきます。

よりダークなカラーにするには: 彩度（S）を増加し、明度（B）を減少させる
よりライトなカラーにするには: 彩度（S）を減少し、明度（B）を増加させる

デザインでどのような色を使うべきなのか悩む度に、このルールによって私は助けられました。出発点はベースのカラーを用意することで、そこから色相値を同じに保ちながら彩度と明度の調整を開始します。

Option B

Option Bでも同じルールが適用されていますが、色相値は変化します。さまざまなデザインで使われている用語のRGBとCMYは、わたし達にとって意味をなすでしょう。

RGBとはレッド・グリーン・ブルーを表し、CMYはシアン・マゼンダ・イエローを表します。これらの用語は私がデザインを始めた時にはあまり重要ではありませんでしたが、色の組み合わせにRGBとCMYを利用するようになって、重要になりました。

Option Bではベースカラーをよりダークにしたい場合は、カラーパレットの最も近いRGBがある方向にカラーピッカーを移動するだけです。ライトにしたい場合は、CMYがある方向に移動します。

カラーピッカーをRGB・CMYがある方向に移動

フォルダアイコンに適用されるベースカラー#B9F4BC（サークルの背景）のよりダークなバリエーションを作成したい場合は、カラーピッカーを最も近いRGBがある方向に移動します（上記の例ではブルーです）。逆にライトなバリエーションを作成したい場合は、CMYがある方向（イエロー）に移動します。

カラーピッカーを希望のバリエーションに移動した後、Option Aのルールを適用すると、このカラーの組み合わせが得られます。

Option Aのルールを適用

調整後のカラーピッカーの値

レッド・グリーン・ブルー(RGB) + Option Aのルール: よりダークなカラーに
シアン・マゼンダ・イエロー(CMY) + Option Aのルール: よりライトなカラーに

4. 空白スペースを活用してグループ分け

グループ分けには十分なスペースを与える

コンテンツを2つのグループに分ける時には、ラインを使用して区切るのではなく、空白スペースを使う方が簡単で、デザインのより良い解決方法です。

これはデザインの基本原則「近接」を使ったテクニックです。

お互いに近い、または近くにあるオブジェクトは、それらのオブジェクトがグループ化されます。

上記の例では、タイトルと著者の間に24pxの大きな空白スペースを使用することによって、コンテンツをグループ分けしています。

5. カラーを使用して行を区切る

区切りとしてのカラー

横行のインターフェイスでの注意点は、同じコンポーネントを繰り返すことが必要で、デザインするのが退屈になることがあります。そして、ユーザーから見るとこの繰り返されたコンポーネントは、行と行の間に大きな区別がないと、それらを読むことが非常に困難です。

区切りにラインを使うことは別として、行ごとの背景にカラーを加えるのはユーザーにとって大きな助けとなります。また、わたし達デザイナーにとっても楽しいものになるでしょう。

6. ドロップシャドウの代わりに乗算を使う

動的イメージの背景

背景のイメージが動的な（あるいは変更される）場合、ヘッダのコンポーネントやテキストを加えることは非常に困難となります。

そのような動的イメージの背景を持つテキストの一般的な解決策はドロップシャドウを追加することですが、ユーザーの読みやすさには役立ちません。ドロップシャドウは文字と単語の間のスペースを満たすため、文字と単語の周りに視覚的な混乱を加えます。

例えば、ブラックとホワイトのオーバーレイは、こういったデザインに役立つテクニックですが、最近私は乗算をブレンドツールとして使用する方法を発見しました。

乗算を使ったブレンド

このテクニックを使用すると、画像上にブラックの背景を作成して不透明度を下げるよりもはるかに簡単です。また、グレースケールにすると、画像の他の部分に自然な色が保持され、テキストは少し暗くなり読みやすくなります。

7. 一行の長さ

一行の最適な長さ

多くのデザイナーで共通するのは、一行の長さをコンテナに収まるように長くすることです。しかし、コンテナいっぱいに長くしてしまうと、ユーザーの理想である45-60文字/一行とは異なってしまい、ユーザーにとっては目が疲れます。

一行の長さを短くして理想的にするというジレンマに遭遇した場合は、下記のように右側に大きな空白スペースができてしまうことがあります。

最適な長さにしたら、右側に大きな空白スペースが

ためらうことを躊躇しないでください。
テキスト全体をそのコンテナに合わせることで、右側にできた大きな空白スペースを取り除くことができます。

中心に揃えて、右側の空白スペースを取り除く

8. 新しいデザインに執着しない

カードのデザイン

デザインに一貫性を持たせないようにするのは、コンポーネントベースのデザインではない場合です。例えば、5種類のカードに、10個のボタンと5個のタイトルのスタイルなどを作ったことにあなたが気がついた時です。

特定のコンテンツ用にインターフェイスを作成する前に、以前に作成したデザインを見てみましょう。リサイクルして使用できるパターンが見つかる場合があります。

新しいデザインを発明する代わりに、以前に作成したデザインを使用してコンテンツに置き換えることができます。これにより、デザイナーの時間が節約され、インターフェースの一貫性も確保されます。

9. ブランドカラーをアクセントとして使用する

ブランドカラーをどこに使用するか

わたし達は通常、ブランドカラーがインターフェイスのカラーの大きな部分を占めなければならないと考えています。クリーンでシンプルなレイアウトの場合、クライアントから伝えられた派手なネオンイエロー、オレンジ、ピンクのブランドカラーをどこに使用するればよいか苦労するでしょう。

その答えは簡単です。ブランドカラーをアクセントカラーに使用してみてください。

10. リストにおけるビュレットのデザイン

リストのデザイン

最後に、リストをデザインする場合は上記のようにテキストの位置を揃え、ビュレット（あるいは数字）を強調表示させます。これにより、ユーザーの可読性の流れが中断されずに見やすくなります。

これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ