ホームページに画像を掲載する際、「alt属性（代替テキスト）」を適切に設定することは、SEO（検索エンジン最適化）およびWebアクセシビリティ向上において極めて重要な実務プロセスです。alt属性の目的は、画像の視覚的情報を適切な文章に変換して検索エンジンや音声読み上げブラウザに正確に伝えることにあります。適切な書き方の結論として、画像が担う役割（情報伝達・リンク・装飾）に応じて記述ルールを使い分けることが不可欠です。本記事では、検索評価を高めつつユーザー利便性を最大化するalt属性の作成手順と具体的な記述例を詳しく解説します。
ホームページのalt属性（代替テキスト）とは？役割とSEO・UXにおける重要性
alt属性（オルト属性）とは、HTMLのimgタグ内に記述する代替テキスト（Alternative Text）を指定するための属性です。Webブラウザ上で画像が何らかの理由で読み込まれなかった場合や、視覚障害者が音声読み上げソフト（スクリーンリーダー）を使用している際に、画像の代わりに表示・読み上げられるテキスト情報を指します。
HTMLの基本的な記述コード例は以下の通りです。
<img src="example.jpg" alt="適切な代替テキストの内容">
検索エンジンのクローラーは、高度な画像認識技術を保有しているものの、画像が持つ文脈やビジネス上の意図を完全に理解するわけではありません。alt属性を明記することで、検索エンジンに対して画像の内容と周辺テキストとの関連性を正確に伝えることが可能になります。その結果、ページ全体のテーマ性が明確になり、検索順位の安定や画像検索での露出向上といったSEO上の好影響が得られます。
さらに、近年重要視されているWebアクセシビリティの観点においても、alt属性の整備は必須項目とされています。障害の有無や利用環境に関わらず、すべてのユーザーが同等に情報へアクセスできるようにするための基礎的な設計要素です。
alt属性を設定する3つの主要なメリット
ホームページの画像に適切なalt属性を設定することで得られる効果は、単なるテキスト補足にとどまりません。ビジネス面および運用面における主なメリットは以下の3点に集約されます。
1. Webアクセシビリティの向上（スクリーンリーダー対応）
視覚に障害を持つユーザーや高齢者は、画面のテキストを音声で読み上げるスクリーンリーダーを利用してWebサイトを閲覧します。画像にalt属性が設定されている場合、読み上げソフトは画像に差し掛かった際にその内容を文章として読み上げます。
もしalt属性が空欄であったり、意味のないファイル名（「IMG_0001.jpg」など）が記述されていたりすると、ユーザーは画像から得られる重要な情報を取得できません。国連の障害者権利条約や各国のWeb標準規格に準拠するうえでも、適切な代替テキストの提供は企業サイトにおける社会的責任の一環といえます。
Web標準に基づいたサイト設計の具体的な要件については、Webアクセシビリティ（JIS X 8341-3・WCAG）対応手順と実装ガイド｜企業サイトに求められる基本ルールと具体策で詳しく解説しています。
2. 画像検索SEOの最適化とクローラーへの情報伝達
Googleをはじめとする検索エンジンは、Webサイトの構造を評価する際にテキスト情報を最も信頼します。alt属性に画像の正確な説明や関連するキーワードを含めることで、クローラーは「その画像が何を表現しているか」「ページのコンテンツとどう関係しているか」を正しく把握できます。
また、Google画像検索結果において画像が表示される機会が増加し、検索結果ページからの新規流入経路を獲得できるメリットもあります。特に製品写真、施工事例、インフォグラフィックなどを扱うWebサイトでは、画像検索からの流入が直接的なリード獲得につながるケースが多く見られます。
3. 画像非表示・読み込みエラー時のユーザー体験（UX）保護
ユーザーの通信環境が不安定な場合や、サーバーの通信障害、画像ファイルパスの記述ミスなどによって画像が読み込めない場合、ブラウザ上には「破線ボックス」や「読み込みエラーアイコン」が表示されます。
この際、alt属性が設定されていれば、画像が表示されるはずだったスペースに代替テキストが表示されます。これにより、ユーザーは本来そこにどのような情報が掲載されていたかを推測でき、離脱を防ぐためのUX上の安全網として機能します。特に表示速度の最適化や画像のデータ容量制御を進める過程でも、代替テキストの有無は安心感をもたらす要素となります。表示速度向上技術についてはホームページの画像遅延読み込み（Lazy Load）とは？SEO・表示速度を高める仕組みと正しい実装手順をプロが解説をご参照ください。
【場面別】alt属性の具体的な書き方と正しい記述例
alt属性の記述は、画像の役割に応じて柔軟に変更する必要があります。一律に「〇〇の写真」と書くのではなく、文脈に応じた適切な書き方をマスターすることが重要です。ここでは、実務で頻出する4つのパターン別にOK例とNG例を整理します。
1. 情報を提供する画像（図解・グラフ・製品写真）
グラフ、図解、解説用イラストなど、画像自体が特定の情報やデータを持っている場合は、画像を見なくてもその内容が理解できるレベルのテキストを設定します。
- NG例:
alt="グラフ"（具体性に欠け、内容が伝わらない） - NG例:
alt="売上推移グラフ 2024年 グラフ 作成 資料"（単語の羅列） - OK例:
alt="2024年度の売上推移グラフ。上半期と比較して下半期の売上が15%増加したことを示している"
製品写真の場合は、型番や色、形状などの識別情報を盛り込むことが望ましい対応です。
- NG例:
alt="オフィスチェア" - OK例:
alt="エルゴノミクスデザイン採用の黒色オフィスチェア（メッシュ素材・肘掛け調整可能）"
2. バナー画像・リンク付き画像
画像が他ページへのハイパーリンクとして機能している場合、alt属性はアンカーテキスト（リンクテキスト）と同等の役割を果たします。そのため、画像の説明ではなく「リンク先のページで何が得られるか」「どこに移動するか」を記述するのが鉄則です。
- NG例:
alt="バナー" - NG例:
alt="クリックしてください" - OK例:
alt="無料相談・お見積もりのお問い合わせフォームへ" - OK例:
alt="製品カタログのPDF資料ダウンロード"
ボタン画像やバナー画像でリンク先が不明確な場合、ユーザーは遷移を躊躇してしまいます。行動を明確に示す代替テキストを設定することがCVR向上にも直結します。
3. 装飾目的の画像（背景・アイコン・区切り線）
ページの理解において特別な意味を持たない視覚的な装飾（デザイン目的の背景画像、区切り線、丸や星のアイコンなど）の場合、alt属性は空（alt=""）に設定します。
- NG例:
alt="青い矢印アイコン"（文章の理解を妨げる不要な読み上げが発生する） - NG例:
alt="装飾線" - OK例:
alt=""（属性自体は残し、中身を空にする）
注意点として、alt属性そのものを省略して記述しない（<img src="line.png">のように属性を書かない）形にすることは避けてください。alt属性自体が存在しない場合、一部のスクリーンリーダーはファイル名（「line.png」など）をそのまま読み上げてしまい、ユーザーに不要な混乱を与えます。装飾画像は必ず「空のalt属性（alt=""）」を記述します。
4. 文字が含まれる画像（バナーコピー・タイトル画像）
デザイン上の理由で画像内にテキストが含まれている（画像化された見出しやキャッチコピー）場合、原則として画像内に書かれている文字をそのままalt属性に入力します。
- NG例:
alt="キャンペーン画像" - OK例:
alt="期間限定：新規WEB制作キャンペーン！初期費用20%オフ実施中"
ただし、近年のWeb制作においては、SEOおよびアクセシビリティの観点から「極力画像化テキストを使用せず、HTML＋CSSで装飾する」ことが推奨されます。
画像の用途別 alt属性設計ルール一覧表
画像の役割とalt属性の書き方を一覧表でまとめました。サイト運用や制作ディレクション時のチェックリストとしてご活用ください。
| 画像の役割 | alt属性の基本的な記述方針 | 具体的な記述例 |
|---|---|---|
| 情報伝達画像 | 画像が持つ意味・データ・状態を具体的に要約して記述する | 「社内研修でプレゼンテーションを行っている講師の様子」 |
| リンク・ボタン画像 | リンク先のコンテンツ内容やユーザーのアクションを記述する | 「会社概要・沿革ページを見る」 |
| 文字入り画像 | 画像内に描かれている文字情報をそのまま正確にテキスト化する | 「創業50周年記念プロジェクト特設サイト」 |
| 純粋な装飾画像 | alt属性の中身を空（alt=””）にして読み上げをスキップさせる | alt="" |
alt属性設定でやってはいけないNGパターンと注意点
alt属性はSEO対策において有効な項目ですが、不適切な設定を行うと検索エンジンからのペナルティやUXの低下を招く恐れがあります。実務で避けるべき代表的なNGパターンを解説します。
キーワードの乱用・詰め込み（スパム判定リスク）
SEO評価を高めたいからといって、狙っているキーワードを無脈絡に詰め込む行為（ワードサンプラグイン行為）は厳禁です。
例えば、大阪のホームページ制作会社のサイトにおいて、関係のないスタッフ写真に対しalt="大阪 ホームページ制作 Web制作 格安 SEO対策 成果"のようにキーワードを網羅する書き方は、検索エンジンのガイドライン違反と判定され、ペナルティ対象となる可能性があります。
代替テキストは、あくまで「画像の説明」として自然な日本語文章で作成しなければなりません。
画像のファイル名や意味のない記号の使い回し
デジタルカメラやストックフォトサイトからダウンロードしたファイル名（例：DSC_1234.jpgやshutterstock_98765.png）をそのままalt属性に流用する設定は間違いです。
ファイル名は画像の内容を表すものではないため、アクセシビリティ面でもSEO面でも価値を生み出しません。また、「***」や「画像1」といった抽象的な記号・番号の連続使用も避けてください。
「〜の画像」「〜の写真」といった冗長な単語の繰り返し
代替テキストの冒頭に毎回「〜の画像」「〜の写真」と記述することは基本的に不要です。
スクリーンリーダーは、img要素に出会った際に自動的に「画像、〇〇」と読み上げるため、alt属性内に「〜の画像」と書いていると「画像、〇〇の画像」と重複して二重読み上げされてしまいます。文脈上、絵画作品やイラストであることを強調したい場合（「水彩画で描かれた富士山」など）を除き、無駄な接頭語・接尾語はカットしてシンプルに記述します。
主要CMS・HTMLでのalt属性設定手順と実装実務
実際のWebサイト構築・運用業務におけるalt属性の設定手順について、HTMLでの直接記述とWordPress管理画面での設定方法の双方から説明します。
HTML直書きにおける記述方法
静的HTMLでサイトを構築する場合は、imgタグ内に直接`alt`属性を付与します。マルチデバイス対応としてレスポンシブWebデザインを実装している場合でも記述ルールは同一です。
<img src="/images/company-building.jpg" alt="大阪市中央区にあるイノベートスコープ株式会社の本社ビル外観" width="800" height="600">
また、`picture`タグを使用して画面サイズごとに画像を切り替える場合でも、各`source`タグではなく最深部の`img`タグに`alt`属性を一度だけ記述します。
WordPressメディアライブラリでの適切な設定手順
WordPressを利用してサイト運用を行う場合、画像のalt属性は管理画面の「メディアライブラリ」から簡単に設定できます。
- WordPress管理画面の左メニューから「メディア」＞「ライブラリ」を選択します。
- 設定対象の画像をクリックし、「添付ファイルの詳細」画面を開きます。
- 画面右側に表示される「代替テキスト」欄に、適切な文章を入力します。
- 入力内容は自動的に保存され、以降その画像を投稿や固定ページに挿入した際、HTML上にalt属性が自動出力されます。
すでに投稿本文内に配置済みの画像については、各ブロック（画像ブロック）の「ブロック設定」パネルから個別に代替テキストを修正することも可能です。WordPress運用における全体像や構築ルールについては、イノベートスコープ株式会社 TOPのWeb制作サービスページでもご案内しています。
よくある質問
すべての画像にalt属性を設定する必要がありますか？
はい、すべての`img`要素に`alt`属性自体を記述する必要があります。ただし、記述する「内容」は画像の性質によって異なります。情報を持つ画像には具体的な説明文を記述し、単なる背景や飾りなどの装飾用画像には`alt=””`（空の代替テキスト）を設定します。属性そのものを省略するとアクセシビリティエラーの原因となるため、必ず属性自体は付与してください。
alt属性の文字数に制限や推奨される長さはありますか？
技術的な文字数上限はありませんが、一般的には100文字〜120文字程度に収めるのが推奨されます。あまりに長い文章をalt属性に詰め込むと、音声読み上げで冗長になりユーザーの利便性を損なうためです。長文での解説が必要な図解などの場合は、alt属性には概要のみを記載し、詳細な説明は本文テキスト側（またはfigcaption要素）に記述する設計が適切です。
alt属性とtitle属性・caption（キャプション）の違いは何ですか？
それぞれの役割と表示タイミングは以下のように定義されています。
- alt属性: 画像の「代替テキスト」。画像が表示されない環境や読み上げソフト向けの情報。通常は画面上に表示されません。
- title属性: 画像の「補足情報」。パソコンで画像の上にマウスカーソルを乗せた際（ホバー時）にツールチップとして浮き出て表示されます。
- caption（キャプション）: 画像の「補足説明文」。画像の下部などに常時表示され、すべてのユーザーが視覚的に確認できるテキストです。
SEOおよびアクセシビリティで最も重要なのはalt属性です。title属性は必須ではありません。
既存サイトの大量の画像に対して後からalt属性を設定・見直す優先順位は？
全画像の修正が困難な場合、以下の優先順位で段階的に改修を進めるのが効果的です。
- 主要なコンバージョン導線にある画像（問い合わせバナー、購入ボタン、送信ボタン）
- トップページや主要サービスページの核となる図解・概念図
- 検索流入が多いブログ記事・オウンドメディア内の解説用写真・データグラフ
- サイト共通で使用しているヘッダー・フッター内のロゴ画像やナビゲーション画像
まとめ：適切なalt属性設定でSEO評価とアクセシビリティを最大化しよう
ホームページのalt属性（代替テキスト）は、SEO対策とWebアクセシビリティ向上の双方において欠かせない実務要素です。画像が果たす役割（情報・リンク・装飾）に応じて適切な書き方を使い分けることで、検索エンジンへの情報伝達をスムーズにし、視覚障害者や通信環境が限られたユーザーにも優しいサイト構築が実現します。
単なるキーワード詰め込みや不必要な自動入力を避け、文脈に即した自然で具体性のある代替テキストを設定しましょう。日々のWeb更新作業やリニューアルの運用ルールにalt属性のガイドラインを組み込むことが、Webサイトの信頼性と検索パフォーマンスを中長期的に高める鍵となります。
CONTACT
Web制作・SEO・AIOについてお気軽にご相談ください
ホームページ制作・リニューアル、WordPress、SEO・AIO対策、 ECサイト、Web集客、保守・セキュリティなど、 Webに関するご相談を承っています。 「何から相談すればよいかわからない」という段階でもお気軽にお問い合わせください。