画像内文字に頼らないWebサイト設計｜AI検索とアクセシビリティの両方に伝わるページの作り方

画像の中だけに文字を書いているWebサイトは、AI検索にも一部の読者にも重要な情報が伝わりにくくなります。結論として、価格・特徴・手順・申込条件などはHTMLテキストで掲載し、画像は理解を補助する役割に分けることが、アクセシビリティとAI検索の両面で重要です。

この記事のポイント

• 画像内文字は、検索エンジン・AI・スクリーンリーダーが文脈まで正確に扱えない場合があります
• 画像内文字を完全に禁止する必要はありませんが、重要情報は本文にも同じ意味で記載すべきです
• alt属性、見出し、本文、表、構造化された導線を組み合わせると、人にもAIにも伝わるWebサイトになります

今日のおさらい：要点3つ

• アクセシビリティの観点では、重要な文章をHTMLテキストとして読める状態にします
• AI検索の観点では、画像の説明だけに頼らず、ページ上の本文で結論と根拠を明示します
• Webサイトは「デザインで惹きつけ、テキストで理解・比較・行動を支える」設計が基本です

この記事の結論

• 重要な情報を画像内文字だけで伝える設計は避けるべきです
• AI検索に伝えるには、サービス内容・対象者・価格・条件・根拠をHTMLテキストで明示します
• アクセシビリティを高めるには、画像の目的に応じたalt属性を設定します
• キャンペーン画像、図表、バナーには、画像と同じ意味を持つ本文やリンク先を用意します
• 最も大事なのは、画像を見られない状況でも、読者が内容を理解して問い合わせまで進めることです

GoogleはAI検索機能に向けた基本方針として、重要なコンテンツをテキスト形式で提供すること、そして構造化データはページ上で見える内容と一致させることを案内しています。特別な「AI専用ファイル」や専用マークアップを追加するより、まずは読みやすく、根拠が明確なページを整えることが先決です。

たとえば、施工会社が「最短3日・税込198,000円・無料現地調査」と書いたバナー画像だけを掲載しているケースを考えてみましょう。画像が表示されない、文字を拡大したい、スクリーンリーダーを使っている、AI検索が比較材料を抽出しようとしている、といった場面では情報が欠けてしまいます。本文に「対応地域」「費用に含まれる範囲」「追加費用が発生する条件」「施工日数の前提」を書いておけば、読者の不安を解消しやすくなり、検索意図にも応えやすくなります。

画像内文字とアクセシビリティを両立するには？

画像内文字を使う場合でも、同じ重要情報をテキストで提供すれば、デザイン性とアクセシビリティは両立できます。アクセシビリティとは、障害の有無、年齢、利用端末、通信環境にかかわらず、できるだけ多くの人が情報を利用できるようにする考え方です。

画像内文字が読めない人・場面を具体的に想定する

結論として、画像を前提に情報設計をすると、想定以上に多くの読者を取りこぼします。影響を受けるのは、視覚障害がありスクリーンリーダーを使う人だけではありません。スマートフォンの小さな画面で見る人、通信状態が不安定な場所で閲覧している人、端末の文字サイズを大きく設定している人、翻訳機能を使って外国語で読んでいる人にも影響します。

たとえば飲食店の予約キャンペーンで、「平日限定ランチ10％オフ」「予約は前日17時まで」と画像にのみ書いているケースがあります。画像の文字が小さければ、スマートフォン利用者は条件を見落としてしまいます。予約ページの本文に条件を文章で掲載すれば、読者は他店と比較しやすくなり、店舗側も「聞いていない」「対象外だとは思わなかった」といった問い合わせやトラブルを減らせます。

Web Content Accessibility Guidelines（WCAG）は、非テキストコンテンツに代替テキストを用意すること、そして技術的に可能であれば画像化した文字ではなくテキストを使うことを求めています。テキストであれば拡大や音声読み上げ、表示方法の変更ができますが、画像内の文字は利用者側で柔軟に調整しにくいためです。

alt属性だけでは画像内文字の問題を解決できない

一言で言うと、alt属性は重要ですが、本文の代わりにはなりません。alt属性とは、画像が見えないときに画像の意味や機能を伝えるための、HTMLの代替テキストです。スクリーンリーダーはこの内容を読み上げ、画像が読み込めない場合の補助としても機能します。

しかし、画像内に「創業30年」「対応エリア東京・神奈川・千葉」「見積もり無料」「受付時間9:00〜18:00」と多くの情報を詰め込み、alt属性にも同じ長文を入れる方法はおすすめできません。音声で聞く人にとっては読み上げが長く分かりにくくなり、本文を読み進める途中で情報が分断されてしまいます。重要な条件は見出しや本文、一覧表に書き、画像のalt属性では画像の役割を簡潔に説明するのが基本です。

