おとなにやさしいパソコン教室 パソレ イシタカナホです
「WEBサイトの配色って、どうやって決めたらいいの？」
とのご相談を受けました。
WEBサイトの配色は、WEBサイトの印象に大きな影響を与えます！
ということで、今回は「WEBの配色の決め方」についてお話したいと思います
WEB 配色｜WEBで使う配色の決め方
WEB 配色｜WEBサイトで使う配色はどうやってきめたらいいの？
WEBの配色は、まずリサーチから始める
WEBの配色でもデザインの基本は、リサーチから始めます
まずは、同業他社のWEBサイトで使われている色を調査します
いい感じの配色をいくつかピックアップしながら、自分のWEBサイトに合うかイメージしていきます
同業の場合は、同じターゲットを狙っていると考えられます
なので、自分のターゲットが好みそうな配色を使っていることが多いです
同業他社でも男性ターゲットか女性ターゲットによって、配色も違っていると思います
「自分のお仕事の名前 女性向け」などキーワードを入れて
Googleの画像検索をしてみてください
キーワードに関するいろんな画像が出てきます
その中から、自分のターゲットが好みそうな配色を見つけていきましょう
WEBの配色の基本となる3色を決める
WEBデザインの配色は、下のこの３つのカラーを決めてから作成すると良いと言われています
ベースカラー：いちばん面積が大きい色（背景色）
メインカラー：いちばん主となる、WEBデザインのイメージを決める色
アクセントカラー：いちばん目立つ色
これらの色は一般的に、こんな配分で使うと良いと言われています（所説あり）
ベースカラー：70％
メインカラー：25％
アクセントカラー：5％
割合はそんなにがっつり考えなくても大丈夫です
ベースカラーは背景、メインカラーはWEBサイトの装飾、アクセントカラーはボタン
と、こんな感じで割り振ればだいたいこれ位の割合になると思います
リサーチする時も、ベース、メイン、アクセントそれぞれどんな配色になっているのか
それもあわせて確認しておきましょう
配色が持つイメージを調べる
自分のWEBサイトなので配色には、「自分の好きな配色」を自由に選びたいですよね
でも、「自分の好きな配色」という理由だけで決めるのは良くありません
なぜなら、配色はWEBデザイン全体のイメージを左右するとても重要な要素だからです
なので、配色の持つイメージを理解する必要があります
配色のイメージを理解する、と言ってもむずかしいことではありません
特にデザインについて勉強していなくても、
大半の人は赤を基調とした配色なら「エネルギッシュ」だと感じますし、
黒を基調とした配色なら「スタイリッシュ」な印象を持つのではないでしょうか
男性的な配色、女性的な配色などもなんとなくイメージできますよね
一般的なイメージの逆をつく！というのもひとつの考え方ではあります
でも、趣味のためのWEBサイトではなく、集客のためのＷＥＢサイトであれば
ご自身のターゲットが気に入るかどうかは、必ず考慮する必要があります
デザインはセンスではなく、ルールを知っているかどうかです
たくさんの人に心地よく感じてもらうルールに沿うことが、集客につながると考えます
ということで、ここでも配色はターゲットが好みそうな配色にするというのが重要なポイントです！
ここで、代表的な色が持つイメージをご紹介します
赤
＜プラスのイメージ＞
情熱 強い 祝福 派手 愛 興奮 情熱 生命
アクティブ 勝利 闘争心 積極的
＜マイナスのイメージ＞
危険 怒り 争い 野蛮 警戒 赤字 残酷
●エネルギッシュなイメージ
食欲を増進させる
興奮させる
前向きな気持ちにさせる
オレンジ
＜プラスのイメージ＞
陽気 暖かい 健康 親しみ アクティブ 社交的
活気
＜マイナスのイメージ＞
下品 自由奔放 八方美人 大衆的 傲慢
●親しみやすさを感じる
家庭的なイメージ
黄色
＜プラスのイメージ＞
エネルギッシュ 希望 明るい 楽しい はつらつ
＜マイナスのイメージ＞
危険 イライラ 不安 稚拙
●ユーモアを感じさせる
注意喚起させる
記憶力を上げる
緑
＜プラスのイメージ＞
自然 やすらぎ 回復 安全 平和 リフレッシュ
＜マイナスのイメージ＞
保守的 受動的 優柔不断 未熟
●リラックスさせる
穏やかな気持ちにさせる
生命力を感じさせる
健康的なイメージ
青
＜プラスのイメージ＞
清潔 知性 誠実 信頼 シャープ 公平
＜マイナスのイメージ＞
冷たい 不安 さみしい 冷酷 悲しみ
●落ち着いたイメージを与える
誠実な印象を与える
集中力を高める
ピンク
＜プラスのイメージ＞
かわいい 幸福 ロマンティック 女性的 安らぎ
＜マイナスのイメージ＞
幼稚 繊細 妖しい 弱い
●女性らしい印象を与える
かわいらしくみせる
幸福感をもたらす
茶色
＜ポジティブイメージ＞
安定 温もり 素朴 堅実 伝統 自然 生命
＜ネガティブイメージ＞
地味 頑固 保守的 退屈
●自然のぬくもりを感じさせる
伝統を感じさせる
信頼感を与える
白
＜プラスのイメージ＞
無垢 清潔 清楚 解放感 純粋 新しい
＜マイナスのイメージ＞
空虚 薄情 冷淡 頼りない
●クリーンなイメージ
清潔な印象を与える
空間の広さを感じさせる
黒
＜プラスのイメージ＞
上質 都会的 気品 男性的 威厳 自信
＜ネガティブイメージ＞
孤独 不吉 恐怖 死 悪
●高級感を与える
神秘的なイメージ
これらの代表的な色だけでなく、配色のイメージはWEBで簡単に調べることができます
配色を決定する前に、配色の持つイメージが自分のWEBサイトに合致しているか
きちんと調べることをお勧めします
まとめ
ＷＥＢ配色はこんな感じで決めると、上手くいきます
１．同業他社のWEBサイトで使われている配色をリサーチする
２．ベースカラー、メインカラー、アクセントカラーを決める
３．配色のイメージを調べる
私は配色を決める時にいつもこの本にお世話になっています
サンプルから自分の作りたいWEBの配色を決められるので、とても便利です
デザインに使っている色のコードや、色を使っている割合までのっています
見ているだけで楽しくなる、素敵な本です
配色デザイン良質見本帳
著者：たじまちはるさん
発行所：SBクリエイティブ株式会社
WEBサイトを自分で作りたいけど誰に相談したら・・・とお悩みなら
パソレの「初心者にやさしいワードプレス講座」の無料体験レッスンにお申込みください！
・パソコン苦手だけど大丈夫？
・自分のWEBサイトを人任せにしたくない！
・本当にワードプレスって集客できるの？
など、いろんなお悩みにも丁寧にお答えします
お気軽にお問い合わせください😊
