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

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

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

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

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

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

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

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

また特に、

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

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

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

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

でも、ご心配なく☆

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

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

2023最新版まったくの〝WEB知識ゼロ〟のセラピスト・整体師・エステティシャンをはじめとする技術者の方が読んだとしても、わかりやすく、即戦力となるような内容になっています。できるだけ、『現状はコレが[…]

 

2023年11月追記:けっきょくこの方法だけ知ってればOK


細かいことは後にして、まずはこの動画のやり方を試してみてください。

難しくないし、一度覚えたらずっと使えますよ(^^)
 

ホームページの色

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

赤色 ↓

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つでは、透明度まで指定できます!
プログラマカレッジ - 国内最大級の就活直結型 プログラミングスクール「プログラマカレッジ」 完全無料で、プログラマーへの就職をサポート。 紹介先3500社以上からあなたにあった企業を紹介。

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

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

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

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

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

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

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

ちなみに、

16進数→10進数

16進数→HSL

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

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

 

 カラーコード一覧サイト

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

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

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

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

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

他にも、色々あります。

たとえば、

こちらはシリーズです。

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

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

 

配色の参考にしたいサイトを探してみよう

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

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

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

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

当時、信頼性の高い大手などの美しいサイトで、

  1. くすんだピンク
  2. くすんだ薄い緑

の2色を使用しているサイトが印象的でした。

そのイメージを参考に以下を作りました。

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

2023年追記:今では、くすんだピンク×薄いグレーの2色使いが主流の印象です。反応率の結果かと思いますので、最新の大手サロンの配色構成に合わせておくのは無難といえます。

あとは、ときどき覗きにいくサイトがこちら。

サルワカ

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

 

良質サイトの探し方

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

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

たとえば

「地域名×エステ」

「地域名×整体」

「地域名×小顔」

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

などと検索します。

公式サイトの探し方

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

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

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

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

必ずスマホで確認!

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

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

 

旧:色(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%)

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

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

2023最新版まったくの〝WEB知識ゼロ〟のセラピスト・整体師・エステティシャンをはじめとする技術者の方が読んだとしても、わかりやすく、即戦力となるような内容になっています。できるだけ、『現状はコレが[…]

 

まとめ

いかがでしたか?

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

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

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

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

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

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

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

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

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

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

CTR IMG