画像のalt属性完全ガイド！適切な書き方のコツ、SEOへの貢献など徹底解説！

「画像にalt属性って本当に必要？」
「どう書けばアクセシビリティとSEOの両方に効くの？」
「長すぎてもダメ、短すぎてもダメって聞いたけど……？」
「装飾用の画像はどう扱えばいいの？」

こんな疑問やお悩みを抱えていませんか？

ウェブサイトの運営者やライターであれば、alt 属性の重要性は何となく知っていても、

• 実際の書き方
• 省略すべきケース
• SEOへの具体的な貢献ポイント

までしっかり把握できている人は意外と少ないものです。

本記事では、alt 属性の基礎知識から実践テクニック、ツールを使ったチェック方法までを初心者でもわかりやすく解説。

誰でもすぐに活用できるポイントを押さえて、

• ユーザー体験を向上させ
• 検索エンジンからの評価を高める

「画像流入を増やしたい」「アクセシビリティ対応を強化したい」

すべての悩みを一挙に解決する完全ガイドをお届けします！

alt 属性の概要と役割

画像の alt 属性は、代替テキスト（Alternative Text） を指定するための仕組みです。

主に以下の2つの観点で重要な役割を果たします。

ページ内での代替テキストとしての仕組み

• 画像非表示時のフォールバック
  ネットワークが遅い環境や何らかの理由で画像が読み込まれない場合、ユーザーは空白のままでは画像の内容を理解できません。alt 属性に設定したテキストが代わりに表示されることで、「どんな画像があるのか」 が分かります。
  😊 例：<img src="flower.jpg" alt="赤いバラのアップ写真">
• コンテンツ構造の一部として保持
  HTMLの要素として画像の意味を明示できるため、ページ全体の情報設計がより堅牢になります。画像とテキストが分離された環境でも、意図した情報が失われません。

アクセシビリティ補助と検索エンジン最適化（SEO）への貢献

• スクリーンリーダー対応 ♿
  視覚に障がいのある方はスクリーンリーダーを使ってページを閲覧します。alt 属性があると、読み上げソフトが画像の内容を音声で伝えてくれるので、誰でも同じ情報にアクセス できます。
• SEO効果 🚀
  検索エンジンのクローラーは画像の中身を直接解析できないため、alt 属性のテキストを手がかりに画像の内容を理解します。これにより、画像検索からの流入やページ全体の評価向上が期待できます。

利用シーン	alt 属性の効果
画像が読み込まれない時	「赤いバラのアップ写真」が代わりに表示
スクリーンリーダーで閲覧するとき	音声で「赤いバラのアップ写真」と読み上げ
検索エンジンがページを解析するとき	画像のテーマやキーワードを正しく把握

ポイントまとめ

• alt 属性は画像の「説明文」
• 画像がなくても内容を伝える重要な役割
• アクセシビリティとSEO、双方にメリットあり

alt 属性を付けるべき理由

読み上げソフト／スクリーンリーダー対応

視覚に障がいのある方は、スクリーンリーダーを使ってウェブページを閲覧します。

• スクリーンリーダーが読むテキスト：画像に設定した alt がそのまま読み上げられる
• 体験の均一化：全てのユーザーが同じ情報を得られるようになる
• 💡 例：

  <img src="chart.png" alt="月別売上グラフ">

→ 音声で「月別売上グラフ」と伝わる

画像未表示時の内容伝達

何らかの原因で画像が読み込めない場合でも、alt が表示されます。

• ネットワーク不安定時のフォールバック
• メール配信やRSSでの可視化
• SEOツールやテキストのみビュー でも画像の意味が分かる

クローラーへの情報提供

検索エンジンのクローラーは画像自体を理解できません。

• テキスト情報として認識：alt によって画像内容を正確に伝達
• ページのコンテキスト強化
• 関連キーワードの補足：本文だけでは伝わりにくいニュアンスを補う

画像検索流入の強化

