ホームページの色と書体を、どう決めるか

1. 色の話になった途端、会議が終わらなくなる

中小企業の経営者の方とお話していて、こんな言葉をよく聞きます。

「ホームページの色を決めてくださいと言われまして。若いのに聞いたら青がいいと言うし、専務は緑だと言うし、私は正直どちらでも構わないんです。でも決まらないと先に進まないでしょう。これ、どうやって決めるものなんですか」

色と書体の話は、制作の工程の中でいちばん長引きます。理由ははっきりしていて、全員が意見を言える題材だからです。サーバーの構成やSEOの話に口を挟む社員はいませんが、色なら誰でも「なんとなく好きではない」と言えてしまいます。そして、好き嫌いには正解がありません。正解がない議論は、終わりません。

止まっている会社は、決め方を決めていない

私が現場で見てきた限り、色と書体で止まっている会社は、決め方を決めないまま決めようとしています。順番が逆になっている会社が、本当に多いです。先に決めるべきなのは色そのものではなく、誰が、何を基準に、いくつの案から決めるのかという手続きのほうです。

手続きが決まっていれば、色は30分で決まります。決まっていなければ、3ヶ月経っても決まりません。私たちが実際に見てきた差は、センスの差ではなく、この手続きの有無です。

この記事でお伝えすること

この記事では、色と書体を決めるための5つの基準と、社内で決着させるための進め方を書きます。デザインの善し悪しを語る話ではなく、決める作業を短く終わらせるための段取りの話だと思って読んでください。

なお、公開後に「そもそも何を載せるか」で止まる会社も同じくらい多いです。そちらは ホームページの原稿を、経営者が書かずに済ませる方法 にまとめてあります。

2. まず、色を「選ぶ」のをやめる

いちばん最初にお伝えしたいのは、色は選ぶものではなく、拾ってくるものだということです。

ゼロから「貴社らしい色は何色でしょうか」と考え始めると、議論が抽象論になります。「信頼感」「誠実さ」「先進性」といった言葉が飛び交って、その言葉と色の対応で揉める。ここに入ると、まず抜け出せません。

すでに世の中に出ている色がある

貴社には、すでに世の中に出ている色があります。

• ロゴ（いちばん優先度が高い）
• 看板・のぼり・店舗の外観
• 名刺・封筒・請求書の書式
• 社用車のラッピング
• 作業着・ユニフォーム・ヘルメット
• パンフレット・チラシ・カタログ
• 展示会のブースやパネル

これらの色は、すでにお客様が見ています。ホームページだけ別の色にすると、同じ会社だと分かりにくくなります。名刺は緑なのにサイトは青、という状態は、お客様の頭の中で会社の像がつながりません。

拾ってくると、議論が短くなる

そして実務上いちばん効くのは、拾ってきた色には反対しにくいという点です。「私は青がいい」に対しては誰でも反論できますが、「看板が緑なので緑にします」に対しては反論の材料がありません。これは論破のテクニックではなく、判断の根拠を好みの外側に置くということです。

ロゴが無い、看板も無い、名刺は白黒、という会社もあります。その場合は次のセクション以降の基準で決めていきますが、まずは手元にあるものを机に並べてみてください。並べた瞬間に決まることが、実際にあります。

3. 業種の慣習より、読みやすさを優先する

「建設業は青、医療は水色、飲食は赤や茶」といった業種ごとの定番があります。これは無視しなくてよいのですが、優先順位としては読みやすさのほうが上です。

慣習に合わせても、差はほとんど出ない

業種の定番色に合わせると、「その業種らしく見える」効果はあります。ただ、同時に同業他社と見分けがつかなくなるという副作用もあります。地域の建設会社のサイトが全部同じ青だと、お客様は違いを色では判別できません。

私の実感としては、業種の慣習に合わせたことで問い合わせが増えた例は、ほとんど見たことがありません。逆に、読みにくい配色で離脱していた例は何度も見ています。ですから、慣習は「大きく外さないための参考」くらいの重みで扱えば十分です。