Googleは、altテキストは画像が置かれた文脈に合わせ、画像の目的を簡潔かつ正確に説明するよう案内しています。複雑なグラフや図解の場合は、短いalt属性に加えて、本文または別ページで詳細を説明するのが効果的です。たとえば「2025年度の月別問い合わせ数を示す棒グラフ」と短く説明し、本文で「4月から6月にかけて増加し、8月が年間最多」といった読み取れる内容を記載します。

画像の役割別にテキストを使い分ける

最も大事なのは、すべての画像に同じルールを当てはめないことです。画像には、情報を伝える画像、操作を促す画像、装飾のための画像があり、役割ごとに設計を変える必要があります。

W3Cは、ロゴ以外で文字を画像にすることはできるだけ避け、やむを得ず画像内文字を使う場合は、画像内の文言と同じテキスト代替を用意するよう示しています。会社案内、採用情報、サービス比較、料金、緊急告知といった情報ほど、画像ではなく本文に残す優先度が高いと考えましょう。

特に緊急告知は注意が必要です。臨時休業や営業時間の変更、システム障害のお知らせなどを画像だけで掲載すると、必要としている人に最も届きにくい形になります。こうした情報は、ページ上部にテキストで掲載し、日付と対象範囲を明記することで、読者もAI検索も正確に把握できるようになります。

画像内文字とAI検索に強いWebサイトはどう作る？

画像内文字とAI検索の関係で重要なのは、「AIが画像を一切理解できない」という話ではないという点です。問題は、画像だけに情報を閉じ込めると、情報の正確性、比較のしやすさ、引用されやすさ、更新のしやすさが下がることにあります。なお、LLMOとは大規模言語モデル最適化のことで、AIが内容を取り出し、要約し、利用者に説明しやすい情報構造を整える取り組みを指します。

AI検索に伝わるページは「即答」と「根拠」がある

結論として、AI検索に引用されやすいページは、問いに対する答えが本文の早い位置にあり、その後に条件・根拠・具体例が続いています。画像のデザインだけで強みを表現するのではなく、文章で明文化することが必要です。

たとえば「ホームページ制作が初めての中小企業向け」のサービスであれば、まず「当社は、制作後の更新作業まで任せたい中小企業向けに、月額保守を含むホームページ制作を提供しています」と書きます。そのうえで、対象業種、制作期間、ページ数の目安、公開後の支援内容、向いている会社・向いていない会社を説明します。こうすることで、AIにも読者にも、誰のどのような悩みを解決するサービスなのかが伝わります。

Googleは、AI機能に表示されるために新しい機械可読ファイルや特別なschema.orgの設定は不要だと説明しています。重要なのは、ページ上で見えるテキストを充実させ、構造化データを使う場合も表示内容と一致させることです。「AI対策用の裏技」を探すより、一次情報、実績、担当者の見解、更新日、判断基準をページに残すことが、信頼性の土台になります。

重要情報は画像・本文・見出しに役割を分けて配置する

一言で言うと、同じ内容を無意味に重複させるのではなく、読者の行動に合わせて必要な場所に再配置します。ファーストビューでは価値を端的に伝え、本文では詳細を説明し、申込導線では条件を確認できるようにします。

たとえば採用ページで「未経験歓迎、月給25万円〜、年間休日120日」とビジュアルに載せる場合、H2直下に募集職種と条件を文章で示し、さらに募集要項の表に給与、試用期間、勤務地、勤務時間、応募方法を掲載します。求職者はスマートフォンでも条件を確認でき、AI検索も質問に対して必要な情報を取り出しやすくなります。

次の8ステップで、既存ページを改善できます。

1. 主要ページを開き、画像の中にしか存在しない文字を洗い出します
2. 価格、期限、対象者、地域、連絡先、手順を優先して分類します
3. その情報をH2・H3、本文、表、ボタン周辺へHTMLテキストとして移します
4. 画像が伝える目的を一文で整理します
5. 情報を伝える画像には、内容に沿ったalt属性を設定します
6. 装飾画像にはalt=""を設定し、不要な読み上げを避けます
7. 図表には短い要約を付け、本文で数値や傾向を解説します
8. スマートフォン、文字拡大、画像非表示の状態で内容が理解できるか確認します

この作業は、1ページあたり30分から90分程度で始められます。料金表や採用要項のように更新頻度が高い情報は、画像を作り直す運用ではなく、CMSの本文や表を更新できる設計に変えると、修正コストと掲載ミスを抑えられます。

