TEL

TRASPコラム

ホームページ配色の選び方と気をつけたいポイントをわかりやすく解説

Webデザイン

更新日:2021.08.30
公開日:2021.03.04

 

ホームページ配色は、ユーザーのサイトに対するイメージを大きく印象づける要素であるため、慎重に選びたいものです。しかし「何を基準に選べばいいのかわからない」「どういった点に気をつければいいのか知りたい」と悩む方も少なくありません。

 

そこで本稿では、ホームページ配色をどのような視点で選べばいいのか、また色を決めるときの注意点をわかりやすく解説していきます。

 

 

目次

配色の基礎知識

ホームページ配色を考える前に、配色についての基礎知識をおさらいしておきましょう。

 

色の三要素

色には以下の「三要素」があります。

 

  • ・色相
  • ・明度
  • ・彩度

 

これら3要素は、色を決定づける基本的な要素です。それぞれ詳しく説明します。

 

色相とは

色相とは、赤・黄・緑・青といった言葉で区別できる色の性質を指します。お互いが連続してつながりあって、色相の輪(色相環)を作ります。

ホームページ配色の選び方と気をつけたいポイントをわかりやすく解説

 

色相環のなかでも暖かい感じがする「赤・橙・黄」系を暖色といい、「青緑・青」系を寒色といいます。そのほかのどちらでもない色は中間色です。

 

さらに色相環で隣あったり近くにあったりする色を、「類似色」、180度反対の位置にある色を「補色」と呼びます。

 

たとえば「赤と青緑」「黄色と青紫」などの組み合わせが補色です。補色同士を並べると、お互いに引き立てあうことが特徴です。ただし、明度が同じ補色同士を組み合わせると、ハレーションがおこりまぶしく感じる現象が発生するため注意が必要です。

 

明度とは

明度とは、色の明るさのことです。明度が上がれば明るくなり、最後は真っ白になります。反対に明度を下げていくとどんどん暗くなり、最終的には真っ黒になります。

 

明度が高い色は、さわやかで軽快な印象を、明度が低くて暗い色は、落ちついた重厚な印象を与えることが特徴です。これは「色の軽重感」と呼ばれます。

 

彩度とは

彩度とは、色の鮮やかさを意味します。同じ赤でも、「鮮やかな赤」「くすんだ赤」と表現することがあるでしょう。明るければ鮮やかということはなく、彩度と明度は尺度が異なります。

 

彩度が高い色はビビッドで、「派手」「華やか」といったいい印象を与えることもあれば、「どぎつい」と表現されることもあります。彩度が低い色は「地味」「くすんだ」「おだやか」な印象を与えます。これは色の「派手地味感」と呼ばれる現象です。

 

なお、灰色と黒、白の3色は「無彩色」とされ、彩度の違いはありません。この3色以外は「有彩色」と呼ばれます。

 

 

ホームページ配色の基本となる3種類の色

 

それではまずは、ホームページ配色の基本となる3種類の色を確認しておきましょう。ホームページは、

 

  • ・ベースカラー
  • ・メインカラー
  • ・アクセントカラー

 

の3色で構成されています。それぞれどのようなものかを解説します。

 

ベースカラー|ホームページ配色の基礎となる色

ベースカラーは、ホームページ配色の基礎となる、「Webサイトの背景色」を指します。ホームページでもっとも大きな面積を占める基本色となり、メインカラーやアクセントカラーを引き立てる役割を果たします。

 

 

メインカラー|ホームページデザインのテーマ色

メインカラーは、ホームページを訪問したユーザーの目に最初に飛び込み、Webサイトを印象づける色です。どの色をメインカラーに選ぶかで、ホームページ全体のイメージが大きく変わります。

 

 

アクセントカラー|注目させたいところに効果的に使う色

アクセントカラーは全体のアクセントとなる色を指し、ユーザーの目を引きたい場所に使用します。購入ボタンやお問い合わせボタンなどに用いると効果的です。

 

 

ホームページ配色の比率は「70:25:5の法則」がベスト

ホームページ配色に限らず、デザインにおいては「70:25:5の法則」といわれるものがあります。どんなデザインであっても、

 

  • ・ベースカラー:70%
  • ・メインカラー:25%
  • ・アクセントカラー:5%

 

