業種に合わせてホームページの色とデザインを決める考え方

色は中身を読む前の印象を決めている

ページを開いた瞬間、文章を読む前に全体の色が目に入ります。そこで「きちんとしていそう」「親しみやすそう」「高そう」といった印象が決まります。

一般に、色から受け取られやすい印象には次のような傾向があります。

• 青：信頼、清潔、落ち着き
• 緑：安心、自然、健康
• 赤・オレンジ：活気、親しみ、食べ物のおいしさ
• 黄：明るさ、気軽さ
• 黒・濃紺：落ち着き、高級感
• 白・生成り：清潔、余白のある印象

ただし、これは絶対のものではありません。同じ赤でも、鮮やかな赤とくすんだ赤では受ける印象が違います。色の名前より、明るさと鮮やかさの調整で印象は大きく変わります。

大事なのは、来てほしいお客様にどう思われたいかを先に決めることです。「信頼できそう」なのか「気軽に相談できそう」なのか。ここが決まれば、色の方向も決まります。

基本の3色を決める

使う色を絞ると、まとまって見えます。次の3つを決めてください。

• 基調の色（70%）：背景。白や生成りなど、薄い色
• 主となる色（25%）：会社の色。見出しや帯に使う
• 目立たせる色（5%）：問い合わせボタンなど、押してほしい場所

主となる色は、看板やロゴ、制服、名刺で使っている色に合わせるのが自然です。すでにお客様が見慣れている色があるなら、それを使ってください。ホームページだけ別の色にすると、同じ会社だと分かりにくくなります。

目立たせる色は、主となる色とは違う系統から選びます。青が主なら、オレンジや黄など。同系色にすると、ボタンが背景に埋もれて押されなくなります。ここだけは目立つことを優先してください。

色数を増やすほど、まとまりが失われます。3色に加えて、文字用の濃いグレー、罫線用の薄いグレーがあれば足ります。

読みやすさを犠牲にしない

見た目を優先して読みにくくなると、内容が伝わりません。次の点を確かめてください。

• 背景と文字の明るさに、十分な差があるか
• 薄いグレーの文字を、本文に使っていないか
• 写真の上に文字を載せるとき、読めているか
• スマホの明るい屋外でも読めるか
• 色だけで意味を伝えていないか（赤字だけで「必須」を示すなど）

特に多いのが、ブランドの色をそのまま文字に使って読みにくくなる例です。薄い背景に明るい色の文字を置くと、コントラストが足りません。その場合は、文字用に少し暗めの色を用意して使い分けます。装飾に使う色と、文字に使う色を分けて考えるということです。

色覚には個人差があります。赤と緑の区別がつきにくい方もいるため、「赤が必須項目」のように色だけで区別する作りは避け、文字や記号を添えてください。

業種ごとの傾向と、外し方

業種ごとに、よく使われる色の傾向があります。まずは基準として知っておくと判断しやすくなります。

• 医療・介護：青、緑、白。清潔さと安心感
• 建設・製造：青、グレー、濃い色。堅実さ
• 飲食：暖色、木の色。おいしさと温かみ
• 美容・サロン：淡い色、白、ベージュ。清潔さと落ち着き
• 学習塾・教育：明るい色。前向きな印象
• 士業：濃紺、グレー。落ち着きと信頼

傾向どおりにすると外しませんが、同業と似た見た目にもなります。そこで、あえて少しずらす方法もあります。たとえば士業で、濃紺を基調にしつつ差し色を明るくする。堅さを保ちながら、相談しやすさを出せます。

判断の基準は、誰に来てほしいかです。高齢の方が多いなら、文字を大きめに、色の差をはっきりと。若い層なら、余白を広く取った作りが合います。好みではなく、読む人に合わせて決めてください。

制作会社への伝え方

「かっこよく」「おしゃれに」だけでは伝わりません。次のように具体的に渡すと、手戻りが減ります。

• 参考になるページを3つほど挙げ、どこが良いと思ったかを書く
• 避けたい印象を伝える（固すぎる、子どもっぽい、など）
• ロゴや名刺、看板の画像を渡す
• 来てほしいお客様の年齢層と、相談の場面を伝える
• 使ってほしい写真があれば、先に見せる

参考ページは、同業でなくても構いません。「この余白の取り方が好き」「この写真の使い方が近い」といった伝え方で十分です。ただし、そっくりに作ってほしいという依頼は避けてください。

色の指定がある場合は、色の番号（ロゴのデータにある指定など）を渡すと正確です。印刷物と画面では見え方が違うため、画面でどう見えるかは実際の画面で確認してください。

まとめ

色とデザインの決め方を振り返ります。

• どう思われたいかを先に決めると、色の方向が決まる
• 基調・主となる色・目立たせる色の3色に絞る
• ボタンの色は、主となる色と違う系統にして埋もれさせない
• 背景と文字の明るさの差を確保し、色だけで意味を伝えない
• 参考ページと避けたい印象を、言葉にして制作会社へ渡す

まずは自社の看板や名刺を見て、そこで使っている色を書き出してみてください。それが、主となる色の第一候補です。