WEBサイトがおしゃれに見えない原因は？色の使いすぎを見直す方法

WEBサイトの色を一つずつ選んだはずなのに、完成した画面がまとまらず「おしゃれに見えない」と感じることがあります。原因の一つは、色数そのものよりも、同じ役割の場所に毎回違う色を使っていることです。今回は料理教室のレッスン案内ページを例に、増えた色を整理して、写真・説明・申込みの流れを整える方法を紹介します。

色を減らす前に「同じ役割なのに違う色」を探す

まず画面を見て、背景、見出し、本文、申込みボタン、装飾の5つに色を分けてみます。例えばレッスン紹介カードがピンク、日程カードが水色で、どちらも同じ重要度なのに背景色だけ違う場合、読者は色分けの意味を探してしまうことがあります。また、同じ「申し込む」という操作が、ある場所ではミント色、別の場所ではピーチ色になっていると、どちらが重要なのか伝わりにくくなります。

この場合はすべての色を消すのではなく、同じ役割には同じ色を繰り返すことから始めます。情報を載せるカードの背景をそろえ、同じ申込み操作には共通のボタン色を使います。反対に、満席や受付終了など状態の違いが必要なら、色の違いだけに頼らず文字でも示します。

鮮やかな色や多色使いが常に悪いわけではありません。子ども向けの企画やイベントなどでは、複数の色が内容に合うこともあります。「おしゃれ」という印象も目的や見る人で変わります。ここでは、料理の写真を主役にし、落ち着いてレッスン内容を読めるページを目標に考えます。

料理教室の案内ページを改善前・改善後で比較

改善前は、ページ全体がバターイエロー■#FFF0C7、レッスン紹介カードが薄いピンク■#F4DCE9、日程カードが淡い水色■#DDF0F7です。さらに、同じ申込み操作にミント■#71CBB5とピーチ■#EBA57Fのボタンを混在させている状態を想定します。写真と競合する面の色と、同じ操作に複数の色が使われている点を見直します。

改善後は、レッスン紹介と日程をどちらも白いカード■#FFFFFFに置き、写真と内容の違いは見出しや文章で示します。申込みボタンも濃い緑■#20644Fに統一し、ボタンには「レッスンを申し込む」と明記します。テラコッタ■#BC7954は装飾線だけに使うアクセントカラー（少ない場所を強調する色）で、空席などの状態を示す色にはしません。色を減らすこと自体が目的ではなく、色と役割の対応を明確にする改善例です。

最終チェックは「文字・ボタン・境界」の組み合わせで行う

改善前のミントのボタン■#71CBB5と白文字■#FFFFFFのコントラスト比は約1.92:1、ピーチのボタン■#EBA57Fと白文字■#FFFFFFでも約2.05:1です。これに対し、改善後の濃い緑■#20644Fと白文字■#FFFFFFは約7.01:1になります。WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2は、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上を求めています。ボタンの色を統一するときも、文字が読める組み合わせか確認することが大切です。

白いカード■#FFFFFFの上では、濃い深緑の見出し■#273C36が約11.76:1、本文色■#354841が約9.75:1です。一方、白いカード■#FFFFFFと外側のオフホワイト■#F7F4EEは約1.10:1しか違いません。カードの輪郭を示す必要がある場合は灰緑の枠線■#687A70を使い、白い内側■#FFFFFFとは約4.56:1、外側■#F7F4EEとは約4.15:1の差を確保します。意味や操作に必要な境界では、原則3:1以上の非テキストコントラストも確認します。

最後は実際に料理写真と情報を並べ、スマートフォンでも「日程を読む→レッスンを選ぶ→申し込む」が追えるか確かめます。HueRollでは選んだ色のHEX（16進数で表す色コード）や関連色を確認し、候補をマイパレットに保存できます。ただしコントラスト表示は選択色と白・黒の比較だけで、任意の2色の比較やAA・AAAの自動判定には対応していません。ここに記載したカードやボタンの組み合わせの比率は別途計算しています。