の割合に色をまとめると、バランスがいいとされています。

 

ホームページ配色の選び方と気をつけたいポイントをわかりやすく解説

ただし、デザインによっては多少比率を前後しても問題なく、この比率が絶対ということはありません。

 

 

ホームページ配色におけるメインカラーの決め方

 

ホームページの配色を考えるときには、通常はメインカラーを最初に決め、それからベースカラー、アクセントカラーを決めていくやり方が一般的です。

 

まずは、メインカラーの決め方を押さえておきましょう。

 

企業ロゴやブランドイメージから決める

メインカラーは色が持つ印象をよく考え、企業イメージや提供する商品・サービスにあったものを選びましょう。ターゲットが好みそうな色、ブランドの世界観を表現する色を選ぶのもおすすめです。

 

メインカラーを企業ロゴや商品ロゴから選び、ヘッダーなどを含めて同じ色で統一するとユーザーに強い印象を残せます。たとえばロゴが赤色なら、メインカラーに赤を選び、全体を統一させると、その色を見ただけで「○○社のホームページだな」とすぐにイメージできるようになるでしょう。

 

また、メインカラーは文字を載せることを考慮して、可読性を上げるために明度が低い色を選ぶことも大切なポイントです。

 

 

色のイメージと心理効果から選ぶ

メインカラーを決めるときには、色のイメージと心理効果から選ぶのも方法のひとつです。ホームページに対して、ユーザーにどんな印象を持ってもらいたいのかも考えてみましょう。※色が持つイメージや心理効果については、最終章にまとめています。

 

ビジネス色を押し出したい

ビジネスを代表する色はブルー系です。とくに少し濃いブルーは「高級感」と「ビジネス感」の両方のイメージをあわせもちます。税理士事務所や弁護士事務所など、士業のWebサイトでよく使われます。

 

高級感のあるWebデザインにしたい

高級感といってもいろいろで、「シックな雰囲気」「上品」など、どういった高級感を出したいかによって異なります。シックなデザインを重視するなら、グレーやシルバーを多めに使用します。

 

上品な高級感を出したいときには、黒みがかった紺色や、ワインレッドがあうでしょう。ラグジュアリー感をだすなら、濃いベージュのベースカラーに、少し濃いブラウン系をメインカラーにする配色が定番です。

 

暖かみを感じるイメージにしたい

彩度が低めのオレンジなど、暖色系をベースにすると、暖かみと安心感を与えることが特徴です。同じ弁護士でも相続や遺言のような、個人向けのホームページには暖色系が使われることがあります。

 

オレンジや黄色は「ビタミンカラー」と呼ばれ、元気や活力、エネルギーがみなぎる印象を与えることも特徴です。幼稚園や遊園地など、明るく楽しいイメージを与えたいホームページにも向いています。

 

清潔感のあるイメージにしたい

清潔感のあるイメージを与えたいときには、彩度が高めのグリーンやブルーがよく用いられます。「安全」や「安心」をあわせてアピールしたいホームページに用いられることが多い色です。病院など医療系のWebサイトで好んで使われます。

 

彩度が高めのグリーンやブルーを用いるときには、全体的にボケた印象にならないように、アクセントカラーを効果的に使いましょう。

 

 

ベースカラーとアクセントカラーの選び方

メインカラーを決めたら、続けてベースカラーとアクセントカラーを決めていきます。

 

ベースカラーの選び方

面積の70%を占める、Webサイトの背景色となるベースカラーは白・黒・グレーなどの無彩色が採用されることがほとんどです。無彩色はメインカラーやアクセントカラーの邪魔にならず、ほどよく引き立てます。

 

ベースカラーはテキストが載り、余白にもなることから明度と彩度が高い色を使うとおさまりがよくなります。

 

アクセントカラーの選び方

ホームページにアクセントをつけるためのアクセントカラーは、全体に占める割合は5%に過ぎませんが、もっとも目立つ色を選ぶことがポイントです。メインカラーの反対色を使うと、メリハリがつき鮮やかさが引き立ち目立ちます。

 

 

ホームページ配色を成功に導く「配色ルール」

配色には、「配色ルール」と呼ばれるものがあり、このルールに沿って組み合わせると、色選びがうまくいきます。代表的な6パターンを紹介します。

 

 

