レトロなWEBデザインを作る配色｜くすみカラーの使い方
レトロなWEBデザインを作りたいとき、くすみカラーを並べるだけでは、雰囲気は出ても開催日時や申込み場所が見つけにくくなることがあります。くすみカラーとは、彩度（色の鮮やかさ）を抑えた、灰色みを感じさせる色のことです。ここでは中古レコード店の試聴会の告知ページを例に、紙・インク・差し色を思わせる組み合わせで、懐かしさと情報の見やすさを両立する方法を紹介します。
くすみカラーを「紙・インク・差し色」に分ける
紙のチラシを思わせるデザインでは、生成り色を大きな背景に、濃い茶色を文字に、レンガ色を目立たせたい場所に使うと、色の役割を整理できます。くすんだ色は同じ明るさにそろえる必要はありません。背景と文字まで似た明るさにすると、試聴会の説明や参加条件が読みにくくなります。
まずページ上部に「秋のレコード試聴会」の見出しを置き、次に開催日・会場・参加費を一つの案内面にまとめ、最後に申込みボタンを配置する構成を考えます。色数を増やすより、使い回す場所を決めるのがポイントです。古い印刷物のような印象は、色だけでなく見出しの文字組みや余白、装飾線の太さにも左右されます。すべての要素に古びた加工を施す必要はありません。
レコード試聴会の告知ページに使う配色例
色はHEX（「#」に続く6桁の英数字でWEBの色を示す形式）で指定します。以下は完成画面を考えるための一例です。
- ページの背景：紙を思わせる薄いベージュ#F5E8D3。レコードの紹介文の背後に広く使い、装飾は増やしすぎず余白を残します。
- 日時・会場の案内面：少し濃いサンドベージュ#E7D5BB。開催日、受付時間、参加費を同じ面にまとめます。背景のベージュ#F5E8D3とのコントラスト比は約1.19:1なので、面の色だけで操作欄の境界を表しません。
- 見出しと本文：インクを思わせる濃い茶色#302923。背景#F5E8D3とは約11.84:1、案内面#E7D5BBとは約9.97:1です。レトロな書体を選んでも本文には読みやすい字形と十分な文字サイズを確保します。
- 開催情報の小見出し：深いオリーブ色#565B3C。「開催日」「会場」など短いラベルに使います。案内面#E7D5BBとの比は約4.95:1です。本文全体の色にはせず、情報の区切りに使います。
- 参加申込みボタン：くすんだレンガ色#853E36に白文字#FFFFFFで「試聴会に申し込む」と表示します。文字とボタン背景は約7.67:1、ボタン背景と周囲のベージュ#F5E8D3は約6.34:1です。レンガ色を装飾に多用せず、主な操作の目印にします。
コントラスト比は、隣り合う二色の相対的な明るさの差を示す数値です。この例では、紙色を広く使い、インク色で文章を支え、レンガ色を申込みに絞ります。色の役割が固定されていれば、レコードジャケットの写真が鮮やかでもページ内の案内を探しやすくできます。
レトロな印象を残しつつ、操作を迷わせない
背景#F5E8D3と案内面#E7D5BBは近い明るさなので、日程を選択する枠にはオリーブ色#565B3Cの輪郭線を追加する方法があります。輪郭線と案内面の比は約4.95:1です。選択した日付は色の変化だけでなくチェック印や「選択中」の文字でも示します。スマートフォンでは狭い幅で見出しや装飾が重ならないように調整します。
WCAG 2.2（WEBコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字と背景は原則4.5:1以上、大きな文字は3:1以上が必要です。操作を見分けるための枠やアイコンなどの非テキスト情報にも、原則3:1以上が求められます。写真や模様を文字の背景に使う場合は、実際に最も差が小さくなる場所も確認してください。
HueRollではHEXを入力して色を調整し、選択した色と白・黒とのコントラストを確認できます。ただし、任意の二色同士の比較やAA・AAAの自動判定はできません。この記事に示した二色間の比率は別途計算したものです。