alt テキストの適切な書き方と考え方｜AI時代でも役立つ基礎知識

画像の「alt」とは？

英語の 「alternate (オルタネート)」の略です。

「代わりの」「交互の」「別の選択肢を提供する」といった意味を持ち、通常とは異なる動作を実行するためのものです。

alt テキスト (代替テキスト) は、画像が表示されなかった場合や、視覚的に画像を見られないユーザーのために、スクリーンリーダーで読み上げられる「説明文」のことです。

検索エンジンも alt テキストを読み取って画像の内容を理解するため、SEO にも一定の効果があるとされます。

ただし、本来の目的はアクセシビリティ、つまり、誰もが情報にアクセスできるようにすることです。

画像に設定する「alt テキスト」は、自分のサイトを「伝わるメディア」にする土台。

SNS 流入も、検索結果も、読者の信頼も、こうしたコツコツとした地味で地道な積み上げから生まれます。

alt テキストが必要な画像・不要な画像

alt が必要な画像

機能画像

• リンク付き画像
• ボタンとして機能する画像
• ナビゲーション要素
• 操作アイコン (クリックでコピー・再生など)
• メディアコントロール
• 二次元コード・QRコード
• イメージマップ

１．リンク付き画像

例えば「クリックで申し込みページが開く」などの機能を持つ画像です。

商品の写真をクリックすると詳細ページが開く、というような場合に使われます。

alt="商品詳細ページを開くリンク。ノートパソコンの外観写真。"

２．ボタンとして機能する画像

見た目は画像ですが、クリックすると「送信」や「申し込み」などの処理を実行するボタンの役割を持つものです。

フォームの送信や決定など、操作のきっかけになる場合に使われます。

alt="会社案内PDFをダウンロードするためのボタン。"

３．ナビゲーション要素 (ページ移動のための画像リンク)

トップページに戻る矢印の画像や、「前の記事」「次の記事」などのページ遷移ナビゲーション等、サイト内を移動するための画像リンクです。

使いやすい動線として配置されることが多いです。

alt="トップページへ戻る。"

４．操作アイコン (クリックでコピー・再生など)

再生・コピー・閉じるなどの操作を行う小さなアイコンです。操作の手がかりになる重要なUI要素です。

「コピー」「再生」「一時停止」など、何かしらの機能を実行するための小さなアイコン画像です。ユーザーが具体的な操作を行う際に使われます。

alt="この文章をクリップボードにコピーする。"

５．メディアコントロール

動画や音声を操作するボタンで、「再生」「停止」「音量調整」などのアイコンです。

視覚的に「なんの操作をするボタンなのか」が伝わるアイコンが使われます。

alt="音声ファイルを再生するボタン。"

６．二次元コード・QRコード

※「QRコード」は株式会社デンソーウェーブの登録商標です。

スマートフォンなどで読み取ることで、特定のページへアクセスできるようになっている画像です。

ポスターやチラシ、ウェブサイトでもよく見かける形式です。

alt="瀬戸内ことり公式サイトへのQRコード。"

７．イメージマップ (画像の場所によってリンク先が変わる)

１枚の画像の中で、クリックする場所によって違うリンク先へ移動できる特殊な画像です。

例えば、地図や間取り図のように、画像内の場所によって別々のリンクに飛べるものです。

alt="○○大学のキャンパスマップ。建物をクリックすると案内ページに移動する。"

情報画像

グラフ・写真・図など情報伝達を伴う画像の alt には「要点」を要約して記載します。

alt が不要な画像

装飾のための画像には alt を設定しません。

例えば、背景模様、飾り線、アイコンなど。

設定しない場合、alt="" と記述され、スクリーンリーダーはスキップ (読み飛ばす) します。

alt テキスト７つの基本ルール

• 全角75文字 (半角で150文字) 前後
• 「画像」「写真」と表現しない
• 重要な情報を冒頭に置く
• 句点「。」を入れて区切る
• 本文やキャプションと重複しないよう注意する
• 専門用語や略語は避ける
• その画像が掲載された意図・目的・流れを考える

NG 例と改善例

実際に多くの人がやりがちな NG 例と、その改善案を紹介します。

NG 例１

alt="イベントの画像"

→ ファイル名の説明では意味がわかりません。

NG 例2

alt="棒グラフ"

→ 何を表しているグラフなのか不明です。

NG 例3

alt="logo.png" (自動挿入)

→ ファイル名は情報として無価値です。

AI に alt テキストを任せて大丈夫？

alt テキストも AI で自動生成する時代ですが、任せきりは要注意です。

AI は「見たまま」を描写することはできますが、画像が掲載された意図までは読み取れません。

AI 出力例と改善例

alt="３人の人物が屋外で笑っている写真。"

→ 表層的で、ページの意味と結びついていない。

→ 文脈が含まれ、伝えるべき意味が明確になっています。

AI 活用のコツ

• 下書き生成には便利 (ただし必ずチェックすること)
• 「なぜこの画像を掲載したのか？」という視点で修正を加える

alt テキストが「地味に効く」理由

alt テキストは目立ちませんが、きちんと整えると、サイトにとってこんなよい影響があります。

1. SEOで画像の意味が伝わる
   画像検索にも強くなり、長期にわたるアクセスが期待できます。
2. サイトの信頼性が上がる
   情報の整理ができている＝ちゃんとしたサイト、という印象に。
3. アクセシビリティの向上で読者満足度UP
   弱視・視覚障害のある方にも伝わりやすく、離脱率の低下にもつながります。

「alt をちゃんと見直したら、海外からのお問い合わせが増えた」という声も聞かれるほど。

地味だけど、じわじわ効いてくる要素です。

alt テキスト見直しチェックリスト

最終チェック項目として、以下の５つを確認してみましょう。

• 装飾目的の画像に、altを書いていないか？
• 情報や機能を持つ画像に、altが抜けていないか？
• alt の内容が本文と被っていないか？
• 意味が通じるか？
• 画像が掲載された「理由」をaltで伝えているか？

alt テキストは “伝える気配り” のひとつ

alt テキストは、華やかな施策ではありません。

けれども、“見えない読者” に配慮した、静かな気遣いともいえます。

画像の意味を一文で表す作業には、自分のページの「構成」や「目的」を見つめ直すヒントがたくさん詰まっています。

SEO だけのためでなく、すべてのユーザーに情報が届くように。

あなたのブログを、少しだけやさしい場所にするためにも、altテキストを丁寧に書いてみてください。

すべての画像にaltを入れる必要はありません。

大切なのは「伝える意味がある画像に適切な alt をつける」ことです。

さいごに

alt テキストは、画像に「見た目」ではなく「意味」を与える気遣いです。

装飾か、情報か、操作か。

ページの中での位置づけを意識し、一文で “何を伝えたいか” を表現しましょう。

地味だけど確実に効く、そんな alt テキスト。

今日から少し丁寧に書いてみませんか？