読みにくい配色は、実在します

具体的に、避けたほうがよい組み合わせがあります。

• 薄いグレーの文字を白い背景に置く。おしゃれに見えますが、明るい屋外のスマートフォンでは読めません
• 濃い背景に濃い文字。紺色の背景に黒い文字、といった組み合わせです
• 彩度の高い色どうしを隣に置く。赤の上に青の文字などは、目がちらつきます
• 写真の上に、直接文字を置く。写真の明るい部分で文字が消えます
• リンクの色を本文と同じにする。どこが押せるのか分からなくなります

とくに1つ目は、制作会社が作ったサイトでもよく見ます。パソコンの画面で、室内で、若い目で見ると問題なく読めるからです。貴社のお客様の年齢と、見る場所を想像してください。50代・60代の方が、日中の屋外でスマートフォンを見る商売なら、コントラストは強めに振るべきです。

スマートフォンで人が離れる理由は他にもあります。スマートフォンで見たときに、人が離れる7つのこと にまとめてありますので、あわせてご確認ください。

迷ったら、文字は黒に近い色

本文の文字色は、真っ黒（#000000）よりわずかに柔らかい濃いグレー（#222222 前後）が読みやすいとされています。細かい話ですが、本文の色だけは冒険しないというのが実務上の安全策です。ここを凝っても、誰も褒めてくれません。読みにくいときだけ、確実に損をします。

4. 使う色は、2色＋文字色まで

決まらない会社ほど、色が増えます。増えるのは、誰かの意見を1つずつ足していくからです。専務の緑と、若手の青と、社長の好きな紺が全部入る。結果、まとまりのない画面になります。

3つの役割だけ決める

私たちがおすすめしているのは、次の3つだけを決める方法です。

• メインカラー（1色）― 見出しや帯、ロゴまわりに使う、その会社の色
• アクセントカラー（1色）― 問い合わせボタンなど、押してほしい場所にだけ使う色
• 文字色（1色）― 本文に使う、濃いグレーか黒

これで足ります。背景は白かごく薄いグレーで十分です。色を増やすほど、押してほしい場所が目立たなくなります。全部が目立つ画面は、何も目立っていない画面と同じです。

アクセントカラーは、ボタンのためにある

とくに大事なのがアクセントカラーの扱いです。この色は、問い合わせボタン以外に使わないと決めてください。見出しにも使い、線にも使い、背景にも使うと、ボタンが画面に埋もれます。

私が現場で見てきた限り、問い合わせ数に効く色の使い方は、これ1つだけです。配色全体を洗練させることではなく、押してほしい1か所だけを、他と違う色にすることです。

メインとアクセントの相性

メインカラーが決まれば、アクセントは自動的に絞れます。

• メインが青系なら、アクセントはオレンジや黄
• メインが緑系なら、アクセントはオレンジや濃い赤
• メインが赤系なら、アクセントは紺や濃い黄

要は、メインから離れた色を1つ置くということです。ここも好みで議論せず、「離れているかどうか」だけで判断すれば、議論は数分で終わります。

5. 書体は、明朝かゴシックかを用途で決める

書体（フォント）も同じで、好みで選ぶと決まりません。用途で決めてください。

明朝体が向く場合

明朝体は、線に強弱があり、落ち着いた印象になります。向いているのは次のような場合です。

• 士業、医療、和食、旅館、寺社、伝統のある製造業
• 長い文章を、じっくり読ませたい場合
• 「歴史がある」「格式がある」ことを伝えたい場合

ゴシック体が向く場合

ゴシック体は線の太さが均一で、小さくても読みやすい書体です。

• 建設、運送、小売、飲食、IT、人材など幅広い業種
• スマートフォンで短く読ませたい場合
• 数字や価格を並べる場合

実務上の結論

迷ったらゴシック体にしてください。理由は単純で、小さい画面で読みやすいからです。今のホームページは、7割前後がスマートフォンで見られています。パソコンの大きな画面で見た印象で明朝を選んで、スマートフォンで読みにくくなる、というのがいちばんもったいない選び方です。

