第1回：エステ・サロンなどの女性向けサービスの配色

業種別ホームページカラーガイド（全12回）
第1回：エステ・サロンなどの女性向けサービスの配色
執筆：坂本 邦夫（フォルトゥナ）
このコラムでは、業種ごとに「合う色と合わない色」「注意すべきこと」をまとめています。
毎回、異なる業種を取り上げて解説しますが、それらの業種でよく使われる色やたびたび見られる失敗があり、それには
きちんとした理由があります。それに加え、ホームページの色は、看板や紙のパンフレットと同じ色の場合であっても、画
面の構成や使い方のポイントも異なります。
第1回目はエステ・サロン・美容室などの主に女性向けのホームページの配色です。
エステ・サロンなどでよく使われている色
女性の美に関係するホームページでよく使われている色は、主に3つに分けられます。
1. ピンクを中心とした赤系の色
2. 木目調の茶色・ゴールド・暗いグレー
3. ピンク以外のパステルカラー
エステ・サロンなどで多く見られる色
薄いピンクからショッキングピンクまで様々なピンクがありますが、鮮やかなピンク（赤）は、ロゴやボタンのみのように画
面の一部で使われることが多いです。
次に木目やゴールドなどの茶系の色と暗いグレーのやや暗めの色のグループです。これらの色は自然の柔らかいイメー
ジや高級感を出すために用いられています。茶色は暗すぎないもの、暗いグレーは「真っ黒」ではなく、柔らかさを出すた
めに、少し明るめの黒がよく使われます。ただし、いわゆるグレーは冷たい感じが出るため、ほとんど使われません。
木目の茶色が中心のページでは、ピンクやパステル系の色は小さく使われる程度で、茶色系だけでページの配色がま
とめられることがほとんどです。
そしてパステルカラーは緑・青緑・青が多く使われ、オレンジや黄色は少なめです。オレンジ・黄色は明るく楽しいイメー
ジになりますが、サロンでは「清潔」なイメージを出したいからでしょう。
これらの色のうち、どれか1色（おまけとしてもう1色）を選んで使うようにします。1色の決め方については、「自分のホー
ムページに合う色の選び方 第1回：色でお店・会社のイメージを伝えよう」も参考にしてください。
またここで上位に挙げた色だけを使えばよいということではありません。例えば「海をコンセプトにしたお店」のような明
確なイメージがあるお店なのであれば、当然青を使いましょう。
色の使い方と配色のポイント
ピンクとパステルカラー
パステルカラーなどの明るい薄い色を使う場合、画面全体を覆う大きな背景色として使わないのが主流です。
ヘッダ（ロゴやナビゲーションが入る画面最上部のブロック）とその下で異なる色になった場合、視線が内容よりも色自
体に向かい、写真の印象も薄れてしまいます。
色のイメージに意識が向かい、文章が頭に入りにくくなる例
また大きな背景色を使っていても、スマートフォンではイメージが変わることがあります。図のように青緑とピンクを配置
したホームページは、スマートフォンの画面では、ピンクが大きくなり、青緑は小さくなってしまうこともあります。
同じホームページをスマートフォンで表示した例
パステルカラーの薄い色のロゴの場合、文字として読まれにくいということにも注意が必要です。女性向けのホームペー
ジではイメージを重視し、淡く読みにくいロゴも非常に多く見られるのですが、実店舗の大きな看板と異なり、小さな画
面でも読むことができ、名前をできるだけ早く覚えてもらえることがホームページでは重要です。
どうしても薄い色のロゴを使う場合には、きちんと読める色で店舗名を日本語で並記しましょう。また薄い色のロゴの場
合には、背景色を入れるよりも、白い背景の方が店舗名を目立たせることができます。
日本語を添えたロゴ。店舗名は必ず読めるようにする
また文字が小さすぎるページも多く見られます。文字サイズについては、「Jimdoで魅せる日本語Webデザイン
第1回：まずはここから！フォントサイズを設定しよう」が参考になります。本文の文字サイズはこちらの記事では16と書
かれていますが、もっと小さくしたい人も多いでしょうが、その場合でも14までとします。それ以下では文章が読まれる確
率が下がっていきます。
木目調・ゴールド・暗いグレーの色
木目調の茶色を使うのであれば、暗すぎる茶色を大きく背景に使うのは避けるようにします。暗すぎる色の大きなかたま
りは、硬いイメージで近寄りがたく見えてしまいます。写真を大きく使うのであれば、写っている木の色に近い色を使うよ
うにします。
高級なイメージを強く出したい場合には、木目の茶色に加え、それ以外の部分にもゴールドや暗いグレーを使うようにし
ます。その場合にも全体を覆うような使い方は避けて、小さく数多く使う方が配色はまとまります。
少量のゴールドを追加した例。ヘッダの背景のようなかたまりでは使わない方がよい。
写真を活かすことが最優先に
写真を大きく。使う色数は増やさない
木目の茶色やグレーなどの暗い色を使う場合を除いて、できるだけ明るめの色で色数を少なくするのが配色のポイント
です。様々な色を使ったカラフルな配色では、楽しそうなイメージが前面に出てしまい、「美」「健康」のイメージがぼけて
しまいます。
ホームページでは紙のパンフレットなどに比べ、色の分量は全体的に少なくなり、白い部分が多くなりますが、その方が
内容は読まれやすくなります。紙とホームページは別のものと考え、無理に同じものにしようとせず、大事な1色のイメー
ジが揃っていればよいと割り切って考えましょう。もし、その大事な1色以外の色を使いたいのであれば、写真の中で使う
ようにします。
水色のロゴに加えて、ピンクを使いたい場合の例
図は水色のロゴにピンクを使いたいという場合の例です。写真のイメージが正しいものであれば、2つの色が喧嘩するこ
とはありません。使いたい色はできるだけ写真に入れてしまうのが、配色がおかしくならないコツです。
色を使うのではなく、写真で伝えることを優先する
女性向けで、なおかつ「物ではなくサービスが提供されるホームページ」では、写真で伝えるということが非常に重要で
す。色を使って何かをアピールするよりは、写真でお店を利用するイメージや利用後にどうなるかが想像できるよい写真
を使うことを優先します。そのためにも写真はできるだけプロに撮影してもらうことをおすすめします。
まとめ
1. ピンク系、ゴールド・木目の茶色・暗いグレー、ピンク以外のパステルカラーが主流
2. 画面全体を覆うような背景色はなるべく使わない
3. 店舗名が読めないような背景色は、名前を覚えられにくくなる
4. 紙のパンフレットやチラシとホームページのデザインは別のもの。全部を色で埋めてはいけない
5. 写真を活かすために、大事な1色プラス写真の色を基本で考える
坂本 邦夫（さかもと・くにお）
カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/
1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。以後、W
eb制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色
彩環境の向上を使命として活動。日本色彩学会正会員。
主な著書に『ウェブ配色 決める! チカラ - 問題を解決する0からスタート
ホームページ配色入門』（ワークスコーポレーション）、『ウェブ配色 コーディネートカタログ』（技術評論社）など。
Copyright 2017 はじめてＷＥＢ All Rights Reserved.
http://hajimeteweb.jp/