適切なカラー選定はホームページの成果につながる/台東区上野のWEB制作/訪日外国人集客会社

株式会社ケイツー・インタラクティブ [K2-interactive]

WEB担当者の相談室

WEBサイト制作のことなら、私たち台東区上野のWEB制作会社
株式会社ケイツー・インタラクティブにお気軽にご相談ください。

適切なカラー選定はホームページの成果につながる

 

自作でホームページを作っていますが、色がゴチャゴチャしてしまいます。配色のコツがあったら教えてください。

最初にテーマをしっかり確認して、メインカラー・アクセントカラー・ベースカラー(背景色)を決めます。この3つのポイントを軸にさらにテキストからやサブカラーなどを決めていきます。

適切なカラー選定はホームページの成果につながる

適切なカラー選定はホームページの成果につながる:目次

印象は色で変わる!配色の基礎

ホームページの印象は配色でがらりと変わります。もちろん、掲載されている企業や商品・サービスなどもホームページの配色によって印象が影響されます。カラーには「色相」「明度」「彩度」の3つの要素があります。

色相で印象を決める

色相

色相は「紫」「青」「緑」「黄」「橙」「赤」などの色のことです。6色ですが、虹を思い浮かべてもらえるとイメージしやすいです。(実は虹の色数は民族によって違うようです)どの色を選ぶかで、印象が変わります。

  • 紫:賢さ 高貴さ 大人っぽさ
  • 青:信用 信頼 落ち着き
  • 緑:おだやか のどか 若さ
  • 黄:楽観的 活動的 注意喚起
  • 橙:親しみ 陽気 温かい
  • 赤:情熱的 興奮 果敢

例えば、飲食では「黄」「赤」を使ったり、精密機器などでは「青」などを使うと効果的な場合があります。

またおもしろいことに、日本では上記でご紹介したような印象を与えることが出来ますが、国や文化圏によって色味から受ける印象に違いがあるようです。

彩度は色の鮮やかさの尺度

彩度

色の鮮やかさをあらわす彩度は色の濃さや鮮やかさのことです。

例えば「グレー」→「ブルーグレー」→「青」や、「グレー」→「茜」→「赤」など、いろの濃淡の変化です。彩度の高い明るい色は鮮やかに見え、低い色は次第に無彩色のグレーに近づきます。この効果を利用して、色で立体感をつけることが出来ます。

彩度の扱いで覚えておきたいのは、同等程度の彩度であれば、他の色と組み合わせてもおかしくなることがありません。また、伝統的な和色は彩度の低いものが多く見られます。

雰囲気を決める明度

明度

明度は日陰、日向、夜、昼、のように「明るい」「暗い」の違いです。日常の変化に近い色の変化は人の雰囲気の決定に大きく影響を与えます。明度の高い「水色」や「ピンク」に近づけば「軽い」「ポップ」な印象を与えやすくなり、反対に近づくと「重厚感」「落ち着き」「高級感」を出すことが出来ます。色は「黒」から「白」へと変化します。

ホームページの印象を決めるキーカラー

キーカラーの選定はホームページの印象を決める大事な作業です。もともと決まっている企業カラー、ブランドカラーがあればその色を採用します。もし無い場合は、事業コンセプト、商品コンセプト、ターゲットなどと照らし合わせ選定します。配色、とくに色相で紹介した印象を参考に、キーカラーを選定します。

情報を伝えるための配色バランス

意味も無く色を採用していくと、ホームページは途端にゴチャゴチャした印象になってしまいます。キーカラーを決めたら、サブカラー、補足カラー、リンクカラーを決めます。これは明度と彩度で調整します。

キーカラー

キーカラーはサイトのポイントになる場所、例えばタイトルのディテールだったり、アイコンなどアイキャッチになる要素に採用します。割合としては5%以下が望ましいです。

サブカラー

サブカラーはキーカラーに採用した部分より目立たせなくてもいいけど、他より目立たせたい、また文章の目印として配置してみやすくするなどの要素に採用します。

補足カラー

コンテンツの下地に敷き、文章やコンテンツの補足的な要素やまとめ的な要素に使います。

リンクカラー

特にホームページ限定の配色要素ですが、文章に馴染ませないのが特徴です。なるべく暖色系の明度の高い色を選び目立たせます。少しデザインから浮いてしまっているくらいが丁度いいです。もしキーカラーが赤色であれば、他の寒色系のカラーを選びます。この色を少し変更するだけでも、ホームページの成果がガラリと変わります。

適切なカラー選定はホームページの成果につながるのまとめ

適切なカラー選定はホームページの成果につながる、いかがでしたでしょうか?ついつい、いろいろな色を選びたくなってしまいホームページをゴチャゴチャにしてしまうこともあるかと思います。そのような場合は制作前にカラーシートを作りチームで共有しておくことをオススメいたします。

ホームページのリニューアルに関するご相談は、お気軽にお問い合わせください。

本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。

WEBマーケティング
CMSツール導入支援

適切なカラー選定はホームページの成果につながるに関連する記事

ホームページ制作の成功の可否を決めるワイヤーフレーム
コンテンツを魅力的に見せるレイアウト

K2 WAY

ソリューション

施策事例 Client Voice

WEB担当者の必見ノウハウ 7 選

K2の得意なこと

WEBマーケティング

WEBマーケティング

顧客とのコミュニケーション課題を解決して、御社のビジネスを成功につなげるWEBマーケティングのプロ集団です。

WEBマーケティング

インバウンド集客PR

インバウンドの集客PR

IT/SNSを使ったプロモーションからイベント開催まで一貫したO2Oブランド構築で集客・PRをご支援をいたします。

インバウンド集客PRを見る

CMSツール導入支援

CMSツール導入支援

HTMLが判らなくてもかんたんにWEBサイトを更新出来るCMSツールを活用して、見込み客をを増やしませんか?

CMSツール導入支援を見る