あなたは、自分のアイデアや考えを誰かに伝えたいとしましょう。
文字をベースにしたコンテンツはもちろん重要ですが、イラストやチャート図、グラフ、アニメーションGIFなどの画像を作成することで、読者の注意を引き、記事やレポートをより充実させることができます。
成功のカギはずばり、色彩理論を知ることで、コンテンツを際立たせるのに役立ちます。
しかしそうは言っても、あなたもこんな風に悩んだことがあるはず。
「魅力的でかっこいいデザインをする方法がよく分らない。」
「私、クリエイティブじゃないし、。」
私は、”売れるデザインとは？”という究極の悩みを考え続け、このサイトで公開する記事用のビジュアルを作成する日々を、１５年ちかく送ってきました。
ちょっとした配色の違いで、アクセス数が２倍、３倍に変わったことも何度もあります。
このような経験があるからこそ、ハッキリ言えることがあります。
それは、配色で損をしている人が、あまりにも多いということ。
せっかく時間と労力をかけて作成した、あなたの素晴らしい商品やサービスの魅力が、ユーザーにまったく伝わっていないのです。
そんなのは悔しすぎます。でも、ご安心ください。
この記事は、そんなあなたの役に立ちたくて書きました。
配色の力で、あなたの努力や情熱が正当に認められる。
あなたの素晴らしい商品やサービスが、もっと多くのユーザーに伝わる。
配色で損をしている人を救うため、この記事がそのきっかけになれば幸いです。
配色の基本となる色彩理論、配色の種類、カラーパレットの使い方についての入門ガイドです。以下のトピックを詳しく見ていきましょう。
目次
色彩理論とは？
色彩理論（英: Color Theory）とは、配色における主要なルールとガイドラインの基本で、美しいビジュアルを作成するために仕様されます。
色彩理論のキホンを理解することで、色を論理的に分析し、より効果的にカラーパレットを作成・使用することができるようになります。
その結果、特定の感情や雰囲気、美的センスを表現することができます。
なぜWebデザインは色彩理論が重要？
色は、文字テキストやレイアウトなどの他の要素と同様、デザインにおいて重要な要素のひとつです。
あなたのデザインを見たユーザーが特定のレイアウトをどのように移動し、その際に何を感じるかに影響を与えることができます。
色彩理論をしっかり理解することで、インパクトのあるビジュアルをより意図的に作ることができるでしょう。
魅力的なビジュアルを手軽に作成できるツールは数多く存在しますが、グラフィックデザインの作業には、デザインの基本についてもう少しだけ予備知識が必要です。
たとえば、正しい色の組み合わせを選ぶこと。
実際、あらゆる規模のブランドが色彩心理学を利用して、色がどのように意思決定やデザインに影響を与えるかを検討されています。
効果的なCTAからマーケティングまで、適切な色を選択することは、Webサイトの特定のセクションを強調したり、ユーザーを迷わず誘導したり、親近感を与えることも可能です。
あなたが色の使い方を知れば知るほど、成功のチャンスは広がります。
色彩理論のキホン
カラーホイールについて
図工や芸術の授業などで、見かけたことがあるかもしれません。通常、画家やアーティストなどによって活用されるカラーホイール（英: The Color Wheel）は、12色で構成されています。
それぞれの色の関係を、視覚的に理解しやすくなります。
カラーホイールは、色を混ぜることで構成されています。
原色（英: Primary Color）の赤、黄、青色を混ぜることで、等和色（英: Secondary Color）のオレンジ、みどり、むらさき色ができあがります。
そしてこれらの等和色に、原色を混ぜることで、赤オレンジ、黄オレンジ、黄みどり、青緑、青むらさき、赤むらさきなどの３次色（英: Tertiary Colors）となります。
また原色と等和色は、「虹の色（英: Colors of the rainbow）」として知られる、可視スペクトラムの一部でもあります。
赤（Red）、オレンジ（Orange）、黄色（Yellow）、みどり（Green）、青（Blue）、濃紺（Indigo）、むらさき（Violent）の順番となり、「Roy. G. Biv」と覚えるとよいでしょう。
色に関する用語について
カラーホイールは、原色、二次色、三次色、そしてそれぞれの色相、色合い、色調、陰影を円グラフにしたものです。
色を視覚化することで、それぞれの色が虹色のカラースケールで隣の色とどのような関係にあるかを示し、配色を選ぶのに役立ちます。
配色のために色を選ぶとき、カラーホイールは、元の色に白、黒、グレーを混ぜることによって、より明るい色、より明るい色、より柔らかい色、より暗い色を作り出すことができます。
これらのミックスによって、以下のカラーバリエーションが生まれます。
- 色相（英: Hue）: 色（英: Color）と同義語で、特定の色の名前を指し、通常はカラーホイールに使われている12色のひとつを言います。
- 影、シェード（英: Shade）: 黒色を混ぜて、色合いを暗くした状態。
- トーン（英: Tone）: 灰色をまぜて、色合いがかすれた状態。
- 色合い（英: Tint）: 白色を混ぜて、色合いを明るくした状態。
- 彩度（英: Saturation）: 色の強度や純度を指します。
- 値（英: Value）: 色の明るさや暗さを指します。
基本を押さえたところで、もう少し複雑なこと、たとえば加法と減法の色相論理について詳しく見ていきましょう。
加法と減法の色彩理論
プリント印刷する必要があるデザインプロジェクトを手がけているとき、コンピューターのモニターでは実際に印刷する色を、正確に確認することはできません。
液晶モニター/スクリーンと印刷では、RGBとCMYKの異なるカラー方式を採用しています。
RGBカラーは赤とみどり、青色の小さなドットを組み合わせ、スクリーンに色を表示します。
CMYKカラーは、シアン（英: Cyan）とマゼンタ（英: Magenta）、黄色（英: Yellow）、黒（英: Black）の頭文字を表し、カラー印刷を行うときに色を混ぜて色を表現します。
注目したいポイントとして、デザイナーによっては、最初のうちはRGBカラーで制作しておき、プリント印刷する前にCMYKカラーに変換する方法を好むこともあります。
色のヤバい心理効果
色には固有の意味があり、さまざまな感情を引き出すことはよく知られています。これらの意味は、ユーザーが製品を認識するのにも直接的な影響を与えます。
ウェブサイトやアプリの配色カラーパレットを選択するときは、どのように見えるか考えるのではなく、どのような気分を感じるのか検討する必要があります。
赤色（英: Red）
コンテンツによってさまざまなアイデアを適用することができる色。赤色は炎や温かさ、危険、血、緊急性、イキイキとした色、心臓やハートに関連し、ときに暴力的。
その他の意味
東洋文化では、赤は良い運勢を表し、繁栄を表すことから結婚式で、花嫁が着用します。世界的に、赤色は政治的な動きや、革命の象徴などを連想させます。
ブランディング
赤色は強さ（英: Strength）や信頼（英: Confidence）、力強さ（英: Power）などを表し、識別しやすい色のひとつ。
黄色（英: Yellow）
太陽の色で、幸せ（英：Happiness）や快活（英: Cheerful）、フレンドリー（英: Friendliness）、春のフレッシュさなどを表します。またコンテンツによって、注意や警告のシグナルにもなります。みどり色がかった黄色の配色では、不健康（英: Sickly）で不愉快（英: Unpleasant）な印象にもなり得ます。歴史的にみて、黄色は病気（英: Illuness）や隔離（英: Quarantine）などを連想させることがあります。
その他の意味
東洋やアジア文化圏では、黄色は王位（英: Royalty）やハイランクを意味します。アフリカやラテン・アメリカでは、黄色は哀悼（英: Mourning）を表します。
ブランディング
純粋な黄色は、注目を惹くのに最適ですが、ビジュアの邪魔をしたり、読みにくい場合があるので注意が必要です。（たとえば、黄色の背景に白文字など。）
みどり色（英: Green）
自然や植物、成長などを表す色。健康（英: Halth）やフレッシュさ（英: Freshness）、自然をテーマにした雰囲気。深いみどり色は、お金などに関連する富（英: Wealth）や安定（英: Stability）を表します。
その他の意味
イスラム圏において、みどり色は神聖な色とされています。またアイルランドを連想させたり、聖パトリックの祝日（St. Patrick’s Day）や四つ葉のクローバーなどにも関連づけられます。
ブランディング
自然や環境にやさしく、健康にも良いオーガニックな商品やブランドイメージ。自然をテーマにするときは、緑と茶色の組み合わせをよく見かけます。
青色（英: Blue）
海や空を連想させる色。青色は、平和的（英: Peaceful）で清潔（英: Clean）の品質を表現します。エネルギッシュで暖かいイメージの反対で、涼しく、落ち着いた印象。また悲しみ（英: Sadness）や憂うつ（英: Depression）も表すことも。
その他の意味
アラブ、中東地方において青色は、悪魔から守る伝統的な色です。また多くの文化で、天国を連想させる青色は、不死（英: Immortality）やスピリチュアル（英: Spirituality）と考えられています。
ブランディング
もっとも幅広く利用されている色のひとつ。信頼性（英: Trustworthiness）や安全（英: Security）、安定（英: Stability）を連想させます。濃い青および紺色は、企業関連のコンテンツによく利用され、真面目さ（英: Serious）や保守的（英: Conservative）、専門性（英: Professional）を表現できます。
むらさき色（英: Purple / Violet）
むらさき色は、王位（英: Royalty）や威厳（英: Majesty）、名誉（英: Honor）などを表します。また霊的（英: Spiritual）で、宗教的（英: Religious）にも関連付けられます。
その他の意味
世界中の多くの文化において、むらさき色は高潔さ（英: Nobility）や富（英: Wealth）を表します。しかし、タイと南アメリカの一部では、哀悼（英: Mourning）を示す色でもあります。
ブランディング
深い色合いは、ラグジュアリーで富裕（英: Opulence）な印象を与え、明るく/鮮やかな色合いは、女性的および子供らしさを表します。
黒色（英: Black）
赤色と同じように、たくさんの意味合いをもつ色。力（英: Power）や高級さ（英: Luxury）、洗練（英: Sophisticate）、上流な（英: Exclusivity）イメージを演出します。その反対に、死（英: Death）や悪魔、神秘性などにも関連付けられます。また洋服において黒色は、フォーマルな正装および追悼の意を表します。
その他の意味
アジアやアメリカ文化において、黒色は男性的な色と考えらえています。エジプトでは、復活（英: Rebirth）を表します。多くの文化において、魔法や迷信、悪い運などを連想させるものでもあります。
ブランディング
中立的なイメージを演出できる黒色は、幅広く使われている色のひとつで、コンテンツによって意味合いが異なります。シンプルな黒白のモノクロデザインが多く、それは計画的な場合と、プリント代を節約しているだけという場合も検討できます。黒色を背景にすると、色は通常明るく見えます。
白色（英: White）
ライトや雪などの色。純粋さ（英: Purity）や潔白（英: Innocence）、徳（英: Goodness）、完璧さ（英: Perfection）などを表し、ありのまま（英: Stark）で無菌（英: Sterile）にもつながります。
その他の意味
中国では、哀悼を意味する色です。多くの文化において、平和（英: Peace）を連想させる色でもあり、白旗は世界的に降参を表します。
ブランディング
簡単さ（英: Simplicity）や清潔さ（英: Clean）、モダンな印象を表現します。ミニマルスタイルのデザインでは、白色を利用するケースが多いようです。
美しい配色を作り出すカラースキーム
主な配色は、単色、類似、補色、分割補色、三色、正方形、長方形（または四角形）の7種類。
単色配色
単色(英: Monochromatic）は、濃淡の異なる単色を使うことで、一貫した外観と雰囲気を生み出します。色のコントラストには欠けますが、とてもクリーンで洗練された印象に仕上がることが多いのが」特長。また、色の明暗を簡単に変えることもでき便利です。
類似色相配色
類似色(英: Analogous）は、カラーホイールで隣り合う色どうしを組み合わせた配色を指します。類似した近い色を利用することで、穏やかで感じの良い印象が特長です。以下では、コントラストの低い5色の組み合わせを実現しています。
補色色相配色
補色（英: Complementary）は、カラーホイールの反対側の色を組み合わせた組み合わせで、補色（英: Complement）同士を組み合わせた配色を指します。この配色は、鮮やかで精力のある元気なデザインが特長です。
分裂補色配色
分割補色（英: Split Complementary）は、補色にも似た配色で、メインカラーと一緒に、カラーホイール上でメインカラーの対局の色と隣り合う2色を利用した、合計3色で作成する色の組み合わせを指します。コントラストの高い配色ですが、補色を利用しないことで、色の激しさを押さえることができます。
コンプリメンタリー配色に自信がないときに、代替案として利用したい配色のひとつ。
３色（トライアド）配色
３色・トライアド配色（英: Triad）は、カラーホイール上の等しい距離にある3色の組み合わせを指します。うまく調和の取りつつ、強いコントラストを表現することができます。たとえ色相の低い色でも、鮮やかな配色を実現できる組み合わせです。
４色（テトラード）配色（正方形）
４色・テトラード(英: Square)は、カラーホイール上の等しい距離にある4色の組み合わせを指します。以下のサンプル例では、それぞれ色合いの異なる配色ですが、補色を利用しているのでうまく調和を保つことができます。この配色は、ダイナミックで、鮮やかな楽しい効果を実現できます。
４色（テトラード）配色（長方形）
テトラード配色（英: Tetrad）は、カラーホイール上を四等分する位置の色を利用した配色を指します。メインカラーに２つの補色、アクセント用1色を加えた、合計4色の組み合わせです。もともと「テトラ」とは、ラテン語で4のことを意味していることを覚えておくと分かりやすいでしょう。
各色の配色の組み合わせを知っておくと、あなたも色で悩むことが少なくなるはずです。
配色カラーパレット
では、配色の種類をきちんと理解したところで、実際の配色を見てみましょう。
種類: 単色配色
青色とむらさき色を使用することで、このブルーベリーにインスパイアされた単色のテンプレートを際立たせています。
それぞれの色合いが次の色に重なり、同じカラーファミリーの中にありながら十分なコントラストを表現しています。
種類: 補色配色
どんなデザインにも合わせやすい配色で、控えめな色合いが特長のカラーパレット。より高級感のある、洗練されたラグジュアリーなホテル関連や、落ち着ける地元のコーヒーショップなど合わせ方自由自在。
種類: 類似色配色
パステルカラーとアースカラーをブレンドした類似色のカラーパレット。心を落ち着かせ、目を楽しませてくれる色合いが素敵。
この他にもさまざまなカラーパレットを集めているので、以下の記事も参考にしてみると良いでしょう。HEXカラーコード付きなので、コピペで配色を利用でき便利です。
Webサイトでの効果的な配色カラーパレットを探しているときはこちら。
ロゴデザインの配色選びに悩んだときはこちら。
日本の美しい絶景写真をコンセプトにした配色カラーパレット集。
スタジオジブリの作品に使われている、美しい配色カラーパレットを調べてみました。
失敗しない配色の選びかた
１．美しい写真を利用しよう
２．カラーホイールを利用しよう
バンクーバーを拠点に活動するCindy Kinashは、「水彩絵の具で花をペイントするとき、類似色（英: Analogous Color）は影を表現するのにピッタリです。」と説明しています。以下の作品では、明るい青色に暗めの青と紫色を使い、奥行き感を表現しています。
３．インテリアデザインを参考にしよう
MyCreativeLandのイギリス人デザイナーElena Genovaは、鍵となるいくつかのアドバイスをくれました。「グラフィックデザインにも応用できるインテリアデザインのルールがあります。60%の主調色（英: Dominant Color）に、30%の等和色（英: Secondary Color）、10%のアクセントカラー（英: Accent Color）です。もし４色利用したいときは、等和色（英: Secondary Color）を半分に分けましょう。」
他のクリエイティブな分野を掘り下げることで、新しい基本となるルールを知ることで、配色に新たな可能性を見つけるきっかけになるでしょう。
４．自然の中から色を見つけよう
最高の色の組み合わせは、自然から来ていると言えるかもしれません。インスピレーションがほしいときは、わたしたちのまわりを見回してみましょう。
日常生活で美しいと感じる瞬間があれば、配色カラースキームとして活用してみましょう。美しい瞬間の写真を撮影し、Color Palette Generator などを使いオリジナルの配色カラーパレットを作成することができます。
５．トピックの雰囲気に色を合わせよう。
デザイン制作で描こうとしているトピックをよく検討してみましょう。それはスポーツ関連ですか、それともファッション、美容関連、またはビジネス関連ですか？これらをスタートに、どのような雰囲気やムードを表現したいのか考えていきます。
Graphic Boxを運営するSalomeは、作業をはじめる前にラフな色のテーマを決めることが大切だと語っています。たとえば「ロマンチックなむらさき色」や「かわいいピンク色」といった具合です。
より詳しい内容は以下の記事で紹介しています、こちらも参考にしてみると良いでしょう。
配色選びで覚えておきたい基本ルール１０個をひとまとめにした、こちらの記事もおすすめです。
褒められる配色カラーパレットの使い方
配色が決まったら、カラーパレットを最大限に活用するポイントをまとめました。
１．グレースケールで作業しよう
デザインの早い段階で色や色調を使いがちですが、配色を調整するために多くの時間を費やしてしまったという経験はないでしょうか。デザインを魅力的に見せることができますが、この手順は見直す必要があるようです。
代わりに、デザイン要素の配置とレイアウトに集中してみましょう。こうすることで、デザイン制作を手掛ける時間を節約できるでしょう。また、このような制約をもってデザインを進めることで、より生産的に制作を進めることができます。別のトーンを利用することで、見た目が退屈になってしまうのを防いでくれるでしょう。
２．60−30−10ルールを試そう
このインテリアデザインルールは、いつの時代にも活用できるデザインテクニックで、配色を手軽にまとめるのに役立ちます。60％+ 30％+ 10％の比率は、バランスの良い色を取るためのものです。この方程式は、バランス感覚をつくり、視線がある焦点から次の焦点へと快適に移動するためにうまく機能します。
60%がまとまりのある色合いで、30%が補色、10%がアクセントカラーとなります。
３．重要性を色のコントラストで表現しよう
色は視線を誘導するのに役立つツールです。何かを目立たせたいほど、コントラストの色に頼るべき。一般的に、重要なコンテンツや要素に対しては、はっきりとしたコントラストが最適です。ユーザーにクリックを促したい場合は、色を使って目立たせてみましょう。
配色カラーパレットを効果的にするその他の基本ルールは、以下の記事を参考にどうぞ。
便利すぎる配色ツール
ここまで、どの色とどの色が最も相性が良いのか、またその理由を理解するための理論や実用的なテクニックをまとめてきました。
しかし、実際にデザインしながら色を選ぶとなると、素早く簡単に作業ができる配色ツールがあると便利です。
幸いなことに、デザインに使う色を探したり、選んだりするのに役立つ配色ツールはたくさんあります。
そんな数ある配色ツールの中でも、特におすすめしたいものをいくつかご紹介。
カラーホイールを利用した配色えらび、画像からグラデーションを抽出し、カラーグラデーションとして保存できるなど、色に困ったときはまずはここ。
写真から配色カラーパレットを作成したり、PhotoshopやIllustratorなど、Adobe CCツールとの配色の同期もでき便利。
配色カラーパレットを選んでも、具体的な使い方が分からないというひとにオススメしたいツール。カラーパレットを選択するたびに、サイト全体の配色も変更し、ひと目で確認できます。
人工知能テクノロジーを駆使し、プロジェクトにあった配色を自動で提案してくれるツール。色の組み合わせを確認できるサンプルイメージが豊富。
日本独自に伝わる伝統の色をデザイン制作に活用したいときは、こちらのサイトがオススメ。見やすいカラーチャートに、美しいアニメーションが素敵なツール。
海外の大企業やスタートアップで使用されている、ブランディングカラーをアルファベット順にまとめたサイト。気に入ったカラーリングはASE、SCSS、LESS、CSSスタイルでダウンロードすることができます。
正しい配色を見つけよう
ここまで本当にお疲れさまでした。
これであなたも色彩理論のキホンを中心に、配色に関する原則ルールをばっちり知ることができました。
色を選ぶときは、色の背後にある理論をしっかり理解し、効果的な色の使い方を見つけてみましょう。
では、デザインを楽しんで。
参考文献 : 10 color inspiration secrets only designers know about – Canva Blog
参考文献 : Red, White, and Blue. Seven rules about color palettes that… | by Nick Babich
参考文献 : The Ultimate Color Combinations Cheat Sheet / Bright Side
参考文献 : Color Theory 101: A Complete Guide to Color Wheels & Color Schemes – HubSpot
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
