alt属性とは｜LPの画像に書く代替テキストの書き方

｜広告運用ノウハウ公開中！

より詳しく知りたい方は資料をダウンロード！

LPの画像にaltを入れるよう言われたけれど、何を書けばいいのか分からない。ファーストビューやバナーのように文字を画像にしたものは、どこまで書けばいいのか。飾りの画像にも必要なのか。LPを担当していると、こうした疑問が出てきます。

alt属性（altタグと呼ばれることもあります）は、画像が表示されないときや、スクリーンリーダーで読み上げるときに、画像の代わりになるテキストです。HTMLの仕様では、画像の種類によって何を書くかが決まっています。

この記事では、HTMLの仕様（HTML Living Standard）、W3Cのアクセシビリティの資料、MDN、Google 検索セントラル（2026年10月28日時点の記載）をもとに、alt属性の役割と、LPの画像ごとの書き方をまとめます。

1. alt属性とは｜画像の代わりになるテキスト

1-1. img 要素に付ける「代替テキスト」

alt属性は、HTMLの <img> 要素に付ける属性で、ページ内の画像を置き換えることができるテキストを指定します（出典：img 画像埋め込み要素｜MDN）。<img src="photo.jpg" alt="画像の代わりになる文"> のように書きます。

「altタグ」と呼ばれることもありますが、alt はタグ（要素）ではなく、img 要素に付ける属性です。指しているものは同じです。

HTMLの仕様では、別に定めがある場合を除き、alt属性は必ず指定し、値を空にしてはならず、画像の適切な代わりになるものでなければならないとされています（出典：HTML Living Standard 4.8.4.4 Requirements for providing text to act as an alternative for images｜WHATWG）。「別に定めがある場合」の代表が、後で説明する装飾画像です（3-4）。

1-2. alt属性が使われる場面

ブラウザは常に画像を表示するわけではありません。MDNは、視覚ブラウザ以外（視覚障碍者向けのものを含む）で閲覧された場合、ユーザーが画像を非表示に設定している場合、画像が無効だったり未対応の形式だったりした場合を挙げ、そのときブラウザは画像を alt の文字列に置き換えると説明しています。画像をコピー＆ペーストしたときや、リンクされた画像をブックマークしたときにも使われます（出典：img 画像埋め込み要素｜MDN）。

W3Cのアクセシビリティの資料は、代替テキストが役立つ人や場面として、スクリーンリーダーの利用者（読み上げや点字で伝わる）、音声入力ソフトの利用者、データ通信を抑えるために画像を切っているモバイルの利用者、検索エンジン（画像がインデックスされる）を挙げています（出典：Images Tutorial｜W3C WAI）。

1-3. 書き方の大原則｜画像を alt に置き換えても意味が変わらない

HTMLの仕様は、alt を書くときの最も一般的なルールを「すべての画像を alt の文字に置き換えても、ページの意味が変わらないこと」としています。画像を入れられなかったら代わりに何と書いたかを考える、電話でページを読み上げるとき画像があることに触れずに何と言うかを考える、という書き方のヒントも載っています（出典：HTML Living Standard 4.8.4.4.1 General guidelines｜WHATWG）。

同じ節には、alt に画像のキャプションやタイトルを入れるべきではないこと、画像の隣の文章ですでに伝えている情報を繰り返すべきではないことも書かれています（出典：同上）。MDNも、alt に「画像」のような画像の存在を説明する言葉や、ファイル名を書くべきではないとしています（出典：img 画像埋め込み要素｜MDN）。

2. alt属性とtitle属性・ファイル名の違い

alt と混同しやすいのが title 属性です。MDNは、title 属性は alt 属性の代わりに使えず、alt と同じ値を title にも書くと、スクリーンリーダーが説明を2回読み上げて混乱させる可能性があると説明しています（出典：img 画像埋め込み要素｜MDN）。

画像のファイル名も alt の代わりにはなりません。alt属性がない画像では、一部のスクリーンリーダーが代わりにファイル名を読み上げることがあります（出典：同上）。IMG_0012.png のようなファイル名が読み上げられても、利用者には画像の内容が伝わりません。

3. 画像の種類別 alt属性の書き方

W3Cのアクセシビリティの資料は、画像を目的によって分類し、それぞれ代替テキストの書き方を示しています（出典：Images Tutorial｜W3C WAI）。LPでよく使う画像に当てはめると、次の図の順に判断できます。

3-1. 情報を伝える画像（写真・イラスト）

商品の写真や、使っている場面のイラストのように情報を伝える画像は、画像が伝える意味や内容を短く書きます。W3Cは、見た目をそのまま文字にした描写ではなく、伝えたい意味を書くよう説明しています（出典：Informative Images｜W3C WAI）。MDNの例では、alt="画像" は悪い例、alt="海岸に立っているイワトビペンギン" が良い例です（出典：img 画像埋め込み要素｜MDN）。

