ベースカラーやアクセントカラーって？Webデザインで重要な配色

インターネットが当たり前の時代になりましたが、私たちがWebから受ける印象は文字よりもデザインや配色の方が大きく影響しています。

そのため、ホームページやWebサイトを作るときは、デザインをじっくり検討する必要があるのです。

しかも単純に好きな色、デザインを組み合わせるだけでは人の心を掴むWebサイトはできません。

デザインにおいて、最適な配色の割合というものが存在しています。

今回はWebデザインで重要な「色」の説明と、しっかり押さえておきたい配色のポイントを解説します。

Webサイトでの「配色」の大切さとメリット

そもそも、なぜそこまでWebサイトでは配色を意識しないといけないのでしょうか？
私たちは自分が思っている以上に「色」から受ける影響が強いです。

色による視覚的な仕掛けがあったり、配色が行動や記憶に結びつくこともあります。

また、人は「見ていて気持ち良い色・配色」と「なんだかモヤモヤする色・配色」を無意識のうちに見極めています。

そのため、Webでビジネスを展開していくつもりならユーザーが見ていて気持ち良い色・配色を使うのが成功の秘訣になることも！
それでは、Webにおいて「配色」を重要視することのメリットも見ていきましょう。

色で印象がガラッと変わる

同じ相手でも、パステルカラーを着ている日と黒い服を着ている日で印象が全然違ったという経験はありませんか？
同じ形、同じ服、同じデザインであっても、色を変えるだけで印象がガラッと変わるもの。

もちろんWebサイトにも同じことが言えます。

せっかく良いコンテンツを発信しているWebサイトなのに、全体的にダークカラーを使っており、暗い配色にしているともったいない！
色を明るくするだけで印象が180度変わり、以前とは比べものにならないくらい成約率が上がることもあるのです。

提供する商品のイメージに関わる

色は何よりもWebサイトで提供している商品やサービスのイメージに合わせたものでないといけません。

歯科医のホームページで赤い色をメインにされていると、血を連想してしまい、怖くて行けなくなることは間違いないでしょう。

歯科医などの病院は、患者を安心させられる青や緑、明るい印象を与えてくれる白などが良いですね。

単色だけでなく、複数の色の配色を工夫することで単色では補えないアピール要素を強調することができます。

イメージ作り＝ブランディングということなので、色や配色は商品やサービスと関連づけて考えましょう。

記憶に残り、信頼関係に繋がる

色や配色でうまくブランディングが成功すると、色が記憶に影響するためユーザーとの信頼関係にも繋がります。

例えばユーザーが「歯医者さんに行きたい」と思ったときにあなたのホームページを思い出しますよね。

隅々までのディテールやデザインは覚えてないかもしれませんが、そこで使われていた色はハッキリと記憶に残っているはずです。

何度も思い出せるということは、そこが信頼できるホームページだと認識したということ。

ユーザーから信頼してもらうホームページ作りには、色や配色が大きな役割を担っているのです。

Webデザインにおける３つのカラー

色はそれぞれで違った意味を持っており、印象作りに役立つツールです。

例えば赤は情熱、青は信頼、黄色は明るさ、緑は安心感など。

しかし、好きな色を好きなだけ使って良いというわけではありません。

Webデザインにおいて、ユーザーに「見ていて気持ち良い色・配色」と思わせるためには３つのカラーについて押さえておかないといけないのです。

３つのカラーとは、ベースカラー、メインカラー、アクセントカラーのこと。

さらにどれも同じ割合で使うのではなく、Webサイトに統一感を持たせたり、印象付けてブランディングをしていくためには配色の割合も計算しなければいけません。

それでは３つのカラーがそれぞれどんな役割を持つのか、そしてどの配色が適切なのかを解説します。

ベースカラー

Webサイトで一番大きな割合の面積を占めるカラーになります。

余白や背景などに使われ、Webサイトを見たときに一番多く目に飛び込んでくる色でしょう。

しかし、ベースカラーが主役になることはありません。

あくまで脇役として、メインカラーやアクセントカラーを引き立てる役割があるということを覚えておきましょう。

メインカラー

Webサイトで一番の主役のカラーとなるのがこのメインカラー。

ユーザーの目にはベースカラーの色が一番多く「飛び込んで」きますが、ユーザーが一番「見る」色、つまり意識的に見ている色はメインカラーであることがほとんど！
メインカラーはWebサイトを一番印象付ける色になるため、一番慎重に選ばないといけないカラーでもあります。

色が持つ印象をよく吟味に、会社のイメージや提供する商品・サービスに一番合ったメインカラーを選びましょう。

アクセントカラー

Webサイトがベースカラーとメインカラーの２色だけだと、実はまだ足りません。

２色だけだとまだまだダラダラとした印象があるため、さらに刺激や変化を加えるため、アクセントカラーを利用します。

アクセントカラーはベースカラーやメインカラーよりも配色の割合が少ないですが、一番目立つ色でもあります。

だからこそうまくアクセントになってくれる色を選ばないといけません。

おすすめの配色の割合

一番占める面積の多いベースカラー。

一番印象付けに関連するメインカラー。

そして一番目立つアクセントカラー。

この３つの色はそれぞれ違った役割があるため、Webデザインではどれも欠かせません。

うまく調和させることでブランディングに役立ち、ユーザーに良い印象を持ってもらうことができますよ。

ですが、配色には十分に気をつけましょう！
ベースカラーはメインカラーになってはいけないし、メインカラーがうっかりアクセントカラーになってもいけません。

比率としては、ベースカラー70%、メインカラー25%、アクセントカラー5%が理想的です。

そうすると全体的にバランスが取れて、キレイは配色に仕上げることができます。

印象が良いWebサイトの配色事例

それでは、実際にある企業のホームページを見ながらどのような業種で、どのような色を、どのような配色にして使っているのかをチェックしてみましょう。

今回はユーザーに良い印象を与えている企業ホームページを2つピックアップしました。

食材宅配サービスのヨシケイ

忙しい主婦の味方、食材宅配サービスのヨシケイは以下の構成になっています。

ベースカラー：白
メインカラー：赤
アクセントカラー：黄
食に関する会社のため、清潔感のある白を背景にして食欲が湧く赤や黄色をアクセントにしている点が良いですね。

写真が多いものの、要所要所ではきちんと黄色のアクセントカラーが目に入る構成になっています。

肉体改造ジムRIZAP

「結果にコミットする」に有名なRIZAPは次のような構成です。

ベースカラー：黒
メインカラー：ゴールド
アクセントカラー：赤
黒を背景にし、ゴールドをメインカラーにすることで高級感と力強さを出しています。

さらに赤をアクセントカラーにすることで、自己主張の強い黒やゴールドに負けることなく、重要な部分を強調できている良い例です。

Webデザインで重要な配色まとめ

Webデザインにおいて、ユーザーに良い印象付けをしたり、信頼してもらったり、成約に繋げるためには色と配色のバランスが大切になります。

必要な色はベースカラー、メインカラー、アクセントカラーの３つ。

それぞれの役割を理解し、最適な割合で配色をすることで美しいホームページに仕上げることができるのです。