今回は、ホームページ作成の実践編です。
webサイトの配色（カラー）の決め方について、お伝えします。
特に、エステサロンや、整体院、リラクゼーションなどのサロン系のホームぺージをデザインする時に、お役立ていただける内容です。
ホームページは、多くのお客様にお店のイメージ（カラー）を伝えるためのものです。
また特に、
エステや整体などのサロン系のホームぺージでは、女性のお客様を意識した配色（色彩）がポイントになります。
多くのサロンでは、お客様の60%以上が女性だからです。
当記事では、その辺りのポイントも解説しますね。
「ホームページのカラー選び」とは、まさに「サロンの色づくり」です。
でも、ご心配なく☆
簡単で、楽しい部分ですよ！
2024最新版まったくの〝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%)
といったように、記号（コード）で表します。
コンピューターは、この記号を読み取って色を表現しているわけです。
コードの記述法は、上記３つ（+おまけ２つ）ありますが。
- 16進数=合計6桁
- 10進数=rgb（RGB）をカンマで3分割
まずは、この2つを知っておけば大丈夫です。
サイトの色指定は CSSで行います。 色指定には「 16進数 」や「 10進数 」、「 カラーネーム 」など、…
はい、難しい話はここまでです(^_-)-☆
いきなり、驚かせてしまいすみません。
プログラミングの勉強が始まるのかと思いますね(^^ゞ
でも、一度、知りさえすれば、もう大丈夫です。
あとは、コピー&ペースト（張り付け）で、自由自在にweb上での配色を楽しめますよ。
私がみたところ、16進数を用いてる記述が多いので、この先は、全て16進数で話しを進めていきますね。
ちなみに、
16進数→10進数
16進数→HSL
のように変換が必要なときは、下記の無料ツールが使えますよ。
カラーコード一覧サイト
カラーコードは、無料で取得できます。
私が気に入っているサイトをご紹介いたします。
この２つはよく使います。
もちろん、すべて無料です。
ブックマークや、お気に入りに登録しておくと便利ですよ。
他にも、色々あります。
たとえば、
こちらはシリーズです。
ただ、なぜか個人的にはあまり使っていません。
一応、お気に入りに残してはいます。
配色の参考にしたいサイトを探してみよう
エステサロンや、整体院、リラクゼーションサロンのホームぺージの配色を決める上で、女性意識は欠かせません。
私自身、男性ということもあり。
どうしても、カッコいい感じの色、青や緑系の配色に引かれていきます。
そこで、配色の参考にしたいサイトを探しました。
当時、信頼性の高い大手などの美しいサイトで、
- くすんだピンク
- くすんだ薄い緑
の2色を使用しているサイトが印象的でした。
そのイメージを参考に以下を作りました。
あとは、ときどき覗きにいくサイトがこちら。
囲み枠などのコードもサルワカさんから取得することもあります。
良質サイトの探し方
ちなみに、最も効率的な探し方をお伝えしておきます。
気になる地域名×職種、で検索します。
たとえば
「地域名×エステ」
「地域名×整体」
「地域名×小顔」
「地域名×リラクゼーション」
などと検索します。
あとは、下へ下へ見ていくだけです。
コツは、画像のように『グーグルマップ』の一覧から見ていくことです。
普通の検索画面だと、ブログや、ホットペッパーなどの集合サイトが混ざってしまい、非効率でした。
自社の公式ホームページを検索する場合は、このやり方がオススメです☆
必ずスマホで確認！
今は、検索者の70%はスマホです。しかもパソコンで検索してくる残りの30%には、業者も多く含まれます。
そのため、スマホで見た時に、美しいデザインでなければ意味がありません。
旧：色（webカラー）の取得方法
では、次の段階に入りましょう。
合わせてみたいカラーが見つかったら、その色をwebで表すためには、カラーコードを知る必要があります。
始めに見た、16進数、10進数などですね。
それでは、具体的な取得法を2つお伝えします。
①画像からの取得法「基本中の基本」
以下は、私の運営するハーモニーアロマのロゴです。
そして、ハーモニーアロマのサイトは、このロゴ画像から取得して配色しました。
良く見ると、２色使いなのです。
- 画像の上で右クリック
- 名前を付けて画像を保存
- GIMPという無料の画像処理ソフトで開く
あらかじめGIMPをダウンロードしておきましょう。 - スポイトでカラーコードを取得
という流れです。
もちろん、イラストレーターやフォトショップなど、GIMP（ギンプ）以外の画像処理ソフトでも構いません。
スポイト機能は、どの画像処理ソフトにもありますよ！
②プロ的な取得法「上級者向けかも」
こちらの方がスマートかもしれません。
気になる色のあるぺージで、[F12]を押してみてください。
もしくは、右クリックで、「ページのソースを表示」です。
※□行を折り返す←最上部にあるこちらにチェックを入れましょう。
では、ハーモニーアロマを例に行ってみます。
ハーモニーアロマのトップ画面で、[F12]を押します。
すると、以下のような英数字の羅列が表れます。
上のコード、#798D48（明るい緑）
下のコード、#5D7648（暗い緑）
と、いうように、カラーコードを取得できるのです。
本来は、気になる色で書かれた、文字のすぐ近くにカラーコードが書いてあって、それを取得できたらわかりやすいのですが。
このように、どこにあるかわからない場合も多いです。
ですので、まずは、気になる色があるぺージを開いてみて。
#~で書かれたコードや、RGB（~,~,~）と書かれたところを探してみてください。
そして、その文字を取得して、ワードプレスや画像処理ソフトに入力して確認しましょう。
③最速の取得法「まずは、右クリック検証」
もっともスマートなやり方です！
まずは、この方法を試してみてください。
気になる部分を選択したら、右クリックで、「検証」です。
- #d02f65
- rgb(255,0,0)
- hsl(0,100%,50%)
などのカラーコードの部分をコピー＆ペーストです。
2024最新版まったくの〝WEB知識ゼロ〟のセラピスト・整体師・エステティシャンをはじめとする技術者の方が読んだとしても、わかりやすく、即戦力となるような内容になっています。できるだけ、『現状はコレが[…]
まとめ
いかがでしたか？
少し、専門的に感じたかもしれません(__)
でも、一度知ってしまえば、むしろ面白い部分です。
ぜひ、実践してみてくださいね☆
エステや、整体、リラクゼーションサロンを開業するとき。できるだけ、早いうちに用意しておきたいものというと何を思い浮かべますか？ 名刺≫ 名刺の作り方 ホームページ≫ ホームページの作り方 チラシ[…]
開業したい。セラピストなら誰もがそう思いますよね。私も一セラピストとして、他者の開業話ほど、なぜか心が踊り、かってにあれこれ思考し、期待を膨らませ、無性に応援したくなることは他にありません。セラピスト[…]