ブログ

スタッフブログ

webデザイナー募集中webデザイナー募集中

site-color02

今回は、サイトのカラーを決める際の基本テクニックを、備忘録としてまとめてみたいと思います。

ベース・メイン・アクセントカラーを決める

配色比率「70:25:5の法則」

ベースカラー・メインカラー・アクセントカラーの3色をベースにします。
この3色には、目安となる配分率があります。
3color

メインカラー → ベースカラー → アクセントカラーの順に決めます。

メインカラー

サイトのテーマとなる色。サイトの印象を決定します。
コーポレートカラーを使用することが多いですが、ターゲットユーザーのイメージから色を決めることもあります。
メインカラーとその濃淡で色彩を展開すると、全体に統一感のあるイメージにまとめることができます。

メインカラーを決める時のパターン

A. 企業イメージとカラーイメージを合わせたカラーを選択する
B. 市場のロゴカラーを分析し、あえて使われていないカラーを選択する
C. 目的、用途に合わせてサイトカラーを決定する
D. 伝えたい内容とそのイメージカラーを揃える

【補足】ある程度「明度の低い」色が文字も読みやすく扱いやすい。

ベースカラー

背景などになる全体の基盤となり大きな割合を占める色です。
メインカラーを引き立たせるために白や黒、グレーといった無彩色、もしくは「メインカラーの明度を上げた色」をベースカラーにするとまとまります。

参考

メインカラーを引き立てるためのサブカラーには、グレーを使用すると失敗がありません。
・黒に近いグレー
・白に近いグレー
は、特にWebサイトのベースカラーとして使いやすい色です。
濃色、または白で文字を組み合わせたときに読みやすいような濃度のグレーをベースカラーとしての配色計画に入れておくとよいでしょう。

※ベースカラーは、メインカラーとのコントラストが強くなってしまうと、次に説明するアクセントカラーの役割になってしまいます。
ベースカラーはあくまでもメインカラーとの統一感を考えて、使用しているメインカラーと「同じトーン」を意識して選択してみましょう。

アクセントカラー

注目させたい、見落とされたくないポイントにだけ使用する強調色。メインカラーの反対色を使うと、鮮やかさが引き立つので目にとまりやすくなります。

4色目以降について 色数を増やしたいとき

ベースが3色ですがて、色が足りなくなる場合は、色相かトーンのどちらかが共通する色を使って色数を増やします。
色を追加したときに、メインカラーの比率、アクセントカラーの比率が増えすぎるとバランスが崩れてしまうので注意します。

色の与える印象

色選びの参考となるように、「色」が人間に与える印象をご説明いたします。

red

イメージ

情熱・興奮・熱狂・高揚・刺激・挑戦・元気・明るい・力強い・エネルギッシュ・鮮烈・闘争心・祝い事・長寿・暖かい・アクティブ・前向き・生命力・インパクト・火・太陽・エネルギー・恋・愛情

赤に適したサイト

・価格訴求、キャンペーン訴求したいサイト
・行動力を示したいサイト

blue

イメージ

知的・クール・かっこいい・ストイック・謙虚・神秘的・品がある・清らか・クリーン・純粋・慎重・信頼感・誠実・公平・広い・開放感・包み込む・忠実・安息・清涼感・許可・平和・眠り・若さ・空・海・生命・水・安息・精神・男性的・知性・信頼・涼しさ・平和・眠り・落ち着き・安全・誠実・清潔感

青に適したサイト

・さわやかさを感じさせたいサイト
・知性、若さを感じさせたいサイト

オレンジ

orange

イメージ

暖かい、温もり、親しみやすい、美味しそう、挑戦、エネルギッシュ、元気、陽気、賑やか、喜び、健康、家庭的、幸福、カジュアル、開かれている、ノリがいい、親切・ビタミン・楽しさ・好奇心・社交的・美味しさ・太陽・活力・大衆的・柑橘系

オレンジに適したサイト

・「親しみ」「家庭的」のイメージを与えたいサイト
・食欲増進を狙いたいサイト

・黄色

yellow

イメージ

明るい・華やか・天真爛漫・無邪気・陽気・軽快・ポジティブ・楽しさ・喜び・活発・素直・純粋・幸福・幸運・希望・フレンドリー・ユーモアさ・躍動感・幼い・快活・希望・躍動感・幼さ・発展・柑橘系・若々しさ・楽観的・好奇心・協力・栄光・元気

黄色に適したサイト

・子供のにぎやかさ、活発さを表したいサイト
・学習系サイト

green

イメージ

穏やか・癒し・健康・休息・平和・安全・安息・爽やか・生命力・成長・再生・新鮮・若さ・エコ・環境に優しい・自然・安眠・努力・粘り強い・豊穣・永続性・安心感・安定・さわやか・リラックス・自然・環境・回復・平穏・生命力

緑に適したサイト

・安心・安全を象徴したいサイト
・落ち着きとハイセンスさを両立したいサイト

purple

イメージ

神秘的・神聖・不思議・高貴・高級・上品・美しい・優雅・華麗・魅力的・感性がするどい・繊細・芸術・古風・知的・中性的・思慮深い・感性・優雅・ムード・魔法・癒し

紫に適したサイト

・上品さを訴求したいサイト

ピンク

Pink

イメージ

女性的・可愛らしい・可憐・華やか・優しい・甘い・恋・愛情・エレガント・美しい・まろやか・繊細・若さ・美容に効果がある・感謝・愛情・美しい・まろやか

ピンクに適したサイト

・女性向け商品
・安らぎがテーマの商品ページ
・幼児向け

グレー(無彩色)

gray

イメージ

上品・高級感・クール・お洒落・都会的・洗練されている・穏やか・調和が取れている・信頼感・安定感・知的・大人・穏やか・安定・落ち着き・空想・調和・クール・スタイリッシュ・温厚

黒(無彩色)

black

イメージ

高級感・威厳・クール・スタイリッシュ・シンプル・上品・真面目・上質感・神秘的・絶対感・強さ・中世・力がある・大人っぽい・無限の可能性・高級・極限・自信・中立・忠誠・男性的・重厚感

白(無彩色)

white

イメージ

清潔感・透明感・信頼できる・純粋・神聖・まっさら・汚れていない・潔白・高潔・浄化・広い・軽い・明るい・美しい・厳しい・新しい・善・平和・穏やか・無垢・素直・祝福・シンプル・理想

配色の際の参考になれば幸いです。

webデザイナー募集中webデザイナー募集中

人気の記事

まだデータがありません。

株式会社アウラ 松永巳知子 社長ブログ

お電話からのお問い合わせはこちら

お気軽にご相談ください。 06-6292-8577 【電話受付】 10:00~18:30(平日)

インターネットから24時間受付中
お問い合わせ専用フォーム 24時間受付中!

御社のホームページ、ご活用されていますか? インターネットからのお問い合わせは24時間受付中

御社のホームページ、ご活用されていますか?