🎨 コラム | デザイン

ホームページの配色・カラーの選び方|印象とコントラストで決める

公開日 2026.06.18最終更新 2026.06.18読了 約18分
ホームページの配色・カラーの選び方
▶ この記事の結論

結論から言えば、ホームページの色は「ベース・メイン・アクセントの3色をおよそ70:25:5の比率で組み合わせ、文字と背景のコントラストを十分に確保する」だけで、見やすく印象の整ったサイトになります。色は無数にあるように見えても、判断の軸はそれほど多くありません。本記事では、配色の基本となる3色の役割と比率から、色が与える印象、業種やブランドに合う色の選び方、具体的な決め方の手順、可読性とアクセシビリティ、ありがちな失敗、CTAボタンの色、便利なツールまでを、特定の流行や一社の主張に偏らず実務目線で整理します。色のセンスに自信がない方でも、順を追えば必ず決められます。

結論:色は「3色・70:25:5・十分なコントラスト」で決まる

ホームページの色を決めようとすると、「何色を使えばいいのか」「自社に合う色が分からない」「センスがないから不安」といった悩みにぶつかりがちです。配色の本やツールを見ても情報が多く、かえって迷ってしまうこともあるでしょう。しかし、最初に結論をお伝えします。ホームページの配色は、ベース・メイン・アクセントの3色を、おおよそ70:25:5の面積比で組み合わせ、文字と背景のコントラストを十分に確保する。これだけで、見やすく印象の整ったサイトになります。

なぜこう言い切れるのか。それは、Webの配色で本当に重要なのが「色そのものの良し悪し」よりも「色の使い方のバランス」と「読みやすさ」だからです。どんなに素敵な色を選んでも、画面いっぱいに使えば騒がしくなり、文字が背景に溶けて読めなければ意味がありません。逆に、ありふれた色でも、役割を決めて適切な比率で配置し、コントラストを保てば、プロが作ったように整って見えます。配色はセンスの問題に見えて、実はかなりの部分がルールで再現できるのです。

本記事では、まず配色の土台となる3色の役割と70:25:5の比率を押さえ、続いて色が人に与える印象、業種やブランドに合う色の選び方、実際に色を決めていく手順、可読性とアクセシビリティ、やりがちな失敗、CTAボタンの色、そして便利な配色ツールへと進みます。特定の色を「正解」として押し付けることはせず、あくまで「自分で選べるようになる」ための判断軸をお渡しすることを目的とします。これから作る方も、今あるサイトの色を見直したい方も、順番に読み進めてください。なお、そもそもホームページに何を期待すべきかという根本から考えたい方はなぜ今ホームページが必要なのかもあわせてご覧ください。

配色の基本:ベース・メイン・アクセントの3色と「70:25:5」

配色を考えるうえで、まず覚えておきたいのが「3色で構成し、70:25:5の比率で使う」という基本です。ホームページの色は、役割の異なる3つのグループに分けて考えると、一気に整理しやすくなります。それぞれの役割と比率を見ていきましょう。

区分面積の目安役割主な使用箇所
ベースカラー約70%全体の土台。最も広い面積を占め、他の色を引き立てる背景、余白、本文の地
メインカラー約25%サイトの主役。印象とブランドを決定づけるヘッダー、ナビ、見出し、帯
アクセントカラー約5%強調役。視線を集めて行動を促すCTAボタン、重要リンク、アイコン

ベースカラーは、サイトの中で最も広い面積を占める背景色です。白やごく薄い色が選ばれることが多く、主役ではないものの、全体の印象を静かに方向づけます。ベースが落ち着いた色だからこそ、メインやアクセントの色が映えます。メインカラーは、その名のとおりサイトの主役となる色で、ヘッダーや見出し、ナビゲーションなどに使われ、サイト全体の印象とブランドを決定づけます。後述するように、ロゴやコーポレートカラーをここに当てるのが基本です。アクセントカラーは、最も狭い面積で使う強調色です。問い合わせボタンや申し込みボタンなど、「ここを見てほしい・押してほしい」という箇所に使い、視線を集めて行動を促します。

