【web配色】エステサロンや整体院のホームページのカラーの決め方

今回は、ホームページ作成の実践編です。

webサイトの配色(カラー)の決め方について、お伝えします。

特に、エステサロンや、整体院、リラクゼーションなどのサロン系のホームぺージをデザインする時に、お役立ていただける内容です。

ご存知の通り。

ホームページは、多くのお客様にお店のイメージ(カラー)を伝えるためのものです。

また特に、

エステや整体などのサロン系のホームぺージでは、女性のお客様を意識した配色(色彩)がポイントになります。

多くのサロンでは、お客様の60%以上が女性だからです。

当記事では、その辺りもポイントを解説しますね。

「ホームページのカラー選び」とは。

まさに、「サロンの色づくり」です。

でも、ご心配なく☆

簡単で、楽しい部分ですよ!

※ハマり過ぎ注意…(^^ゞ

ホームページの色

まず、ホームページの色の正体を知りましょう。

赤色 ↓

16進:#FF0000

10進:RGB(255,0,0) 

青色 ↓

16進:#0000FF

10進:RGB(0,0,255) 

といったように、記号(コード)で表します。

コンピューターは、この記号を読み取って色を表現しているわけです。

コードの記述法には2つあります。

16進数=合計6桁 

10進数=RGBをカンマで3分割

この2つを知っておけば大丈夫です。

詳しく知りたい方は、下記をどうぞ。

≫ HTML 【 色指定 】 ~ colorの指定方法

はい、難しい話はここまでです(^_-)-☆

いきなり、驚かせてしまいすみません。

プログラミングの勉強が始まるのかと思いますね(^^ゞ

でも、一度、知りさえすれば、もう大丈夫です。

あとは、コピー&ペースト(張り付け)で、自由自在にweb上での配色を楽しめますよ。

私がみたところ、16進数を用いてる記述が多いので、この先は、全て16進数で話しを進めていきますね。

ちなみに、

16進数→10進数

10進数→16進数

のように変換が必要なときは、下記の無料ツールが使えますよ。

≫ カラーコード変換ツール

 カラーコード一覧サイト

カラーコードは無料で取得できます。

私が気に入っているサイトをご紹介いたします。

以上の3つを、よく使います。

もちろん、全て無料です。

ブックマークや、お気に入りに登録しておくと便利ですよ。

※グラデーションのかけ方は、別記事でご説明しますね。

他にも、色々あります。

たとえば、

こちらはシリーズです。

ただ、なぜか個人的にはあまり使っていません。

一応、お気に入りに残してはいます。

配色の参考にしたいサイト

日本一のヨガスクール『ヨガジェネ』
最高峰ヨガスクール『ヨガジェネ』

エステサロンや、整体院、リラクゼーションサロンのホームぺージの配色を決める上で、女性意識は欠かせません。

私自身、男性ということもあり。

どうしても、カッコいい感じの色、青や緑系の配色に引かれていきます。

そこで、配色の参考にしたいサイトを探しました。

まずは、こちら。

ヨガジェネレーション

そして、こちら。

オリーブスパ求人サイト

この2つのサイトには、共通点があります。

それは、

  1. くすんだピンク
  2. くすんだエメラルドグリーン

の2色を使用していることです。

そこで、私は以下のサイトを作りました。

ハーモニーアロマ求人採用サイト

オリーブスパの求人サイトのカラーを主に使用しています。

あとは、配色に悩んだ時によく覗きにいくサイトがこちら。

サルワカ

最近では、囲み枠などのコードもサルワカさんから取得させていただいています。

≫ コードのぺージはこちら

私が目指すのは、女性60%~80%位のサイトです。

ですので、ただ美しいだけでなく、

男性にも抵抗のない配色を目指しています。

エステサロンなど、ほぼ、女性100%狙いのサイトなら以下のようなサイトも参考になるのではないでしょうか?

美容ブログ [女性の美学]

こちらは、紫系のカラーを使用したサイトとしては、抜群に美しいと思います。

※ちなみに、女性を意識した美しいサイトのほとんどが、男性が寝る間も惜しんで必死で運営しているものとのことです(^^ゞ

※サイト全体の色を揃えることがキレイに見える秘訣です。

インスピレーションを受けたサイト

以下は、配色とは別ですが。

以前、サイト作成にあたり参考になるサイトを探したところ。

※スマホで探しました。特に、スマホで見た時に、美しいデザインのサイトが作りたいため。今は、検索者の70%はスマホです。しかもパソコンで検索してくる残りの30%には、業者も含まれるでしょう。

全国の、エステ、整体、リラクゼーションサロン、100サイト超の中で。

特に、インスピレーションを受けた4つのサイトをご紹介しておきます。

  • あかり整体(金沢の整体院)
  • スローライフ(恵比寿のエステサロン)
  • MUU(生駒のリラクゼーション)
  • Healing Spa 波の音(生駒のエステサロン)

あかり整体

こちらは、金沢市の整体院です。

ちなみに、ビジュアルだけでなく、ブログの内容が凄いです。そのため、ブログのpv数(見られた回数)がとても多いです。

スローライフ

こちらは、恵比寿のエステサロンです。

エメラルドグリーンが美しいです。あとは画像が美しく臨場感がありす。多くの女性から支持される要素が詰まっているように思います。

MUU

こちらは、生駒市のリラクゼーションサロンです。

プロのデザインだと思います。WEBサイトだけでなく、経営センスを感じました。まだまだ伸びるのではないでしょうか。

Healing Spa 波の音

生駒市のエステサロンです。

洗練された完成度の高さに驚きました。ここまで美しいホームページは少ないでしょう。黒系のサイトデザインの参考になるのではないでしょうか。

良質サイトの探し方

ちなみに、最も効率的な探し方をお伝えしておきます。

気になる地域名×職種、で検索します。

たとえば

「地域名×エステ」

「地域名×整体」

「地域名×小顔」

「地域名×リラクゼーション」

などと検索します。

公式サイトの探し方

あとは、下へ下へ見ていくだけです。

コツは、画像のように『グーグルマップ』の一覧から見ていくことです。

普通の検索画面だと、ブログや、ホットペッパーなどの集合サイトが混ざってしまい、非効率でした。

自社の公式ホームページを検索する場合は、このやり方がオススメです☆

大手サロンを見てみよう

ところで。

女性目線のサイト(ホームページ)作りを学ぶ上で、最も参考になるのはどこでしょう?

やはり、

エステと、脱毛ではないでしょうか。

そこで、日本における、エステの大手7社と、脱毛の大手5社の公式ホームページを比較してみました。

とくに、今回は、配色/カラーという観点から見ていきましょう!

エステの大手7社
公式サイトの配色構成

第1 第2 第3
タカノ 薄紫 水色
ミスパ ピンク
エルセ ピンク 水色
TBC 水色
スリム ピンク
ソシエ
ポーラ

Takano Yuri 

公式トップ画面は、ミランダカー(ハリウッド女優)を採用した、薄紫色、水色系の配色です。そこから、全国の各店舗のぺージにいくと、金(ゴールド)を主体とした、配色となっています。※2018,8,25検索時

ミスパリ

金色と、ピンクをメインに、水色や紺(コン)色などの青系のカラーで構成されています。ミスパリの、ロゴが紺色なので、青系の指し色が引き立ちます。※2018,8,25検索時

エルセーヌ

金を主体に、ピンクと水色が柔らかく溶け込んでいます。ビフォーアフターの実測値や、価格などのポイントとなる数値にピンクを用いることが多いようです。※2018,8,25検索時

エステティックTBC

紺と水色を中心に、ゴールドを用いた落ち着いた配色です。公式サイトのトップ画に女優のローラを用いた朱色(赤系)の色味が合わせてあり、とてもきれいです。※2018,8,25検索時

スリムビューティーハウス

ロゴに合わせた、ワインレッドのような濃い赤がメインの構成です。第2カラーとして、薄いゴールド系及びベージュ、そして、ピンクを合わせてあります。※2018,8,25検索時

ソシエ

白を基調としたデザインです。黒をポイントで聞かせつつ、薄いグレーを広範に使用。ボタンカラーなどに、金(ゴールド)を用いた落ち着いた配色です。※2018,8,25検索時

ポーラ

白と黒がメインの洗練されたデザインです。青色をポイントカラーとして用いることで、一層、かっこ可愛い印象を受けます。※2018,8,25検索時

いかがでしょう?

まず、私は、ピンクが主体のサイトがないことが以外でした。

ピンクは、どのサイトでも必ず配色されていますが(画像なども含めて)、想像では、もっとピンクピンクした、ガーリーな印象のサイト構成が多いと思っていたので。

ゴールド系がメインのサイトがほとんどですね。

あとは、白黒メイン。

ガーリーというより、ラグジュアリー感を演出していることがわかります。

白黒メインの、ソシエや、ポーラなどは、そのまま、男性ターゲットのサイトにしても…と思って見返しましたが、やはり、女性感を感じますね。

個人的な主観ですが、

ゴールド系のサイトの方は、より、若年層をターゲットにしていて。

白黒系の方は、少し大人の女性をメインターゲットに、しているようにも感じます。

※エステの大手は、季節や、イベントなどによって頻繁にサイト(特に画像)を変えるため、皆さまがご覧の現在は、また違うかもしれません。

※エステ大手の、季節ごとの配色構成も参考になりそうです。いつか、まとまったら追記しておきますね。

脱毛大手の5社
公式サイトの配色構成

第1 第2 第3
ミュゼ 水色 ピンク
脱毛ラ ピンク 水色
C3 ピンク グレイ
キレイ 水色 ピンク
恋肌 ピンク

ミュゼ

水色と、ゴールド(金)がメインの配色構成です。ピンクをポイントカラーとして使用することで、可愛い雰囲気になっています。実は、白色もメインカラーかもしれません。

脱毛ラボ

ロゴに合わせた、ピンクと白をメインにした配色構成です。次いで、水色を使用しています。ロゴベースでサイトの構成を考えたのかもしれません。

シースリー

こちらもロゴに合わせたサイト構成です。驚くことに、ピンクと白のほぼ2色使いです。あえて、第3カラーとして、グレイ、シルバー系をあげられる位です。

キレイモ

こちらも、ロゴの3色を配置した色彩構成です。インパクトのあるハッキリとした配色を採用し、ビビットな切り替え構造が特徴的な動的なサイトです。

恋肌(こいはだ)

濃いピンクと、薄いピンクが主体の色彩構成です。その中に、エメラルドグリーンと、水色をポイントカラーとして採用しています。色味が多くにぎやかな印象です。

いかがでしょう。

脱毛大手では、ピンクが定番カラーのようです。

ピンク×白×水色といった、ガーリーな印象を受けます。

また、ロゴの色彩構成も同様です。

やはり、エステ大手と比較すると、全体的に、若年層の女性を意識したサイト構成といえるでしょう。

色の取得方法

では、次の段階に入りましょう。

合わせてみたいカラーが見つかったら、その色をwebで表すためには、カラーコードを知る必要があります。

始めに見た、16進数、10進数ですね。

それでは、具体的な取得法を2つお伝えします。

①取得法

以下は、私の運営するハーモニーアロマのロゴです。

ハーモニーアロマつくば

そして、ハーモニーアロマのサイトは、このロゴから取得して配色しました。

良く見ると、2色使いなのです。

  1. 画像の上で右クリック
  2. 名前を付けて画像を保存
  3. GIMPという無料の画像処理ソフトで開く
    あらかじめGIMPをダウンロードしておきましょう。
  4. スポイトでカラーコードを取得

という流れです。

当然、イラストレーターやフォトショップなどのGIMP以外の画像処理ソフトでも構いません。

画像処理ソフトを使い慣れてない方には、少し抵抗ある流れかもしれませんね。

GIMPの使い方については、いづれご説明できればと思います。

※『GIMP 使い方』などと検索してみると、色々でてきますよ。

②取得法

こちらの方がスマートかもしれません。

気になる色のあるぺージで、[F12]を押してみてください。

※パソコン限定です。

では、ハーモニーアロマを例に行ってみます。

ハーモニーアロマのトップ画面で、[F12]を押します。

すると、以下のような数字の羅列が表れます。

カラーコード取得法

上のコード、#798D48(明るい緑)

下のコード、#5D7648(暗い緑)

と、いうように、カラーコードを取得できるのです。

本来は、気になる色で書かれた、文字のすぐ近くにカラーコードが書いてあって、それを取得できたらわかりやすいのですが。

このように、どこにあるかわからない場合も多いです。

ですので、まずは、気になる色があるぺージを開いてみて。

#~で書かれたコードや、RGB(~,~,~)と書かれたところを探してみてください。

そして、その文字を取得して、ワードプレスや画像処理ソフトに入力して確認しましょう。

ホームページの立ち上げから、画像撮影、画像処理まで1日集中(5時間:税込45,000円+茨城県つくば市からの交通費)にて、私ミナミが、直接サポートさせていただくことも可能です。

詳しくはこちらから ≫

まとめ

いかがでしたか?

少し、専門的に感じたかもしれません(__)

でも、一度知ってしまえば、むしろ面白い部分です。

ぜひ、実践してみてくださいね☆

※ただ、こだわるとキリがないので、ほどほどに…(^^ゞ