こんにちは。CMねっとのブログ初登場、デザイナーの岩城です。
入社して半年が経とうとしていますが、実は、延岡市に来てからもまだ半年ちょっとなんです。
まだまだ知らないエリアもたくさんあるので、ちょっとずつ開拓しています。
カフェ巡りが好きなので、延岡市内でおすすめのカフェがあったら教えてください♪

　　　　　　　　　　　　　　　　以前行ったカフェで食べたベーグル

 

さて、今回はデザインにおける配色のコツを徹底解説します。
ホームページ制作においても、配色ひとつで印象が大きく変わるので、こだわって制作しています。

この記事で、皆さんのお仕事や日常の色々な場面で、お役に立てればうれしいです！

後半は、CMねっとが実際に制作したホームページを例に解説しますので、
「なんだか難しそう…」という方も安心してください！

 

デザインには色の知識が大事

色を選ぶ時、みなさんはどうやって決めていますか？

「なんとなく好きな色を使う」
「なんかおしゃれ」

という理由で選んでいませんか？
まずは「色とは何か」を知ることで、目的に合った色を選ぶことができます。

 

●色を構成する要素について
色は「色相」「彩度」「明度」という3つの要素からできています。
これを色の三属性といいます。

• 色相：赤、オレンジ、黄、緑、青、紫といった色味のこと
• 明度：色の明るさの度合い
• 彩度：色の鮮やかさの度合い

　　　　　　　　　　　　　　　　　　　　色の三属性

 

●色が持つイメージについて
それぞれの色にはイメージがあり、どんな色を使うかで印象が大きく変わります。
代表的な11色が持つ共通のイメージをご紹介します。

• 赤
  活発 / 情熱 / 強い / 危険 / 愛情 / 暑い

• ピンク
  幸福 / かわいい / 甘い / 春 / 若い / 優しさ
  
  
• オレンジ
  元気 / 陽気 / 開放感 / にぎやか / 親しみ / 活力

• 黄
  希望 / 明るい / 楽しい / 子ども / 幸運 / 注意

• 緑
  自然 / 植物 / 癒し / 健康 / 安全 / 平和
• 青
  信頼 / 爽やか / 知性 / 涼しい / 冷静 / 清潔

• 紫
  高貴 / 上品 / 伝統 / 神秘的 / 優雅 / 芸術的

• 茶
  大地 / 温もり / 古典的 / 温和 / 素朴 / 渋い

• 黒
  クール / 高級 / 上質 / 強い / 重厚 / 威厳

• 灰
  洗練 / 大人 / シャープ / 中立 / 控えめ / 無機質

• 白
  シンプル / 純粋 / 神聖 / 透明 / 清楚 / 無垢

 

　　　　　　　　　　　　　　　　青い方がアイスコーヒーの冷たさが伝わる

アイスコーヒーの画像で比較すると、背景が青い方が「冷たくておいしそう！」と感じますよね。
このように色が持つイメージを知るだけで、どの色を選べばいいか迷わなくなりますね。

 

配色のコツを徹底解説！

では、ここからはいよいよ配色のコツを解説していきます。

 

●原色は避けよう
原色を使用すると、目がチカチカして負担をかけてしまううえに、チープな印象を与えてしまいます。
ペイントソフトや画像編集ソフトに標準搭載されている色は基本的に使わないようにしましょう。

また、見落としがちなのは「黒」です。
こちらも真っ黒ではなく、グレーを混ぜたものを使うようにしましょう。
ＣＭねっとで制作しているホームページや印刷物も、実は真っ黒を使用せずに作っています。

　　　　　　　　　画像編集ソフトに標準搭載されている色を使用

 

●まずは3色だけで配色しよう
色がたくさんあると、ごちゃごちゃして見え、目立たせたいものが埋もれてしまいます。
まずは３色に制限して配色していきましょう。

　　　　　　　　　　　　　色数が少ない方が、すっきりまとまって見やすくなる

 

また、色を決める時は、ベースカラー、メインカラー、アクセントカラーの3色に分けるときれいにまとまります。

• ベースカラー：背景など広範囲に使用します。
• メインカラー：ブランドや企業のテーマになる色です。
• アクセントカラー：目立たせたい箇所に使用する色です。

 

＜センスよくまとめるステップ＞
STEP1 │ テーマとなるメインカラーを決める
前の章で解説した色が持つイメージから、ブランドや企業のイメージに合った色を選びましょう。

STEP2 │ アクセントカラーを「補色」か「類似色」から選ぶ
アクセントカラーは、どのような印象にしたいかによって「補色」「類似色」のどちらを使用するかが決まります。
補色と類似色は「色相環」を参考にすると決めやすくなります。