適切な alt を付けることで、画像検索のランキング上昇を目指せます。

• 画像検索のインデックス要因：alt が画像検索のキーワードとみなされる
• ビジュアルSEO の一環：テキスト情報で画像をより見つけやすく
• ユーザー誘導率アップ：検索結果からのクリック率向上に貢献

リンク画像ではアンカーテキストとして機能

画像自体がリンクになっている場合、alt がアンカーテキストの代わりを担います。

• リンク先の説明：alt でリンク先の目的や内容を示す
• SEO 内部リンク評価：アンカーテキストの重要な要素として扱われる
• ユーザーの混乱防止：リンク先が何か一目で分かる

理由	効果
読み上げソフト／スクリーンリーダー対応	全ユーザーに同一の情報提供
画像未表示時の内容伝達	フォールバックで情報欠落を防止
クローラーへの情報提供	検索エンジンが画像内容を正確に理解
画像検索流入の強化	画像検索からのトラフィック増
リンク画像のアンカーテキスト機能	適切な内部リンク評価とユーザー誘導向上

🎯 ポイント：

1. 必ず全画像に alt を設定する
2. 内容を具体的かつ簡潔に記述する
3. 省略すべき画像（装飾のみ等）は alt="" として明示的に空にする

alt を省略／空にするケース

純粋な装飾画像

装飾だけを目的とした画像には、alt 属性を空にして読み飛ばしてもらうのがポイントです。

• 🎨 デザイン要素：背景パターン、区切り線、装飾アイコンなど
• 📢 情報を持たない：内容や意味を伝える必要がない
• 🏷️ 設定方法：

  <img src="separator.svg" alt="">

こうすることで、スクリーンリーダーはこの画像を無視し、ユーザーはスムーズに本文へ移動できます。

すでに本文で説明済みの画像

本文中ですでに説明やラベルを提示している画像は、alt 属性を空にして重複を避けましょう。

• ✏️ 図表のキャプションや段落内で詳細解説がある場合
• 🔄 同じ情報を何度も読み上げないことでユーザー体験を向上
• 🏷️ 設定例：

  <p>図1：月別売上の推移を示す折れ線グラフです。</p>
  <img src="sales-chart.png" alt="">

画像の種類	alt 属性の値
装飾用アイコン／背景	""
本文で説明済みの図表・グラフ	""

ポイント🎯

• 意味を持たない装飾や重複する解説には必ず alt="" を設定
• これにより、スクリーンリーダー利用者が不要な情報をスキップできるようになります。

適切な alt テキスト作成のコツ

簡潔で具体的に：一文で要点を表現

• 一文以内で：主役となる「誰が・何を・どこで」を端的に書く
• 具体的な語句を選ぶ（色や動作、場所など）
• 💡 例：

  <img src="meeting.jpg" alt="会議室でプレゼンするビジネスマン">

文脈と重複しない内容にする

• 本文やキャプションと補い合うように記述
• すでに説明済みの情報は省き、新たな視点を添える
• 📝 例：
  • 本文：「売上推移を示すグラフです」
  • alt：「2025年1〜3月の売上推移グラフ」

キーワードの過度な詰め込みを避ける

• SEO用語の羅列は逆に読みにくく、自然さを害する
• 主題に関連するキーワードを1〜2語程度で適度に含める
• ⚠️ NG例：

  <img alt="SEO キーワード 詰め込み alt テキスト サンプル">

読み上げ時の自然さを意識

• スクリーンリーダーで不自然に区切られないように文章構造を整える
• 助詞や接続詞を省略しすぎず、会話文のような流れを意識
• 🎯 例：

  <img src="typing.jpg" alt="キーボードでタイピングする手元">

