---
title: "alt属性とは？画像の代替テキストの役割"
description: "画像に代替テキストがなくても見た目は変わらないのに、なぜ重要なのかを知りたい人向けに、アクセシビリティとSEO双方での役割を整理。魅力的で自然なaltの書き方のコツも学べます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-alt-text"
markdown: "https://giga-site.com/articles/what-is-alt-text/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# alt属性とは？画像の代替テキストの役割

画像に添える「代替テキスト」がalt属性です。見えている人には目立たないのに、画面が見えない人や検索エンジンのクローラーには欠かせない情報源になります。この記事ではaltの意味と、アクセシビリティ・SEO双方での役割、そして自然な書き方のコツまでをまとめます。

> Source HTML: https://giga-site.com/articles/what-is-alt-text
> Article index: https://giga-site.com/articles/index.md

## alt属性とは何か

alt属性は、画像が表す内容を文章で説明するための代替テキストです。画像タグに添える短い説明で、画像そのものが表示できないときに、その画像の代わりとして使われます。

通信エラーで画像が読み込めなかったとき、ブラウザは画像の場所にalt属性の文章を表示します。つまりaltは「画像が見えないときの保険」として機能します。

見える人の画面ではふだん表示されないため軽視されがちですが、画像の意味を言葉で残しておく重要な情報です。

## アクセシビリティでの役割

altの最も大切な役割はアクセシビリティです。視覚障害のある人はスクリーンリーダーという読み上げソフトを使ってページを利用しますが、画像はそのままでは読み上げられません。代わりに読み上げられるのがalt属性です。

たとえば「青いボタン」とだけ書くより、「資料をダウンロード」のように画像の役割を伝える文章にすると、操作の意図まで届きます。装飾だけの画像なら、あえてaltを空にして読み上げ対象から外すのが適切な場合もあります。

## 実務ではどこで関係する？

alt属性は言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

alt属性について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## SEOでの役割

検索エンジンは画像の中身を人ほど正確には理解できません。そこでalt属性のテキストを手がかりに、画像が何を表すかを判断します。適切なaltは画像検索での発見につながり、ページ全体の文脈理解も助けます。

ただしSEOを狙ってキーワードを詰め込むのは逆効果です。altはあくまで画像を説明するもの。不自然な羅列はスパムと見なされる恐れがあり、読み上げにも邪魔になります。

## 良いalt属性を書く手順

altは長ければよいわけではありません。その画像が画面から消えても情報が伝わるか、を基準に簡潔に書きます。

迷ったら「この画像を声に出して説明するなら何と言うか」を考えると書きやすくなります。次の流れで一つずつ整えていきましょう。

1. その画像が何を伝えているか、目的を一言で考える
2. 見たままでなく「役割」を書く（例：会社ロゴ→会社名）
3. 簡潔にまとめる（おおむね一文程度を目安にする）
4. キーワードの詰め込みや「〜の画像」という冗長な表現を避ける
5. 装飾目的の画像はaltを空にして読み上げ対象から外す

## 画像入りページを共有して確認する

altが適切かは、実際にページを開いて確認するのが確実です。画像が多いLPやカタログでは、関係者に見てもらいながら抜けや不自然な記述を洗い出すと精度が上がります。

ギガサイト便なら、画像を含むZIPサイトをそのまま共有URLとして発行でき、関係者に開いてもらって確認・レビューを受けられます。同じURLのまま中身を差し替えられるので、altを直した後もリンクを送り直さずに更新版を見てもらえます。

## よくある質問

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

意味を持つ画像には必要です。一方で、純粋な装飾画像はaltを空にして読み上げから外すのが適切です。装飾にまで説明を付けると、かえって利用の妨げになります。

### altにキーワードを多く入れた方がSEOに有利ですか？

いいえ。キーワードの詰め込みはスパム扱いの恐れがあり、読み上げの妨げにもなります。画像を正確に説明する自然な文章が、結果的にもっとも効果的です。

### alt属性とファイル名は関係ありますか？

別の要素ですが、どちらも画像理解の手がかりになります。意味のあるファイル名にしておくのも有効ですが、説明としての主役はalt属性です。

### altはどのくらいの長さが適切ですか？

明確な上限はありませんが、簡潔さが基本です。多くの場合は一文程度で十分で、図表のように情報量が多い場合は本文で補足する方法もあります。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [WAI-ARIAとは？支援技術にUIを伝える仕組みの基礎](https://giga-site.com/articles/what-is-aria/index.md)
- [aria-labelとは？ボタンやアイコンに名前をつける属性](https://giga-site.com/articles/what-is-aria-label/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "alt属性とは？画像の代替テキストの役割",
  "description": "画像に代替テキストがなくても見た目は変わらないのに、なぜ重要なのかを知りたい人向けに、アクセシビリティとSEO双方での役割を整理。魅力的で自然なaltの書き方のコツも学べます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-alt-text",
  "url": "https://giga-site.com/articles/what-is-alt-text",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "すべての画像にalt属性は必要ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "意味を持つ画像には必要です。一方で、純粋な装飾画像はaltを空にして読み上げから外すのが適切です。装飾にまで説明を付けると、かえって利用の妨げになります。"
      }
    },
    {
      "@type": "Question",
      "name": "altにキーワードを多く入れた方がSEOに有利ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ。キーワードの詰め込みはスパム扱いの恐れがあり、読み上げの妨げにもなります。画像を正確に説明する自然な文章が、結果的にもっとも効果的です。"
      }
    },
    {
      "@type": "Question",
      "name": "alt属性とファイル名は関係ありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "別の要素ですが、どちらも画像理解の手がかりになります。意味のあるファイル名にしておくのも有効ですが、説明としての主役はalt属性です。"
      }
    },
    {
      "@type": "Question",
      "name": "altはどのくらいの長さが適切ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "明確な上限はありませんが、簡潔さが基本です。多くの場合は一文程度で十分で、図表のように情報量が多い場合は本文で補足する方法もあります。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```