お問合せ株式会社ジェイコス
TEL 03-5428-8733

Webコンサルティング会社、首都圏(東京)を中心に戦略的なホームページの制作、Webマーケティングをご提供

Webコンサルティング.jp HOME > Blog Top > サイト運営者なら知っておこう!WEBサイトにおける配色の決め方

Profile

通称:株式会社ジェイコス
誕生日:2005年4月1日
出身地:三軒茶屋
現住所:麹町
職業:Webコンサルタント

2014年5月23日

サイト運営者なら知っておこう!WEBサイトにおける配色の決め方

20140523a.jpg
webデザインを作成する時には、内容をどのように演出するかが問題になる事と思います。
主要な商材が目を引くwebデザイン、読みやすい文章構成ももちろん重要ですが、webデザイン全体を考える中で、もう1つの重要なポイントが色彩の印象です。

ホームページとは、インターネット上の「会社の顔」です。

人物の印象が最初の数秒で決まるのと同じように、webデザインの印象も、出会ってからわずか数秒で固まってしまいます。その短い時間で印象を形成する力を発揮するのが、「カラー」なのです。

どんな印象を持ってほしいのか、どんなメッセージを伝えたいのか。また、それを実現する色彩の選び方をご紹介します。



■基本色とは?

20140523b.jpg

光の3原色は、「赤」「青」「黄」ですが、これに中間色の「橙」「緑」「紫」と、「無彩色」を加えたものが、webデザインの基本色となります。

」の持つ色彩イメージは、「生命、情熱、衝動」

」は「安全、冷静、誠実」

」は「知識、軽快、幸福」

」は「家庭、仕事、自由」

」は「平和、協調、自然」

」は「高貴、優雅、神秘」

「無彩色」の持つ要素は「中立、気品、冷静」

webデザインを行う際には、これらのイメージを活用しましょう。



■Webデザインに色彩を応用する!

20140523c.jpg
基本的に、色彩という物は、複数を組み合わせて利用します。その決め方は、大きく分けて2つの手順に分けられます。

■ベースカラー・テーマカラー・メインカラーのいずれかを最初に決めてしまう方法
■全体のイメージから決める方法

ベースカラーとは、画面の大部分をカバーする地色の事です。カラーイメージの力関係は、面積に比例します。ですので、ベースカラーは、ホームページのイメージを決定する役割を担っています。汎用性の高いカラーを選ぶと良いでしょう。

次に比重の大きなカラーが、テーマカラーです。テーマカラーの面積はベースカラーの半分以下ですが、個性を生み出す重要な要素となります。

最後が、アクセントカラーです。1割未満の面積で使用されるこの色は、基本的に、注意を引くための要素ではありますが、派手であればいいわけではないという点で、時に難しい選択となります。ベースカラー・テーマカラーの邪魔にならない色を選ぶように心がけて下さい。

3つのカラー選びでどうしても困った時には、カラーを1色に絞ってしまって、色の明るさや強さで構成してしまうという方法があります。画面に統一感が生まれますので、この手法は実際に様々なサイトで活用されています。



■印象別「組み合わせ」の色彩具体例

20140523d.jpg
モードの印象を与えるwebデザイン例は「黒(7);赤(2,5);その他(0,5)」など。



黒をベースにして画面を引き締め、赤など、視認性の高い華やかな印象の色合いをちりばめることで、洗練されたおしゃれを演出します。また、「その他」を工夫することで、バリエーションが生まれます。



信頼性を高める青のwebデザイン例では、フェイスブックなどが代表的です。

「明るい青(7);濃い青(2,5);黄(0,5)」となっています。




ベースの薄いカラーは、背景としては最適なものです。ベースの薄い青に、投稿記事の白い枠を載せることで、あらゆる色彩の投稿に対応できます。



「和風で女性的」という組み合わせの場合は、「伝統色」のバリエーションから選択すると良いでしょう。

カラーコードで指定する場合は、「#C15E6E(7);#744639(2,5);#E18AA2(0,5)」となります。




3色いずれもピンク系の色合いなので、かわいらしいwebデザインと言えます。この場合は分量の少ないハイトーンがアクセントカラーとなります。

印象を構成するのに迷った時には、既存の魅力的なウェブページからカラー要素を抽出して、それぞれの面積を測ってみることも有効です。

trackbacks

trackbackURL:

Recent Entries

  1. 【あなたにピッタリのサービスがわかる】スマホでお得にエンタメ動画を楽しもう~全ての動画配信サービスを視聴してみた!~
  2. 個人の居酒屋もカフェもレストランもクレジットが安価に簡単に導入できる~ビジネスチャンスが広がる"モバイルクレカ"比較まとめ~
  3. 驚異の6秒動画プロモーション「Vineを活用した8つのキャンペーン事例」をご紹介!
  4. "スモールビジネス"LINE@活用法~PR戦略成功事例をご紹介!~
  5. 企業の存続危機に発展するかも!?Twitter炎上事例からわかるリスクの実態とその対策
  6. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~6/6
  7. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~5/6
  8. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~4/6
  9. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~3/6
  10. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~2/6