2019-03-01たとえあなたがデザイン初心者でも、簡単にプロの配色に近づくテクニックを紹介します。そのテクニックとは、ずばり「トーン」と「比率」です。これは僕が十数年のデザイナーとしてのキャリアから体得したものなので、もしかしたら一般的ではないかもしれません。(一応、カラーコーディネーターの資格も2級ですが持ってます)ですが、もしもあなたが「デザイン初心者だけどプロっぽく配色したい!」という要望があれば、ぜひ読んでみてください。配色は、感情やイメージを伝えるためには大切な要素です。「トーン」と「比率」を知らないまま配色しようとすると、なんだか安っぽい印象の配色になってしまいがちです。そこで、「トーン」と「比率」を理解する予備知識として、まずは色の基本である「色の三大要素」を確認しておいてください。色には三大要素(色相・明度・彩度)があります。この3つの要素の組み合わせで、さまざまなイメージを表現できます。簡単に配色できるように、難しい概念や理論は説明を省きます。詳しく知りたい場合は、下に載せているリンク先などで学んでみてください。いう言葉で区別できる色の性質です。お互いが連続してつながりあって色相の輪をつくります。色には色相とは別に明るい色、暗い色というように色を比較して区別することができます。明るい色はさわやかで軽快な感じの色に、また、暗い色は重厚で落ち着いた感じの色になります。これを色の"軽重感"といいます。色の鮮やかさやくすみの程度を数量的に表したのが彩度です。鮮やかな色ははなやかな目立つ色になりますし、くすんだ色には、おだやかで上品な色が多いようです。これを"派手地味感"といいます。明度がある見落としがちですが、色相にも明度が存在しています。色相を白黒にしてみると、黄色は明度が高く、青や紫は明度が低いことがわかると思います。リンク色が持つイメージ色の三大要素について知ってもらったところで、それぞれの要素が持つイメージについて整理しておきたいと思います。この感覚は、デザイナーでなくても誰もが持っている感覚だと思います。次のようなイメージです。リンクプロの配色に近づくための「トーン」とは予備知識の「色の三大要素」を知ってもらったことで、プロに近づく配色をするために必要な「トーン」がわかりやすくなると思います。「トーン」とは、明度と彩度の複合概念です。明度と彩度を同時に扱うことで、感情やイメージを表現することができます。全体のトーンを整えることが簡単に配色するコツです。デザイン初心者の配色は、トーンを意識できていないことが多いように感じます。トーンによるシチュエーションのイメージは、下図のとおりです。トーンについては、「色相」は考えなくて大丈夫です。重厚感プロの配色に近づくための「比率」とは「トーン」について知ってもらったら、つぎは配色の「比率」について解説します。バナー画像やヘッド画像をつくる場合は、「何をメインで訴えるのか」という主役をつくらなければいけなくなります。そこで、各色の比率を調整することでバランスをとります。法則」とは、配色のバランスを取るための割合を示した法則です。他にも「60:30:10」という比率もありますが、だいたいこれ位の比率で各色を配置するとバランス良くまとまります。目立たせたい色をアクセントカラーにします。アクセントカラーはベースカラーとは反対の色か、明度差をつけるようにして目立たせます。リンク「トーン」と「比率」を使ってプロの配色をする配色に必要な「トーン」と「比率」を理解してもらったと思いますので、実際に配色してみましょう。イメージに沿ってトーンを決めるどんなイメージの配色にしたいのか、全体のトーンを決めます。明るく元気な配色にしたいなら、トーンは彩度をやや高く、明度を高めにします。冷たく暗い配色にしたいなら、トーンは彩度をやや低く、明度を低めにします。イメージに沿ってメインの色相を決めるつぎはイメージに沿ったメインの色相を選びます。明るく元気な配色にしたいなら、黄色やオレンジを選びます。冷たく暗い配色にしたいなら、青色や紫色の色相を選びます。色選びのポイント色相にも明度が存在するとお話ししたとおり、明るい・暖かいイメージにしたければ、明度の高い黄緑・黄色・オレンジといった暖色を中心に選ぶと自然な配色ができます。それとは逆に、暗い・冷たいイメージにしたければ、明度の低い青や紫といった寒色を中心に選ぶと自然な配色ができます。イメージに沿って同系配色か反対配色にする一色のみで明度差をつけた配色にすると、単調で寂しいイメージになります。そのため、単調になりすぎないように、近い色相の色味を加えます。イメージにしたいなら、近い色相の色味を2色程度と、その色味の反対色を1色程度を選んで反対配色にします。補色よりも少しずれた反対色を選ぶと、バランスの取れた元気のある配色ができます。配色のポイント対角線上の色を「補色」と言います。補色同士を選ぶと、色同士がぶつかり合う激しいイメージになります。彩度の高い色ばかりを使うと、目が痛くなるケバケバしい配色になってしまうので、彩度を少し抑えた色を使うと初心者っぽさがなくなります。配色の比率を決めるトーンと色相を選んだら、配色の比率を決定します。全体的に明るいイメージにしたいなら、ベースカラーを最も明るく、次いでメインカラーを明るくします。全体的に暗いイメージにしたいなら、ベースカラーを最も暗く、次いでメインカラーを暗くします。アクセントカラーは、ベースカラーと最も明度差をつけるようにします。反対配色の場合また、色相の隣り合う似た色同士(近い色)であれば、それぞれの箇所に色を追加してもバランスが崩れることはありません。Webサイトのカラー設計の場合、余白に使うベースカラーは白が多いと思いますので、実際はメインカラーとアクセントカラーに色味を入れることになると思います。その場合はメインカラーとアクセントカラーの領域の部分で、さらに70:25:5を作るイメージで配色させることができます。リンクまとめ配色で重要なことは、全体の「トーン」と「比率」です。表現したい「感情」や「イメージ」のトーンに合わせて色を選び、比率を決めます。実際には使う色数はもっと多いこともありますが、全体の「トーン」と「比率」を守れば簡単にプロに近づく配色ができます。お役に立ちましたら幸いです。高木浩一ゲダツニスト/心理学と脳科学が好きなマーケティング・Web集客の専門家。大企業のマジメな広告デザインから男性を欲情させるアダルティな広告デザインまで、幅広い分野を経験した元グラフィックデザイナー。心理面をカバーしたマーケティングとデザインの両方の視点をもつ。個人が個人として活躍する時代に向けて「使えるマーケティング」をモットーに情報発信中。【決定版】CTAボタンのデザイン改善でCV率を上げる7つの方法ランディングページなどの申し込みページでは、CTAボタンのデザインを少し改善するだけでも、コンバージョン率(CVR:成約率)が劇的にアップすることがあります。...デザイン術アフォーダンス理論とシグニファイア|誤解されたデザイン概念とは?たとえデザイナーじゃなくても、Webサイトやブログを運営しているなら、アフォーダンス理論とシグニファイアは知っておきたいデザインの概念です。Webサイトの成否を分けるのは、「ファーストビューのデザインでほぼ決まる」と言っても過言ではありません。聞かれることがあります。いう方は、「Webサイト=コーポレートサイト」という認識なのかもしれません。小さな会社や個人ビジネスの方が、安易にフリーのWebデザイナーにサイト制作を依頼してしまうと、Web集客には不向きなサイトになってしまう危険があります。...PREVつまりWeb集客とは、アクセス数とコンバージョン率のアップだけNEXTウェブセールスライティングを極める3つの基本的なルールとは依頼する・問い合わせるプロフィール高木浩一Web集客のカウンセリング/個人・小規模ビジネスモデルを対象にしたマーケティング・ブランディングのコンサルティング/セールスコピーライティング代行Web集客で大切なのは「アクセス数」と「扱う言葉」と「No.1」の要素です。ご自身のWebサイトが集客できていないなら、どれが欠けているのかを探ってみてください。