会社名iyyotoのロゴ
iyyoto
個人事業主さま向けのホームページ制作
コストイメージ
イヨット!ブログ
ホームページ制作イヨットへお任せ!
2021.04.05

ホームページの色、どうされていますか? 上位10件のハウスクリーニング店の配色コードを調査!

ホームページの色って、決めるのが難しいですよね。特に色をコードで決めていくのが苦手です。

前からみなさんどうしていらっしゃるのかと気になっていました。それで、今回、Googleの検索結果上位のハウスクリーニング店の色を調べてみました。

ところで、ホームページの色と言うのは1色ではないんです。

ホームページの色の構成

ホームページは主に3色で構成されています

ホームページのカラーには主に3種類の色を選ぶと良いようです

  • ベースカラー:余白に用いる色で、総面積が一番大きくなる色です。
  • メインカラー:サイトの特徴を表す色です。
  • アクセントカラー:文字通りアクセントになる色です。

ちなみに、このサイトでは、このようになります。

  • ベースカラー:#ffffff
     
  • メインカラー: #f3f6f6
     
  • アクセントカラー:#50ccbc
     

でも、色の前にいくつかの英数字が出てきました。これは色コードと言います。

色コードとは

コンピューターでは、色を数字で表現します。

特に、赤・緑・青の3色を混色させていろいろな色を作ります。例えば、「赤:100・緑:0・青:0」とすれば赤ですが、「赤:100・緑:0・青:100」とすれば紫になります。それぞれの数字の上限は255です。

また、大きいほど、色は明るくなります。「赤:0・緑:0・青:0」は黒、「赤:255・緑:255・青:255」は白になります。

表記の仕方は色々あるのですが、上記の3つの組を素直な仕方で表すと

rgb(100, 0, 100)

など、半角カッコやカンマで区切って表現します。

でも、他の表現の仕方もあります。それぞれの3つ数字を16進数にすると言う方法です。変換ツールなどは無料でウェブも見つかります(例えば、カラーコード変換ツール(TECH-UNLIMiTED)は使いやすいです)。上記の例は、

#640064

と表現できます。これがカラーコードの正体です。

配色コードをどう決めていくか

この色は自由に決められます。

でも、できれば、その業種を連想させるものだといいですよね。ハウスクリーニングなんかだと、白と青あたりが基調になるでしょうか。

よく言われるのは、青は清潔さや冷静さを赤は情熱などを表すと言うものです。あと、オレンジはクリックされやすい色だそうですよ。

といっても、何色にすればいいか、と言うのは迷いますね。

それで、今回は、Googleで「ハウスクリーニング」と入力した時の上位10件を調査してみました。もちろん、iyyotoの地域(東京都町田)での検索結果ですので、お住まいの地域によって違うと思います。

上位10件のハウスクリーニング店の配色コード

1. おそうじ本舗

おそうじ本舗のホームページ
  • ベースカラー:#ffffff
     
  • メインカラー:#ededed
     
  • アクセントカラー:#10345a
     

2. ダスキン

ダスキンのホームページ
  • ベースカラー:#ffffff
     
  • メインカラー:#efefef
     
  • アクセントカラー:#16c8d5
     

3. ハウスクリーニング業者比較サイト

ハウスクリーニング比較サイト
  • ベースカラー:#ffffff
     
  • メインカラー:#fff8fa
     
  • アクセントカラー:#ff6a94
     

4. ベアーズ

ベアーズのホームページ
  • ベースカラー:#ffffff
     
  • メインカラー:#fff6e9
     
  • アクセントカラー:#007fc1
     
    もしくは#ff69ab
     

5. eくらしのマーケット

eくらしのマーケットのホームページ
  • ベースカラー:#ffffff
     
  • メインカラー:#f3f3f3
     
  • アクセントカラー:#f0741a
     

6. カジタク(イオン)

カジタクのホームページ
  • ベースカラー:#f3f5f7
     
  • メインカラー:#005da8
     
  • アクセントカラー:#42d06d
     

7. ミツモア

ミツモアのホームページ
  • ベースカラー:#ffffff
     
  • メインカラー:#f3f3f3
     
  • アクセントカラー:#00a934
     

8. カネムラおそうじセンター

カネムラのホームページ
  • ベースカラー:#ffffff
     
  • メインカラー:#fbf0f0
     
  • アクセントカラー:#258a91
     

ちなみに、この「カネムラおそうじセンター」のホームページは私がさせていただいています。ぜひ一度ご覧になってください。ホームページの作りはさておき、職人さんの腕は確かです!

9. ぽらいと

  • ベースカラー:#ffffff
     
  • メインカラー:#f5f5f5
     
  • アクセントカラー:#00cefb
     

10. NPO法人日本ハウスクリーニング協会

ミツモアのホームページ
  • ベースカラー:#ffffff
     
  • メインカラー:#ffffe6
     
  • アクセントカラー:#0092e7
     

どんな配色パターンが効果的か

さすが上位10位です。きちんと、配色パターンが決まっているように見えます。では、早速考察していきましょう!

白が基調になっている

ほとんどのホームページのベースカラーは白のようです。やっぱりハウスクリーニングでは、清潔さを表すことが大切でしょうか。白は色ではありませんが、シンプルに白にするのは安心感を抱かせるかもしれません。

この色のもう一つの利点は見やすいことです。金額やサービス内容の文字が読みにくいのはNGですね。やっぱり見やすいことは大切です。

メインカラーはグレーが多い

メインカラーはグレーもしくはグレーに近い暖色系の色です。グレーといっても、かなり明るい方のグレーのようです。

いくら清潔さを強調するといっても、真っ白のホームページだとなんだか落ち着かないものです。かといって、あまり派手な色にするわけもいきません。その点グレーは控えめで、他の色との相性がいいですね!

アクセントカラーはやっぱり青色!と思いきや…

アクセントカラーは圧倒的に水色が多いだろうと予想していましたが、意外と、水色は少ないですね。青もありますが、青は青でも、かなり濃い青を使っているところもあります。

意外と多いのは緑色。最近のエコ意識を反映しているんでしょうか。安全な感じもあって、落ち着く感じがあるりまます。

また、ピンクなど暖色系のサイトもありました。客層にもよるかもしれませんが、ターゲットを絞っていて、効果的かもしれませんね。

ハウスクリーニングならではの配色とは?

結局のところ、閲覧される方のことを考えてホームページ作りがされていることがよくわかりますね。

クリーニング系は清潔さを意識した白とグレー、そして、自分としてターゲットとしたお客様層を意識した色にすると良い配色ができそうです!

ありがとうございました。

ARTICLE

同じカテゴリの記事

ブログやホームページのご依頼は
イヨットにお気軽にご相談ください
CONTACT

制作のご依頼などのご連絡先

きっと、ホームページは個人事業の力になってくれます。ぜひ、この機会にホームページを持つことをご検討されてはいかがでしょうか?
個人事業のホームページの作成に少しでもお悩みがございましたら、一度、お問い合わせいただきたいと思います。少しでもお役に立てれば嬉しいです。