ポイント	良い例	悪い例
簡潔さ・具体性	「海辺で笑顔の家族写真」	「家族　写真　笑顔　海　楽しい」
文脈との補完	「製品パッケージの拡大写真」	本文：「パッケージ画像です」／alt：「パッケージ画像」
キーワードの適度な利用	「スマホで動画視聴中の女性」	「スマホ 動画 視聴 女性 スマホ動画視聴」
読み上げ時の自然さ	「青空の下でランニングする男性」	「男性 青空 下 ランニング」

🎉 ポイントまとめ

1. 一文で要点を絞る
2. 本文と重複させない
3. キーワードは適度に
4. 読み上げが滑らか

これらのコツを意識すれば、誰にでも優しい、効果的な alt テキストが作成できます！

HTML／CMSごとの設定方法

HTML タグに直接記述

HTMLファイルで画像を扱う際は、<img> タグ内に alt 属性を直接追加します。

• 基本構文

  <img src="画像のパス.jpg" alt="代替テキスト">

• ポイント
  • src の後にスペースをひとつ入れる
  • ダブルクォート で囲む
  • 必ず空欄ではなく何かを記述（装飾画像なら alt=""）
• 例

  <!-- 装飾画像（空にする） -->
  <img src="decor.svg" alt="">

  <!-- コンテンツ画像（説明を入れる） -->
  <img src="beach.jpg" alt="夕暮れの海辺を散歩するカップル">

😊 コード内に直接書くので、どの環境でも同じ方法で設定できます。

WordPress の「代替テキスト」欄を活用

WordPress では管理画面から簡単に alt を設定可能です。

1. メディアライブラリ を開き、対象の画像をクリック
2. 右サイドバーの 「代替テキスト」 欄に説明を入力
3. 「更新」 または 「投稿に挿入」 をクリック

手順	操作場所	ポイント
①	メディア → ライブラリ	目的の画像を選択
②	右サイドバー	代替テキスト欄を見つける
③	更新 or 挿入ボタン	入力後、必ず保存・更新を行う

🌟 ブロックエディターでも同様に、画像ブロック選択→右の設定パネルで alt 欄が見つかります。

Shopify での登録手順

Shopify 管理画面から商品画像やテーマ画像に alt を追加します。

1. 商品ページ
   • 管理画面左メニュー → 「商品」 → 編集したい商品を選択
   • 画像一覧 から該当画像をクリック
   • 右の 「代替テキストを追加」 フィールドに入力 → 保存
2. テーマカスタマイズ（バナー画像など）
   • 左メニュー → 「オンラインストア」 → 「テーマ」 → 「カスタマイズ」
   • 編集したいセクション（例：スライドショー）を選択
   • 画像設定内の 「代替テキスト」 欄に追加 → 公開

対象	操作手順
商品画像	商品編集画面 → 画像クリック → alt入力
テーマバナー	テーマカスタマイズ → セクション → alt入力

✨ Shopify も CMS 画面上で直接設定できるため、専門知識不要で手軽に最適化が行えます。

用途別：よくある alt 例と解説

リンク付きバナーやアイコン

リンク先や機能がひと目で分かるよう、役割や行き先を明示します。

• 🔗 オンラインショップへ誘導するバナー

  <img src="shop-banner.jpg" alt="公式オンラインショップを見る">

• 🔗 ホームアイコン

  <img src="home-icon.svg" alt="ホームページに戻る">

グラフ・チャート画像

グラフの要点を短くまとめて伝えることで、数値の傾向を把握しやすくします。

• 📊 売上推移グラフ

  <img src="sales-chart.png" alt="2025年1〜3月の売上が月間100→150→130万円に推移">

• 📊 アンケート結果を円グラフで表示

  <img src="survey-pie.png" alt="利用者の60%がAプランを選択、残りはB/Cプラン">

テキスト埋め込み画像

画像内テキストをそのまま書き起こし、重要なメッセージを省略せず伝えます。

• 📝 ヘッダーバナー内のキャッチコピー

  <img src="header.jpg" alt="期間限定！春のセール開催中">