明朝体を使いたい場合は、見出しだけ明朝、本文はゴシックという組み合わせが実務的です。格式を出したい場所にだけ明朝を使えば、雰囲気は十分に伝わります。

書体で決めてはいけないこと

• 書体を2種類より多く使わない。3つ以上混ざると、素人が作った印象になります
• 極端に細い書体を本文に使わない。見出しならまだしも、本文では読めなくなります
• 文字を小さくしない。本文は16px相当を下回らない、が目安です
• 行の間隔を詰めない。行間が詰まった日本語は、それだけで読む気を削ぎます

書体選びで問い合わせが増えることはありません。ただし、読みにくい書体で減ることはあります。攻めるための要素ではなく、損をしないための要素だと考えてください。

6. 制作会社に3案出させて、全員で見るのが、いちばん揉める

ここは、私たち制作会社側にとって都合の悪い話を書きます。

よくある進め方が、こうです。制作会社にデザイン案を3つ出してもらい、社内の関係者を集めて並べて見る。そして意見を出し合って決める。

この進め方が、いちばん決まりません。

なぜ決まらないのか

3案を全員で見ると、何が起きるか。

• A案の色とB案のレイアウトとC案の写真がいい、という意見が出る
• それを混ぜると、どれでもない中途半端なものになる
• 混ぜたものにまた意見が出て、もう一周する
• 誰も決めていないので、決まった後も「私はB案がよかった」が残る

そして、正直に申し上げると、3案を出すのは制作会社側の保険でもあります。1案だけ出して否定されるより、3案出して選んでいただくほうが、こちらの責任が軽くなります。「お選びいただいたのはこの案ですので」と言える。仕事をした量も多く見えます。

ただ、貴社にとっては、選択肢が増えるほど決定は遅くなります。ここは制作側の都合と、お客様の都合がはっきりずれている場所です。

出してもらうのは、2案まで

ですから、依頼する側から先に条件を出してください。

「案は2つまででお願いします。方向性が違う2つを出してください」

方向性が近い2案は意味がありません。「落ち着いた方向」と「元気な方向」のように、明らかに違う2つを出してもらう。そうすれば、選ぶ作業が「どちらが貴社に近いか」という判断になります。3案以上あると、比較が印象論になります。

7. 社内で決着させる進め方

手続きとして、次の順番で進めてください。ここまで書いてきたことを、実際の段取りに落とし込みます。

① 決裁者を先に1人決める

これがいちばん大事です。色と書体を最終的に決める人を、案を見る前に決めてください。社長でも、専務でも、広報担当でも構いません。1人であることが条件です。

決裁者を決めずに案を見ると、全員が決裁者のつもりで意見を言います。そこから合意を作るのは、ほぼ不可能です。

② 多数決にしない

色を多数決で決めると、いちばん無難な案が残ります。無難な案は、悪くはありませんが、同業他社と同じ見た目になります。そして誰も責任を持たないので、公開後に「やっぱり変えたい」が出やすくなります。

意見は聞いてください。ただし、聞くことと、決め方を委ねることは別です。「意見は全員から聞く、決めるのは1人」と最初に宣言しておくだけで、進み方がまったく変わります。

③ 手元の材料を集める

ロゴ、名刺、看板の写真、封筒、パンフレット、社用車の写真。決裁者の机の上に並べます。ここから色を拾うのが原則です。

④ 2案に絞って出してもらう

方向性の違う2案を制作会社に依頼します。このとき、スマートフォンの画面でも見せてもらってください。パソコンだけで判断すると、実際にお客様が見る形と違う印象で決めることになります。

⑤ 決める場を、その場で終わらせる

「持ち帰って検討します」を1回挟むと、平均して2週間は止まります。決裁者が同席している場で、その日のうちに決める。決めきれない場合は、決められない理由（誰かの承認が要る、など）を明確にして、次の期限を切ってください。

