お休みの日は淡いピンク、営業する日は白。お店の雰囲気に合わせたカレンダーができると、案内するのも少し楽しみになりますね。
でも、「ピンクの日がお休みです」という説明だけで、誰にでも同じように伝わるでしょうか。今日は、色の使い方について調べてみました。デザインを難しくするためではなく、せっかく作った案内を見つけてもらうためのお話です。
色と
Webの使いやすさを扱うW3CのWAIでは、情報を色だけで伝えず、文字や記号など、色の見分けに頼らない手がかりも用意するよう案内しています。また、文字と背景には十分な明暗の差が必要だと説明しています。
ここからは、その考えをサロンの案内に当てはめた提案です。たとえばお休みの日に、ピンクの背景と一緒に「休」と入れる。カレンダーの近くに「休＝お休み」と添える。色を覚えていなくても、その日がどんな日か読めるようにしてみます。
大切なことを全部濃い色にする、という話ではありません。お店らしい色を残しつつ、日付や「休」の文字は背景に埋もれないようにする。色の意味を、言葉にも手伝ってもらう感じです。
作った
パソコンでは読みやすく見えた画像でも、スマートフォンに収まると文字は小さくなります。投稿する前に、実際に読む大きさで一度開いてみるとよさそうです。拡大しない状態で日付と休業日が読み取れるかを、まず確かめてみませんか。
白黒で見てみるのも、色だけに頼っている箇所を探す手がかりになります。ただし、それだけで誰にでも読みやすいと確認できたことにはなりません。色の組み合わせ、文字の大きさ、表示する画面によっても、確かめたいところがあります。
画像に情報を詰め込みすぎてしまったら、投稿本文にも「今月のお休みは○日・○日です」と日付を書いておく方法があります。これは書き方の例なので、実際の日付に置き換えてくださいね。変更したときは、画像と本文の両方が同じ内容かも確認します。
お客様が知りたいのは、色のルールを覚えることではなく、行きたい日にお店が開いているか、ということ。その答えを探す手間が減れば、お店の雰囲気も落ち着いて受け取っていただけそうです。
次のカレンダーを作るとき、色を変える前に、短い言葉を一つ添えてみる。きれいに作った気持ちと、迷わず読めることの両方を、大切にできたらと思います。
出典：W3C Web Accessibility Initiative「Designing for Web Accessibility」の色の使い方・コントラストに関する案内。確認日：2026年9月28日。https://www.w3.org/WAI/tips/designing/