色だけで伝えていないか ― 見え方が違う人にも読めるホームページ

1. 「赤い字のところが必須だって、書いてあるんですけどね」

中小企業の経営者の方とお話していて、こんな言葉を聞くことがあります。

「問い合わせフォームで、必須の欄が抜けたまま送ろうとする人がいるみたいなんです。赤い字の項目は必須ですって、上に書いてあるんですけどね。ちゃんと読んでもらえないんでしょうか」

読んでいないのではないかもしれません。赤い字が、赤く見えていない可能性があります。

色の見え方は、人によって違います。赤と緑、赤と茶色のように、ある組み合わせの色が見分けにくい人がいます。それに加えて、同じ人でも、明るい屋外でスマートフォンを見れば、色の差は分かりにくくなります。どちらの場合も、色の違いだけで伝えている情報は、そのまま抜け落ちます。

ほかの記事との違い

色の話は、これまでにも2本書いています。ホームページの色と書体を、どう決めるか は、サイトの色を社内でどう決めるかの話です。年配のお客様が多い会社の、ホームページの直し方 は、年配のお客様に向けて文字や色やボタンを全体として見直す話です。

この記事は、そのどちらとも違います。色がもう決まっているサイトで、色だけを頼りに意味を伝えている場所を探し出し、色以外の手がかりを足す話です。色を変えなくても直せることがほとんどです。

この記事で書くこと

• 色の見え方が、人と場所で変わること
• 色だけで意味を伝えている場所の探し方
• 色に、文字と記号を添える書き方
• 背景と文字の濃さの差、薄い灰色の文字
• 写真の上の文字と、リンクの見分け
• 自社でできる、簡単な確かめ方

2. 色の見え方は、人と場所で変わる

まず、なぜ色だけでは伝わらないのかを整理します。理由は、見る人の側と、見る場所の側の2つです。

見分けにくい色の組み合わせがある人がいる

生まれつき、あるいは年齢とともに、特定の色の組み合わせが見分けにくい人がいます。よく挙げられるのは、赤と緑、赤と茶色、青と紫のような組み合わせです。見え方の度合いも、人によってさまざまです。

ここで大事なのは、その人たちにとって、色の違いが「無い」のと同じになる場面があるということです。赤い字で書いた「必須」の印も、緑で塗った「空きあり」の日も、ほかの文字や日と同じに見えるかもしれません。本人は、自分が見落としていることに気づけません。

明るい屋外では、誰でも色の差が分かりにくくなる

もう1つは、見る場所です。日差しの強い屋外でスマートフォンを開くと、画面は白っぽくかすみます。淡い色どうしの差や、似た明るさの色どうしの差は、ほとんど消えてしまいます。

画面の明るさを下げている人、省電力の設定で暗くしている人、古い画面を使っている人もいます。ホームページは、作った人が確かめた条件で見られるとは限りません。

印刷や白黒コピーで、色は消える

見落とされがちなのが、紙です。料金表や地図を印刷して社内で回す人、白黒のプリンターで印刷する人がいます。白黒で印刷された瞬間に、色で分けていた情報はすべて同じ灰色になります。

作る側の画面では、気づけない

こうした問題が残る理由は単純です。作る人は、明るい室内で、大きく色のきれいな画面で確かめています。その条件では、赤も緑もはっきり見えます。作る側の画面で読めることと、見る側の画面で読めることは、別の話です。

3. 色だけで意味を伝えている場所を探す

では、自社のサイトのどこに、色だけで伝えている場所があるのか。よくある場所を挙げます。

よくある7つの場所

• 問い合わせフォームの必須項目 ― 「赤字の項目は必須です」とだけ書いてある
• 入力の誤り ― 間違えた欄の枠が赤くなるだけで、何が違うのかが書かれていない
• 予約や空き状況のカレンダー ― 緑が空きあり、灰色が満席、のように色で塗り分けている
• 営業日のカレンダー ― 定休日を赤い数字だけで示している
• 料金表やプランの比較 ― おすすめのプランや、対応している項目を色だけで示している
• 地図や対応エリア ― 「青のエリアは当日、緑のエリアは翌日」のように色で区分している
• グラフ ― 線や棒の区別を、色と凡例だけに頼っている

見つけ方は「色の名前」で探すこと

いちばん簡単な探し方は、サイトの文章の中から色の名前を探すことです。「赤字の」「緑色の」「青いボタン」「黄色の部分」。こうした言葉が出てきたら、その近くで色だけに頼った説明をしている可能性があります。

文章に色の名前が出てこない場所もあります。カレンダーや地図のように、色で塗るだけで説明そのものが無い場所です。こちらは、次の章で書く白黒表示で見ると、すぐに分かります。

4. 色に、文字と記号を添える

直し方の基本は1つです。色は残したまま、色以外の手がかりを1つ足す。手がかりには、文字、記号、形、位置があります。

いちばん強いのは、文字

迷ったら、文字で書いてください。「必須」「満席」「休」「おすすめ」。文字は、色が見えなくても、白黒で印刷しても、画面を読み上げても、同じ意味のまま届きます。

