ホームページの配色はどう決める？色の役割と相談前チェック

ホームページの色は、「好きな色を3つ選ぶ」だけでは決まりません。すでに使っているロゴ、店舗、名刺、商品写真とのつながりを確認し、背景、文字、ボタンなどの役割へ色を割り当ててから、実際の画面で読みやすさを比べます。

アクセントカラーは、問い合わせや予約など、特に見つけてほしい操作へ使う候補色です。背景や文字との明暗差があり、エラーや選択中など別の状態とも区別できるかで選びます。配色ルールとは固定の色数や割合ではなく、色の役割、組み合わせ、状態の伝え方を決めることです。

この記事では、ブランドカラーがまだ決まっていない小規模事業者や開業準備中の人向けに、制作相談の前から使える配色の決め方を整理します。特定の色を選べば問い合わせや売上が増える、という話ではありません。誰に何を伝えたいかを整理し、読める・迷わない・管理できる配色にすることが目的です。

最初に集めるのは「好きな色」より既存の色

新しい色を探す前に、事業ですでに使っている色を集めます。

ロゴとロゴデータ
店舗の外観、内装、看板
名刺、パンフレット、封筒
商品、パッケージ、制服、車両
よく使う写真やイラスト
すでに使っていて困っている配色

ロゴの色が決まっていても、同じ色を本文やボタンへそのまま使えるとは限りません。小さな文字では読みにくい、写真と重なると見えにくい、印刷物と画面で見え方が違う、といったことがあるためです。

まだ何も決まっていない場合は、無理に色を先に選ばなくても構いません。「避けたい印象」「落ち着いて見せたい」「商品写真を主役にしたい」のように、言葉で希望を残すところから始められます。

色名ではなく、画面での役割を決める

「メインカラー」「アクセントカラー」という呼び方は、会社や制作担当者によって意味が変わることがあります。名前だけで合意せず、どこへ使う色かを一緒に書きます。

役割	主な使用場所	確認すること
背景・余白	ページ背景、カード、区切り	文章や写真を邪魔せず、長く読んでも疲れにくいか
文字	本文、見出し、補足	実際の背景との明暗差があり、スマホでも読めるか
キーカラー	ロゴに近い帯、見出し、装飾	事業らしさが伝わり、使いすぎていないか
操作色	問い合わせ、予約、次へ進むボタン	押せる場所だと分かり、文字も読めるか
状態色	エラー、完了、注意、選択中	色だけでなく文字や記号でも意味が分かるか

色数を必ず3色にする、画面の何％を何色にする、といった固定ルールはありません。写真が多いサイト、文字中心のサイト、予約操作が多いサイトでは、必要な役割が違います。まず役割を決め、同じ色が複数の役割を兼ねられるかを確認します。

配色候補は同じ画面で比べる

色見本だけを横に並べると、実際の使いやすさまでは分かりません。候補を比べる時は、同じ文章、写真、ボタンを置いた画面を使います。

1. 既存資産から候補を拾う

ロゴ、店舗、商品などから、事業とつながりのある色を候補にします。ロゴがない場合は、伝えたい印象を3〜5個の言葉にし、それぞれの言葉に合いそうな色を複数出します。

「信頼なら青」のように色を一つへ決めつけないことが大切です。同じ青でも明るさや鮮やかさ、周囲の色、写真、業種、文化によって見え方は変わります。

2. 背景・文字・操作の組み合わせを作る

候補色を単独で見るのではなく、次の組み合わせを作ります。

背景と本文文字
背景と見出し
ボタン背景とボタン文字
入力欄の背景、文字、枠線
エラー・完了・選択中の表示

3. 実際の写真と文章を入れる

商品写真や店舗写真が暖色中心なら、候補色との組み合わせで画面全体が重く見える場合があります。仮の写真だけで決めず、用意できる範囲で実際の写真を使います。

文章も「サンプルテキスト」ではなく、サービス名、説明文、ボタン文言を入れます。文字数や改行が変わると、色の面積と見え方も変わるためです。

4. PCとスマホで比較する

大きな画面では読みやすくても、スマホでは文字が細く見えたり、ボタンが写真に埋もれたりすることがあります。明るい場所と暗い場所、異なる端末でも確認し、気になる組み合わせを記録します。

読みやすさは実際の前景色と背景色で確認する

配色では、色の印象だけでなく文字と操作の見つけやすさを確認します。

W3CのWCAG 2.2では、通常の文字と背景はコントラスト比4.5:1以上、大きな文字は3:1以上を基準としています。大きな文字の目安は24 CSS px以上、または約19 CSS px以上の太字です。

また、ボタンや入力欄の識別に必要な境界、意味を理解するために必要な図形などは、隣接する色に対して3:1以上が必要です。境界がなくても形、文字、配置などで操作部品を識別できる場合まで、すべての枠線に同じ要件がかかるわけではありません。

ロゴやブランド名の一部である文字は、WCAGの文字コントラスト要件の例外です。ただし、ブランドカラーを本文やボタンの文字・背景へ使う場合、その部分はロゴの例外ではありません。

ここで大切なのは、色コードを一つだけ確認するのではなく、実際に隣り合う前景色と背景色の組み合わせを確認することです。

確認する組み合わせ	よくある見落とし
本文文字とページ背景	薄いグレーの文字を白背景へ置き、スマホで読みにくくなる
ボタン文字とボタン背景	ブランドカラーを優先し、文字が埋もれる
入力欄の枠線と周囲の背景	入力できる場所が見つけにくい
選択中と未選択	色の違いだけで状態を表す
エラーと通常案内	赤色だけでエラーを伝え、文言や記号がない
写真上の文字	写真の明暗が場所ごとに変わり、一部だけ読めない

デジタル庁デザインシステムも、前景色と背景色を一緒に指定し、実際の組み合わせで確認する考え方を示しています。

色だけで「押せる」「エラー」「選択中」を伝えない

色の見え方は人によって異なります。色だけを変えて操作や状態を伝えると、違いに気づけない場合があります。

リンクは色に加えて下線や形で示す
エラーは色に加えて「入力してください」などの文と記号を付ける
選択中は枠、チェック、太さ、ラベルを併用する
必須項目は赤い印だけでなく「必須」と書く
グラフや表は色だけで系列を分けず、文字やパターンを加える

これはW3Cの「色の使用」でも示されている考え方です。

少数の案を比べる時の確認表

候補を増やしすぎると、好みの投票になりやすくなります。まず2案程度に絞るのを目安にし、同じ項目で比べます。次の表は2案で比べる場合の例です。

確認項目	案A	案B	確認方法
既存ロゴ・店舗とのつながり			並べた画像で確認
本文の読みやすさ			PC・スマホ、明るい場所で確認
問い合わせボタンの見つけやすさ			色だけでなく位置・文言も確認
商品・人物写真との相性			実際の写真を入れる
エラー・完了・選択中の区別			色なしでも意味が分かるか確認
印刷物とのつながり			必要な場合だけ印刷見本で確認
更新時に迷わないか			使用場所を説明できるか確認