そして、この3色をおおよそ70:25:5の比率で配置するのが黄金バランスとされています。背景を最も広く、主役の色を中程度に、強調色をごく少なく。この割合を守ると、画面が安定しながらもメリハリが生まれ、自然と「見てほしい場所」に視線が向かいます。逆にアクセントカラーを多用すると、すべてが目立とうとして結局どこも目立たなくなります。なお、白・黒・グレーといった無彩色は色数に含めずに使ってよいのがポイントです。文字色や区切り線、影などに無彩色を活用しつつ、有彩色を3色までに抑えると、整理が一気に楽になります。

70:25:5は厳密に測る数値ではなく、「背景は広く、強調色はごく少なく」という感覚の目安です。アクセントカラーが画面のあちこちに散らばっていたら使いすぎのサイン。最も伝えたい一点に絞ると、その色が本来の力を発揮します。

色の3属性とトーン:「色相・明度・彩度」で印象を操る

3色の役割を押さえたら、次は色そのものの仕組みを少しだけ理解しておきましょう。色は色相・明度・彩度という3つの属性で表せます。難しい理論ではなく、この3つを知っておくと「なぜこの配色がしっくりくる/こないのか」が説明でき、色選びの再現性が高まります。

属性意味変えると起きること
色相(しきそう)赤・青・黄などの色味そのもの暖色は活発・暖かい、寒色は冷静・清潔といった方向性が変わる
明度(めいど)色の明るさ。高いほど白に近く、低いほど黒に近い明度差が大きいほど見やすく、小さいほど読みづらくなる
彩度(さいど)色の鮮やかさ。高いほどビビッド、低いほどくすむ高彩度は元気・派手、低彩度は落ち着き・上品になる

この3属性のうち、配色の統一感を左右するのがトーンです。トーンとは、明度と彩度を組み合わせた「色の調子」のことで、同じトーンの色同士を組み合わせると、色相が違っても不思議とまとまって見えます。たとえば、淡くて優しい「ペールトーン」で揃えれば全体がやわらかく上品になり、鮮やかな「ビビッドトーン」で揃えれば元気で活発な印象になります。配色に迷ったら、まずトーンを揃えることを意識すると失敗しにくくなります。

代表的なトーンと印象を整理すると次のとおりです。自社サイトでどんな雰囲気を出したいかを思い浮かべながら見てください。

  • ビビッド(鮮やか):活発・元気・カジュアル。子ども向けやセール訴求に向くが、使いすぎると騒がしい。
  • ライト/ペール(淡い):爽やか・優しい・清潔。医療や美容、ベビー関連などやわらかい印象を出したいときに。
  • ダル(くすんだ):落ち着き・大人っぽい・上品。ナチュラル系やこだわりを伝えたい店舗に。
  • ダーク(暗い):重厚・高級・モダン。ラグジュアリーブランドや高単価サービスに合う。

ポイントは、同じ色相でも、明度や彩度を変えるだけで印象が大きく変わるということです。同じ「青」でも、淡い水色なら爽やかさ、濃紺なら堅実さ、と伝わるものが違います。だからこそ、次の章で扱う「色が与える印象」は、色相だけでなくトーンとセットで考えることが大切です。

ホームページの配色・カラーの選び方 に関する解説イメージ

色が与える印象:主要な色の心理効果を押さえる

色には、多くの人が共通して感じる印象(イメージ)があります。これは文化や経験によって培われたもので、色を選ぶうえで無視できません。ここでは、ホームページでよく使われる色の代表的な印象と、使う際の注意点を整理します。自社が「どう見られたいか」と照らし合わせてください。

主な印象(ポジティブ)注意したい側面
情熱・活力・購買意欲・食欲増進危険・警告の意味もあり、広く使うと攻撃的・落ち着かない
オレンジ親しみやすさ・温かさ・活発・カジュアル高級感や重厚感は出しにくい
黄色明るさ・陽気・希望・注意喚起白背景だと視認性が低く、文字には不向きなことが多い
健康・自然・安心・成長・リラックス地味に見えやすく、単独だと印象が弱まることも
信頼・誠実・知性・清潔・冷静使いすぎると冷たく事務的な印象になりやすい
高貴・上品・神秘・知性好みが分かれ、ターゲットを選ぶ
ピンクかわいらしさ・優しさ・幸福感対象が女性向けなどに限定されやすい
清潔・シンプル・誠実・余白の美しさ単調・冷たく見えることがある
高級・モダン・重厚・洗練重く暗くなりやすく、面積が大きいと圧迫感
グレー落ち着き・洗練・中立・上質地味になりがちで、主役にはしにくい