必須の欄なら、項目名の横に小さく「必須」と書きます。全部の欄が必須なら、「すべての項目にご記入ください」と最初に書いて、印を付けないという手もあります。反対に、必須ではない欄のほうが少ないなら、そちらに「任意」と書くほうが分かりやすくなります。フォーム全体の作り方は 問い合わせフォームで、人はどこで手を止めるのか にまとめてあります。

記号は、形が違うものを選ぶ

予約カレンダーのように、文字を入れる場所が狭いときは記号を使います。このとき、形が違う記号を選ぶのがこつです。

「○」「△」「×」は、形がはっきり違うので、色が見えなくても区別できます。反対に、同じ丸を色だけ変えて並べるのは、色だけで伝えているのと変わりません。記号を使ったら、カレンダーのすぐ近くに「○は空きあり、△は残りわずか、×は満席」と意味を書いておきます。

色を指す言い方を、やめる

文章の側にも、直すところがあります。「緑のボタンを押してください」「赤い部分をご確認ください」のように、色で場所を指す言い方です。

色の見分けがつかない人には、どのボタンのことか分かりません。ボタンに書いてある言葉で指してください。「『送信する』のボタンを押してください」。部分を指すなら、見出しの名前で指します。「『ご注意』の欄をご確認ください」。言葉で指すと、色を変えたときに文章を直す手間もなくなります。

グラフは、名前を線のそばに書く

グラフで線や棒を色分けしている場合は、凡例を離れた場所にまとめるより、それぞれの線の端や棒の上に、名前を直接書くほうが伝わります。色と凡例を見比べる作業がいらなくなるからです。

線の形を変える方法もあります。1本は実線、1本は点線。棒グラフなら、塗りの模様を変える。こうしておくと、白黒で印刷しても見分けられます。図や表の作り方は 文章だけでは伝わらないことを、図や表にする に書きました。

5. 背景と文字の濃さの差

ここからは、色の「種類」ではなく、濃さの話です。色だけで意味を伝えていなくても、文字そのものが背景に溶けていれば読めません。

見るのは、色味ではなく濃さの差

文字と背景の組み合わせで大事なのは、赤か青かという色味の違いではありません。明るい色と暗い色の差、つまり濃さの差です。

たとえば、緑の背景に赤い文字。色味はまったく違いますが、濃さが近いと、色の見分けにくい人には同じ濃さの面に見えます。屋外の画面でも、文字が背景に沈みます。逆に、白い背景に黒に近い文字なら、色味の見え方がどうであっても読めます。

薄い灰色の文字は、思っているより多い

本文を薄い灰色にしているサイトは減ってきましたが、本文以外の場所に、薄い灰色が残っていることがよくあります。

• 注意書きや但し書き ― 「※価格は税別です」のような小さい文字
• 入力欄の中の記入例 ― 「例：山田太郎」のような薄い文字
• 日付や更新日 ― お知らせの一覧に並ぶ日付
• フッターの会社情報 ― 住所や電話番号が、背景とほぼ同じ色になっている

注意書きは、小さくて薄いほど読み飛ばされます。読み飛ばされては困る内容ほど、薄くしないでください。料金の条件やキャンセルの決まりが薄い灰色で書いてあると、あとで「書いてあったのに」「読めなかった」という行き違いの元になります。入力欄の記入例は、欄が空のときの見本として薄くするのは構いませんが、項目名そのものは欄の外に、濃い文字で書いておきます。

色の上の白い文字

ボタンや帯の上に白い文字を載せるときも、濃さの差を見てください。黄色、水色、黄緑のような明るい色の上に白い文字を載せると、色の見え方に関係なく読みにくくなります。

明るい色を使いたいなら、上に載せる文字を黒に近い色にします。白い文字を使いたいなら、下に敷く色を濃くします。どちらか一方を変えれば足ります。色そのものの決め方は、色と書体の記事のほうで扱っています。

6. 写真の上の文字と、リンクの見分け

濃さの差が問題になる場所は、ほかにもあります。とくに見落とされやすい2つを取り上げます。

写真の上に文字を載せる場合

トップページの大きな写真の上に、白い文字で見出しを載せる形はよく見かけます。写真は場所によって明るさが違うので、空や白い壁にかかった部分で、白い文字が消えます。

直し方は3つあります。

• 文字の後ろに帯を敷く ― 文字のすぐ後ろに、半透明か不透明の濃い帯を置く
• 写真全体を暗く落とす ― 写真の上に薄い黒を重ねて、文字との差を出す
• 写真と文字を分ける ― 写真の下や横に、無地の背景で文字を置く

いちばん読みやすいのは3つ目です。どの方法でも、スマートフォンで見たときに、文字が写真のどこにかかるかを確かめてください。パソコンでは暗い部分にかかっていた文字が、スマートフォンでは写真の位置がずれて、明るい部分にかかることがあります。

リンクが、色だけで見分けにくい

文章の中のリンクを、色だけで示しているサイトがあります。本文が黒、リンクが濃い青。色味は違いますが、濃さが近いと、色の見分けにくい人や屋外の画面では、どこがリンクか分かりません。

