実際のアプリに学ぶ！モバイルデザインにおける配色の重要性

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、エンジニアのNick Babich氏によって投稿されました。

配色は、モバイルデザインにおいて、おそらく機能性の次に重要なものです。人間からコンピュータへの命令は主に、グラフィカルUI（GUI）の要素へのインタラクションを通して行われ、「配色」は重要な役割を担っています。

ユーザーが、アプリのコンテンツを見て理解し、アクションするときに役立ちます。すべてのアプリにはそれぞれに独自の配色があり、主な領域には原色を使っています。

新しいアプリをデザインするとき、可能な色の組合わせは無数に存在するので、それに合う配色を決定することは困難です。この記事では、モバイルデザインの配色で最も重要なことについて紹介します。

伝統的な配色のパターン（モノクロ―ム、類似色、補色）、どのパータンにも依存しない配色を自作する方法、ユーザビリティに優れたアプリのための色の選び方をテーマとして扱います。

また、この記事で紹介しているAdobe XDは、ダウンロードして無料で試用することもできます。

効果的な配色を選ぶ方法

配色を作るときには考慮すべきことがたくさんあります。

例えば、（あなたの製品や組織の）ブランドカラー、あなたの地域に調和するカラーなどです。

使うカラーの数はいくつにするべきか？

カラーの組合わせをシンプルにすると、ユーザーエクスペリエンスを向上する効果があります。シンプルな配色は、人間の目に自然になじみやすく、コンテンツの理解を促進します。反対に、過度に多くの場所に過度に多くの色を使う場合には、混乱したデザインになります。

トロント大学がAdobe Color CCの使用に関する調査を行ったところ、ほとんどの人が2〜3色のみ使用するシンプルな色の組み合わせを好むことが明らかになりました。

配色を作る方法

この2～3色を選ぶには、カラーホイール（色相環）を使うのが効果的です。

既存の配色は豊富にありますが、これらを利用すると新しいスキームの作成が容易になります。特に初心者の方にとっては。

モノクローム

モノクロは、各色が同じベースカラーから生成されるため、最もシンプルな配色です。モノクロームのカラーは全体的な色の調和を生み出し、すっきりとした印象になります。

画像：モノクロームの配色は、単色、そのティント（色相に白色を混ぜて生まれる色）、そのシェード（色相に黒色を混ぜて生まれる色）、そのトーン（色相に灰色を混ぜて生まれる色）から構成されます。

特に、青や緑のモノクロームの配色は、人間の目に優しい色合いになります。

画像引用元：Adobe Color CC

画像引用元：Louis Saville

モノクロームの配色は、クリーンで洗練された印象になります。

類似色

類似色の配色は、互いに調和する、カラーホイールで隣り合う色から作られます。そして、1色をドミナントカラー（支配色）として使い、他の色は配色を引き立てるために使います。

画像：12色のカラーホイールで隣り合う3色を使うことで、類似色の配色が作られます。

類似色の配色は比較的簡単ですが、色の鮮やかさが強調されやすいため、その決定が重要です。

例えば、ジェスチャー駆動のToDoリストアプリであるClearは、視覚的にタスクの優先順位を示すためにこの配色を使っています。

画像引用元：Adobe Color CC

Clearのデフォルトの配色は、ヒートマップを連想させるようなデザインで、より重要度の高いタスクは、鮮やかな赤い色で画面に表示されます。

一方、瞑想アプリのCalmはユーザーがリラックスできるように、類似色の配色に青と緑を使っています。

画像引用元：Adobe Color CC

Calmは全体のデザインにも、類似色の配色を使っています。

補色

補色とは、カラーホイールで正反対の位置にある色です。補色の色同士は必ずしも不調和になるというわけではありません。

補色とは、カラーホイールで正反対の位置にある色です。

補色はコントラストが強く、ユーザーの注意を引くために使うことができます。一方の色をドミナントカラー（支配色）にして、もう一方の色をアクセントカラーにすることが重要です。例えば、緑のオブジェクトの上に赤を合わせると、非常に目立ちます。

補色の配色は、何かを目立たせたい場合に効果的です。

しかし、補色の配色を使うときには、不調和な配色とならないよう注意も必要です。

カスタムの配色を自作する

配色を自作することは、多くの人が考えているほど複雑ではありません。明るいアクセントカラーを中間色（ニュートラルカラー）に加える方法は、その中で最も簡単な配色の1つであり、視覚的な効果も非常に高いといえます。

グレースケールのデザインに1色を追加するだけで、シンプルかつ効果的に視線を集めることができます。

Dropboxの配色を構成しているのは、白の背景、グレーのテキスト、青いアクセントカラーです。画像引用元：Dropbox

