「画像にalt属性って本当に必要なの？」「何を書けばいいか分からない…」そんな疑問を抱えていませんか？

画像のalt属性は、SEOとアクセシビリティの両面で非常に重要な役割を果たします。しかし、初心者の方は「どう書けば正解なのか」「装飾画像にも必要なのか」など、迷うポイントが多いのも事実です。

結論：alt属性は必須！書くべき理由3つ

まず結論から言うと、画像にalt属性を設定することは必須です。理由は以下の3つです。

• SEO対策：検索エンジンが画像内容を理解できる
• アクセシビリティ：視覚障害者がスクリーンリーダーで内容を把握できる
• 画像の読み込みエラー時：代替テキストが表示される

この3つの理由について、次のセクションで詳しく解説していきます。

alt属性とは？基本を理解しよう

alt属性の役割

alt属性（オルト属性）は、HTMLの<img>タグに指定する属性で、画像の代替テキストを表します。”alternative text”（代替テキスト）の略称です。

<!-- 基本的な書き方 -->
<img src="photo.jpg" alt="青空の下で笑顔の女性が立っている様子">

alt属性が活躍する3つのシーン

alt属性は、次のような場面で重要な役割を果たします。

なぜalt属性が必要なのか？3つの重要な理由

理由①：SEO対策（検索エンジン最適化）

検索エンジンは画像の「見た目」を直接理解することができません。alt属性のテキスト情報を読み取ることで、画像の内容を把握します。

理由②：アクセシビリティの向上

視覚障害のある方は、スクリーンリーダー（音声読み上げソフト）を使ってWebサイトを閲覧します。alt属性が設定されていないと、画像があることすら伝わらないか、ファイル名が読み上げられてしまいます。

<!-- 悪い例：altがない -->
<img src="img_1234.jpg">
<!-- スクリーンリーダー：「img_1234.jpg」と読み上げられる -->
<!-- 良い例：altがある -->
<img src="img_1234.jpg" alt="コーヒーカップを持って微笑むビジネスマン">
<!-- スクリーンリーダー：「コーヒーカップを持って微笑むビジネスマン」と読み上げられる -->

注意：アクセシビリティは法的義務になっている国もあります。日本でも「障害者差別解消法」により、公共機関や企業にはWebアクセシビリティへの配慮が求められています。

理由③：画像が表示されない時の代替表示

通信環境が悪い、画像のパスが間違っている、サーバーエラーなど、さまざまな理由で画像が表示されないことがあります。そんな時、alt属性のテキストが代わりに表示され、ユーザーに画像の内容を伝えることができます。

効果的なalt属性の書き方【基本ルール】

基本ルール5つ

• 画像の内容を具体的に説明する
• 簡潔に書く（目安：125文字以内）
• 「画像」「写真」などの言葉は不要
• 文脈に合った説明をする
• キーワードの詰め込みはNG

ルール①：画像の内容を具体的に説明する

画像を見ていない人でも、どんな画像なのかイメージできるように書きましょう。

<!-- ❌ 悪い例：抽象的 -->
<img src="photo.jpg" alt="風景">
<!-- ✅ 良い例：具体的 -->
<img src="photo.jpg" alt="夕焼けに染まる富士山と手前に広がる湖">

ルール②：簡潔に書く（目安：125文字以内）

スクリーンリーダーは、長すぎるテキストを途中で切ってしまう場合があります。重要な情報を先に書き、125文字以内にまとめましょう。

ルール③：「画像」「写真」などの言葉は不要

スクリーンリーダーは既に「画像」であることを伝えるため、alt属性に「〇〇の画像」と書く必要はありません。

<!-- ❌ 悪い例 -->
<img src="cat.jpg" alt="猫の画像">
<!-- ✅ 良い例 -->
<img src="cat.jpg" alt="窓際で日向ぼっこをする茶トラ猫">

ルール④：文脈に合った説明をする

同じ画像でも、使われている文脈によって適切なalt属性は変わります。ページの内容や前後の文章に合わせて記述しましょう。

<!-- 例：同じリンゴの画像でも… -->
<!-- レシピサイトの場合 -->
<img src="apple.jpg" alt="カットされた新鮮な紅玉リンゴ">
<!-- 栄養情報サイトの場合 -->
<img src="apple.jpg" alt="ビタミンCが豊富なリンゴ">

ルール⑤：キーワードの詰め込みはNG