• 📝 引用ツイートのスクショ

  <img src="tweet.png" alt="ユーザーA「このサービスで業績が3倍になりました」">

装飾のみのビジュアル

本文の理解に不要な純粋装飾は、必ず空の alt にして読み飛ばしてもらいます。

• 🎨 背景パターン

  <img src="pattern.svg" alt="">

• 🎨 区切り線アイコン

  <img src="divider.png" alt="">

種類	alt の書き方例
リンク付きバナー・アイコン	alt="公式オンラインショップを見る"
グラフ・チャート画像	alt="2025年1〜3月の売上が月間100→150→130万円に推移"
テキスト埋め込み画像	alt="期間限定！春のセール開催中"
装飾のみのビジュアル	alt=""

😊 用途に応じた記述を心がけることで、ユーザーにも検索エンジンにも優しいサイト運営が実現します！

避けたい NG パターン

長文すぎて冗長になる記述

• ⚠️ 問題点：altに情報を詰め込み過ぎると、読み上げ時に時間がかかり、ユーザー体験を損ねます。
• ❌ NG例

  <img src="sunset.jpg" alt="オレンジ色の空に雲が広がり、その下で波が静かに打ち寄せる海辺の風景。遠くに小さなヨットが１隻浮かんでいる様子が見える夕暮れ時の写真">

• ✅ 良い例

  <img src="sunset.jpg" alt="波打ち際を照らすオレンジの夕焼け">

本文丸写し・コピペ

• ⚠️ 問題点：本文をそのままコピーすると、重複感が強く、altとしての役割が薄れます。
• ❌ NG例
• 本文：「新商品Xは最新技術を搭載し、ユーザーの利便性を高めています。」
• alt：alt="新商品Xは最新技術を搭載し、ユーザーの利便性を高めています。"
• ✅ 良い例

  <img src="product-x.jpg" alt="最新技術を搭載した新商品Xの外観">

画像内容と無関係な語句

• ⚠️ 問題点：画像と関係ないキーワードを含めると、混乱を招きSEO効果も薄まります。
• ❌ NG例

  <img src="wallet.jpg" alt="財布 SEO 副業 アフィリエイト">

• ✅ 良い例

  <img src="wallet.jpg" alt="黒い革製の二つ折り財布を開いた状態">

NGパターン	NG例の概要	良い例のポイント
長文すぎる	説明が冗長で一文が長い	一文で要点をまとめる
本文丸写し・コピペ	本文と全く同じ文章をaltに使用	画像の特徴を簡潔に要約
無関係な語句の詰め込み	画像と無関係なキーワードを並べただけ	画像内容に即した具体的な説明

🎯 まとめ：altには「必要最低限の情報を簡潔に」「本文と被らない」「画像内容に沿った言葉だけ」を心がけましょう。

設定状況のチェック方法

ブラウザ開発者ツールで手動検証

1. 対象ページを開く
2. 画像の上で右クリック → 「検証（Inspect）」 を選択
3. 開発者ツールのElementsパネルで <img> タグを確認
4. alt 属性の値が適切かチェック
   • 空文字（alt=""）は装飾画像・説明済み画像のみ
   • 説明文が簡潔かつ具体的かを目視

🔍 ポイント：リアルタイムで編集できるので、ブラウザ上で即座にテスト可能！

Chrome 拡張機能（Alt ＆ Meta Viewer など）

• Alt ＆ Meta Viewer
  • ワンクリックでページ内すべての alt を表示
  • 色付きハイライトで未設定・空・長すぎを可視化
• その他おすすめ
  • axe DevTools：アクセシビリティ全般をチェック
  • Web Developer：altだけでなく他属性も確認

🎉 使い方

1. Chromeウェブストアで拡張機能を追加
2. 一覧アイコンから「Alt & Meta Viewer」を選択
3. ページ上にオーバーレイで alt 情報を表示

一括診断ツールの活用

大量ページや大量画像を一度にチェックしたい場合に有効です。