Adobe Color CCは配色を効率化する

Adobe Color CCを使うと、色の選択が容易になります。パレットの各カラーは、数回クリックするだけで基本色として修正または選択できます。

各カラーのコードをエクスポートする機能もあります（16進数カラーコードを含む）。

パレットは直接的にライブラリに保存または追加できます。さらに、コミュニティによって作られた数多くの配色も、サイト上で利用できます。

ゼロから作る必要がなくなるので、ぜひ試してみることをおすすめします。

コントラストの効果

一般的に、UI上で色のあるオブジェクトや領域は、単独で表示されるということはなく、他の色のオブジェクトや領域と隣り合うか重ねられています。このことがコントラストの効果を生みます。

コントラストとは、ある色が別の色からどのくらい対立するかを表す指標です。

コントラストを適切に使うと、目への負荷を減らし、画面上のデザイン要素をはっきり区別することでユーザーの注意を引く効果があります。

高いコントラストの場合はそれぞれのカラーがはっきりと目立ちますが、低いコントラストの場合はそうなりません。

コントラストとテキストの可読性

カラーコントラストは、色彩理論がデザインのユーザビリティに重要な影響を及ぼす分野の1つです。デザイナーは、美しくて調和が取れているように見える、低いコントラストを好む傾向にあります。

しかし、美しいことは常に可読性を高めるベストな方法であるとは限りません。テキストにカラーを使うときには、低いコントラストにすると読みにくくなるため、注意が必要です。

このことは特にモバイルス画面において注意するべきであり、ユーザーは外出先でデバイスを利用することが多いため、明るい場所で光が画面に反射するときには、ますます読みにくくなるのです。

デザイン要素同士のコントラストは十分に高くしておきましょう。その方法は簡単で、コントラスト比を確認するだけです。

コントラスト比は、あるカラーが別のカラーからどのくらい対立するかを示す比率です（一般的に、1:1や21:1などの形で表記されます）。コントラスト比の差が大きくなるほど、相対輝度の差も大きくなります。

W3Cは、本文のテキストと画像のテキストについて次のコントラスト比を推奨しています。

• 小さな文字のテキスト：背景に対して少なくとも4.5：1のコントラスト比とする必要があります。
• 大きな文字のテキスト（14 ptの太いウェイト/ 18 ptの標準的なウェイトおよびそれ以上）：背景に対して少なくとも3：1のコントラスト比とする必要があります。

このガイドラインは、低視力、色覚異常、または視力の低下しているユーザーが画面上のテキストを見たり読んだりする際にも役立ちます。

テキストの色と背景色をW3Cの推奨するコントラスト比に従って修正すると、読みやすくなります。

画像引用元：マテリアルデザイン

アイコンなど他のデザイン要素も、W3Cの推奨するコントラスト比を実践することが望ましいです。

選択したパレットのコントラストの度合いについて、有益なフィードバックを提供してくれる無料のツールもいくつかあります。

その1つはWebAIMのColor Contrast Checkerで、選択した色をテストできます。

ユーザーの注目を集める効果

コントラストは読みやすいテキストを作るだけではなく、画面上の特定の要素にユーザーの注目を集める効果もあります。一般的に、高いコントラストは、重要度の高い要素を引き立てるために使うのに適しています。

例えば、ユーザーは背景色と高いコントラスト比にあるコールトゥアクション（CTA）のボタン要素を、よりクリックしやすいといえます。

コントラストによって、画面上でデザイン要素が目立っています。

色覚異常（カラーブラインド）の人のためのデザイン

視覚的な障害を持つ人があなたのアプリのユーザーとなり得ることを想像したことがありますか？

通常、色覚異常は「特定の色を多くの人と同じように知覚しないこと」という意味で使われています。男性の約8％、女性の約0.5％が何らかの形で色覚異常の影響を受けているとされています。赤と緑の色について、よく問題となるようです。

色覚異常としてさまざまなタイプ（赤、緑、青、黄、モノクロームなど）が存在するため、アプリにおいて重要度の高いことを表示するときには、あらゆる人が知覚できるような視覚的な配慮が重要です。

システム状態を知らせるために、カラーだけを使用しないように注意してください。

また、Photoshopは色覚異常の人が見た場合をシミュレーションするのにも役立つツールです。アプリの画面が実際にどのように見えるかを表示する機能を備えています。

画像：Airbnbアプリのログイン画面　画像引用元：Pinterest

結論

今回は、色彩理論がアプリのUIデザインをどのように向上できるかの基本については、ほとんど触れていません。

カラーを使いこなすスキルを磨くためには、継続的な努力を要します。 美しくかつ機能的な配色を作成する方法を学ぶには、練習、決意、および多くのユーザーテストが必要です。

また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。