コンプリメンタリー(ダイアード)配色

ホームページ配色の選び方と気をつけたいポイントをわかりやすく解説

色相環で向かいあう反対色(補色)を組みあわせる配色方法です。

補色はお互いの色を引き立てる役割を果たすので、お店のデザインやホームページ配色などでメインカラーを引き立てるには効果的です。

 

とくに彩度が高い色の補色同士はコントラストがはっきりして、強いインパクトを与えます。ただし隣り合わせで並べて使用すると、お互いに主張しすぎて目がチカチカしてしまうため注意が必要です。並べて使うときには、間にベースカラーをはさむようにしましょう。

 

 

アナロガス配色

ホームページ配色の選び方と気をつけたいポイントをわかりやすく解説

アナロガスは、色相環で隣りあう類似色を組み合わせる方法です。近い色を組みあわせるので、グラデーションが作りやすく、調和をとりやすくなります。統一感が感じられるので、選んだ色のイメージが伝わりやすくなります。

 

 

トリアディック(トライアド)配色

ホームページ配色の選び方と気をつけたいポイントをわかりやすく解説

色相環上で正三角形に結んだ頂点が指す3色を使う配色です。もっとも基本的な配色で、強いインパクトを与えながらもバランスがよく、調和のとれた色合いを表現できます。高彩度の3色を用いるとコントラストが強く、にぎやかな印象になります。落ちついた印象にしたいなら、彩度を下げるといいでしょう。

 

 

スプリットコンプリメンタリー配色

ホームページ配色の選び方と気をつけたいポイントをわかりやすく解説

スプリットとは「離れた」を意味し、基準色とその補色の両隣に位置する2色を組みあわせる方法です。補色を使うほど奇抜にはならず、調和がとれた印象になり、コントラストを少し柔らかく見せる効果があります。

 

 

スクエア(テトラード)配色

スクエア(テトラード)配色は、色相環上に正方形を配置して、その頂点が指す色で作る4色の配合方法です。2組の補色同士の組みあわせなので、インパクトの強いカラフルな配色になります。ただしどちらも補色の組みあわせとなることから、視覚的にチカチカしないよう配置の工夫が必要です。

 

 

レクタンギュラー(テトラディック)配色

ホームページ配色の選び方と気をつけたいポイントをわかりやすく解説

レクタンギュラー配色は、コンプリメントカラーを2対組みあわせて、合計4色で表現する方法です。正方形になるスクエアとは、長方形(レクタンギュラー)になる点が異なります。色が多いためにぎやかで、色彩豊かな印象を与えられます。

 

 

ホームページ配色を決めるときの注意点

ここからは、ホームページ配色を決めるときの注意点を4つ紹介します。

 

  • ・背景と文字の配色はコントラストをつける
  • ・Webサイトに使用する色は3から4色に抑える
  • ・真っ黒を使用しないようにする
  • ・全体のデザインを色と統一させる

 

それぞれ詳しく解説していきます。

 

 

背景と文字の配色はコントラストをつける

背景と文字の色は、コントラストをつけるようにしましょう。一般的に文字色は、白や黒が使われることがほとんどですが、これはほかの色とのコントラストが高い特徴があるためです。

 

いまやホームページを閲覧するのは、屋内のパソコンだけとは限りません。スマホやタブレットが普及したことで、明るい屋外や暗い部屋などいろいろな場所で閲覧されることを考慮する必要があります。そのために、十分なコントラストを確保することは、アクセシビリティの面においても重要度が増しています。

 

また、背景色とテキスト色のコントラストが低すぎると、「隠しテキスト」としてペナルティーを受けてしまう可能性がある点にも注意が必要です。背景と文字の配色は、十分なコントラストを確保するようにしましょう。

 

 

Webサイトに使用する色は3から4色に抑える

Webサイトに使用する色は、「70:25:5の法則」を守って3色にまとめると全体のバランスがよくなります。ただ、なかなか3色ではおさまらず、4色以上になってしまうこともあるでしょう。

 

色を多く使うとにぎやかになりますが、多くの色を使う配色は難易度が高く、うまく配色しないとごちゃごちゃとしたまとまりのないデザインになってしまうので注意が必要です。

 

