ホームページの色の選び方
好きな色で作ったら、なんだか落ち着かない。文字が読みにくい。色は印象を大きく左右するぶん、迷いやすいところです。センスに頼らずに決められる、色の選び方の考え方をまとめました。
ホームページの色を決めるとき、「お店のイメージに合う色」「自分の好きな色」から考え始める人が多いと思います。それ自体は大切なことですが、色をたくさん使ったり、文字と背景の色が近すぎたりすると、せっかくの情報が読みにくくなってしまいます。
この記事では、色をベース・メイン・アクセントの3つの役割に分けて考える方法と、文字の読みやすさ、業種の印象、使いすぎないコツを紹介します。デザインの経験がなくても、順番に決めていけば、まとまりのある配色になります。
色は「3つの役割」に分けて考える
ホームページの色は、役割ごとに分けて考えると決めやすくなります。基本は次の3つです。
| 役割 | 使う場所 | 選び方 |
|---|---|---|
| ベースの色 | 背景、広い面 | 白、生成り、うすいグレーなど、目が疲れにくい色。いちばん広く使う |
| メインの色 | 見出し、帯、ロゴのまわり | お店の印象を決める色。ロゴや看板の色があれば、そこから選ぶ |
| アクセントの色 | 予約ボタン、電話のボタン、大事なお知らせ | メインの色と区別できる色。押してほしい場所にだけ、少しだけ使う |
使う量は、ベースがいちばん広く、メインがその次、アクセントはごく少しにします。アクセントの色をあちこちに使うと、どこが大事なのか分からなくなります。「この色が出てきたら、押せる場所」と覚えてもらえるくらい、使う場所を決めておくのがコツです。
これに、文字の色を加えます。文字は真っ黒より、少しやわらかい濃いグレーや、濃い紺・こげ茶にすると、白い背景でも目に優しくなります。
メインの色の決め方
すでにある色から選ぶ
いちばん自然なのは、すでにお店で使っている色から選ぶ方法です。ロゴ、看板、のれん、ショップカード、制服、内装など、お客さまの目に触れている色があれば、それをメインの色にします。お店で見た色とホームページの色がそろうと、「あのお店だ」とすぐに分かってもらえます。ロゴがまだない場合は、ロゴがないときのホームページも参考にしてください。
業種の印象を手がかりにする
手がかりになる色がない場合は、お客さまに持ってほしい印象から考えます。色の受け取り方には個人差がありますが、一般に次のような印象と結びつけられることがあります。
- 青・紺：落ち着き、誠実さ、清潔感（士業、医療、相談の仕事など）
- 緑：自然、やすらぎ、健康（整体、園芸、自然素材の商品など）
- 茶・ベージュ：ぬくもり、手づくり感（カフェ、パン屋、木の家づくりなど）
- オレンジ・黄：元気、親しみやすさ（子ども向けの教室、飲食店など）
- くすんだピンク・グレージュ：やわらかさ、上品さ（美容室、雑貨店など）
これは決まりではなく、あくまで手がかりです。同じ業種のお店と同じ色にする必要もありません。「どんなお客さまに、どう感じてほしいか」を一言で書き出してから選ぶと、ぶれにくくなります。たとえば「仕事帰りの人に、ほっとしてもらいたい」なら、明るすぎない落ち着いた色が候補になります。
文字の読みやすさは「明るさの差」で決まる
色選びでいちばん大切なのは、文字が読みやすいことです。読みやすさは、色そのものより、文字と背景の明るさの差（コントラスト）で決まります。
- 読みにくい例：うすい黄色の背景に白い文字、明るいグレーの背景にグレーの文字、赤い背景に緑の文字
- 読みやすい例：白い背景に濃いグレーの文字、濃い紺の背景に白い文字
ウェブの読みやすさについての国際的な指針（WCAG）では、ふつうの大きさの文字は、背景との明るさの差を一定以上にすることが目安とされています。数値で確かめられる無料の道具もあるので、気になるときは使ってみましょう。
色の見え方は人によって違い、赤と緑、青と紫のように、区別しにくい組み合わせがある人もいます。そのため、色だけで意味を伝えないことも大切です。たとえば営業カレンダーで「休み」を赤で示すなら、「休」の文字も添えます。リンクは色だけでなく下線もつけておくと、誰にでも分かりやすくなります。
ポイント
色を決めたら、スマホの画面を少し暗くして、屋外で見てみましょう。明るい場所や画面の設定によって、パソコンで見たときより色の差が小さく見えることがあります。そこで無理なく読めるかどうかが、ひとつの目安になります。
色を使いすぎないためのコツ
色の数が増えるほど、まとまりがなくなり、大事な情報が目立たなくなります。次の点を意識すると、すっきりした配色になります。
- メインとアクセントは、それぞれ1色に決める
- 色を足したくなったら、新しい色ではなく、メインの色の濃い・うすいで変化をつける
- 見出しの色は、ページごとに変えず、サイト全体でそろえる
- 写真が多いページは、背景や飾りの色を控えめにして、写真を主役にする
- 赤は「注意」「売り切れ」など、強く知らせたいときだけに使う
決めた色は、色の番号（「#2a5b84」のような6けたの記号）で書き残しておきましょう。チラシや名刺、SNSの画像を作るときにも同じ色を使えるので、お店の印象がそろいます。
配色を決める手順
ここまでの考え方を、実際に決める順番にまとめると次のようになります。
- お店で使っている色（ロゴ・看板・内装など）を書き出す
- 「どんなお客さまに、どう感じてほしいか」を一言で書く
- 1と2をもとに、メインの色を1色決める
- ベースの色（背景）と、文字の色を決める
- メインの色と区別しやすいアクセントの色を1色決める
- 見出し・本文・ボタンを並べた見本を作り、スマホで読みやすさを確かめる
- トップの写真と並べて、写真の色とけんかしていないかを見る
たとえば、木の家具を使った架空のカフェ「みどりの木」なら、看板のこげ茶をメインに、生成りをベースに、文字は濃い茶色にします。アクセントには、メニューの写真に合うくすんだ緑を選び、「ご予約」のボタンだけに使う、という具合です。迷ったときは、色を足すより引くほうを選ぶと、たいていうまくまとまります。
よくある質問
黒い背景のホームページは、おしゃれでも読みにくいですか？
黒やとても濃い色の背景でも、文字を白や明るい色にして明るさの差を十分にとれば読めます。ただ、長い文章を読ませるページでは目が疲れやすいと感じる人もいます。写真を見せるページは濃い背景、文章を読ませるページは明るい背景のように、使い分けるのも一つの方法です。
季節ごとに色を変えてもいいですか？
トップの写真やお知らせの飾りを季節に合わせるのはよい工夫です。ただ、メインの色やボタンの色までころころ変えると、お店の印象がぶれ、ボタンも見つけにくくなります。変えるのは一部にとどめましょう。
まとめ
ホームページの色は、ベース・メイン・アクセントの3つの役割に分けて考えます。ベースは目が疲れにくい色を広く、メインはお店の看板やロゴの色から、アクセントは押してほしいボタンにだけ少し使います。いちばん大切なのは、文字と背景の明るさの差を十分にとって読みやすくすること。色の数をしぼり、決めた色は番号で残しておきましょう。色づかいの実例は、制作サンプルでも業種ごとに見比べられます。
Avrencalでは、お店の看板や写真の雰囲気に合わせて、読みやすさを確かめながら色を決めています。迷ったときは、無料のお見積もりからお気軽にご相談ください。