3-2. 文字を画像にしたもの（ファーストビュー・バナー）

LPのファーストビューやバナーには、キャッチコピーや見出しを画像にしたものがよくあります。HTMLの仕様では、文字を画像にしたもので、目的がその文字を伝えることにある場合、alt は画像に書かれた文字と同じ文字でなければならないとされています。文字の装飾について触れる必要はありません（出典：HTML Living Standard 4.8.4.4.5 Text that has been rendered to a graphic for typographical effect｜WHATWG）。

ただし、画像の中の文字が、すぐ近くに実際の文字（HTMLのテキスト）としても書かれている場合は、alt を空（alt=""）にします。同じ内容を2回読み上げないためです（出典：An alt Decision Tree｜W3C WAI）。

そもそも、文字は画像にせず、CSSで装飾した実際の文字で表示するほうが、拡大しても崩れず、利用者が色を変えることもできるとW3Cは説明しています（出典：Images of Text｜W3C WAI）。WCAG 2.2 の達成基準1.4.5（レベルAA）も、技術的に可能なら文字の画像ではなく文字で情報を伝えることを求めています。ロゴタイプは例外です（出典：Web Content Accessibility Guidelines (WCAG) 2.2｜W3C）。

3-3. リンクやボタンになっている画像（CTA）

「お申し込みはこちら」のようなボタンを画像で作っている場合、その画像は「機能を持つ画像」です。HTMLの仕様では、文字のないリンクやボタンの中に画像だけがあるとき、alt はリンクやボタンの目的を伝えるものでなければならないとされています（出典：HTML Living Standard 4.8.4.4.2 A link or button containing nothing but the image｜WHATWG）。

W3Cは、「プリンター」ではなく「このページを印刷」、「虫めがね」ではなく「検索」のように、画像の見た目ではなく起こる動作を書くよう説明しています。機能を持つ画像の alt がない、または空だと、スクリーンリーダーはファイル名や画像のURL、リンク先のURLを読み上げるのが一般的だとしています（出典：Functional Images｜W3C WAI）。

3-4. 装飾の画像は alt="" にする

区切り線や背景の模様のように、ページの理解に必要な情報を持たない装飾の画像には、空の alt（alt=""）を指定します。W3Cは、装飾画像の alt属性を省くこともできないとしています。省くと、一部のスクリーンリーダーが画像のファイル名を読み上げるためです（出典：Decorative Images｜W3C WAI）。

HTMLの仕様では、サイト全体のデザインの一部になっている装飾画像は、HTMLではなくCSSで指定すべきとされています。本文で触れない装飾画像を img 要素で置く場合は、alt属性を書き、値を空文字にしなければなりません（出典：HTML Living Standard 4.8.4.4.8 A purely decorative image｜WHATWG）。

3-5. グラフや図

グラフや複雑な図のように多くの情報を含む画像は、その情報をページの別の場所にも書きます（出典：An alt Decision Tree｜W3C WAI）。LPで実績のグラフを画像で載せる場合は、画像の近くに、グラフが示している内容を文章や表でも書いておきます。

4. LPの画像に alt属性を書く例

LPの画像を3章の分類に当てはめると、次のようになります。画像の中の文言は説明用の例です。

LPの画像	分類	alt の書き方の例
キャッチコピーを画像にしたファーストビュー	文字の画像	画像の中の文字と同じ文を書く（例：alt="〇〇で、毎日の△△をもっと手軽に"）
同じキャッチコピーをHTMLの見出しでも書いている場合	文字の画像（文字が近くにある）	alt=""
「お申し込みはこちら」の画像ボタン	機能を持つ画像	ボタンの行き先・動作を書く（例：alt="お申し込みフォームへ進む"）
商品の写真	情報を伝える画像	写真が伝える内容を短く書く（例：alt="〇〇の本体と付属品"）
区切り線・背景の模様	装飾画像	alt=""

ファーストビューに文字が多い画像を使っている場合も、HTMLの仕様では alt は画像の文字と同じ文です。alt が長くなるときは、キャッチコピーの一部をHTMLの文字に移すことも検討します（3-2）。バナー画像そのものの作り方は「広告バナーの作り方とは？デザインのコツと成功事例を紹介」で解説しています。

5. Google検索での alt属性の扱い

5-1. 画像を理解するための最も重要な属性

