MotionBoardデザインコンテンツ

配色ってどう決めたらいいの？

配色を決める時の基本を学びましょう！
Write your awesome label here.

もくじ

色の考え方

画面の配色を考える時は、グラフや表など各アイテムごとに考えるのではなく、画面全体のイメージから検討します。
テーマとなる色を決めることで、全体的に統一感がでて見やすい画面になります。

画面の色の決め方

画面全体に対する配色は、画面の印象に関わります。
Webデザインやアプリにおける配色の決め方には定義があり、それはダッシュボードでも同じように利用できます。
配色を考える時は、以下の３色を決めましょう。
3色だけ？と思われる方もいるかもしれませんが、色数が増えるほど配色は難しくなります。まずは3色を軸として配色し、そこから必要があればさらに色を加えるなどしていくと上手くいきます。

配色の分類

また、色だけでなく配色の使用比率があります。
デザイン性の高い配色にするためには、以下の比率を意識することがポイントです。

配色比率の基準　70％ 25％ 5％

配色に自信がなくても、この数値を少し意識するだけで、テーマカラーがぶれることなく配色を作っていくことができます。
では、各配色の分類を決める時のポイントを具体的に見ていきましょう。

メインカラー

画面の主役となる色。枠組みやタイトル、アイコンなどの色。
決め方のポイント！


  • おおざっぱに『白系』『青系』などでもよい
  • 画面の雰囲気などから決める（落ち着いた、柔らかい、かわいい、など）
メインカラーは企業のロゴカラーなどを利用することもあります。
もしメインカラーで悩んだ場合は、ロゴカラーから色を選んでみるのもおすすめです。

ベースカラー

画面全体の印象となる色。背景や余白に使われる。
決め方のポイント！


  • 最背面の色になるので、派手すぎる色は避ける
  • メインカラーやアクセントカラーの明度(明るさ)を上げた色は扱いやすい
メインカラーと重ねたときのイメージ
ベースカラーはデザインの中で最も大きな面積を占める色となる為、デザイン全体の印象になります。
色を決める時は、メインカラーやアクセントカラーを邪魔しないような色を選びましょう。

アクセントカラー

重要度が高く、強調する必要のあるテキストやオブジェクトなど、利用者に特に見てほしい箇所に使う色。
決め方のポイント！


  • 全体の色と対照的な色を使う
  • パッと見たときに目を引く色を選ぶ

全体の色と対照的な色を使う

画面全体に使われているベースカラーやメインカラーと対照的な色を使うとアクセントとして効果的です。
『対照的』な色は、メインカラーやベースカラーによって変わります。悩んでしまったときは色相環図を参考にしましょう。
色相環図とは、赤→橙→黄→緑→青→紫と少しずつ色相が変わっていく状態を円環状にならべたもので、配色の組み合わせを考える際に利用します。
アクセントカラーは、メインカラーの反対色を使うと効果的です。たとえば、メインカラーに青を使用している場合は、反対側に位置するオレンジ色や黄色をアクセントカラーに使います。
以下のように、明度(明るさ)や彩度(あざやかさ)に差をつけた色を選択するのも一つの手法です。

サブカラー

重要度の高くないテキストやオブジェクトに使う色。
決め方のポイント！


  • 全体に統一感を出すか、メリハリをつけるか
サブカラーの役割は、メインカラーを補う色です。メインカラーの１色だけは物足りないといったときにサブカラーを決めていきます。
また、画面全体のイメージによって色の選び方が変わります。

統一感を出したいとき

全体的に統一感のあるまとまった画面にしたい場合は、メインカラーと近い色(類似色)を選びます。
類似色を探すときには色相環図を参考にしましょう。
例えば、メインカラーが緑の場合、その周りに位置する色が類似色です。

メリハリをつけたいとき

画面に動き(変化)が欲しいときは、色に変化をつけます。
決め方のポイント！


  • アクセントカラーよりも目立つ色にしない
ここでの注意点は、アクセントカラーよりも目立つ色を選ばないという点です。
アクセントカラーは画面上で目を引く色でなければなりません。アクセントカラーを邪魔しない色を選びましょう。
例えば、以下のようにメインカラーを緑、アクセントカラーをピンクに決めます。
この時、サブカラーをアクセントカラーより目立たなくするためには、明度(明るさ)をあげた色を選ぶとうまくいきます。
配色を考える時は、これらのポイントを踏まえたうえで色を検討しましょう。