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

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

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

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

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

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

基本的に、パソコン作業向けの内容です。

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

また特に、

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

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

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

「ホームページのカラー選び」とは、まさに「サロンの色づくり」です。

でも、ご心配なく☆

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

ミナミ
ハマり過ぎ注意です^_^;
関連記事

2021最新版ぜひ、この記事を参考に、ホームページ作成に取り組んでみてください。まったくの〝WEB知識ゼロ〟のセラピスト・整体師・エステティシャンをはじめとする技術者の方が読んだとしても、わかりやすく、即戦力[…]

整体師、エステティシャンにおすめのホームページの作り方【速習編】

 

ホームページの色

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

赤色 ↓

16進:#FF0000

10進:rgb(255,0,0) 

HSL:hsl(0,100%,50%) 

青色 ↓

16進:#0000FF

10進:rgb(0,0,255) 

HSL:hsl(240%,100%,50%) 

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

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

コードの記述法は、上記3つ(+おまけ2つ)ありますが。

  1. 16進数=合計6桁 
  2. 10進数=rgb(RGB)をカンマで3分割

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

ミナミ
rgb、hslのおまけ2つでは、透明度まで指定できます!
プログラマカレッジ

サイトの色指定は CSSで行います。 色指定には「 16進数 」や「 10進数 」、「 カラーネーム 」など、いろいろな…

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

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

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

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

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

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

ちなみに、

16進数→10進数

16進数→HSL

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

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

 

 カラーコード一覧サイト

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

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

この2つはよく使います。

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

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

他にも、色々あります。

たとえば、

こちらはシリーズです。

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

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

 

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

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

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

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

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

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

まずは、こちら。

ヨガジェネレーション

そして、こちら。

オリーブスパ求人サイト

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

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

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

それを参考に以下のサイトを作りました。

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

久しぶりに見返したら2サイトとも、くすんだピンク×薄いグレーの2色がメインに変わっていました。大手は反応率をテストしているので非常に参考になります。

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

サルワカ

囲み枠などのコードもサルワカさんから取得することもあります。

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

私のイメージは、女性ユーザー60~80%位のサイトです。

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

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

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

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

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

ミナミ
サイト全体の色味を揃えることがキレイに見える秘訣です。
サルワカ | サルでも分かる図解説明マガジン

コピペで使えるオシャレな色の組み合わせを紹介します。それぞれの配色の実際の使用例まで用意しました。…

 

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

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

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

必ずスマホで確認!

今は、検索者の70%はスマホです。しかもパソコンで検索してくる残りの30%には、業者も多く含まれます。

そのため、スマホで見た時に、美しいデザインでなければ意味がありません。

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

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

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

あかり整体

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

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

スローライフ

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

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

MUU

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

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

Healing Spa 波の音

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

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

 

良質サイトの探し方

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

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

たとえば

「地域名×エステ」

「地域名×整体」

「地域名×小顔」

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

などと検索します。

公式サイトの探し方

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

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

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

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

 

大手サロンを見てみよう

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

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

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

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

大手エステサロン7社の公式サイトのカラー構成

エステ大手7社/2018年8月
公式サイトの配色構成

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

Takano Yuri 

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

ミスパリ

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

エルセーヌ

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

エステティックTBC

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

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

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

ソシエ

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

ポーラ

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


いかがでしょう?

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

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

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

あとは、白黒メイン。

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

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

個人的な感覚ですが

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

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

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

大手脱毛サロン5社の公式サイトのカラー構成

脱毛大手5社/2018年8月
公式サイトの配色構成

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

ミュゼ

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

脱毛ラボ

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

シースリー

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

キレイモ

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

恋肌(こいはだ)

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


いかがでしょう。

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

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

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

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

 

色(webカラー)の取得方法

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

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

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

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

①画像からの取得法「基本中の基本」

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

ハーモニーアロマつくば

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

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

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

という流れです。

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

スポイト機能は、どの画像処理ソフトにもありますよ!

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

 

②プロ的な取得法「上級者向けかも」

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

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

もしくは、右クリックで、「ページのソースを表示」です。
※□行を折り返す←最上部にあるこちらにチェックを入れましょう。

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

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

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

カラーコード取得法

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

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

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

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

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

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

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

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

 

③最速の取得法「まずは、右クリック検証」

もっともスマートなやり方です!

まずは、この方法を試してみてください。

気になる部分を選択したら、右クリックで、「検証」です。

  • #d02f65
  • rgb(255,0,0)
  • hsl(0,100%,50%)

などのカラーコードの部分をコピー&ペーストです。

ミナミ
結局、スクショ(画面撮影)して、①画像から取得する場合もけっこうあります。
関連記事

2021最新版ぜひ、この記事を参考に、ホームページ作成に取り組んでみてください。まったくの〝WEB知識ゼロ〟のセラピスト・整体師・エステティシャンをはじめとする技術者の方が読んだとしても、わかりやすく、即戦力[…]

整体師、エステティシャンにおすめのホームページの作り方【速習編】

 

まとめ

いかがでしたか?

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

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

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

ミナミ
こだわるとキリがないので、ほどほどに…(^^ゞ
関連記事

エステや、整体、リラクゼーションサロンを開業するとき。できるだけ、早いうちに用意しておきたいものというと何を思い浮かべますか? 名刺≫ 名刺の作り方 ホームページ≫ ホームページの作り方 チラシ[…]

整体やエステサロンのロゴ作成法
関連記事

開業したい。セラピストなら誰もがそう思いますよね。私も一セラピストとして、他者の開業話ほど、なぜか心が踊り、かってにあれこれ思考し、期待を膨らませ、無性に応援したくなることは他にありません。セラピスト[…]

開業の成否はコンセプトで決まる
【web配色】エステサロンや整体院のホームページのカラーの決め方
今日もお疲れ様です!
>手技や解剖の独学・新メニュー開発のヒント『セラピスファイトYouTube』

手技や解剖の独学・新メニュー開発のヒント『セラピスファイトYouTube』

「学びたいけど、余裕がない…」そんな、セラピスト、整体師、エステティシャン等の技術者が、極限まで無料で学べる、良質な動画コンテンツの作成を目指しています!

CTR IMG