配色がごちゃごちゃして見える原因は？WEBデザインを整理するコツ

WEBサイトの色を増やしたつもりはなくても、ページを開くと情報がごちゃごちゃして見えることがあります。原因は色数だけではなく、開催時間・会場・注意事項など、重要度の違う情報が同じ強さの色面に囲まれていることかもしれません。科学館の体験イベント案内を例に、背景色の区切り方と、文字・申込みボタンの優先順位を整える方法を紹介します。

ごちゃごちゃ見える原因は、色の区切りと情報の優先順位のずれ

例えば、案内ページの大きな背景が黄色■#F7DA7Cで、時間の欄が薄紫■#EADFF6、会場が淡い水色■#DDF5F3、持ち物の欄が薄いピンク■#F6DCE4だとします。どの色も単独では使える候補ですが、隣り合う面が次々に切り替わると、どこから読めばよいのか迷うことがあります。重要な情報も補足も同じ大きさの色付き見出し帯で囲むと、優先順位が伝わりにくくなります。

この場合に見直すのは、「何色あるか」よりも色の付いた面の大きさ・隣接関係・情報の役割です。まずページを「開催概要」「時間と会場」「持ち物・注意」「申込み」に分け、最初に見てほしい場所を決めます。大きな区切りは見出しと余白で作り、背景色で囲むのは必要な情報だけにすると、色の意味が伝わりやすくなります。

なお、満席や受付終了などの状態は、単なる装飾とは別です。「受付終了」と文字で明記し、色だけで意味を伝えないようにします。多色使いそのものが悪いわけではなく、色の変化が読む順番を妨げていないかが判断のポイントです。

科学館のイベント案内を、背景・時間・注意・申込みに整理する

改善後は、ページ全体を薄い青灰色■#F4F6F7にして、開催概要と会場案内を白いカード■#FFFFFFにまとめます。見出しは暗い青灰色■#203644、説明文は少し柔らかい濃色■#374B58にします。以下では各色をHEX（16進数で色を示すWEB用コード）で示し、使う場所を分けています。

画面では「開催概要」から「時間と会場」へ進み、持ち物を確認して「参加を申し込む」ボタンにたどり着く順に並べます。開催時刻だけを淡い青■#E9F2F5で小さく囲み、持ち物の注意には淡い黄み■#FFF0D3を使います。すべてのセクションを別の色で塗るのではなく、強調する情報の範囲だけに色を付けるのが、この例の改善点です。時間と注意事項は背景色が異なっても、見出し・説明・操作の順序は統一します。

整理後は隣り合う色のコントラストを確認する

コントラスト比は、文字と背景など2色の相対的な明るさの差を示す数値です。白いカード■#FFFFFF上の見出し■#203644は約12.56:1、本文■#374B58は約9.09:1です。時間表示は濃い青文字■#215F79と淡い青背景■#E9F2F5で約6.21:1、注意欄は暗い茶色■#694A20と淡い黄みの背景■#FFF0D3で約7.17:1です。申込みボタンは白文字■#FFFFFFと深い青緑■#165C70で約7.50:1になります。

反対に、薄いグレー文字■#8A9CA8を白背景■#FFFFFFへ置くと約2.84:1で、通常サイズの文字には不足します。WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2では、通常文字は原則4.5:1以上、大きな文字は3:1以上が基準です。補足情報だからといって読めないほど薄くせず、面積や余白で重要度を調整しましょう。

白いカード■#FFFFFFと外側の薄い青灰色■#F4F6F7の比は約1.08:1と小さいため、輪郭が必要なら枠線■#75818Bを付けます。この枠線は白いカード■#FFFFFFと約3.99:1、外側の背景■#F4F6F7と約3.68:1です。利用上必要なUI（操作部品）や意味を伝える境界には、隣接色に対する原則3:1以上の非テキストコントラストが求められます。ボタンの青緑■#165C70はページ背景■#F4F6F7に対して約6.92:1ですが、色だけでなく「参加を申し込む」の文字も残します。

最後にスマートフォンで、開催日・会場・持ち物・申込みの順に目で追えるかを確認しましょう。HueRollでは256色のパレットから色を選んで関連色や配色候補を調べ、マイパレットへ保存できます。ただしツールのコントラスト表示は選択色と白・黒の比較のみで、任意の2色の比較やAA・AAAの自動判定はできません。この記事の色同士の比率は別途計算しています。