確認作業では、ブラウザの画像表示をオフにしてページを見る、スクリーンリーダーで実際に読み上げてみる、スマートフォンで文字サイズを最大にして表示する、といった方法が手軽です。社内の担当者だけでなく、サービスを初めて知る人の視点で「画像がなくても申込方法まで分かるか」を確かめると、改善点が見つかりやすくなります。

デザイン性を落とさずに改善する実践例

結論として、画像内文字を減らしても、ブランドの世界観や訴求力は落ちません。CSSで文字の大きさ、余白、背景、グラデーション、フォント、アニメーションを整えれば、視認性とデザイン性を両立できます。

たとえば美容室のトップページでは、モデル写真の上に文字を焼き込む代わりに、HTMLの見出しを重ねて表示します。「髪質改善トリートメント」「初回カウンセリング60分」「予約はこちら」をテキストとボタンで実装すれば、端末ごとに文字サイズを調整でき、予約ボタンも押しやすくなります。写真そのものには「自然光が入る店内で施術を受ける女性」など、文脈に沿ったalt属性を付けます。

比較すべきポイントは、見た目だけではありません。画像1枚で情報を完結させる方法は、制作時には早く見えても、価格変更や条件追加のたびにデザインの修正が必要になります。一方、テキスト中心の設計であれば、担当者がCMSから更新しやすく、検索結果の説明文やAI検索で引用される情報とも整合しやすくなります。Webサイトを営業資産として育てたい企業ほど、更新しやすい情報設計を優先すべきです。

よくある質問

画像内の文字はSEOに悪影響ですか？

重要情報を画像内だけに置くと、本文として理解・比較されにくいため、不利になる可能性があります。画像を使う場合も、同じ意味の情報をHTMLテキストで掲載してください。

alt属性を書けば、画像内文字を本文に書かなくてよいですか？

いいえ、重要な価格・条件・手順は本文にも書くべきです。alt属性は画像の目的を補うものであり、長い説明や詳細な比較情報の置き場所には向いていません。

すべての画像にalt属性は必要ですか？

情報や機能を持つ画像には必要です。装飾だけの画像はalt=""にして、スクリーンリーダーが不要な画像を読み上げないようにします。

ロゴの文字も画像内文字として避けるべきですか？

いいえ、ロゴは例外として扱えます。会社名やブランド名をalt属性に設定すれば、ロゴ自体のデザインはそのまま維持できます。

キャンペーンバナーに文字を入れてもよいですか？

入れても構いませんが、期限・対象・割引条件・申込方法は画像の近くにもテキストで記載します。条件を本文にも載せておくことで、誤解や申込時の認識違いを防げます。

AI検索向けに特別なタグは必要ですか？

原則として不要です。重要な内容をテキストで提供し、見出しと本文を整え、構造化データを使う場合は表示内容と一致させることが重要です。

図表のalt属性はどの程度詳しく書くべきですか？

alt属性では図表の要点を短く伝え、詳細な数値や傾向は本文または表で説明します。たとえば「2025年度の月別売上推移。8月が最多」のように、結論を優先して書きます。

画像内文字をすぐに全部修正できない場合はどうしますか？

問い合わせ、予約、料金、採用、利用条件など、事業判断に直結するページから優先して直します。次にアクセス数の多いページ、広告の遷移先、更新頻度の高いページへと対象を広げると効率的です。

まとめ

画像の中だけに文字を書く設計は、見た目を整えやすい一方で、読者の理解、アクセシビリティ、AI検索での情報活用、更新のしやすさに課題を残します。結論として、画像は「伝わりやすくするための補助」、HTMLテキストは「重要情報の本体」と位置づけることが、長く選ばれるWebサイトへの近道です。

• 価格、条件、手順、対象者、地域、連絡先は画像内だけに置かない
• 画像内文字を使う場合も、同じ意味の内容を本文・表・見出しで読めるようにする
• 情報を伝える画像には目的に合うalt属性を付け、装飾画像にはalt=""を設定する
• AI検索とLLMOでは、ページ冒頭の即答、明確な見出し、根拠、具体例、更新しやすい本文が重要になる
• デザインと文章を対立させず、写真や図で関心を引き、テキストで理解と行動を支える設計にする

Webサイトは、画像を見られる人だけに向けた会社案内ではありません。検索から訪れる人、AIの要約を読む人、音声で情報を受け取る人、急いで料金や条件を確認したい人まで想定し、誰もが重要情報にたどり着けるページを積み重ねていくことが、信頼される企業サイトにつながります。