Design Partner

デザインに関する全てのことをお任せ下さい

豊富な経験が作り上げる、良質なデザインを。
デザインのお困り事があればご相談ください。

お見積・ご相談はお気軽にこちらまで

03-5312-6174

受付時間10:00~19:00

HOME > お役立ち知識:配色の基本

配色デザイン

COLOR SCHEME

配色デザインに役立つ!

基礎知識無料ツール

配色デザイン

配色は、デザインのイメージを作るだけでなく、人の感情に作用し、デザインの効果を左右する重要な要素です。
ノンデザイナーの方も、配色に関する知識を持っていれば、プレゼン資料や文書の作成はもちろん、デザインを発注・判断する際にも、より踏み込んだ判断ができるでしょう。

配色の基本を身につけよう

配色は、基本を意識するだけで、デザインの見やすさや全体のクオリティに大きな影響を与えます。
まずは基本的な用語とルールを理解することから始めましょう。

配色の基本用語

良いデザインの条件

色の三属性

色が持つ3つの性質、色相、明度、彩度を指します。すべての色はこの3つの要素から構成されています。

色相

赤・青・黄色などの、「色味・色合い」を指します。色味の違いを円状に配置したものを「色相環」と呼びます。

彩度

色の「鮮やかさ」を表します。より鮮やかな色味を「彩度が高い」、色味が失われるほど「彩度が低い」と表現します。

明度

色の「明るさ」を表します。明度が高い色ほど白に近くなり、明度が低い色ほど黒に近くなります。

補色

色相環で向かい合った位置にある色同士の組み合わせのこと。補色同士を組み合わせることで、コントラストが強い配色になります。

近似色

色相環で隣り合った位置にある色同士の組み合わせのこと。近似色同士を組み合わせることで、落ち着いたトーンの配色になります。

配色の基本ルール

1

色数を絞る

必要以上に色数を増やしたデザインは、煩雑で見づらい印象になりがちです。

初心者の場合、使う色数はベースカラー、メインカラー、アクセントカラーの3色でまとめるのがおすすめです。

2

「7:2.5:0.5」を
意識する

ベースカラー、メインカラー、アクセントカラーは、それぞれ7:2.5:0.5の割合で使用しましょう。

アクセントカラーはもっとも重要な要素に使用するのが効果的です。

3

補色と近似色を
使いこなす

アクセントカラーに迷ったら、色相環で反対に位置する補色を取り入れてみましょう。補色を効果的に使うことで、デザインにメリハリを作ることができます。

まとまりのある配色に仕上げたい時は、色相環で隣り合った近似色を取り入れるのがおすすめです。

4

ハレーションに
注意する

明度が近く、彩度が高い色同士を組み合わせることで、色同士の境界がハレーションを起こし、不快感を引き起こします。

「明度や彩度のバランスを調整」「色と色の間に別の色を挟む」などの方法で、ハレーションを防ぎましょう。

5

色の効果やイメージを
意識する

ターゲットや与えたい印象によって、使うべき色は変化します。

色が与える心理的効果やイメージを把握した上で、デザインの目的を意識した配色を心がけましょう。

目的別・おすすめ配色ツール5選

一口に配色といっても、色の組み合わせによって与える印象や効果はさまざま。
単に色数を使えば効果的なデザインになるとも限りません。

配色ツールとは、WEB上で公開されている配色パターンの見本のようなもの。
配色に悩んだ時のヒントに使えます。
プロのデザイナーもデザインに活用している無料の配色ツールで、配色の引き出しを増やしてみましょう。

1

キーカラーから配色パターンを探したい時

配色の見本帳

ベースとするキーカラーを選択すると、色彩情報や2色から6色の配色パターンを提案してくれます。色相環から色と色の位置関係と印象の変化を確認できるため、色彩感覚を養いたいデザイン初心者やノンデザイナーの方におすすめです。

2

相性の良い色をシンプルに探したい時

HUE/360

色相環からベースとなるキーカラーを選択すると相性の良い配色が絞られ、色を選択するとカラーコードが確認できます。表示されたカラーコードはRGBへの変換も可能です。

3

配色の引き出しを増やしたい時

coolors

スペースキーを押すと、ランダムに生成されたカラーパレットが表示されます。また、ツールバーで配色の色調、彩度、明度を調整し、取り込むことができます。

4

ウェブデザインの配色例を見たい時

Happy Hues

画面左のパレットを選択すると、右側のサイトデザインに反映されます。使われているカラーコードはページ下部で確認・コピーが可能。色の配分も参考にできます。

