スマートフォンの商品ページを見ているお客さんが、文字が小さく色も薄くて読みづらそうに目を細めている情景
商品ページ改善約11分編集：（商品ページ改善担当）

商品ページのアクセシビリティ入門｜alt・文字・色で誰にも届く

「写真もキャッチコピーも、ちゃんと作り込んだ。それなのに、なぜか買ってくれない人がいる」——そんなもやもやを感じたこと、ありませんか。自分のスマホで見ると、何の問題もなくきれいに見える。だからこそ、どこがいけないのか分からず、手の打ちようがない気がしてしまいますよね。

でも、少し想像してみてください。あなたのお客さんの中には、文字が小さいと読みづらい方、薄い色の文字が見えにくい方、片手で操作している方もいます。晴れた屋外で画面が反射して見えにくい、という状況だってよくあります。あなたの目には完璧に見えるページが、その人たちには「読めない・分からない・押せない」ページになっているかもしれないのです。これは特別な誰かのためだけの話ではありません。「誰にとっても読みやすく・使いやすいページ」は、結局すべてのお客さんにとって買いやすいページでもあります。今日は、その土台になる3つのポイントを一緒に見ていきましょう。

結論：商品ページのアクセシビリティ（年齢や障がい、使う環境にかかわらず、情報にアクセスして操作できること）は、特別な改修ではなく「土台を整える」ことで大きく前進します。優先すべきは3つ。(1)画像にalt（代替テキスト＝画像の内容を説明する文字情報）を書く、(2)文字を十分な大きさにして余白と行間をとる、(3)文字と背景の色のコントラスト（明暗の差）を十分につける。この3つは、目の見えにくい方や高齢の方だけでなく、スマホを屋外で見る人、急いでいる人にも効きます。さらにaltはSEO（検索からの流入を増やす工夫）にも、読みやすさはCVR（訪れた人のうち購入まで進んだ割合）にもプラスです。まずは主力商品1ページで、この3点を点検するところから始めましょう。

いま何が起きているか｜「読めない・押せない」は静かな離脱になる

お客さんは、商品ページで「読みづらい」「どこを押せばいいか分からない」と感じても、わざわざ問い合わせてはくれません。ただ静かにページを閉じるだけです。あなたには、その人がなぜ帰ったのか見えません。だから「写真もコピーも悪くないのに売れない」という、原因のつかめないもやもやだけが残ります。

ここで知っておきたいのは、これが一部の人だけの問題ではないということです。文字の小ささや色の薄さに困るのは、目の病気や高齢の方に限りません。明るい屋外で画面が反射しているとき、電車で揺れながら片手で操作しているとき、疲れて目がかすんでいるとき——誰もが「見えにくい・押しにくい」状況に一時的になります。つまりアクセシビリティを整えることは、ごく一部ではなく、あなたのお客さんの大きな割合に効く改善なのです。

そしてもう一つ、背景として知っておきたい動きがあります。2024年4月から、改正された障害者差別解消法により、民間の事業者にも「合理的配慮（障がいのある人が困らないよう、負担になりすぎない範囲で対応すること）」の提供が求められるようになりました。ウェブサイトそのものを直ちに完璧にする義務とまでは言えませんが、「できるだけ多くの人に情報が届く形にしておく」ことの重要性は、確実に高まっています。国もウェブアクセシビリティの考え方や進め方の情報（デジタル庁）を公開しています。難しく身構える必要はありません。土台を整えることが、法律の面でも、お客さんとの関係の面でも、そして売上の面でも、お店を守ることにつながります（→ 出典は記事末尾の「参考（公式・一次情報）」に記載）。

具体例｜「alt・文字・色」の3つの土台を整える

商品ページのアクセシビリティの3つの土台（代替テキスト・文字の大きさ・色の明暗差）を並べて示した概念図
「alt（代替テキスト）」「文字の大きさ」「色の差」の3つを整えると、見る人や環境が違っても情報が届きやすくなる。

やることは、デザインを一から作り直すことではありません。いまあるページの土台を点検して、整えるだけです。主力商品1つで、次の3つを見てみてください。

① alt（代替テキスト）を画像に書く altとは、画像が表示できないときや、画面の内容を音声で読み上げる機能（スクリーンリーダー）を使う人のために、その画像が何を写しているかを説明する文字情報です。目の見えにくい方は、この読み上げを頼りにページを理解します。altが空だと、その人には「画像」としか伝わらず、商品の魅力がまるごと抜け落ちてしまいます。書き方のコツは、見たままを具体的に、簡潔に。たとえば「商品」ではなく「白いマグカップを両手で包むように持っている様子」のように書きます。ここに検索されたいキーワードを不自然に詰め込むのは逆効果。あくまで画像の内容を正直に説明するのが基本です。なお、altは検索エンジンが画像を理解する手がかりにもなるため、Googleの画像に関するガイドラインでも適切な記述がすすめられています。AIを使った下書きのコツはAIで商品画像のaltテキストを自動生成するもあわせてどうぞ。

