今回は、ホームページ作成の実践編です。
webサイトの配色（カラー）の決め方について、お伝えします。
特に、エステサロンや、整体院、リラクゼーションなどのサロン系のホームぺージをデザインする時に、お役立ていただける内容です。
ホームページは、多くのお客様にお店のイメージ（カラー）を伝えるためのものです。
また特に、
エステや整体などのサロン系のホームぺージでは、女性のお客様を意識した配色（色彩）がポイントになります。
多くのサロンでは、お客様の60%以上が女性だからです。
当記事では、その辺りのポイントも解説しますね。
「ホームページのカラー選び」とは、まさに「サロンの色づくり」です。
でも、ご心配なく☆
簡単で、楽しい部分ですよ！
2023最新版まったくの〝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%)
といったように、記号（コード）で表します。
コンピューターは、この記号を読み取って色を表現しているわけです。
コードの記述法は、上記３つ（+おまけ２つ）ありますが。
- 16進数=合計6桁
- 10進数=rgb（RGB）をカンマで3分割
まずは、この2つを知っておけば大丈夫です。
サイトの色指定は CSSで行います。 色指定には「 16進数 」や「 10進数 」、「 カラーネーム 」など、…
はい、難しい話はここまでです(^_-)-☆
いきなり、驚かせてしまいすみません。
プログラミングの勉強が始まるのかと思いますね(^^ゞ
でも、一度、知りさえすれば、もう大丈夫です。
あとは、コピー&ペースト（張り付け）で、自由自在にweb上での配色を楽しめますよ。
私がみたところ、16進数を用いてる記述が多いので、この先は、全て16進数で話しを進めていきますね。
ちなみに、
16進数→10進数
16進数→HSL
のように変換が必要なときは、下記の無料ツールが使えますよ。
カラーコード一覧サイト
カラーコードは、無料で取得できます。
私が気に入っているサイトをご紹介いたします。
この２つはよく使います。
もちろん、すべて無料です。
ブックマークや、お気に入りに登録しておくと便利ですよ。
他にも、色々あります。
たとえば、
こちらはシリーズです。
ただ、なぜか個人的にはあまり使っていません。
一応、お気に入りに残してはいます。
配色の参考にしたいサイト
エステサロンや、整体院、リラクゼーションサロンのホームぺージの配色を決める上で、女性意識は欠かせません。
私自身、男性ということもあり。
どうしても、カッコいい感じの色、青や緑系の配色に引かれていきます。
そこで、配色の参考にしたいサイトを探しました。
まずは、こちら。
そして、こちら。
この2つのサイトには、共通点がありました。
- くすんだピンク
- くすんだエメラルドグリーン
の２色を使用していたことです。
それを参考に以下のサイトを作りました。
あとは、配色に悩んだ時によく覗きにいくサイトがこちら。
囲み枠などのコードもサルワカさんから取得することもあります。
私のイメージは、女性ユーザー60~80%位のサイトです。
ですので、ただ美しいだけでなく、
男性にも抵抗のない配色を目指しています。
エステサロンなど、ほぼ、女性100%狙いのサイトなら以下のようなサイトも参考になるのではないでしょうか？
こちらは、紫系のカラーを使用したサイトとしては、抜群に美しいと思います。
コピペで使えるオシャレな色の組み合わせを紹介します。それぞれの配色の実際の使用例まで用意しました。…
インスピレーションを受けたサイト
以下は、配色とは別ですが。
以前、サイト作成にあたり参考になるサイトを探しました。
必ずスマホで確認！
今は、検索者の70%はスマホです。しかもパソコンで検索してくる残りの30%には、業者も多く含まれます。
そのため、スマホで見た時に、美しいデザインでなければ意味がありません。
全国の、エステ、整体、リラクゼーションサロン、100サイト超の中で。
特に、インスピレーションを受けた４つのサイトをご紹介しておきます。
- あかり整体（金沢の整体院）
- スローライフ（恵比寿のエステサロン）
- MUU（生駒のリラクゼーション）
- Healing Spa 波の音（生駒のエステサロン）
こちらは、金沢市の整体院です。
ちなみに、ビジュアルだけでなく、ブログの内容が凄いです。そのため、ブログのpv数（見られた回数）がとても多いです。
こちらは、恵比寿のエステサロンです。
エメラルドグリーンが素敵です。美しい画像に躍動感と臨場感があります。多くの女性から支持される要素が詰まっているように思います。
こちらは、生駒市のリラクゼーションサロンです。
プロのデザインだと思います。WEBサイトだけでなく、経営センスを感じました。まだまだ伸びるのではないでしょうか。
生駒市のエステサロンです。
洗練された完成度の高さに驚きました。ここまで美しいホームページは少ないでしょう。黒系のサイトデザインの参考になるのではないでしょうか。
良質サイトの探し方
ちなみに、最も効率的な探し方をお伝えしておきます。
気になる地域名×職種、で検索します。
たとえば
「地域名×エステ」
「地域名×整体」
「地域名×小顔」
「地域名×リラクゼーション」
などと検索します。
あとは、下へ下へ見ていくだけです。
コツは、画像のように『グーグルマップ』の一覧から見ていくことです。
普通の検索画面だと、ブログや、ホットペッパーなどの集合サイトが混ざってしまい、非効率でした。
自社の公式ホームページを検索する場合は、このやり方がオススメです☆
大手サロンを見てみよう
女性目線のサイト（ホームページ）作りを学ぶ上で、最も参考になるのはどこでしょう？
やはり、エステと、脱毛ではないでしょうか。
そこで、日本における、エステの大手７社と、脱毛の大手５社の公式ホームページを比較してみました。
とくに、今回は、配色/カラーという観点から見ていきましょう！
大手エステサロン７社の公式サイトのカラー構成
エステ大手７社/2018年8月
公式サイトの配色構成
| 第1 | 第2 | 第3 | |
| タカノ | 薄紫 | 金 | 水色 |
| ミスパ | 金 | ピンク | 青 |
| エルセ | 金 | ピンク | 水色 |
| TBC | 紺 | 水色 | 金 |
| スリム | 赤 | 金 | ピンク |
| ソシエ | 白 | 黒 | 金 |
| ポーラ | 白 | 黒 | 青 |
公式トップ画面は、ミランダカー（ハリウッド女優）を採用した、薄紫色、水色系の配色です。そこから、全国の各店舗のぺージにいくと、金（ゴールド）を主体とした、配色となっています。
金色と、ピンクをメインに、水色や紺（コン）色などの青系のカラーで構成されています。ミスパリの、ロゴが紺色なので、青系の指し色が引き立ちます。
金を主体に、ピンクと水色が柔らかく溶け込んでいます。ビフォーアフターの実測値や、価格などのポイントとなる数値にピンクを用いることが多いようです。
紺と水色を中心に、ゴールドを用いた落ち着いた配色です。公式サイトのトップ画に女優のローラを用いた朱色（赤系）の色味が合わせてあり、とてもきれいです。
ロゴに合わせた、ワインレッドのような濃い赤がメインの構成です。第2カラーとして、薄いゴールド系及びベージュ、そして、ピンクを合わせてあります。
白を基調としたデザインです。黒をポイントで聞かせつつ、薄いグレーを広範に使用。ボタンカラーなどに、金（ゴールド）を用いた落ち着いた配色です。
白と黒がメインの洗練されたデザインです。青色をポイントカラーとして用いることで、一層、かっこ可愛い印象を受けます。
いかがでしょう？
まず、私は、ピンクが主体のサイトがないことが以外でした。
ピンクは、どのサイトでも必ず配色されていますが（画像なども含めて）、想像では、もっとピンクピンクした、ガーリーな印象のサイト構成が多いと思っていたので。
ゴールド系がメインのサイトがほとんどですね。
あとは、白黒メイン。
ガーリーというより、ラグジュアリー感を演出していることがわかります。
白黒メインの、ソシエや、ポーラなどは、そのまま、男性ターゲットのサイトにしても…と思って見返しましたが、やはり、女性感を感じますね。
個人的な感覚ですが
ゴールド系のサイトの方は、より、若年層をターゲットにしていて。
白黒系の方は、少し大人の女性をメインターゲットに、しているようにも感じます。
※エステの大手は、季節や、イベントなどによって頻繁にサイト（特に画像）を変えるため、皆さまがご覧の現在は、また違うかもしれません。
大手脱毛サロン５社の公式サイトのカラー構成
脱毛大手５社/2018年8月
公式サイトの配色構成
| 第1 | 第2 | 第3 | |
| ミュゼ | 水色 | 金 | ピンク |
| 脱毛ラ | ピンク | 白 | 水色 |
| C３ | ピンク | 白 | グレイ |
| キレイ | 水色 | ピンク | 白 |
| 恋肌 | ピンク | 緑 | 金 |
水色と、ゴールド（金）がメインの配色構成です。ピンクをポイントカラーとして使用することで、可愛い雰囲気になっています。実は、白色もメインカラーかもしれません。
ロゴに合わせた、ピンクと白をメインにした配色構成です。次いで、水色を使用しています。ロゴベースでサイトの構成を考えたのかもしれません。
こちらもロゴに合わせたサイト構成です。驚くことに、ピンクと白のほぼ2色使いです。あえて、第3カラーとして、グレイ、シルバー系をあげられる位です。
こちらも、ロゴの3色を配置した色彩構成です。インパクトのあるハッキリとした配色を採用し、ビビットな切り替え構造が特徴的な動的なサイトです。
濃いピンクと、薄いピンクが主体の色彩構成です。その中に、エメラルドグリーンと、水色をポイントカラーとして採用しています。色味が多くにぎやかな印象です。
いかがでしょう。
脱毛大手では、ピンクが定番カラーのようです。
ピンク×白×水色といった、ガーリーな印象を受けます。
また、ロゴの色彩構成も同様です。
やはり、エステ大手と比較すると、全体的に、若年層の女性を意識したサイト構成といえるでしょう。
色（webカラー）の取得方法
では、次の段階に入りましょう。
合わせてみたいカラーが見つかったら、その色をwebで表すためには、カラーコードを知る必要があります。
始めに見た、16進数、10進数などですね。
それでは、具体的な取得法を2つお伝えします。
①画像からの取得法「基本中の基本」
以下は、私の運営するハーモニーアロマのロゴです。
そして、ハーモニーアロマのサイトは、このロゴ画像から取得して配色しました。
良く見ると、２色使いなのです。
- 画像の上で右クリック
- 名前を付けて画像を保存
- GIMPという無料の画像処理ソフトで開く
あらかじめGIMPをダウンロードしておきましょう。 - スポイトでカラーコードを取得
という流れです。
もちろん、イラストレーターやフォトショップなど、GIMP（ギンプ）以外の画像処理ソフトでも構いません。
スポイト機能は、どの画像処理ソフトにもありますよ！
②プロ的な取得法「上級者向けかも」
こちらの方がスマートかもしれません。
気になる色のあるぺージで、[F12]を押してみてください。
もしくは、右クリックで、「ページのソースを表示」です。
※□行を折り返す←最上部にあるこちらにチェックを入れましょう。
では、ハーモニーアロマを例に行ってみます。
ハーモニーアロマのトップ画面で、[F12]を押します。
すると、以下のような英数字の羅列が表れます。
上のコード、#798D48（明るい緑）
下のコード、#5D7648（暗い緑）
と、いうように、カラーコードを取得できるのです。
本来は、気になる色で書かれた、文字のすぐ近くにカラーコードが書いてあって、それを取得できたらわかりやすいのですが。
このように、どこにあるかわからない場合も多いです。
ですので、まずは、気になる色があるぺージを開いてみて。
#~で書かれたコードや、RGB（~,~,~）と書かれたところを探してみてください。
そして、その文字を取得して、ワードプレスや画像処理ソフトに入力して確認しましょう。
③最速の取得法「まずは、右クリック検証」
もっともスマートなやり方です！
まずは、この方法を試してみてください。
気になる部分を選択したら、右クリックで、「検証」です。
- #d02f65
- rgb(255,0,0)
- hsl(0,100%,50%)
などのカラーコードの部分をコピー＆ペーストです。
2023最新版まったくの〝WEB知識ゼロ〟のセラピスト・整体師・エステティシャンをはじめとする技術者の方が読んだとしても、わかりやすく、即戦力となるような内容になっています。できるだけ、『現状はコレが[…]
まとめ
いかがでしたか？
少し、専門的に感じたかもしれません(__)
でも、一度知ってしまえば、むしろ面白い部分です。
ぜひ、実践してみてくださいね☆
エステや、整体、リラクゼーションサロンを開業するとき。できるだけ、早いうちに用意しておきたいものというと何を思い浮かべますか？ 名刺≫ 名刺の作り方 ホームページ≫ ホームページの作り方 チラシ[…]
開業したい。セラピストなら誰もがそう思いますよね。私も一セラピストとして、他者の開業話ほど、なぜか心が踊り、かってにあれこれ思考し、期待を膨らませ、無性に応援したくなることは他にありません。セラピスト[…]