いちばん簡単な直し方は、リンクに下線を付けておくことです。下線は色が見えなくても分かります。デザインの都合で下線を外したくなる場面もありますが、本文の中のリンクだけは残してください。

反対に、リンクではない文字に下線を付けたり、見出しをリンクと同じ色にしたりするのも避けてください。押せるものと押せないものが混ざると、読む人は試しに押してみるしかなくなります。

選んでいる状態も、色だけにしない

タブやメニューで、今どこを見ているかを色だけで示している場合も同じです。選んでいるタブだけ色が変わる形だと、色が見分けにくい人には、どれを選んでいるか分かりません。選んでいるものには、下線や太字、枠などを足して、形でも分かるようにしておきます。

スマートフォンで見たときの、そのほかのつまずきは スマートフォンで見たときに、人が離れる7つのこと にまとめてあります。

7. 自社でできる、簡単な確かめ方

ここまでの点検は、専門の道具が無くても始められます。一般によく使われる方法を、順番に並べます。

確かめる順番

全部のページを一度に見る必要はありません。読み違えたときに困る場所から順に見てください。

• 問い合わせと予約のフォーム ― 必須の印と、入力の誤りの知らせ方
• 予約や営業日のカレンダー ― 空きや休みの区別
• 料金表と対応エリア ― どのプランか、どの地域か
• トップページの最初の画面 ― 写真の上の文字

社内で、ほかの人にも見てもらう

自分で作った画面は、何が書いてあるか知っているので、読めてしまいます。確かめるときは、そのページを初めて見る人にも頼んでください。家族や、ふだんサイトに関わっていない社員で構いません。

「どこが必須か分かりますか」「この日は予約できますか」と聞いて、迷わず答えられるかを見ます。迷った場所が、直す場所です。文章そのものの読みやすさは ホームページの文章を、読みやすく直す で扱っています。

8. 雄喜晃の伴走：色を残したまま、色以外の手がかりを足してお渡しします

私たち雄喜晃のホームページ制作では、色だけに頼った表示を、公開前に探して直します。色やデザインの好みは貴社に伺いながら、その色で読めない人がいないかを、こちらで確かめます。

私たちがやること

フォームの必須の欄には「必須」と文字で書き、入力の誤りは、どこがどう違うのかを文字で知らせる形にします。カレンダーや地図、料金表は、色に加えて記号や文字でも区別できるようにします。本文の中のリンクには下線を付け、注意書きや日付も、背景との濃さの差が十分にある色で載せます。

公開前には、画面を白黒にした状態と、屋外のスマートフォンに近い条件で見て、区別がつかない場所が残っていないかを確かめます。公開後に料金表やカレンダーを差し替えるときも、同じ扱いにします。月5回までの更新代行が月額に含まれているので、差し替えのたびに見直しまで含めて反映します。

料金と条件

料金は制作費0円、月額8,800円（税別）からです。6ページ構成のプランは月額13,800円（税別）です。サーバー、独自ドメイン、SSL、保守はすべて月額に含まれます。

最低契約期間は6ヶ月です。7〜35ヶ月で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、サイトをお渡しします。

私たちがやらないこと

先に書いておきます。私たちは、見え方についての医学的な判断や助言はいたしません。私たちがやるのは、色以外の手がかりを足して、誰にとっても読み違えにくい表示にすることまでです。

また、何かの規格や基準に適合していることを証明する検査はお受けしていません。色を直すことで、検索の順位が上がる、問い合わせが増えるとお約束することもいたしません。貴社が大切にしている色を、こちらの判断だけで変えることもしません。変えたほうが読みやすくなる場合は、理由をお伝えしてご相談します。

実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月から活動しています。

「赤字で書いてあるのに、読んでもらえない」という方は、一度ご相談ください。

9. まとめ：色は残して、もう1つの手がかりを足す

色の見え方が違う人にも読めるホームページにするために押さえることは、5つです。

• 色の見え方は、人と場所で変わる ― 見分けにくい色の組み合わせがある人がいる。屋外の画面や白黒印刷でも色は消える
• 色だけで意味を伝えない ― 必須、空き状況、休み、エリア、グラフ。色に文字か記号を1つ足す
• 色の名前で場所を指さない ― 「緑のボタン」ではなく、ボタンに書いてある言葉で指す
• 見るのは濃さの差 ― 薄い灰色の注意書き、明るい色の上の白い文字、写真の上の文字を見直す
• リンクには下線 ― 押せるものと押せないものを、色以外でも分ける

色で目立たせることは、悪いことではありません。色を見分けられない人や場面にも、同じ情報が別の道で届くようにしておく。それだけで、色を変えずにサイトは読みやすくなります。

まずは今日、スマートフォンの画面を白黒にして、自社の問い合わせフォームを開いてみてください。どこが必須か分かるかどうか。そこから始めるのがいちばん早いです。

ぜひ一度、お話を聞かせてください。貴社の色を大切にしたまま、誰にでも読める形にするところから、ご一緒します。