※ 当サイトではアフィリエイト広告を利用しています。
・「ベースカラー」「メインカラー」「アクセントカラー」とは、グラフィックデザインの中でそれぞれどの部分に使うのかを知りたい方
・グラフィックデザインの配色について学ぶのにおすすめの本を探している方
・グラフィックデザインをするために、色の意味を知りたい方
デザイニャー
この授業を受けていただければ、簡単にできる配色の選び方や、選んだ色がイマイチに感じて、本当にこの配色で良いのだろうかと悩んだときの解決方法も身につけることができるんだニャン。
色の特性を知ろう
先生
配色をする際には色の特性を知ることが大事なんだ。ここでは次の4つのことについてお話していくよ。
・色は記憶に残る
・色は印象を変えることができる
・色とは何か
・色の3要素
色は記憶に残る
先生
色って、文章や写真と違って、人の記憶に強く残るものなんだ。
デザイニャー
そうだニャン。はっきりと形を覚えていなくても、色のくみ合わせやその色の形というものは、覚えていることが多いよニャン。
先生
文字やマークが見えにくいことがあっても、色の組み合わせや大体の形でブランドを認識できることからも、色の印象は本当によく記憶に残るものだと言えるんだ。
色は印象を変えることができる
デザイニャー
同じレイアウトや文字の配置であっても、色を変えるだけで大きく雰囲気が変わるよニャン。
先生
ビジネス的な硬い印象から、明るくポップな印象や優しく柔らかい印象に変えるのが色なんだ。
色を選ぶ時には、他のデザイン要素以上にターゲットや制作物の目的を明確にし、その目的に向かって考えるようにすることが大事です。
色とは何か
デザイニャー
じゃあ、実際に、「色」というものはどんなものなのかを知りたいニャン。
先生
色というのは、色の波長の一部なんだ。小学生の頃にプリズムで光を分解して色をみる実験をしたことがあるでしょう。
デザイニャー
うん。覚えているニャン。人の目は光そのものの色だけじゃなくて、光が透過したり反射したものを捉えて、それを視神経に伝えるんだよニャン。
先生
人間の網膜には、光の強さと色の違いを受け取る細胞がそれぞれ分布しているんだ。
デザイニャー
そして、視神経は光や色からの刺激を脳へと伝えるんだよニャン。
先生
ここで重要なのは、色というものは光そのものだということと、色は脳への刺激によって感じられるものだということなんだ。原色に近い強い色は脳を強く刺激するし、それを長時間見続けていると疲れたり、色の刺激を緩和させるための反応が起きることもあると言われているんだよ。
また実際人間が色を表現する時には、パソコンのモニターなどで使われているRGB（光の三原色）や、印刷物やプリンターで使われているCMY（色の三原色）を使います。
色の3要素
色相
先生
色相とは、色合いのことで、赤、黄色、青というような色の違いのことなんだ。
デザイニャー
色相を環状に並べたもののことを色相環と言うんだよニャン。
先生
色相環の中で近い場所にある色のことを「近似色」というし、対角線上にある色のことを「補色」というんだ。
明度
デザイニャー
明度とは、色の明るさのことを指すんだけれど、鮮やかさと混同してしまいがちになるニャン。
先生
色を無彩色に変換する（モノクロコピーしたり、画像加工のアプリケーションでモノクロに変換）と、その色の明るさがよくわかるよ。
彩度
デザイニャー
彩度というのは、色の鮮やかさのことで、最も鮮やかな色は「原色」や「純色」と呼ぶし、最も彩度の低い色のことを「無彩色」と呼ぶんだよニャン。
グラフィックデザイナーが知っておきたい配色の基本原則10個
先生
ここからは、すぐにデザイン制作に役に立つ、美しい配色を作り出すために大事な10個についてお話ししていくよ。
①各色の色の意味を知る
②類似色を利用する
③補色を利用する
④コントラストがキツくなったら分けよう
⑤バリエーションが必要な場合補色を2色利用する
⑥色のトライアングルを作る
⑦単色でまとめてみる
⑧あえて色をつけない
⑨色合いをよく考える
⑩ RGB、CMYK、Pantoneを使いこなす
①各色の色の意味を知る
デザイニャー
色が与えるイメージを理解しておくことが大事なんだよニャン。
先生
「色」が持っている良いを知っておくと、デザインで色を選ぶときに役に立つんだ。
・白→「善」「真理」「純潔」「純粋」
・赤→「愛」「情熱」「危険」「勇気」「攻撃」
・オレンジ→「陽気」「幸福」「誇り」「野心」「忍耐」
・黄色→「活発」「明快」
・緑→「安全」「健康」「希望」「平和」
・青→「冷静」「知性」「未来」
・紫→「高貴」「正義」「優雅」「神秘」
・金→「光」
出典：伝統屋 暁
②類似色を利用する
デザイニャー
類似色を使うことで、配色を良い具合にまとめることができるんだよニャン。
先生
選択したメインカラーの両隣にある色を加えた3色使いをするのがおすすめだよ。
③補色を利用する
先生
選択した色の反対側にある補色と組み合わせることで、美しい配色を作ることができるよ。
④コントラストがキツくなったら分けよう
デザイニャー
補色を利用したら、コントラストが強い場合があるんだけどニャン。
先生
そんな時には、補色の両隣にある2色を使うと、良い感じの配色にすることができるよ。
⑤バリエーションが必要な場合補色を2色利用する
デザイニャー
配色をするときに3色以上使う時にはどうしたら良いのかニャン。
先生
3色以上使う時には、、メインカラーを2色選んで、それぞれの補色を加えるようにすると、デザイン性を保ったまま色を追加することができるよ。
⑥色のトライアングルを作る
先生
賑やかな配色にしたい時には、メインカラーを視点とした三角形を描いて選んでみよう。これが良い具合の配色にするポイントの一つになるんだ。
⑦単色でまとめてみる
先生
単色だけを使ってみよう。色の濃淡を変化させると、統一感のある配色にすることができるよ。
⑧あえて色をつけない
先生
デザインによっては、「色消し」と言って色を利用しないことで配色がうまういくこともあるんだ。
デザイニャー
シンプルなモノクロだからこそ、ロゴデザインに使うことでより際立たせることができるんだニャン。
⑨色合いをよく考える
先生
色調、色合い、色の濃淡、色の明暗を調整することで、親しみやすさやエレガントさ、落ち着いた雰囲気などをより繊細に表現することができるんだ。
⑩ RGB、CMYK、Pantoneを使いこなす
先生
RGB、CMYK、Pantoneとは次の通りだよ。
・RGB：赤（Red）、緑（Green）、青（Blue）で幅広い色を再現
・CMYK：シアン、マゼンタ、イエロー、ブラック：で色を表す
・Pantone：ポップな雰囲気を作る
先生
それぞれの色の表現方法によって、表すことができる配色も異なるから、グラフィックデザイナーとして色々な可能性を探ってみよう。
グラフィックデザインもWebデザインも配色比率は「70：25：5」で
先生
デザインをする時の理論的な配色方法には、選んだ3色の色の比率を「70：25：5」の比率が多く用いられているんだ。「70：25：5」比率の色の配分は次の通りだよ。
・ベースカラー（70％）
・メインカラー（25％）
・アクセントカラー（5％）
デザイニャー
理論的にバランスが良いから、配色に迷った時に試してみると良いニャン。
先生
ただ、この比率はそれぐらいの比率だったら綺麗に見えるという基準なので、実際にデザインする場合は、実際にデザインで配色をする際の大まかな参考程度にしておこう。
デザイニャー
この比率をあまりにも忠実に守ろうとしたら、デザインの幅が狭まることにもなるからニャン。
ベースカラー（70％）
先生
ベースカラーは、デザインの中で一番大きな面積を持っている色なんだ。
デザイニャー
デザインの印象や全体のイメージを決める色だから、慎重に決めなくちゃニャン。
先生
背景などに使う色だから、白や黒、グレーやメインカラーやアクセントの明度を挙げた色を使うことで、デザインがまとまりやすくなるんだ。
メインカラー（25％）
先生
ベースカラーと似ている色を使うことで、デザインがまとまった印象になるし、補色など似ていない色を使えば、デザインにメリハリができるんだ。
アクセントカラー（5％）
デザイニャー
アクセントカラーというなh、デザインにアクセントをつける色だニャン。
先生
アクセントカラーは、メインカラーの反対色や補色にすることでデザインがまとまりやすくなるんだ。
デザイニャー
少ない比率だけれど、だからこそ目立ち視点を集めることができるんだよニャン。
グラフィックデザインの色の決め方の大まかな4つの流れ
先生
デザインをする際に色を決めるのに決まりはないけれど、次の順番で決めると色が決めやすいよ。
①まずはターゲットやデザインの方向性を確認する
②メインカラー（25％）を決める
③ベースカラー（70％）を決める
④アクセントカラー（5％）を決める
①まずはターゲットやデザインの方向性を確認する
先生
どんなターゲットに向けて、どんな雰囲気のデザインに強いのか、完成したことを想像しながら色を決めることが大事なんだ。
ターゲットとは
・若い人なのかお年寄りなのか
・男性なのか女性なのか
・庶民向けなのかお金持ち向けなのか
雰囲気は
・高級なのか価格重視なのか
・スタイリッシュなのか、ポップなのか
・柔らかいのか堅いのか
②メインカラー（25％）を決める
デザイニャー
メインカラーを決める際には、ロゴなどのコーポレートカラーがあれば、その色をメインカラーにすることが多いんだよニャン。
先生
それがなければ、ターゲットやデザインの方向性から色を決めていくんだ。
③ベースカラー（70％）を決める
デザイニャー
ベースカラーは、背景などの広い範囲に使う色だニャン。
先生
だから、白や薄いグレーの民度の高い色か、黒などの明度が低いダークカラーを使うと、バランスが取れた配色になりやすいんだ。
④アクセントカラー（5％）を決める
デザイニャー
アクセントカラーは、ワンポイントで使って目立たせるための色だニャン。
先生
だから、メインカラーやベースカラーの反対色や補色を選ぶことで、バランスが取れた配色になりやすいんだ。
グラフィックデザインの配色に困った時の方法4つ
先生
配色するのに困った時には、次の方法を試してみよう。
①配色パターンから色を探す
②色がもつイメージから探す
③写真から色を抽出してみる
④本を参考にして配色を探す
①配色パターンから色を探す
デザイニャー
色を選ぶ時には、まとまりのいい配色を選ぶことができるパターンがあって、メインカラーは決まったけれど、それに合う色が決まらないという場合に便利なんだよニャン。
・トライアド配色
・スプリット・コンプメンタリー配色
トライアド配色
先生
トライアド配色とは式相環を３等分する位置にある3つの色相の配色なんだ。
スプリット・コンプメンタリー配色
先生
スクリプトコンプメンタリー配色というのは、まず式相関の正反対の場所にある捕食関係の色をとってから、片方の色をその両隣の色に分けることで、相対性類似性持った配色になるんだ。
デザイニャー
配色パターンで色が決まったら、そのままその色を使うだけじゃなくて、彩度や明度を変えて色を決めていくと良いんだニャン。
②本を参考にして配色を探す
デザイニャー
配色を上達させるためには、他の上手な配色を真似することが近道だニャン。
先生
上手な配色をみたい時には、配色の本をみることがおすすめなんだ。
デザイニャー
本には具体的な配色の例や色の数値も載っているから、デザインをする時に手元に置いておきたいニャン。
③色がもつイメージから探す
先生
色にはそれぞれ色が持っているイメージがあることは前にも触れたね。
・白→「善」「真理」「純潔」「純粋」
・赤→「愛」「情熱」「危険」「勇気」「攻撃」
・オレンジ→「陽気」「幸福」「誇り」「野心」「忍耐」
・黄色→「活発」「明快」
・緑→「安全」「健康」「希望」「平和」
・青→「冷静」「知性」「未来」
・紫→「高貴」「正義」「優雅」「神秘」
・金→「光」
出典：伝統屋 暁
先生
色が与えるイメージを考えながら配色をすると、デザインのクオリティが上がるよ。
④写真から色を抽出してみる
デザイニャー
デザインに写真を使っている場合は、その写真の中にある色を拾ってみるといいというニャン。
先生
タイトルの文字色がイマイチな場合や、あと1色を決めるのにどうしても迷ってしまう場合に、写真の中にある色を使うことで、意外とデザインがまとまるんだ。
まとめ
先生
この授業では次のようなことについてお話ししてきたよ。
・色の特性を知ろう
・色は記憶に残る
・色は印象を変えることができる
・色とは何か
・色の3要素
・色相
・明度
・彩度
・グラフィックデザイナーが知っておきたい配色の基本原則10個
①各色の色の意味を知る
②類似色を利用する
③補色を利用する
④コントラストがキツくなったら分けよう
⑤バリエーションが必要な場合補色を2色利用する
⑥色のトライアングルを作る
⑦単色でまとめてみる
⑧あえて色をつけない
⑨色合いをよく考える
⑩ RGB、CMYK、Pantoneを使いこなす
・グラフィックデザインもWebデザインも配色比率は「70：25：5」で
・ベースカラー（70％）
・メインカラー（25％）
・アクセントカラー（5％）
・グラフィックデザインの色の決め方の大まかな4つの流れ
①まずはターゲットやデザインの方向性を確認する
②メインカラー（25％）を決める
③ベースカラー（70％）を決める
④アクセントカラー（5％）を決める
・グラフィックデザインの配色に困った時の方法4つ
①配色パターンから色を探す
・トライアド配色
・スプリット・コンプメンタリー配色
②色がもつイメージから探す
③本を参考にして配色を探す
・ハマる配色
・グラフィックデザイン配色コレクション
・デザイン配色解剖
④写真から色を抽出してみる
私たちは頑張るあなたを応援しています。