たとえば、信頼性が問われる金融や士業、IT企業でが好まれるのは、誠実さや知性を連想させるからです。医療・ヘルスケアで白や淡い緑・青が多いのは、清潔感と安心感を伝えたいからです。飲食店で赤やオレンジがよく使われるのは、活気や食欲を刺激する効果が期待されるためです。このように、色の印象は「狙った印象を後押しする道具」として活用できます。

ただし、注意点が2つあります。第一に、色の印象は絶対ではなく、トーンや組み合わせ、文脈で変わるということです。同じ赤でも、鮮やかな赤は情熱的ですが、くすんだ赤(えんじ・ボルドー)なら落ち着いた高級感になります。第二に、印象だけで色を決めないことです。実際のサイトは、色に加えて写真・キャッチコピー・レイアウトが組み合わさって印象を作ります。色はそのうちの一要素にすぎないので、「青だから信頼される」と短絡せず、全体のバランスで考える姿勢が大切です。

業種・ブランドに合う色の選び方

色の印象を踏まえると、業種ごとに「相性のよい色」の傾向が見えてきます。ここでは代表的な業種別の配色の方向性を示します。ただしこれはあくまで出発点であり、絶対の決まりではありません。むしろ定番からあえて外して差別化を図る戦略もあるため、参考にしつつ自社らしさを優先してください。

業種相性のよい色の傾向狙える印象
IT・テクノロジー青系+オレンジや緑のアクセント信頼性・先進性・スピード感
金融・コンサル・士業濃紺・ネイビー+白/グレー、差し色にボルドーや緑堅実・誠実・専門性
医療・ヘルスケア白ベース+淡い青や緑清潔・安心・やさしさ
美容・サロンピンク・ベージュ・くすみカラー、または黒で高級感美しさ・上質・特別感
飲食・食品赤・オレンジ・黄など暖色、自然派なら緑・茶活気・食欲・親しみ
製造・建設青・グレー+赤やオレンジのアクセント堅牢・信頼・力強さ
住宅・不動産緑・ベージュ・茶などアースカラー温かみ・安心・自然

業種の傾向以上に大切なのが、ブランドとの一貫性です。すでにロゴや看板、名刺、チラシなどで使っている色があるなら、ホームページもその色に揃えるのが原則です。媒体ごとに色がバラバラだと、同じ会社だと認識されにくく、せっかくの認知が分散してしまいます。逆に色を揃えれば、「この色といえばあの会社」という記憶が積み重なり、信頼や認知につながります。コーポレートカラーは、いわば会社の「顔色」です。

色がまだ決まっていない、これからブランドごと作るという場合は、次の3点を軸に考えると整理できます。第一に事業の価値観・理念(誠実さを大事にするなら青系、活気を売りにするなら暖色など)。第二にターゲット層の好み(落ち着いた大人向けか、元気な若年層向けか)。第三に競合との違い(同業が青ばかりなら、あえて緑やオレンジで差をつける)。これらを掛け合わせて、自社が最も伝えたい印象に近い色を主役に選びます。色は一度決めると長く使うものなので、流行よりも、長く付き合える色を選ぶことをおすすめします。

配色を決める手順:ロゴ起点で迷わず組み立てる

ここからは、実際に色を決めていく具体的な手順を示します。やみくもに色を選ぶのではなく、決まった順番に沿って絞り込めば、センスに頼らずとも整った配色にたどり着けます。次の5ステップで進めましょう。