SEO対策のために、不自然にキーワードを詰め込むのは逆効果です。Googleからペナルティを受ける可能性もあります。

<!-- ❌ 悪い例：キーワード詰め込み -->
<img src="cafe.jpg" alt="東京 カフェ おしゃれ カフェ 人気 カフェ ランチ カフェ スイーツ">
<!-- ✅ 良い例：自然な記述 -->
<img src="cafe.jpg" alt="木の温もりを感じる落ち着いた雰囲気の東京のおしゃれカフェ店内">

シーン別alt属性の書き方【実例付き】

パターン①：情報を伝える画像

商品写真、図解、グラフなど、情報を伝えることが目的の画像には、具体的な説明を書きます。

<!-- 商品画像 -->
<img src="product.jpg" alt="白い陶器製のマグカップ、容量350ml">
<!-- グラフ -->
<img src="chart.jpg" alt="2024年の売上推移を示す棒グラフ。1月から12月まで右肩上がりで推移">

パターン②：装飾目的の画像

背景画像、デザインの一部など、装飾目的の画像はalt属性を空にします。これにより、スクリーンリーダーがスキップします。

<!-- 装飾画像：altを空に -->
<img src="decoration.png" alt="">

注意：alt属性を空にする場合でも、alt=""と記述する必要があります。alt属性自体を省略してはいけません。

パターン③：リンク画像（ボタンやバナー）

画像がリンクになっている場合は、リンク先の内容や目的を説明します。

<!-- ロゴリンク -->
<a href="/">
  <img src="logo.png" alt="UPTECH DESIGNホームページへ戻る">
</a>
<!-- ダウンロードボタン -->
<a href="guide.pdf">
  <img src="download-btn.png" alt="初心者ガイドPDFをダウンロード">
</a>

パターン④：複雑な図やグラフ

情報量が多い図やグラフの場合は、alt属性で要点を伝え、詳細は本文やキャプションで補足します。

<figure>
  <img src="complex-chart.jpg" alt="過去5年間のWeb制作市場規模の推移">
  <figcaption>
    2020年から2024年にかけて、Web制作市場は年平均8%の成長を続けています。
    特にスマートフォン向けサイト制作の需要が全体の65%を占めています。
  </figcaption>
</figure>

パターン⑤：アイコン

アイコンの場合は、そのアイコンが表す意味を書きます。

<!-- 検索アイコン -->
<button>
  <img src="search-icon.svg" alt="検索">
</button>
<!-- SNSアイコン -->
<a href="https://twitter.com/...">
  <img src="twitter-icon.svg" alt="Twitterで共有">
</a>

alt属性チェックリスト【コーディング前の確認用】

コーディングする際は、以下のチェックリストを活用してください。

• すべての<img>タグにalt属性を記述している
• 装飾画像にはalt=""を設定している
• 画像の内容を具体的に説明している
• 125文字以内に収めている
• 「画像」「写真」などの不要な言葉を入れていない
• 文脈に合った説明になっている
• キーワードを不自然に詰め込んでいない
• リンク画像にはリンク先の説明を書いている
• スクリーンリーダーで読み上げて違和感がないか確認した

よくあるalt属性の間違いと修正例

間違い①：alt属性がない

<!-- ❌ 悪い例 -->
<img src="team.jpg">
<!-- ✅ 良い例 -->
<img src="team.jpg" alt="会議室で笑顔で話し合う5人のチームメンバー">

間違い②：ファイル名をそのまま使用

<!-- ❌ 悪い例 -->
<img src="IMG_20240315.jpg" alt="IMG_20240315">
<!-- ✅ 良い例 -->
<img src="IMG_20240315.jpg" alt="桜の木の下で花見をする家族">

間違い③：装飾画像に詳細な説明

<!-- ❌ 悪い例：装飾なのに説明がある -->
<img src="border-line.png" alt="グレーの細い水平線">
<!-- ✅ 良い例：装飾画像は空 -->
<img src="border-line.png" alt="">

間違い④：過度に詳細すぎる説明

<!-- ❌ 悪い例：長すぎる -->
<img src="office.jpg" alt="白い壁と木製の床が特徴的な広々としたオフィススペース。窓から差し込む自然光が明るく、中央には大きなテーブルがあり、その周りに8つの椅子が配置されている。左側の壁には大型のホワイトボードが掛けられており、右側には観葉植物が3つ置かれている。天井には…">
<!-- ✅ 良い例：簡潔 -->
<img src="office.jpg" alt="自然光が入る明るいオフィスの会議スペース">

