配色の比率を知ろう

皆さんは、ホームページを作成する際の「配色」について考えたことはありますか？

同じ内容でも、色使いによってユーザーに与える印象はずいぶん違ってきます。配色によって購買意欲が高まることもあれば、「なんとなく買いたくないな」という気分になることもあるでしょう。成功しているホームページの多くは、色使いに対する工夫が施されています。

といっても、ただ見た目をカラフルに豪華に飾ればいいというものではありません。色数が多いとかえって見栄えが悪くなることも。肝心のホームページの内容がユーザーに伝わらなくなってしまっては本末転倒です。

見やすくユーザーの心に響くホームページを作成するためには、3色程度に抑えた配色が有効だといわれています。大切なのは、どのような色をどのような比率で使うかということ。

そこで今回は、「ホームページ制作における配色の比率」について、初心者向けに分かりやすく解説していきます。配色比率の基礎知識はもちろん、具体例なども紹介しているので、ぜひ参考にしてみてください。

理想の配色比率（配色黄金比）

A4・B5などのコピー用紙に「黄金比」が使われていることをご存知でしょうか？縦と横の比率が「1対約1.62」になっています。これは、人が見た時に最も「美しい」と感じる比率です。アート、ファッション、クルマなどさまざまな分野の美しいデザインに、この比率が散りばめられています。

実は、配色にも「配色黄金比」というものがあります。使う色は3色で、ベースカラー70%、メインカラー25%、アクセントカラー5%という比率です。ファッション、インテリア、アートなどさまざまなジャンルで、人を魅了する配色方法として取り入れられています。

もちろんホームページ作成にも配色黄金比の応用が可能です。デザインに美しさと統一感を演出することができます。訪れた人を惹きつけて離さない魅力的なホームページを作成するためにも、ぜひ配色黄金比を役立てたいところです。

ベースカラーとは

ベースカラーは、配色黄金比のいわば「下地」として使用される色。その割合は70%と、最も大きな比率を占めます。

ホームページでは多くの場合、背景や余白として使われます。そのため、ホームページのイメージを左右する重要な役割を担っていると言えるでしょう。

例えば淡いパステルカラーを使用すれば穏やかで優しいイメージに、赤や黒などの強い色調ならインパクトを持って迫ってくるイメージになります。

ホームページの内容や提供したい商品やサービスに合わせて、最適な色を選んでください。

メインカラーとは

メインカラーは、その名の通り配色の中心となる色です。

割合としては25%。少ない印象ですが、ユーザーはこれを「ホームページの色」と捉えるため、最も重要な色だと言えるでしょう。

会社やブランド、商品のイメージカラーを使用するケースも多く見られます。

配色黄金比の3色を検討する際は、最初にメインカラーを決めるのがおすすめです。

アクセントカラーとは

アクセントカラーの比率は5%。文字通りアクセントとして、メインカラーを際立たせるために使用されます。

メインカラーだけでは単調になりがちなホームページも、アクセントカラーを効果的に使用することで、より引き締まった印象になります。いわば配色におけるスパイスのような存在と言えるでしょう。

お問い合わせや購入ボタンなど、強調したい箇所に目立つ色を配するケースも多く見られます。

メインカラーにおすすめの色

この章では、メインカラーにおすすめの色を紹介します。具体的には、以下の3色です。

• 赤色
• 青色
• 黄色

それぞれの色が人の心にどう働きかけるのか、色彩心理学の観点から見てみましょう。

赤色

赤は、「情熱」「力強さ」といった強い気持ちがイメージされる色。人をやる気にさせる効果や、自信を取り戻させる効果が期待できると言われています。

赤は血の色であることから、太古の昔から「命の色」として人間の心理に刻まれてきました。そのため、25％の配色でも、非常に目立ちます。

強さやエネルギッシュなイメージを強調したい場合は、ぜひ赤系の色を使ってみてください。

青色

青は、人の感情を穏やかにし、興奮を鎮める色です。副交感神経に働きかけ、心拍数や呼吸数を下げる効果があると言われています。

クールでさわやかなイメージが湧くため、企業のホームページでもよく使用されています。 「堅実さ」や「誠実さ」をアピールしたい場合には、青系の色を検討してみましょう。

黄色

黄色は、太陽を連想させる色。人に希望を与え、喜びをもたらす色です。

また、黄色は左脳に働きかけ知力を高める効果があるとも言われています。頭の働きを活発にして何かに挑戦したい時に用いられるケースも多いでしょう。

ユーザーに一歩踏み出して挑戦してほしい、そんなサービスを提供しているホームページに使いたい色ですね。

配色黄金比が使用されているホームページの例

最後に、配色黄金比が使用されているホームページの具体例を紹介します。魅力的なホームページ作成のために、ぜひ参考にしてください。

エムエステクノス株式会社

まずは、「エムエステクノス株式会社」のホームページを紹介します。

https://www.mstechnos.co.jp/

背景となるベースカラーは白。

メインカラーは青色。メインビジュアルやお問い合わせエリアの背景画像も青ベースで広く活用されています。

上部の「カタログダウンロード」ボタンに採用されている青緑が、アクセントカラーにあたります。隣接色相で調和も取れていますね。

太陽金型用品株式会社

続いて、「太陽金型用品株式会社」のホームページを紹介します。

http://www.tk-j.co.jp/

背景となるベースカラーは白。

メインカラーは黒（グレー）。金型自体黒や銀が多いので、商品そのものの色をメインカラーとして活用している例と言えるでしょう。

アクセントカラーは赤。会社名である太陽のイメージをホームページにも活かしています。

まとめ

「ホームページ制作における配色の比率」について、初心者向けに分かりやすく解説しました。

ぜひ当記事を参考にしながら、配色黄金比などに関する知識を身に着け、効果的なホームページを作成してください。