手順やることポイント
1. 起点を決めるメインカラーを1色決めるロゴ・コーポレートカラー、なければ出したい印象から選ぶ
2. ベースを選ぶ背景色を決める白や淡い色など、メインを引き立てる控えめな色に
3. アクセントを選ぶ強調色を1色決めるメインと差がつく目立つ色。補色も有効
4. 濃淡を広げる各色の明暗バリエーションを用意同系色の濃淡で見出しや区切りに変化をつける
5. 検証するコントラストと全体を確認可読性チェックと複数端末での見え方確認

ステップ1(起点=メインカラー)が最も重要です。前述のとおり、ロゴやコーポレートカラーがあればそれを採用します。色が未定なら、出したい印象・業種・差別化から主役の1色を決めます。ここが決まると、後の色は自動的に絞り込めるので、まずはこの1色に集中してください。

ステップ2(ベースカラー)では、メインを引き立てる背景色を選びます。多くの場合は白か、ごく薄いグレー・ベージュ・水色など、彩度を抑えた色が無難です。ベースが派手だとメインやアクセントが埋もれるため、「主張しない色」を選ぶのがコツです。ステップ3(アクセントカラー)では、ボタンなどに使う目立つ色を1色決めます。ここで有効なのが補色の考え方です。補色とは色相環で正反対に位置する色で、互いを最も引き立て合います。たとえばメインが青なら補色はオレンジ、メインが緑なら補色は赤紫といった具合です。補色をアクセントに使うと、ボタンが背景から自然に浮き立ちます。

メインカラー補色(アクセント候補)
青系オレンジ系
緑系赤・赤紫系
赤系青緑系
黄系青紫系

ステップ4(濃淡を広げる)では、決めた各色について、明るい版・暗い版のバリエーションを用意します。同じ色相の濃淡を使えば、見出し・小見出し・区切り線・背景の帯などに変化をつけても、統一感を保てます。色数を増やさずに表現の幅を広げる、賢いやり方です。最後のステップ5(検証)では、文字と背景のコントラストを確認し、パソコン・スマートフォンの両方で実際の見え方をチェックします。検証の具体的な方法は次章で詳しく扱います。なお、これから本格的に作る場合は、配色だけでなく構成や原稿、写真も必要になります。制作全体の流れを把握したい方はホームページ制作会社の選び方もあわせてご覧ください。

ホームページの配色・カラーの選び方 に関する解説イメージ

コントラスト・可読性・アクセシビリティ:読めなければ意味がない

配色で見た目の美しさと同じくらい、いや、それ以上に大切なのが「読みやすさ」です。どれだけ洗練された色を選んでも、文字が背景に溶けて読めなければ、訪問者は内容を理解できず離脱します。ここで鍵になるのがコントラスト(明暗差)です。

コントラストの確保には、国際的なアクセシビリティ指針であるWCAG(ウェブコンテンツ・アクセシビリティ・ガイドライン)が目安になります。具体的には、文字と背景のコントラスト比について、次の基準が推奨されています。

対象推奨コントラスト比補足
通常サイズの文字4.5:1 以上本文など、読ませる文字は必ず満たしたい
大きな文字・太字3:1 以上見出しなど大きめの文字はやや緩和される

このコントラスト比は感覚ではなく数値で測れるのが利点です。後述する無料のコントラストチェッカーに文字色と背景色を入力すれば、基準を満たすかどうかが即座に分かります。とくに注意したいのが、薄いグレーの文字や、淡い背景に淡い文字を載せるケースです。デザイン上はおしゃれに見えても、高齢の方や明るい屋外でスマホを見る人には読めないことが少なくありません。本文の可読性は、見た目の好みより優先してください。

あわせて押さえたいのがカラーユニバーサルデザイン、つまり色覚の多様性への配慮です。人によっては赤と緑の区別がつきにくい場合があり、これは決して珍しいことではありません。そのため、色だけで情報を伝えないことが重要です。たとえば、エラーを赤い文字だけで示すのではなく、アイコンや「エラー」という文言、下線などを併用する。グラフを色分けする際は、色だけでなく模様やラベルでも区別できるようにする。こうした配慮で、より多くの人に伝わるサイトになります。