Googleは、画像に関するメタデータを提供するうえで最も重要な属性が代替テキストだとしています。代替テキストは、スクリーンリーダーを使うユーザーや低帯域幅のネットワークを使っているユーザーなど、画像を見られないユーザー向けの補助機能としても役立ちます。Googleは代替テキストに加えて、コンピュータ ビジョン アルゴリズムやページのコンテンツも使って画像のテーマを理解し、画像をリンクとして使う場合は代替テキストをアンカーテキストとして使えるとしています（出典：Google 画像検索 SEO ベスト プラクティス｜Google 検索セントラル）。

5-2. キーワードを詰め込まない

代替テキストは、適切にキーワードを使って、ページの内容に沿った情報に富むものにします。alt属性にキーワードを羅列すること（キーワードの乱用）は、ユーザーエクスペリエンスを下げるだけでなく、サイトがスパムとみなされる要因になる場合もあるとされています（出典：同上）。

5-3. CSSの背景画像はインデックスされない

Googleは、<img> 要素の src 属性の画像は検出できますが、CSSの画像はインデックスに登録しないとしています（出典：同上）。CSSの背景画像には alt属性を付けられないため、内容を伝えたい画像は img 要素で置きます。反対に、装飾だけの画像はCSSで指定するのがHTMLの仕様の考え方です（3-4）。

6. alt属性とアクセシビリティの基準・法令

6-1. WCAG 2.2 の達成基準1.1.1（レベルA）

W3Cのアクセシビリティの国際的なガイドラインWCAG 2.2では、達成基準1.1.1「非テキストコンテンツ」（レベルA）で、利用者に示すすべての非テキストコンテンツに、同じ目的を果たすテキストの代替を用意することを求めています。純粋な装飾や見た目の整形だけに使うものは、支援技術が無視できるように実装するとされています（出典：Web Content Accessibility Guidelines (WCAG) 2.2｜W3C）。装飾画像の alt="" は、この「無視できる」実装にあたります。

6-2. 障害者差別解消法と事業者の合理的配慮

障害者差別解消法は第8条第2項で、事業者に対し、障害者から社会的障壁の除去を求める意思の表明があり、負担が過重でないときは、必要かつ合理的な配慮をしなければならないと定めています。第5条では、そのための環境の整備に努めなければならないとしています（出典：障害を理由とする差別の解消の推進に関する法律｜e-Gov 法令検索）。第8条第2項は令和3年の改正で努力義務から義務に改められ、改正法は令和6年4月1日に施行されました（出典：障害を理由とする差別の解消の推進｜内閣府）。

内閣府の基本方針（令和5年3月14日閣議決定）は、環境の整備の例に情報アクセシビリティの向上を挙げ、オンライン申込みのウェブサイトが障害者にとって利用しづらい場合に、電話やメールで対応したうえでウェブサイトを改良する例を載せています（出典：同上）。法律の条文に alt属性についての定めはありませんが、LPの画像に適切な alt を付けることは、こうした情報アクセシビリティの向上の取り組みの一つになります。

7. alt属性でよくある失敗例

7-1. 失敗例1：alt にキーワードを詰め込む

症状：検索で見つけてもらおうとして、商品の写真の alt に「〇〇 通販 おすすめ 安い 人気 〇〇 比較」のように語を並べると、読み上げではただの語の列になり、Googleからはキーワードの乱用とみなされるおそれがある。

原因：Googleは、alt属性にキーワードを羅列することを避けるよう書き、ユーザーエクスペリエンスが下がるだけでなく、サイトがスパムとみなされる要因になる場合もあるとしています（出典：Google 画像検索 SEO ベスト プラクティス）。

対策：その画像が伝えている内容を、短い文で書き直します。Googleの例では、キーワードを並べた alt は悪い例で、「『取ってこい』遊びをするダルメシアンの子犬」のように具体的に説明したものが最も良い例です。

回避策：alt を書いたら、画像を見ずに alt だけを読んで、画像の内容が分かるかを確かめます。キーワードは、画像の内容を説明する文の中に自然に入る範囲にとどめます。

7-2. 失敗例2：ファーストビューの文字画像に「メインビジュアル」とだけ書く

症状：キャッチコピーを画像にしたファーストビューの alt を「メインビジュアル」「FV画像」とすると、スクリーンリーダーの利用者や画像を表示できない環境の利用者には、LPで最初に伝えたいキャッチコピーが伝わらない。

原因：HTMLの仕様では、文字を画像にしたものの alt は、画像に書かれた文字と同じ文字でなければならないとされています（出典：HTML Living Standard 4.8.4.4.5｜WHATWG）。「メインビジュアル」は画像の役割の説明で、画像の代わりになっていません。

対策：画像の中のキャッチコピーと同じ文を alt に書きます。同じ文をHTMLの見出しでも書いているなら、alt は空にします（3-2）。