使用する色が4色以上になるときには、以下のようなことを意識すると統一感がでます。

 

  • ・スクエア配色やレクタンギュラー配色のルールを採用する
  • ・2色以上を同系色や類似色でまとめる
  • ・明度や彩度を統一する
  • ・比率を分割する

 

上記のうち比率を分配するとは、「70:25:5の法則」は守りつつ、メインカラーの25%を12.5%と12.5%に分けて2色にする、という意味です。

 

色味を増やすからといって、メインカラーを同じ配分で増やしてしまい、「ベースカラー45:メインカラーA25:メインカラーB25:アクセントカラー5」のような比率になるとまとまりが悪くなるので気をつけましょう。

 

 

ピュアブラック(真っ黒)を使用しないようにする

Webサイトをデザインするときには、ピュアブラックを使用しないこともポイントです。ピュアブラックのカラーコードは(#000000)です。

 

ピュアブラックは、背景が白の場合はコントラストが高すぎるため目がチカチカするうえ、インパクトが強すぎるので避けたほうがいいとされています。色のコントラストが強いと読みやすくなることは確かですが、光量のバランスが悪くなることが問題です。文字を読んでいるうちに目が疲れてしまい、ユーザーに負担をかけてしまうのです。

 

背景が白い場合は、黒からグレーや茶色方向に、少しずらした色を選択するとぐっと落ちついて読みやすくなります。

 

 

全体のデザインを色と統一させる

ホームページ配色と、全体のデザインを統一させることも大切です。

 

たとえば暖かみや優しさを感じさせようと、暖色のホームページにしたのであれば、ボタンも角丸のものにするとさらに柔らかいトーンを演出できます。スタイリッシュなモノトーンのWebサイトを目指すのであれば、きっちりと角を立たせたデザインがあうでしょう。

 

ホームページ配色は、このようにサイト全体のイメージを印象づけます。次章から紹介する色が持つイメージを参考に、自社サイトにあった色を選んでみてくださいね。

 

 

色が持つイメージと心理に与える影響

それではここからは、代表的な色が持つイメージと、心理に与える影響を紹介します。それぞれの特徴を押さえ、ホームページ配色を決めましょう。

 

赤色

 

イメージ熱い、強い、危険、闘争、情熱的、興奮、怒り など
心理作用赤は血液や太陽、炎など「生命」に直結するイメージがあることから、エネルギーの象徴とされています。スポーツで赤を身につけることが多いのは、自分やチームを鼓舞し、相手を奮い立たせる効果があるためです。

購買意欲を出させる効果もあるとされ、バーゲンやセールのポスターでもよく使用されます。

ホームページでは、広告代理店やゲーム会社など、革新的で挑戦をイメージさせる会社でよく用いられます。

 

 

橙(オレンジ)色

 

イメージ暖かい、明るい、元気、健康的、親しみ など
心理作用色のなかでももっとも暖かみを感じるとされているのがオレンジ色です。同じ暖色でも赤より強さが薄まり、親しみやすい印象を与えます。好き嫌いの差が少なく、万人受けする色です。

オレンジは人の心を開かせて、コミュニケーションを活発化する効果があるともいわれています。そのため、エンタメ系やキャリア系など、「人とのつながり」を重視するサービスを提供する企業に好まれるのが特徴です。ホームページでは、子ども関係やペット、人材系などでよく使用されています。

 

 

黄色

 

イメージ好奇心、知識、幸福、カジュアル、警戒 など
心理作用暖色のなかでもとくに明るい黄色は、集中力を高めたり、気分を明るくしたりする心理効果がある色です。ほかにも注意を促す効果もあるので、道路工事や踏切などの警戒色にも使われます。

また、黄色は左脳を刺激するといわれており、理解力や判断力を促進する効果もあります。

 

 

緑色

 

イメージ自然、平和、調和、協調 など
心理作用緑色には興奮を静め、集中力を増進させる効果があります。また、遠くの緑を見ると目にいいといわれるように、目の疲れをいやす効果もあります。安心感を与えたい場合や、リラックスしたイメージを与えたいときに使用するのに適した色です。

ホームページでは、病院など医療系でよく使用されます。

 

 

青色

 

イメージ誠実、爽やか、安全、冷静 など
心理作用青色は興奮を抑えて冷静にさせる効果があります。空をイメージさせることから、航空会社のイメージカラーや飛行機の機体色にもよく使用されています。

知性を感じさせる色でもあるため、ビジネス系や士業のロゴやホームページのメインカラーに好んで用いられることが特徴です。また、水や海を連想させることから、飲料水やマリン系ショップなどのWebサイトでも青色がよく使用されます。

 

 

紫色

 

イメージ高貴、優雅、神秘、非現実的 など
心理作用紫色は、赤と青色を混ぜた深みを感じさせる色です。そのため高級感があり、エレガントなイメージを与えます。かつては高貴な人のみが身に付けられる色であったことも、心理的影響を与えていると考えられます。

紫で連想するものがすくないため、想像力をかきたて、感受性を高める効果がある色です。神秘的なイメージから、スピリチュアル系でも好んで使用されます。

 

 

白色

 

イメージ清潔、清らか、純粋、神聖 など
心理作用白は汚れのない色として、清潔感、純粋さをイメージさせます。病院や飲食店で好んで用いられる色です。ほかにも「白紙に戻す」という言葉があるように、「リセットする」「再スタートする」といった、気持ちを新たにする心理作用があります。

白は明度がもっとも高い色であるため、明るく軽快な印象を与えられますが、無彩色なので多用しすぎると無機質な印象を与える可能性があります。

 

 

灰色

 

イメージ憂鬱、不安、調和、過去、薄暗い など
心理作用白と黒が混じり合った無彩色である灰色は、「グレーな気分」が表すように、印象としては暗い感じのものが多くなります。しかし黒と白の調和がとれた色でもあるため、控えめで落ちついた印象を受ける人も多くいます。

灰色はほかの色との相性もいいので、明度をうまく調節して使えば、上品なホームページを作ることが可能です。

 

 

黒色

 

イメージ暗闇、恐怖、悪、沈黙、死、男性 など
心理作用すべての色を吸収した色とされる黒色は、奥になにかを秘めた影のある印象を与えます。白が軽快さを感じさせるのと反対に、重々しさを感じさせる色です。重厚で大人なイメージを与えることから、高級店でもよく取り入れられます。

ただ、黒はその暗さから、不安や恐怖を与える効果もあるので、使いどころを間違えないようにすることが大切です。

 

 

銀色

 

イメージ金属、冷たい、硬い、上品 など
心理作用灰色とよく似ていますが、上品で落ちついた、また洗練されたモダンな印象を与えます。金色と比べると控えめで、派手さはないものの高級感のある色です。

銀色は自然界には少ない色であることから、どこか人工的なイメージもあります。多用しすぎると冷たくつきはなした印象を与えてしまうため注意しましょう。

 

 

金色

 

イメージ成功、富、高級、輝き、ゴージャス など
心理作用色の中でももっとも派手で、お金や富を連想させることから高級なイメージを与えられる色です。建築や宝飾でも、富や繁栄を表すために効果的に金色が用いられてきました。

金色には欲を満たしたい気持ちを満足させる心理効果もあります。しかし使い過ぎると逆にチープな印象になる点には要注意です。

 

 

ホームページ配色はブランドイメージやユーザーに与えたい心理的影響を考えて選ぼう

ホームページの配色を考えるときには、商品やブランドのイメージをメインカラーとする方法と、ユーザーに与えたい心理的影響を考えて選ぶ方法があります。まずはどちらかの方法でメインカラーを決め、それからベースカラーとアクセントカラーを選びましょう。

 

色を使い過ぎるとゴチャゴチャした印象になるため、Webサイトで使う色は3〜4色に抑えるのが無難です。色選びに迷ったときには、配色ルールに従うと成功する可能性が高くなるので、ぜひ試してみてくださいね。

 

TRASPは、SEO対策に強いホームページ制作からブログ更新のサポートまで行うホームページ制作会社です。

工務店や建設業、エステサロン、整体院など幅広い業種のホームページ制作を行って実績があり、中小企業のビジネス課題を解決する戦略をご提案させていただきます。

SEO対策をしても順位がなかなか上がらない」「ブログのアクセス数を伸ばしたい」など、ホームページでお悩みの方は、お気軽にご相談ください。

お問い合わせはこちら

CONTACTweb制作やweb集客のご相談やお見積もりなど

オンライン
相談受付中
page top
© TRASP.inc All Rights Reserved.