「きれい」と「読みやすい」は別の評価軸です。配色の最終チェックでは、必ず「この文字は誰にでも無理なく読めるか」を自問してください。読みやすさを犠牲にした美しさは、ホームページにおいては本末転倒です。

なお、文字色として真っ黒(#000000)を白背景に使うと、コントラストが強すぎて目が疲れるという指摘もあります。本文には、わずかに明度を上げた濃いグレー(たとえば #333333 前後)を使うと、読みやすさと目への負担のバランスが取りやすくなります。細かな点ですが、長文を読ませるページほど効いてきます。可読性はスマートフォンでの見え方とも密接に関わるため、スマホ対応(レスポンシブ)の重要性もあわせて確認しておくと万全です。

やりがちな配色の失敗とその回避策

ここまでの内容を踏まえ、実際に多くの方がつまずく典型的な配色の失敗を整理します。あらかじめ知っておけば、同じ落とし穴を避けられます。自社サイトや制作中のデザインと照らし合わせてチェックしてみてください。

よくある失敗なぜ問題か回避策
色を使いすぎるまとまりがなく、どこを見ればよいか分からない有彩色は3〜4色まで。無彩色で変化をつける
アクセントカラーの多用すべてが目立とうとして、結局どれも目立たない強調は本当に重要な箇所だけに絞る(約5%)
コントラスト不足文字が読めず、内容が伝わらない・離脱の原因にコントラスト比4.5:1以上をツールで確認
原色・高彩度の多用目がチカチカして疲れ、安っぽく見える彩度を少し抑え、トーンを揃える
色の役割がバラバラ同じ機能のボタンが色違いで、ユーザーが混乱ボタン・リンク色をサイト全体で統一する
ブランドと不一致ロゴや他媒体と色が違い、同じ会社と認識されないコーポレートカラーに揃える
印象だけで決める写真や内容と合わず、ちぐはぐな仕上がりに写真・コピー・レイアウトを含めて総合判断

これらの失敗に共通するのは、「個々の色の好み」だけで判断し、全体のバランスとルールを見落としていることです。配色は「どの色が好きか」ではなく、「色と色がどう関係し、全体としてどう見えるか」で決まります。とくに多いのが、良かれと思って色や装飾を足し続け、気づけば画面が騒がしくなっているケースです。配色は足すより引く意識が大切で、迷ったら色数を減らし、トーンを揃え、強調を絞る方向に調整すると、たいてい良くなります。

もう一つ強調したいのが、「色のルールを決めて、サイト全体で一貫させる」ことです。リンクは何色、ボタンは何色、見出しは何色、と最初に決めておけば、ページが増えても統一感が崩れません。訪問者も「この色は押せる」「この色は重要」と無意識に学習でき、使いやすさが増します。これはデザインの美しさだけでなく、成果(問い合わせや申し込み)にも直結する実務的なポイントです。

CTAボタンの色:クリックされる色は「浮き立つ色」

配色の中でも、成果に直結するのがCTAボタンの色です。CTA(Call To Action)とは、「問い合わせる」「申し込む」「購入する」など、訪問者に取ってほしい行動を促すボタンやリンクのこと。ここの色選びは、コンバージョン(成果)に影響する重要ポイントです。

まず大前提として、「この色なら必ずクリックされる」という万能の色は存在しません。「ボタンは緑が最強」「赤が一番押される」といった話を見かけることがありますが、効果はサイトの背景色・配色との関係で変わるため、色名だけを切り出して語ることに意味はありません。同じオレンジのボタンでも、白背景なら目立ちますが、オレンジ系のサイトでは埋もれてしまいます。

本当に大切なのは、ボタンが周囲から浮き立っていること、すなわち背景やメインカラーとしっかりコントラストが付いていることです。前章で触れた補色の考え方がここで活きます。具体的な方向性は次のとおりです。

  • 青系のサイト:補色のオレンジや赤など、暖色系のアクセントがよく映える。
  • 白基調のサイト:彩度の高い色(赤・オレンジ・緑・青など)でしっかりコントラストを付ける。
  • 暖色系のサイト:寒色系や、明度差の大きい色でボタンを際立たせる。

色に加えて、CTAボタンでは次の点も押さえると効果的です。第一に、サイト内で同じ役割のボタンは色を統一すること。「申し込みボタンはこの色」と決めておけば、訪問者が直感的に行動できます。第二に、そのページで最も押してほしいボタンを、最も目立たせること。重要度の低いボタン(例:戻る、詳細)まで派手にすると、肝心のボタンが埋もれます。第三に、色だけに頼らないこと。十分な大きさ、余白、そして「無料で相談する」など具体的で行動を促す文言を組み合わせると、色の効果が一段と高まります。

そして忘れてはならないのが、ボタンの色も色覚の多様性に配慮することです。一般に使われる赤と緑は、人によって区別しにくい組み合わせでもあります。色だけでなく、形・余白・文言でも「押せる場所」「重要な行動」と分かるように設計すれば、より多くの人を取りこぼしません。とくに1ページで成果を狙うランディングページでは、CTAの色と見せ方が成果を大きく左右します。詳しくはランディングページ(LP)とはもご覧ください。

配色ツールの活用:感覚に頼らず色を決める

「色の知識は分かったが、実際に色を選ぶのは難しい」と感じる方も多いでしょう。そこで頼りになるのが配色ツールです。無料で使える優れたツールが数多くあり、これらを使えば、センスに自信がなくても相性のよい配色を作れます。代表的なツールを目的別に紹介します。

目的ツールの例できること
配色パターンを作るAdobe Color、Coolors、ColorSpace1色や条件から、調和する色の組み合わせを自動生成
実際の見え方を試すHappy Hues、PalettemakerサイトやUIの見本に配色を当てて雰囲気を確認
可読性を確認するコントラストチェッカー各種文字色と背景色のコントラスト比を数値で判定
画像から色を抽出する画像カラーピッカー各種ロゴや写真から使われている色のコードを取得
伝統色から選ぶNIPPON COLORS など日本の伝統色からコードを選び、和の雰囲気を出す

実務での使い方を流れで示すと、次のようになります。まず、ロゴがあれば画像から色を抽出するツールでロゴの色のカラーコードを取得し、これをメインカラーの起点にします。次に、その色を配色生成ツール(Adobe ColorやCoolorsなど)に入力し、補色や類似色など調和する候補を出させます。Coolorsはキー一つで配色をどんどん切り替えられ、気に入った組み合わせを保存できるので、アイデア出しに便利です。候補が固まったら、コントラストチェッカーで文字色と背景色の組み合わせが基準(4.5:1以上)を満たすか確認します。最後に、Happy Huesのようなプレビュー系ツールで、実際のサイト見本に当てて全体の雰囲気を確かめます。

ツールを使ううえでのコツは、「ツールはあくまで案出しの道具」と割り切ることです。自動生成された配色をそのまま使うのではなく、自社のブランドや出したい印象に合うかを自分の目で確認し、必要なら微調整します。ツールは膨大な選択肢の中から相性のよい候補を素早く示してくれますが、最終判断は人間が行うものです。とはいえ、ゼロから感覚で色を探すのに比べれば、作業は格段に速く、失敗も減ります。色のコードの扱い(#から始まる6桁の16進数で色を指定する、など)に慣れていなくても、ツールがコードを表示してくれるので、それをコピーして使えば問題ありません。

まとめ:配色は「ルール」で決められる。迷ったら基本に戻る

ホームページの配色・カラーの選び方について、要点を最後に整理します。配色はセンスの問題に見えて、実は再現可能なルールで大部分を決められます。土台となるのは、ベース・メイン・アクセントの3色を、おおよそ70:25:5の比率で使うという基本です。メインカラーはロゴやコーポレートカラーを起点に決め、ベースは控えめに、アクセントは補色などで浮き立たせ、ボタンなどごく一部に絞って使います。

色を選ぶ際は、色の印象(青=信頼、緑=健康、赤=活気など)を狙った方向づけの道具として活用しつつ、印象だけで決めず、業種・ブランド・写真・コピーを含めた全体で判断します。そして何より、文字と背景のコントラスト(通常文字で4.5:1以上)を確保し、色だけに頼らず誰にでも読める・伝わる配色にすることが、見た目の美しさ以上に重要です。色を使いすぎない、強調を絞る、サイト全体で色のルールを統一する——この3点を守れば、大きな失敗はまず避けられます。配色ツールやコントラストチェッカーを使えば、感覚に頼らず効率よく、確実に整った色にたどり着けます。

私たち格安HP屋(東京・神保町/2020年創業)は、全国どこでもオンライン完結で、中小事業者・個人事業主のホームページ制作をお手伝いしています。配色やデザインの方向性が決まっていなくても、ロゴや事業内容、出したい印象をうかがいながら、ブランドに合った色設計でご提案します。料金は税込・追加料金なし・修正無制限で、ホームページ新規制作は25万円、リニューアルは30万円、1ページ完結型のLPは8万円。サーバー・ドメインは実費(年1〜2万円程度)のみ、標準でスマホ対応・SEO基本対策・問い合わせフォームを備え、最短2週間で公開可能です。「色選びで手が止まっている」「今のサイトの配色を見直したい」といったご相談は、メール(info@kakuyasuhp.com)でお気軽にお寄せください。あわせてホームページ制作費用の相場や、リニューアルを検討中の方はホームページのリニューアルの進め方もご活用ください。

FAQよくあるご質問

ホームページの色は何色まで使ってよいですか。
基本は3色、多くても4色程度に抑えるのがおすすめです。具体的には、背景となるベースカラー、サイトの主役となるメインカラー、ボタンなどを目立たせるアクセントカラーの3色を軸にします。色数が増えるほどまとまりがなくなり、どこを見ればよいか分かりにくくなります。白・黒・グレーといった無彩色は色数に数えず自由に使ってよいので、有彩色を3色までと考えると整理しやすいです。
配色の「70:25:5」とは何ですか。
ベースカラーを全体の約70%、メインカラーを約25%、アクセントカラーを約5%の面積で使うという、配色バランスの目安です。背景を最も広く、主役の色を中程度に、強調色をごく少なく使うことで、視覚的に安定しつつメリハリの効いた画面になります。厳密に測る必要はなく、おおよその割合として意識すれば十分です。
メインカラーはどう決めればよいですか。
すでにロゴやコーポレートカラーが決まっているなら、それをそのまま採用するのが基本です。名刺やチラシ、看板と色を揃えることで、ブランドの一貫性が生まれ、覚えてもらいやすくなります。色が未定の場合は、与えたい印象(信頼なら青系、健康なら緑系など)と業種、競合との違いを踏まえて選びます。色の印象だけで決めず、事業内容や写真との相性も含めて総合的に判断しましょう。
ボタン(CTA)の色は何色がよいですか。
「この色なら必ずクリックされる」という万能色はありません。大切なのは色名そのものより、周囲から浮き立つこと、つまり背景やメインカラーとしっかりコントラストが付いていることです。青系のサイトならオレンジや赤、白基調なら彩度の高い暖色など、目立つ色をアクセントカラーとしてボタンに使い、サイト内で同じ役割のボタンは色を統一します。
色の見やすさ(コントラスト)の基準はありますか。
国際的なアクセシビリティ指針(WCAG)では、通常サイズの文字で背景とのコントラスト比4.5:1以上、大きな文字で3:1以上が推奨されています。これは数値で測れるので、後述の無料ツールで確認できます。とくに薄いグレーの文字や、背景に溶け込む色は読みづらくなりがちなので、本文の可読性は最優先で確保してください。
色のセンスに自信がなくても配色を決められますか。
決められます。配色には再現可能なルールと便利なツールがあり、感覚に頼らなくても整った色は作れます。ロゴの色を起点に、配色ツールで相性のよい色を生成し、コントラストチェッカーで可読性を確認する、という手順を踏めば十分です。それでも不安な場合や仕事に集中したい場合は、配色を含めてホームページ制作会社に任せるという選択肢もあります。
格安HP屋 編集部東京・神保町/中小企業向けホームページ制作
無料で相談する
まずは、お気軽にご相談ください。
初回相談は無料。料金やお見積もりだけのお問い合わせも歓迎です。