美しいWebサイトを作る3つの配色法則

サイト制作をするにあたって、新人のWEBディレクターやデザイナーが向き合わなければいけない要素。

それが「配色」です。

「ゴチャゴチャして見づらい」「上手に情報がまとまらない」「何度修正してもしっくりこない」こんな経験はありませんか？

今回はそんなお悩みを解決するため「3つの配色の法則」をお伝えします。

色のもたらす効果と、その比率を知るだけでバランスのとれた美しいサイトに大変身。是非ご覧ください。

 

サイト制作に必要な3つのカラー

まず、サイト制作で必要なのは「メインカラー」「アクセントカラー」「ベースカラー」の3つの考え方です。

・「メインカラー」

まず一番はじめに決める色です。ロゴの色を使う場合もあります。企業イメージを決定付ける大切なカラーです。

・「ベースカラー」

大きな面積を占める反面、わき役的な存在で「メインカラー」「アクセントカラー」を引き立てます。

・「アクセントカラー」

全体の引き締め効果があります。「購入ボタン」「ご予約ボタン」などに使用されます。

 

 

美しい仕上がりになる配色の法則

サイト制作に必要な3つのカラーを効果的に使うには、配色の比率がとても重要です。

どの入門書やウェブサイトを見ても、美しく仕上がる比率は「70：25：5」と言われています。

 

ベースカラー：メインカラー：アクセントカラー
70％　　：　　25%　　：　5%

 

配色の法則を意識してバランスのとれた美しいサイトを制作しましょう。

下記は実際のサイトを参考に色の比率を表したものです。

 

（赤とピンク）

（黄色を主体）

（青色ベース）

色のもたらす効果を徹底解説しました！

色によって人に与える印象は変わります。

例えば、飲食店は青を使用しているサイトが少ないことをご存知ですか？

アクセントで使用していることはあっても、メインで青を使っているサイトはほとんどありません。

「熱いイメージを持てない」「食欲を抑える」が青という色だからです。

つまり、色のもたらす効果や特長を知り、お客様の職種に合わせて提案すれば、より信頼関係を築けます。

 

●白

【色のもたらす印象】清潔・清純・幸福・健康

白はどんな色とも馴染んで調和します。広さを感じさせる色でもあるので、メインで使用するよりも背景色として使用する場合が多いです。

【よく使われる職種】エステ・ウェディングドレス販売

 

●黒

【色のもたらす印象】神秘・自信・威厳

自己主張の強い色です。テキストにもよく使用されます。高級感や重量感があるため、デザインによってはスタイリッシュな印象を与えます。

【よく使われる職種】車販売・お酒の販売・ミュージシャン

 

●グレー

【色のもたらす印象】上品・忍耐・クール

落ち着いた雰囲気を与え、メインカラーを引き立てます。周囲に埋もれて個性を弱めるため、目立ちたくないときには効果的です。

【よく使われる職種】和菓子販売・お蕎麦屋さん

 

●赤

【色のもたらす印象】成功・合格・達成・活力

とても強い色なので「メインカラー」で使用されることが多いです。アドレナリンを分泌し、食欲や物欲を増進させます。

【よく使われる職種】化粧品・生命保険会社

 

●青

【色のもたらす印象】知的・仕事・出会い

「メインカラー」を使用している企業やお店は多いです。知的・集中力を高める効果や無限の広がりを感じさせます。一方、食欲減退効果があるため、食品系のサイトにはあまり使用しません。

【よく使われる職種】採用サイト・病院・歯科・治療院・大学・高校・塾・治療院

 

●緑

【色のもたらす印象】環境・向上・学び・リラックス作用

目に負担をかけない優しい色で穏やかな気持ちを与えてくれます。植物の緑から成長や生命力をイメージさせてくれる色です。

【よく使われる職種】病院・歯科・製薬会社・賃貸住宅・園芸店・予備校・大学・治療院

 

●黄

【色のもたらす印象】明るい・楽しい・活発・幸福

幼さをイメージし、楽しい気分や喜びを与えてくれます。明るく笑顔になる色なので、保育園や幼稚園のサイトで使用されることが多いです。

【よく使われる職種】保育園・幼稚園・レシピ

 

●橙

【色のもたらす印象】家庭的・にぎやか・元気・陽気

家庭をイメージさせるため、食品系を扱うお店によく使用されます。ネガティブな印象がなく、親しみが生まれ仲間意識を高める色です。

【よく使われる職種】食品・飲料・保育園・幼稚園・病院・歯科（子ども対象とした）

 

●桃

【色のもたらす印象】恋愛・健康・若さ・美容・解放

女性を対象としたものに多く使用されますが、好みが分かれる色です。過度に使用すると不快感を与えてしまいます。若さに意識が向くので美容効果があります。

【よく使われる職種】マッチングサイト・ネイルサロン・女子大学・化粧品・ブライダル

 

●紫

【色のもたらす印象】美しさ・感性・ヒーリング効果

身近にあまりなく、触れる機会が少ないため、好みが分かれる色です。心と身体の回復を促し、緊張や不安を癒してくれる効果があります。

【よく使われる職種】ウェディングドレス・ヒーリングサロン・織物・呉服店

 

●茶

【色のもたらす印象】土地・家・学業

空間の中に馴染み温もりを感じさせ、緊張を調和してくれる色です。伝統や歴史を感じさ、信頼感があります。

【よく使われる職種】カバン店・ホテル・洋菓子・和菓子

 

まとめ

今回は「3つの配色の法則」についてお伝えしました。

サイトの色は企業・お店・医院などの印象を決定づけます。

お客様の職種に応じて、色の効果を交えながら提案できれば、信頼関係を築けるでしょう。

今回のテーマをもとに、是非サイト制作の参考にしてみてください。