ツール名	特徴
Screaming Frog	サイト全体をクロールし、未設定altレポート出力
Sitebulb	ビジュアルレポートでaltの見落としを防止
WAVE (WebAIM)	アクセシビリティ視点でaltの有無・質を詳細解析
Online Alt Checker	URL入力だけでまとめてaltの有効性を検証

⚙️ 手順例

1. 対象サイトのURLを入力
2. クロール／解析を実行
3. 「alt missing」「alt empty」「alt length」等のレポートを確認
4. Excel/CSV出力して担当者と共有

---

📌 まとめ

• 手動検証 で個別の改善ポイントを発見
• 拡張機能 ですばやくページ全体をレビュー
• 一括ツール でサイト規模のalt状況を網羅的に把握

これらを組み合わせて、定期的にチェック＆修正を行いましょう！

よくある質問（FAQ）

Q1. 最適な文字数は？

🔤 目安は「50文字以内」です！

• alt属性は短く、わかりやすい説明が理想です。
• 長すぎると読み上げソフトで負担になったり、SEO効果が薄れたりします。

文字数	傾向
〜20字	理想的に簡潔
20〜50字	問題なし（情報量もOK）
50字以上	冗長になるリスクあり 🚫

✅ コツ：シンプルに「この画像を一言で表すなら？」と考えてみましょう。

Q2. alt と title の違いは？

🔎 altとtitleはまったく役割が違います！

属性	目的	表示されるタイミング
alt	画像が表示できないときの代替テキスト 🖼️	画像非表示時・読み上げ時
title	補足情報・ヒントの提供 💬	マウスオーバー時（ポップアップ表示）

• altは必須級、titleは任意です。
• SEOやアクセシビリティに直接関わるのはalt属性のみです。

✨ つまり、「伝えるべきこと」はaltで確実に、「ちょっとした補足」はtitleで軽く。

Q3. すべての画像に設定すべき？

🎯 原則は「すべて設定」、ただし例外あり！

• 内容を伝える画像 → 必ずaltを設定！
• 単なる装飾画像 → alt=””（空にする）のが正解です。

📖 判断基準まとめ

画像の種類	altの扱い
情報を伝える画像	内容を説明するaltを設定する
デザイン装飾用画像	空のalt (alt="")にする

✅ 覚えておくと安心：「意味のある画像は説明、意味のない画像はスルー」！

---

💬 最後に
alt属性を上手に使うと、SEOにも、ユーザー体験にも大きなプラスになります。
基本を押さえつつ、丁寧な設定を心がけましょう！✨

ポイントのおさらい

以下の3点を押さえて、誰にでも優しい alt テキストを心がけましょう。

ポイント	内容
📝 alt 属性は「読めるテキスト」	画像が言葉として伝わるよう、主語＋動詞＋補足で記述する
⏳ 過不足ない長さと文脈重視	目安50字以内×本文と被らない表現で、簡潔かつ具体的に説明
🔍 定期的に検証ツールでチェック	手動検証、ブラウザ拡張、サイト診断ツールなどを組み合わせて確認

✨ これらを意識すれば、アクセシビリティ向上とSEO効果の両立が可能です。日々の運用に取り入れて、質の高いウェブサイトを維持しましょう！

まとめ

• alt 属性はただの“おまけ”ではなく、重要な代替テキスト。誰にでも情報を届けるための鍵になります。
• 一文で簡潔に、具体的に。目安は50文字以内で「何が写っているか」を端的に説明しましょう。
• 装飾用や説明済みの画像は alt="" で明示的に省略。ユーザーのストレスを軽減できます。
• 定期的なチェックを忘れずに。ブラウザ開発ツールや拡張機能、一括診断ツールを組み合わせて運用しましょう。

これらのポイントを実践すれば、アクセシビリティとSEOの両立が可能です。

今日からあなたのサイトにも、“読めるテキスト” をしっかり設定してみてください！