5

写真から配色を抽出したい時

Color Kitty

アップロードした画像から自動で色を抽出し、カラーパレットを作成してくれます。写真からイメージを広げてデザインする際に、カラーリングのヒントに使えるツールです。

色数別の配色ツール

配色初心者でもまとまった印象を作りやすいのが、色数を抑えた配色です。
シンプルで落ち着いた印象になる「2色」、メインカラー・ベースカラー・アクセントカラーからなるベーシックな「3色」、デザインの幅が広がる「4色」など、使いたい色数から配色を探してみましょう。

2色の配色が探せるツール

1

自分で調整して配色を探せる

Pigment

顔料(Pigment)と光量(Lighting)を調整してイメージに合った配色を探すことができます。写真を選んで相性の良い配色を探すことも可能です。

2

ランダムに配色を提案する

HELLO COLOR

クリックすると、2色の配色がランダムに表示されます。ベースとなる2色の他に、アクセントカラーやグラデーションも提案してくれます。

3

好みの色から
カラーパレットを作成する

Khroma

好きな色を50色以上選ぶと、人工知能が選んだ色の中から相性のよい2色を選び、カラーパレットを作成。背景とテキストカラー、グラデーションの見え方などが確認できます。

3色の配色が探せるツール

1

アート写真から抽出した
配色をストック

Found Color

アーティスティックなサンプル写真から色を抽出し、3色のカラーパレットにまとめたサイトです。個性的な配色を探すときのヒントになります。

2

色相環から相性の良い配色を提案

COLOR SUPPLY

色相環をベースに類似色や補色の組み合わせを提案。アイコンイラストで配色を確認できます。3色配色の他、2色、4色の組み合わせも探せます。

3

ランダムに3色の組み合わせを提案

RandomMaterial
Palette Generator

クリックするとランダムに3色の配色パターンが表示されます。カラーパレットのほか、テキストやロゴ、図形などで配色を確認できます。

4色の配色が探せるツール

1

シンプルな4色の配色見本

LOLcolors

女性向けや子供向けのデザインにも使いやすい、ポップなイメージや優しいイメージの配色が揃った配色見本サイトです。カーソルを置くことでカラーコードが表示されます。

2

シンプルに4色の配色が探せる

ColorDrop

4色の配色パターンがグリッド状に表示される、シンプルな配色見本サイトです。パレットごとにカラーコードとrgba値が表示されます。

3

バランスのいい色の配分を提案

ColorHunt

4色のカラーパレットがほぼ毎日更新されます。バランスのいい色の配分を提案してくれるため、メインカラー、アクセントカラー、サブカラーの配分のヒントになります。

配色の基礎が学べる本

配色のルールや色の基礎知識を身につけるには、作例から配色パターンを学べる本での学習がおすすめです。
ここでは、ノンデザイナーにおすすめの配色の本をご紹介します。

1

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色(2020)

ingectar-e(著)

すべての配色にデザインの作例、色の面積比が掲載されているため、初心者でも色配分のバランスやデザインイメージが掴めます。デザイン初心者やノンデザイナーの方におすすめです。

2

[デザイン技法図鑑]ひと目でわかる配色デザインの基本。(2020)

柘植 ヒロポン(監修) MdN編集部(編集)

配色パターンやデザインサンプルはもちろん、配色の基本のルールから具体的な配色例、イメージに合った配色の選び方など、配色デザインの基礎を丁寧に学べる一冊です。

3

やさしい配色の教科書[改訂版](2018)

柘植 ヒロポン(著)

デザインに最低限必要な「色のルール」を厳選し、やさしい文章とわかりやすい図版で丁寧に解説しています。これから配色を学ぶ人に最適な一冊です。

4

和のきれいな配色 キーカラーで選べる配色見本アイデア帖(2018)

ナイスク(編集)

日本の伝統色や配色を、歴史的な背景や文化とともに学べる一冊です。イメージビジュアルや配色パターンも豊富に掲載されています。

5

配色デザイン インスピレーションブック II (2019)

Power Design inc.(著)

求めるイメージから配色パターンが見つけられます。テーマ別の作例が豊富で、デザイナーとのデザインイメージの共有に役立つ一冊です。

無料お見積り・資料請求・ご相談はこちら

03-5315-0620
03-5315-0620

受付時間10:00~19:00

株式会社プリンツ21 | 〒160-0001東京都新宿区片町4-6 ANYビル5F

WEB商談
資料請求・ご相談
無料お見積もり
トップへ戻る
トップへ戻る