回避策：LPのデザインを入稿するときに、文字を含む画像ごとに「画像の中の文字」を一覧にしておき、それをそのまま alt に使います。デザインを差し替えたら、alt も同時に直す手順にしておきます。

7-3. 失敗例3：画像のボタンに「ボタン」「矢印」と書く

症状：「お申し込みはこちら」の画像ボタンの alt を「ボタン」「矢印」「CTA画像」とすると、読み上げを使う利用者には、押すと何が起きるのかが伝わらない。

原因：リンクやボタンになっている画像の alt は、その目的を伝えるものでなければなりません。W3Cは、画像の見た目ではなく起こる動作を書くよう説明しています（出典：Functional Images｜W3C WAI）。MDNも alt="右向き矢印" の代わりに alt="次のページ" と書く例を挙げています（出典：img 画像埋め込み要素｜MDN）。

対策：「お申し込みフォームへ進む」「資料をダウンロードする」のように、押した後に起きることを alt に書きます。

回避策：ボタンは、可能なら画像ではなくHTMLの文字で作ります。画像で作る場合は、ボタンの文言と行き先をセットで管理し、文言を変えたときに alt も一緒に直します。

8. Squad beyondでLPの画像に alt属性を付ける

8-1. Widget内の画像のHTMLに alt を追加する

Squad beyondでは、Widget内に画像を追加してHTMLを直接編集することで、画像に alt属性を付けられます。公式FAQの手順は次のとおりです（出典：画像に説明文を付ける（画像にalt属性を追加する）｜Squad beyond FAQ）。

1. 管理画面で、対象のページに画像を追加できる任意のWidgetを追加する（例：左右余白なし（全幅表示、画像/動画））
2. そのWidgetで「HTML編集」を選び、HTML内の <img> タグに alt属性を追加する
3. 「更新ボタン」を押して内容を確認する

FAQには、<img src="（画像のURL）" alt="商品の正面写真（白い背景、サイズはXXcm）"> のように画像の内容を書く例と、装飾の画像を <img src="（画像のURL）" alt=""> とする例が載っています（画像のURLの部分はこの記事で置き換えています）。alt属性は通常の表示には影響せず、画像が読み込めないときに代替テキストとして表示され、スクリーンリーダーが読み上げること、装飾目的のみの画像は alt=""（空文字）にすることも書かれています（出典：同上）。

8-2. 記事LPの審査で実施している4つのこと（Squad beyondの経験ベース）

Squad beyondの公式FAQには、Googleの審査が通りやすい記事LPの特徴として、次の4点が挙がっています。FAQ自身が「弊社の経験ベース」と断っており、Googleが公式に示した審査基準ではありません（出典：Googleの審査が通りやすい記事LPの特徴について知りたい｜Squad beyond FAQ）。

1. 画像にalt属性を追加する（画像をWidgetで追加し、alt属性を付ける）
2. 絞り込み検索機能（メディア機能）を設定する（GDNの場合は検索窓を開いた状態にしておく）
3. 15個以上の関連アイテムを表示する（遷移先は各商品の記事LP）
4. 記事の最下部に会社概要・特定商取引法・プライバシーポリシーを記載する（広告主のLPに記載があるURLを遷移先にする）

なお、Google 広告のヘルプとポリシーで、alt属性を広告の審査の条件とした記述は、この記事の執筆時点では確認できていません。alt属性は、審査のためだけでなく、3章の書き方に沿って画像ごとに付けておくものと考えてください。審査に通らないときに見直す点は「広告審査に通らない原因とは？LP改善のコツとチェックポイント」、記事LPの構成は「【2026年】アフィリエイト向け記事LPの作り方とは？｜2026年の広告規制を勝ち抜く構成と作り方」で解説しています。

9. alt属性についてよくある質問

10. まとめ

• alt属性は img 要素に付ける代替テキスト。画像が表示されないときや読み上げのときに、画像の代わりになる
• 大原則は「画像を alt に置き換えてもページの意味が変わらない」こと。キャプションや周りの文章の繰り返し、「画像」やファイル名は書かない
• 文字の画像（ファーストビュー・バナー）は画像の中と同じ文字、リンクやボタンの画像は行き先や動作、装飾の画像は alt=""
• Googleは代替テキストを画像の理解に使う。キーワードの羅列はスパムとみなされる要因になる場合がある
• 公式に文字数の決まりはない。記事LPの審査とaltの関係は公式の記述がなく、Squad beyondのFAQは経験ベース

LPの画像を差し替えるたびに alt も見直す手順にしておくと、デザインと代替テキストのずれを防げます。画像の多いLPを使いやすく直していく考え方は「UX改善とは？成果につなげる進め方と実践手法」でも解説しています。

---

　

Squad beyondサービス紹介資料はこちらからダウンロード