記事一覧
色と配色、色の持つイメージ
色と配色、色の持つイメージ
この記事は2022年8月に公開しました。
内容が今と違う場合があります。
内容が今と違う場合があります。
デザインの印象は、色で大きく変わります。
では、色は何を手がかりに決めればよいのか。
この記事では、色を決めるときに役立つ基本を4つ紹介します。
カラーホイール（色相環）／色の分類／色の持つイメージ／配色のルールです。
では、色は何を手がかりに決めればよいのか。
この記事では、色を決めるときに役立つ基本を4つ紹介します。
カラーホイール（色相環）／色の分類／色の持つイメージ／配色のルールです。
カラーホイール（色相環）
カラーホイール（色相環）とは
カラーホイール（色相環）は、色を虹の順に円の上に並べたものです。
色の組み合わせを考えるときに役立ちます。
この記事では、赤／黄／青を基準にした12色のカラーホイールを使います。
色の組み合わせを考えるときに役立ちます。
この記事では、赤／黄／青を基準にした12色のカラーホイールを使います。
カラーホイールは、まず赤／黄／青の「3原色（Primary Color）」から始まります。
この3色を基にして、他の色を作れます。
3原色のうち2つの色を同じ量だけ混ぜると、別の色ができます。
この色を「二次色（Secondary Color）」と言い、原色と原色の間に置きます。
赤と青を混ぜると紫、青と黄を混ぜると緑、黄と赤を混ぜるとオレンジになります。
原色と二次色を混ぜてできた色は、「三次色（Tertiary Color）」と言います。
この3色を基にして、他の色を作れます。
3原色のうち2つの色を同じ量だけ混ぜると、別の色ができます。
この色を「二次色（Secondary Color）」と言い、原色と原色の間に置きます。
赤と青を混ぜると紫、青と黄を混ぜると緑、黄と赤を混ぜるとオレンジになります。
原色と二次色を混ぜてできた色は、「三次色（Tertiary Color）」と言います。
カラーホイールの使用方法
カラーホイールで隣り合った色を、類似色と言います。
類似色を組み合わせると、まとまりのある印象になります。
類似色を組み合わせると、まとまりのある印象になります。
カラーホイールで反対側にある色を、補色と言います。
色の差が大きく、お互いの色を引き立てる組み合わせです。
色の組み合わせ方は、【初心者向け】RYB、CMYKとRGBの違い ～ 色・配色の基本知識にまとめています。
色の差が大きく、お互いの色を引き立てる組み合わせです。
色の組み合わせ方は、【初心者向け】RYB、CMYKとRGBの違い ～ 色・配色の基本知識にまとめています。
色の分類
無彩色と有彩色
色は、彩度（色の鮮やかさ）があるかないかで、大きく2種類に分かれます。
白／黒／灰色などの色みのない「無彩色」と、赤／黄／青などの色みのある「有彩色」です。
白／黒／灰色などの色みのない「無彩色」と、赤／黄／青などの色みのある「有彩色」です。
有彩色は、さらに純色／清色／濁色に分かれます。
- 純色
- いちばん彩度が高い色です。
- 清色
- 純色に、白か黒を混ぜた色です。
すっきりとした、きれいな色です。 - 濁色
- 純色に、白と黒の両方（灰色）を混ぜた色です。
濁った、柔らかい色です。
暖色・寒色・中性色
色は、暖色／寒色／中性色の3つにも分かれます。
- 暖色
- 赤／オレンジ／黄色など、暖かさを感じる色です。
- 寒色
- 青／青緑／青紫など、寒さや冷たさを感じる色です。
- 中性色
- 黄緑／緑／紫など、暖色にも寒色にも入らない色です。
色の持つイメージ
色には、心理的な効果と、その色ならではのイメージがあると言われています。
色が少し違うだけでも、見た目の印象は大きく変わります。
Web やグラフィックのデザインから、ファッションやインテリアまで、暮らしのいろいろな所で色の効果を生かしています。
暖色／寒色／中性色では、次のようなイメージがよく挙がります。
色が少し違うだけでも、見た目の印象は大きく変わります。
Web やグラフィックのデザインから、ファッションやインテリアまで、暮らしのいろいろな所で色の効果を生かしています。
暖色／寒色／中性色では、次のようなイメージがよく挙がります。
- 暖色
- 明るい／暖かい／愛情／活発／危険／緊急
- 寒色
- 涼しい／冷たい／冷静／落ち着き／信頼／誠実
- 中性色
- 穏やか／自然／安全／高貴／悲しみ
夏には寒色を、冬には暖色を使ったデザインが増えます。
色のイメージを生かしているためです。
季節に合わせて、空間の印象を変えたいときにも使えます。
よく使う色と、そのイメージを次にまとめます。
色のイメージを生かしているためです。
季節に合わせて、空間の印象を変えたいときにも使えます。
よく使う色と、そのイメージを次にまとめます。
色の持つイメージ一覧（白色、黒色、赤色、黄色 ...）
白 - White
白は、純粋／神聖／清潔／明るい／平和／自由／善／潔白／孤独／緊張／未来などのイメージがよく挙がる色です。
黒や灰色と同じく、無彩色に入ります。
どの色とも合わせやすいので、白をベースカラーにした Web サイトがたくさんあります。
黒や灰色と同じく、無彩色に入ります。
どの色とも合わせやすいので、白をベースカラーにした Web サイトがたくさんあります。
黒 - Black
黒は、高級感／暗闇／恐怖／沈黙／厳粛などのイメージがよく挙がる色です。
赤 - Red
赤は、情熱的／力強さ／アクティブ／おめでたい／興奮／怒り／衝動的／刺激／生命力などのイメージがよく挙がる色です。
印象が強いので、ロゴに赤を使うブランドや企業もたくさんあります。
買いたい気持ちを高める色とも言われていて、バッジやボタンにもよく使う色です。
印象が強いので、ロゴに赤を使うブランドや企業もたくさんあります。
買いたい気持ちを高める色とも言われていて、バッジやボタンにもよく使う色です。
黄 - Yellow
黄は、好奇心／幸福／光／活動的／軽快／エネルギー／希望／明るさなどのイメージがよく挙がる色です。
オレンジ - Orange
オレンジは、活発／家庭／暖かい／温もり／フレッシュ／にぎやかさ／親しみ／ポジティブなどのイメージがよく挙がる色です。
若い人と結びつきやすい色でもあります。
明るい色合いなので、学校（幼稚園）や IT／テクノロジーの分野でもよく見かけます。
若い人と結びつきやすい色でもあります。
明るい色合いなので、学校（幼稚園）や IT／テクノロジーの分野でもよく見かけます。
茶 - Brown
茶は、温もり／安定／素朴／落ち着き／質素／堅実／静けさなどのイメージがよく挙がる色です。
緑 - Green
緑は、穏やかさ／調和／自然／平和／安全／バランス／協調／新鮮／さわやか／やすらぎ／森林／健康／リフレッシュなどのイメージがよく挙がる色です。
青 - Blue
青は、平和／安全／冷静／静寂／誠実／清潔／クリア／若い／さわやか／水／空／海などのイメージがよく挙がる色です。
安心感や信頼感につながる色なので、サイトや企業のロゴマークでもよく見かけます。
安心感や信頼感につながる色なので、サイトや企業のロゴマークでもよく見かけます。
紫 - Purple
紫は、優雅／上品／神秘／古典的／伝統／知性／気品／ロマンス／幻想的／エキゾチック／ラベンダーなどのイメージがよく挙がる色です。
桃色（ピンク）- Pink
桃色（ピンク）は、エレガント／幸福／ハート／美容／ロマンチック／愛情／艶やか／可愛らしさなどのイメージがよく挙がる色です。
配色のルール
配色の考え方
色を選ぶときは、カラーホイール（色相環）を使って、色の組み合わせを考えます。
色数を増やすほど、デザイン全体のバランスを取るのが難しくなります。
まとまりのない、安っぽい印象にもなります。
そのため、色数はできるだけ3色ほどに絞ります。
色数を絞ったら、次は配色の比率を考えます。
色数を増やすほど、デザイン全体のバランスを取るのが難しくなります。
まとまりのない、安っぽい印象にもなります。
そのため、色数はできるだけ3色ほどに絞ります。
色数を絞ったら、次は配色の比率を考えます。
色の配色比率「70:25:5の法則」
使う3色を「70％：25％：5％」の比率で配色すると、バランスの取れた配色になると言われています。
- ベースカラー（70％）
- いちばん大きな面積を占める色です。
- メインカラー（25％）
- ブランドのイメージカラーなど、デザインの中心になる色です。
- アクセントカラー（5％）
- 画面の一部を目立たせる色です。
色を決める順番は、次の通りです。
- メインカラー（25％）
- ベースカラー（70％）
- アクセントカラー（5％）
メインカラーの決め方
メインカラーは、制作物のイメージを大きく左右します。
そのため、いちばん初めに決めます。
メインカラーは見出しや文字にも使うので、白い背景で読みやすい、明度（色の明るさ）を低くした色が使いやすいと言われています。
ロゴの色を、そのままメインカラーにしているサイトも多く見かけます。
そのため、いちばん初めに決めます。
メインカラーは見出しや文字にも使うので、白い背景で読みやすい、明度（色の明るさ）を低くした色が使いやすいと言われています。
ロゴの色を、そのままメインカラーにしているサイトも多く見かけます。
ベースカラーの決め方
メインカラーの次は、ベースカラーを決めます。
制作物の全体の70％を占める色で、主にサイトの背景や余白の色になります。
無彩色（白／黒／グレーなど）か、メインカラーやアクセントカラーの明度を上げた色をベースカラーにすると、デザインしやすくなります。
制作物の全体の70％を占める色で、主にサイトの背景や余白の色になります。
無彩色（白／黒／グレーなど）か、メインカラーやアクセントカラーの明度を上げた色をベースカラーにすると、デザインしやすくなります。
アクセントカラーの決め方
アクセントカラーは、ボタンなど画面の一部にだけ使う色です。
全体に占める面積はいちばん小さいのですが、いちばん目立つ色です。
そのため、メインカラーとは違う色を選びます。
全体に占める面積はいちばん小さいのですが、いちばん目立つ色です。
そのため、メインカラーとは違う色を選びます。
まとめ
色と配色の基本を、4つに分けて紹介しました。
- カラーホイール（色相環）
- 色を円に並べた図です（この記事では赤／黄／青を基準にした12色）。
隣り合う色は類似色、反対側にある色は補色です。 - 色の分類
- 色みのない無彩色と、色みのある有彩色に分かれます。
暖色／寒色／中性色にも分かれます。 - 色の持つイメージ
- 色ごとに、よく挙がるイメージがあります。
暖色なら明るい／暖かい、寒色なら涼しい／冷静などです。 - 配色のルール
- 色数は3色ほどに絞ります。
ベース70％／メイン25％／アクセント5％の比率にして、メインカラーから決めます。
IMG-flowで働くという選択
この記事を書いているIMG-flowは、大阪のWeb制作会社です。
どんな人と、どんな進め方で仕事をしているのかは、採用ページにまとめています。
クリエイター採用を見る
どんな人と、どんな進め方で仕事をしているのかは、採用ページにまとめています。
この記事は参考になりましたか？
ご回答ありがとうございました
