ビビッドカラーをWEBデザインで使う方法｜派手になりすぎない色配置

ビビッドカラーは彩度（色の鮮やかさ）が高く、WEBページの一部を印象的に見せたいときに使えます。ただし見出し、背景、ボタンをすべて鮮やかな色にすると、どの情報を優先して読めばよいか分かりにくくなります。大切なのは色の数だけでなく、色を置く場所と面積です。鮮やかさを活かしながら、商品や文章を邪魔しない配置を考えましょう。

主役のビビッドカラーを決め、広い面は落ち着かせる

まず、目立たせたい要素を一つ決めます。新商品の紹介ページなら「商品を詳しく見る」ボタン、申込みページなら申込みボタンなどです。その部分に主役となる鮮やかな色を使い、同じ画面のその他の見出しや説明文には濃い落ち着いた色を割り当てます。

背景と商品カードには白に近い色を使うと、写真やイラストの色と競いにくくなります。二つ目の鮮やかな色を加える場合は、イラストの小さな形や短い装飾線など、主な操作と混同しない場所に限定します。鮮やかな色を同じ広さで何か所にも置くより、主役と補助の役割を分ける方法です。

「鮮やかな色は全体の何％まで」という決まった正解はありません。写真の色数、余白の広さ、ボタンの数を見ながら、ほかの要素より目立つ場所が明確かを確認します。

文房具の新作紹介ページを想定した配色例

カラフルなノートの写真と特長、価格、商品詳細へのボタンを載せるページを例にします。HEX（ヘックス）はWEBで色を16進数で指定するカラーコードです。

• ページ全体の背景：ほぼ白のブルーグレー ■#F7F9FC。広い面を控えめにし、新作ノートの写真を主役にします。
• 商品写真・情報カード：白 ■#FFFFFF。ページ背景のブルーグレー ■#F7F9FC との差は約1.05:1と小さいため、余白や枠線を組み合わせます。
• 特長や仕様の案内面：淡いブルー ■#EEF3FF。説明をまとめる場所に使い、ビビッドカラーを大面積に広げません。
• 本文・価格：濃いチャコール ■#263249。ページ背景のブルーグレー ■#F7F9FC の上で約12.18:1、淡いブルー ■#EEF3FF の上で約11.56:1のコントラスト比です。
• 見出し：深いネイビー ■#283B66。白 ■#FFFFFF の上で約11.01:1。文字を鮮やかな色に頼らず区別します。
• 主なボタンと文字リンク：ビビッドブルー ■#1457D8。ボタンではこの青を背景に白 ■#FFFFFF の文字を合わせ、約6.20:1。青いリンクを白 ■#FFFFFF の面で使う場合も約6.20:1で、下線を付けます。
• 小さな装飾：ビビッドコーラル ■#E83E62。商品写真の脇の図形や短い線に限定し、価格・状態表示・小さな文字には使いません。
• カード・入力欄の枠線：ブルーグレー ■#71829C。白 ■#FFFFFF の上で約3.91:1、淡いブルー ■#EEF3FF の上で約3.52:1です。操作に必要な境界を色差で示します。

主役のビビッドブルーを商品詳細への操作に集中させ、コーラルは情報を伝えない装飾だけに使います。鮮やかな色同士を隣に並べず、間に写真・余白・落ち着いた文字を入れることが、整理された印象につながります。

鮮やかな色を増やす前に確認したいこと

まず同じ画面に目立つボタンが複数ないか見直します。「商品を見る」「問い合わせる」などをすべて同じ強い色にせず、主な操作を一つ選び、補助操作には下線付きリンクなどを使います。値引きや売り切れをビビッドカラーだけで知らせず、状態を文字でも表示しましょう。

次にスマートフォンで、鮮やかな装飾が商品写真を隠していないか、ボタンの前後に十分な余白があるか確認します。特に細い線や小さな文字は、色が鮮やかでも背景との明るさの差が不足する場合があります。装飾色をアイコンや情報表示に変更するなら、隣り合う色とのコントラストを別途調べる必要があります。

WCAG（WEBコンテンツを利用しやすくするためのガイドライン）2.2のレベルAAでは、通常サイズの文字と背景は4.5:1以上、大きな文字は3:1以上が基準です。操作を認識するために必要な枠線などの非テキスト表示は、隣接色と3:1以上が求められます。上記の文字・ボタン・枠線の比率は示した組み合わせで確認した値です。色や背景が変わる場合は必ず再計算してください。