alt属性が正しく設定できているか確認する方法

方法①：ブラウザの開発者ツールで確認

Chrome、Firefox、Edgeなどのブラウザには開発者ツールが備わっており、HTMLのソースコードを直接確認できます。

1. 確認したいページを開く
2. 画像を右クリック →「検証」を選択
3. HTMLコードの<img>タグにalt属性があるか確認

方法②：画像を非表示にして確認

画像を非表示にすることで、alt属性のテキストだけが表示され、適切な説明になっているか確認できます。

/* CSSで一時的に画像を非表示 */
img {
  display: none;
}

方法③：スクリーンリーダーで確認

実際にスクリーンリーダーを使って、読み上げが自然かどうか確認するのが最も確実です。

方法④：アクセシビリティチェックツール

自動でalt属性の有無をチェックしてくれるツールもあります。

• Google Lighthouse：Chrome開発者ツールに組み込まれており、アクセシビリティスコアを表示
• WAVE：ブラウザ拡張機能として利用可能
• axe DevTools：詳細なアクセシビリティレポートを提供

SEOを意識したalt属性の書き方【応用編】

キーワードは自然に含める

ページのターゲットキーワードを意識しつつ、自然な文章の中に含めるのがポイントです。

<!-- 例：「Web制作 学習」がターゲットキーワードの場合 -->
<img src="study.jpg" alt="ノートパソコンでWeb制作の学習をする初心者">

画像ファイル名も最適化する

alt属性だけでなく、画像ファイル名も検索エンジンが参照します。意味のある名前を付けましょう。

<!-- ❌ 悪い例 -->
<img src="image123.jpg" alt="HTMLコードの記述例">
<!-- ✅ 良い例 -->
<img src="html-code-example.jpg" alt="HTMLコードの記述例">

構造化データと組み合わせる

商品画像やレシピ画像など、特定の用途では構造化データ（JSON-LD）と組み合わせることで、検索結果にリッチスニペットとして表示される可能性が高まります。

よくある質問

Q1. 背景画像（CSSで設定）にもalt属性は必要？

いいえ、CSSで設定する背景画像にはalt属性を設定できません。背景画像は装飾目的と見なされるため、代替テキストは不要です。もし背景画像が重要な情報を含む場合は、HTMLの<img>タグで記述することを検討してください。

Q2. alt属性とtitle属性の違いは？

alt属性は画像の代替テキスト、title属性は画像にマウスカーソルを乗せた時に表示されるツールチップです。alt属性は必須、title属性は任意です。また、スクリーンリーダーはalt属性を優先的に読み上げます。

<img src="product.jpg" 
     alt="白いTシャツ" 
     title="オーガニックコットン100%使用">

Q3. 同じ画像を複数の場所で使う場合、alt属性は同じでいい？

いいえ、使われている文脈に合わせて変えるべきです。同じ画像でも、前後の文章や目的によって適切な説明は変わります。

Q4. 装飾画像かどうかの判断基準は？

「この画像がなくても、ページの情報が正しく伝わるか？」を考えてください。情報伝達に関係ない場合は装飾画像です。例：背景パターン、区切り線、デザイン要素など。

Q5. 絵文字や記号の画像にもalt属性は必要？

はい、必要です。絵文字や記号が意味を持つ場合は、その意味をalt属性に記述します。

<!-- 星マークで評価を表す場合 -->
<img src="star.png" alt="5つ星中4つ星">

まとめ

alt属性は、SEO対策とアクセシビリティの両面で欠かせない要素です。適切に設定することで、検索エンジンの評価を高め、すべてのユーザーに情報を届けることができます。

最初は迷うこともあるかもしれませんが、「画像を見ていない人に、どう説明すれば伝わるか？」を考えることが基本です。この記事で紹介した実例を参考に、ぜひ実践してみてください。

alt属性を適切に設定して、ユーザーにも検索エンジンにも優しいWebサイトを作りましょう！

次のステップ

alt属性をマスターしたら、次は以下のトピックにも挑戦してみましょう。

• 画像の最適化（ファイルサイズ、形式、解像度）
• レスポンシブ画像（srcset、sizes属性）
• 構造化データを使った画像のSEO強化
• WebアクセシビリティのWCAG準拠ガイドライン