② 文字を十分な大きさにして、余白と行間をとる スマホで見たときに、目を近づけないと読めない文字になっていませんか。本文は小さすぎない大きさを基本にし、行間（行と行のすき間）と余白をしっかりとります。文字がぎゅっと詰まっていると、それだけで「読むのがしんどい」と感じて離脱につながります。とくに、送料・納期・注意事項といった買う前に必ず確かめたい情報を、小さな文字や薄い色で目立たなくしないこと。長い文章は、見出し・箇条書き・短い段落に分けると、誰にとっても一気に読みやすくなります。読みやすさの土台づくりは商品ページの読みやすさ設計もあわせて参考にしてください。

③ 文字と背景の色のコントラスト（明暗の差）を十分につける おしゃれに見せたくて、薄いグレーの文字を白い背景にのせていませんか。見た目は洗練されていても、明暗の差が小さいと、とたんに読めなくなる人が増えます。色の差をしっかりつけるのが基本です。また、「赤色の商品は売り切れです」のように色だけで意味を伝えないことも大切です。色の区別がつきにくい方には伝わらないので、「売り切れ」という文字やマークを必ずそえましょう。リンクやボタンも、色だけでなく下線や枠など色以外の手がかりでも分かるようにします。コントラストが足りているかは、無料のチェックツールでも確認できます。

あわせて効く小さな工夫 3つの土台に加えて、次を意識するとさらに多くの人に届きます。ボタンやリンクは指で押しやすい大きさにして、間隔をあける（隣を誤って押さない）、画像の中の文字に頼りすぎない（画像内の文字は読み上げられず拡大もしにくい。大事な情報は文字としても書く）、動画は音声なしでも分かるよう字幕や説明をそえる。ボタンまわりの文言は購入ボタン・注記のマイクロコピー改善、入力画面の配慮は入力フォーム最適化(EFO)完全ガイドも役立ちます。

進めるときに気をつけたいこと
・完璧を目指して止まらない：すべてを一度に直す必要はありません。影響の大きい主力ページの「alt・文字・色」から始め、少しずつ広げれば十分前進します。
・「配慮しています」と誇張しない：対応が不十分なのに「どなたでも完全に使えます」などと断定すると、かえって信頼を損ないます。できる範囲を正直に伝えましょう（根拠のない断定は景品表示法の観点でも避けるのが無難です）。
・法的な判断は専門家へ：合理的配慮の具体的な線引きや義務の範囲は状況により異なります。迷う場合は所管の情報や専門家に確認を。

あなたへの影響

明日やること

  1. 主力商品を1つ選び、スマホの文字サイズ設定を少し大きくした状態や、画面の明るさを下げた状態でページを開き、「読めるか・押せるか」を自分で体感する。
  2. ページ内の画像にaltが書かれているかを確認し、空のものに「見たままの具体的な説明」を書き足す。
  3. 送料・納期・注意事項など大事な情報が、小さな文字や薄い色で目立たなくなっていないかを点検し、十分な大きさ・濃さに直す。
  4. 文字と背景の色のコントラストを見直し、薄すぎる文字を濃くする。無料のコントラストチェックツールで確かめる。
  5. 「色だけで意味を伝えている箇所」（売り切れ表示など）に、文字やマークをそえる。
  6. ボタン・リンクが押しやすい大きさと間隔か確認する。1ページ整ったら、同じ型を他の商品ページにも広げる。

商品ページ アクセシビリティ チェックリスト

アクセシビリティと聞くと、専門的で難しい話に思えるかもしれません。でもその本質は、「顔の見えないお客さん一人ひとりを、置き去りにしない」という、とてもシンプルな気づかいです。あなたが丁寧に選んだ商品を、文字が読めない・色が見えないという理由だけで手に取ってもらえないのは、あまりにもったいない。今日、主力商品を1ページ、少し文字を大きくしたり画面を暗くしたりして開いてみてください。「あ、ここ読みにくいな」と気づけたその瞬間が、もっと多くの人に届くページへの第一歩です。

読みやすく整った商品ページを見たお客さんが安心した笑顔で注文を決め、それを見守る担当者も手ごたえを感じている明るい情景

関連記事・無料ツール

あなたの店の主力商品ページ、文字の大きさ・色の濃さ・altは「誰にでも届く形」になっていますか。無料診断で、読みやすさと操作のしやすさをどこから直せばいいか、優先順位を一緒に整理します。

参考（公式・一次情報）