⑥ 決めたら、記録に残す

決まった色は、色の番号（#から始まる6桁の英数字）で記録しておいてください。「緑」では、次に印刷物を作るときに再現できません。書体も名前で控えておきます。この記録が、あとから作る名刺やチラシとサイトの色を揃える土台になります。

8. 雄喜晃の伴走：色は、こちらが2案に絞ってお出しします

私たち雄喜晃では、色と書体を「ご指定ください」とは申し上げません。ヒアリングのときに、ロゴ・名刺・看板の写真を見せていただいて、こちらで方向性の違う2案までに絞ってお出しします。3案は出しません。決まらなくなるからです。

原稿についても同じ考え方で、「ご用意ください」とは申し上げません。お話を伺って、こちらで書き起こします。代表の木戸が、ヒアリングから制作、公開後の運用まで直接担当します。担当者が途中で変わることはありません。

料金と条件

• 制作費は0円、月額8,800円（税別）からです。ライトプランは1ページのLP、スタンダードは月額13,800円で6ページ程度まで、それ以上の規模はグロースプランとしてご相談をいただく形にしています
• 最低契約期間は6ヶ月です。7ヶ月目以降はいつでも解約でき、違約金はいただきません
• 7〜35ヶ月目で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、ドメイン代などの必要経費をご負担いただくことを条件に、サイトをお渡しします
• 月5回までの修正更新、サーバー、独自ドメイン、SSL、保守は月額に含まれます
• 契約前に、貴社のサイトのサンプルを無料でお作りします。ご覧いただいたうえでお断りいただいても、費用は一切かかりません

参考までに、制作会社に一括で依頼する場合、小規模なコーポレートサイトで30〜80万円（原稿は自社で用意する前提）というのが、私たちがよく目にする範囲です。どちらが得かは期間で変わりますので、ホームページの費用は、3年で並べないと判断できない と 「制作費0円」のホームページは、どこで回収されているのか をあわせてご覧ください。

私たちがやらないこと

正直に書いておきます。予約システムや会員機能、決済を含む仕組みの開発は、私たちの範囲外です。ホームページと問い合わせフォーム、独自ドメインのメールアドレスまではお引き受けしますが、そこから先の開発が必要であれば、開発を得意とする会社のほうが確実です。

もう1つ。デザインを刷新すれば問い合わせが増える、という言い方も私たちはしません。見た目を大きく変える提案のほうが、こちらとしては金額を提示しやすいのですが、私が現場で見てきた限り、件数に効くのは原稿とフォームと更新のほうです。色と書体は、そこで損をしないために整えるものだと考えています。

「色の話で社内が止まっていて、半年進んでいない」という会社には、私たちは間違いなくお役に立てます。分析や提案だけで終わらせず、決める材料を持って伺います。実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台が拠点で、2025年10月の創業です。

9. まとめ：好みで決めない。決め方を先に決める

ホームページの色と書体を決めるために必要なことは、3つです。

• すでにあるものから拾う ― ロゴ、看板、名刺、社用車。好みではなく、事実から色を取ります
• 使う色は2色＋文字色まで ― アクセントカラーは、押してほしいボタンにだけ使います
• 決裁者を1人決めて、2案から選ぶ ― 多数決にせず、3案を全員で見ない

この3つを先に決めておけば、色と書体の議論は1回の打ち合わせで終わります。決め方を決めないまま案を見始めると、何回打ち合わせをしても終わりません。

そして、覚えておいていただきたいことがもう1つあります。色と書体で得をすることは、ほとんどありません。読みにくくして損をすることだけがあります。ですから、ここは短時間で無難に決めて、時間と気力は原稿とフォームに回してください。そちらのほうが、確実に件数に効きます。

まずは今日、ロゴと名刺と看板の写真を机の上に並べてみてください。それだけで、決まる会社があります。

ぜひ一度、お話を聞かせてください。貴社にすでにある色を一緒に探すところから、ご一緒します。