• 補色
  色相環で反対の位置にある色。
  お互いの色を引き立て合うので、メリハリがついて明るく元気な印象になる

• 類似色
  色相環で隣にある色。
  お互いの色が調和して、落ち着いた印象になる

色相環とは？
色相環は、色の変化を表す環状の図です。

　　　　色相環と補色、類似色の関係性

 

STEP3│ ベースカラーを決める
一番使用する範囲が広いため、白や明るいグレー、淡い色など、明度の高い色を使用しましょう。

STEP4│ 「70：25：5」の割合で配色しよう
STEP1～STEP3までで決めた3色をそれぞれ下記の割合で使用します。

• ベースカラー → 70％
• メインカラー → 25％
• アクセントカラー → 5%

 

●トーンを合わせよう
バランス良く3つの色を選んでも、イメージと違うな・・・となった場合は色のトーンを合わせましょう。
トーンとは、色の三属性の「明度」と「彩度」をセットにしたもので、これらを統一させることをいいます。

例えば、パステル系でまとめているところに、ビビットな色が入ってしまうと、統一感がなくなり、伝えたいイメージがしっかりと届きません。
同じトーンにすると、色がまとまってセンスのよい配色になります。

　　　　　　　　　　　　ビビットトーンやペールトーンなど、さまざまなトーンがある

 

ホームページ制作事例をご紹介

ここまで配色について解説してきましたが、「なんだか難しそう...」と思う方も多いのではないでしょうか。
そこで、CMねっとが、実際にホームページ制作で使用した配色を例に解説していきます！
「青」を使用したホームページで比較していきましょう。

 

●明るく元気な印象のホームページ

 
　　　　　　　　　　　　　　　　　　「宮崎ディーゼル株式会社」様のホームページ制作実績

 

宮崎県延岡市の「宮崎ディーゼル株式会社」様のホームページです。
50年以上にわたり、建設機械／林業機械の販売・修理・レンタル事業を行っています。

メインカラー：青
企業の公式ホームページということもあり、「信頼」のイメージを持つ青をメインカラーに採用。
技術力と歴史を表現するため、軽いイメージにならないように濃いトーンにしています。

アクセントカラー：オレンジ
明るく活気のある印象にしたいため、青の補色にあたるオレンジをアクセントカラーに採用。
目立たせたい「求人に応募する」ボタンや、デザイン内の差し色として使用しています。

ベースカラー：白
シンプルにまとめるために、ベースカラーは白にしています。

　　　　　　　　　　　　　　　宮崎ディーゼル株式会社様で使用した配色

 

●さわやかで落ち着いた印象のホームページ

　　　　　　　　　　　　　　　　「土井住建株式会社」様のホームページ制作実績

 

宮崎県東臼杵郡門川町にある「土井住建株式会社」様のホームページです。
無駄がなく、美しく住みやすいデザイナーズ住宅を得意とする工務店です。

メインカラー：グレー
無駄のないスタイリッシュで美しい住宅を表現するため、「洗練」のイメージを持つグレーをメインカラーに採用。
爽やかな印象にするために、トーンは明るくしています。

アクセントカラー：青
南国宮崎の空や海を表現するため、「爽やか」なイメージがある青をメインカラーに採用。
明るく爽やかな印象にするため、トーンを明るくし、水色にしています。

ベースカラー：白
こちらもシンプルにまとめ、開放感が出るようにベースカラーを白にしています。

　　　　　　　　　　　　　「土井住建株式会社」様で使用した配色

 

このように同じ青でも、配色を変えるだけでかなり印象が変わりますよね。

 

デザインにおける配色のコツまとめ

今回は、デザインにおける配色のコツを徹底解説させていただきました。
まとめるとこんな感じです。

• 色を構成する要素（色相、彩度、明度）を知る
• 色が持つイメージを知る
• 原色は使わない
• まずは3色だけで配色してみる
• ベースカラー70％、メインカラー25％、アクセントカラー5％の割合で配色する
• アクセントカラーは「補色」か「類似色」から選ぶ
• トーンを合わせる

 

色の選び方ひとつで、与える印象が大きく変わります。
ただなんとなく色を選ぶだけではなく、「どんな印象を与えたいか」「どの色をどの割合で使用するのか」などしっかりと設計することで、伝えたいことがしっかり届くデザインが作れます。

CMねっとでは、ホームページ制作時はもちろん、印刷物などをデザインする際に「ユーザーが何を求めて、どう反応し、どう感じるのか」を常に意識してサイト設計を行っています。
その中でも色については、「どう感じるか」という部分に非常に大きな影響を与えるため、お客様のブランドイメージや、視認性にこだわって制作します。

ホームページ制作はもちろん、チラシ、名刺などの印刷物も、「とことん本気で!!」制作いたしますので、お気軽にCMねっとにご相談ください。