2014年5月23日
サイト運営者なら知っておこう！WEBサイトにおける配色の決め方
webデザインを作成する時には、内容をどのように演出するかが問題になる事と思います。
主要な商材が目を引くwebデザイン、読みやすい文章構成ももちろん重要ですが、webデザイン全体を考える中で、もう１つの重要なポイントが色彩の印象です。
ホームページとは、インターネット上の「会社の顔」です。
人物の印象が最初の数秒で決まるのと同じように、webデザインの印象も、出会ってからわずか数秒で固まってしまいます。その短い時間で印象を形成する力を発揮するのが、「カラー」なのです。
どんな印象を持ってほしいのか、どんなメッセージを伝えたいのか。また、それを実現する色彩の選び方をご紹介します。
■基本色とは？
光の３原色は、「赤」「青」「黄」ですが、これに中間色の「橙」「緑」「紫」と、「無彩色」を加えたものが、webデザインの基本色となります。
「赤」の持つ色彩イメージは、「生命、情熱、衝動」
「青」は「安全、冷静、誠実」
「黄」は「知識、軽快、幸福」
「橙」は「家庭、仕事、自由」
「緑」は「平和、協調、自然」
「紫」は「高貴、優雅、神秘」
「無彩色」の持つ要素は「中立、気品、冷静」
webデザインを行う際には、これらのイメージを活用しましょう。
■Webデザインに色彩を応用する！
基本的に、色彩という物は、複数を組み合わせて利用します。その決め方は、大きく分けて２つの手順に分けられます。
■ベースカラー・テーマカラー・メインカラーのいずれかを最初に決めてしまう方法
■全体のイメージから決める方法
ベースカラーとは、画面の大部分をカバーする地色の事です。カラーイメージの力関係は、面積に比例します。ですので、ベースカラーは、ホームページのイメージを決定する役割を担っています。汎用性の高いカラーを選ぶと良いでしょう。
次に比重の大きなカラーが、テーマカラーです。テーマカラーの面積はベースカラーの半分以下ですが、個性を生み出す重要な要素となります。
最後が、アクセントカラーです。１割未満の面積で使用されるこの色は、基本的に、注意を引くための要素ではありますが、派手であればいいわけではないという点で、時に難しい選択となります。ベースカラー・テーマカラーの邪魔にならない色を選ぶように心がけて下さい。
３つのカラー選びでどうしても困った時には、カラーを１色に絞ってしまって、色の明るさや強さで構成してしまうという方法があります。画面に統一感が生まれますので、この手法は実際に様々なサイトで活用されています。
■印象別「組み合わせ」の色彩具体例
モードの印象を与えるwebデザイン例は「黒（7）；赤（2,5）；その他（0,5）」など。
黒をベースにして画面を引き締め、赤など、視認性の高い華やかな印象の色合いをちりばめることで、洗練されたおしゃれを演出します。また、「その他」を工夫することで、バリエーションが生まれます。
信頼性を高める青のwebデザイン例では、フェイスブックなどが代表的です。
「明るい青（7）；濃い青（2,5）；黄（0,5）」となっています。
ベースの薄いカラーは、背景としては最適なものです。ベースの薄い青に、投稿記事の白い枠を載せることで、あらゆる色彩の投稿に対応できます。
「和風で女性的」という組み合わせの場合は、「伝統色」のバリエーションから選択すると良いでしょう。
カラーコードで指定する場合は、「#C15E6E（7）；#744639（2,5）；#E18AA2（0,5）」となります。
３色いずれもピンク系の色合いなので、かわいらしいwebデザインと言えます。この場合は分量の少ないハイトーンがアクセントカラーとなります。
印象を構成するのに迷った時には、既存の魅力的なウェブページからカラー要素を抽出して、それぞれの面積を測ってみることも有効です。
- Permalink
- by 佐藤司
- at 21:09
- Trackbacks (0)
