接客・制作2014.7.17(最終更新日:2015.11.25)配色はセンスではなくテクニック!ここだけは押さえておきたい3原則TweetPocketウェブサイトの作成やパワーポイントのスライドなど、デザイナーでなくても配色を決めなければいけないシーンは多くあります。配色を自分で決めようとすると、なんだかしっくりこない、これが正しい配色なのか分からないと感じている方も多いのではないでしょうか?しかし、3つの原則をおさえて、無料ツールを使えば、ノンデザイナーでも簡単に調和のとれた配色ができるのです。今回は、下のモノクロのコーポレートサイトの構成に、実際に配色を決めていく事例を紹介いたします。Ruleでメインカラーを際立たせる!まとめ【原則1】メインとなるカラーを1色選ぶ!はじめに、全体の印象を決めることになる、メインカラーを決めましょう。メインカラーを決める色が持つ印象をおさえた上で、メインカラーを決めましょう。色の持つイメージをうまく利用することで、伝えたいメッセージが伝わりやすくなります。色の持つイメージをおさえる出典:色使いで気分も印象もアップ”色”の効果をビジネスに活かそう今回の事例では、知的で誠実な印象を与えたいとして、ざっくりと「青」にすることとします。明度と彩度の組み合わせを考え、メインカラーを具体化するさらに、どのような青色にするのか、明度(色の明るさ)と彩度(色の鮮やかさ)を具体化する必要があります。明度を低くしていくと、重厚で荘厳な印象になります。彩度を低くしていくと、落ち着きのある雰囲気を演出できます。~言葉からイメージする配色~これらの明度や彩度を念頭に置きながら、下記サイトにアクセスすることで、具体的な色を決めましょう。▼ツールの紹介http://colourco.de/使い方はサイト上でカーソルを動かし、好きな色を直感的に選択するという簡単なものです。カーソルを上方向に動かすと、明度が高くなり、下方向に動かすと低くなります。色が決まったら、画面上をクリックして真ん中に表示されるカラーコードを取得しましょう。今回の事例では、誠実な印象を強調するため、明度や彩度をおさえて、#094ab2をメインカラーにします。使用する画像(ロゴや写真)、コーポレートカラーが既にある場合には、その色をメインカラーにしましょう。調和のとれた配色を決めるためには、ロゴや写真で使用されている色を正確に知る必要があります。その色が今後の配色の基準になるからです。▼画像からメインカラーを抽出するhttp://www.colorhunter.com/画像のURLを指定することで、画像で使用されている色とカラーコードを抽出することが可能です。▼ウェブサイト内で使用されている色を抽出するhttp://webcolourdata.com/同様にウェブサイトのURLを指定することで、ウェブサイトで使用されている色とカラーコードを抽出することが可能です。【原則2】メインカラーと調和するカラーを2色選ぶ!次にメインカラーを引き立たせるための色を2色、ツールを用いて選びます。使用する色は白や黒を除いて3色程度にすることがポイントです。多くの色を使ってしまうと、ごちゃごちゃした印象になり、まとまりがなくなってしまいます。無料ツールを使用して色を出力する下記サイトにアクセスすると、メインカラーと合う色を簡単に出力することができます。実際に#094ab2に合う色を出力してみましょう。Ruleでメインカラーを際立たせる!最後に、原則2で取得した色を、メインカラーが引き立つように、割合(バランス)を考慮しながら、実際に配置させていきましょう。色の割合は、下記のようなバランスにすることで、より主張したいメッセージを伝えやすくなります。5%メインカラーを配色するメインカラーは、ロゴ部分や、キャッチフレーズ、メインコンテンツなど、ユーザーにとって、目につきやすい部分に使用します。ベースカラーを配色するベースカラーは背景など、広い面積に使用する色です。この色は背景になる色なので、白や薄めの色を使用することをおすすめします。ウェブサイトの場合には、背景に濃い色を使用してある場合に、文字が読みにくくなってしまいます。アクセントカラーを配色するアクセントカラーは、目立たせたい、見落とされたくないコンテンツ(お問い合わせボタンや、キャンペーンなど)に使用します。メインカラーと真逆の色を使用することで、メリハリがつきます。「ネットにはいろんな情報があるけど、どれが正しいの?」ジッセンはそんなお悩みをお持ちのWebマーケター向けに、実践的な知識を動画でお届けします。月額4,900円で業界の一流マーケターたちの200以上の動画が見放題。ITとデザインを駆使して日本の活性化を志しています。LISKULについて検索:。