画像SEO完全ガイド｜alt属性・次世代フォーマット・AI検索対応の最適化手法
WebサイトのパフォーマンスとSEO効果を左右する要素の中で、多くの企業が見落としているのが**画像の最適化**です。Frontend Toolsの2025年調査によると、画像はWebページの総データ量の**60%以上**を占めており、画像の最適化はページ速度の改善に直結します。
さらに2026年現在、画像SEOの重要性はかつてないほど高まっています。GoogleのCore Web Vitals（LCP、INP、CLS）において、画像の読み込み速度はLCP（Largest Contentful Paint）スコアに直接影響します。また、Google Lens（画像検索）の利用が急増しており、月間120億回以上の画像検索が行われています。
加えて、AI検索の普及により、画像のalt属性やキャプションがAIの情報理解に活用されるようになっています。AIは画像そのものを「見る」ことはできませんが、alt属性やキャプション、構造化データを通じて画像の内容を理解し、回答生成に活用します。
本記事では、画像SEOの基礎であるalt属性の最適化から、WebP・AVIFなどの次世代フォーマット対応、AI検索を意識した画像最適化まで、専門家の視点で徹底的に解説します。
あわせて読みたい
サイト表示速度の改善方法｜SEOに与える影響と対策
サイトの表示速度はユーザー体験とSEOに直結します。表示が遅いと顧客を逃し、検索順位も低下しかねません。本記事では、表示速度がSEOに与える影響から、具体的な計測方法、画像の最適化やキャッシュ活用といった改善策まで、中小企業のWeb担当者向けに分かりやすく解説します。
alt属性（代替テキスト）の最適化
alt属性とは何か
alt属性（alternative text）は、HTML の`<img>`タグに付与する属性で、画像の内容をテキストで説明するものです。画像が表示されない場合の代替テキストとして機能するだけでなく、検索エンジンやAIが画像の内容を理解するための重要な情報源です。
```html <img src="llmo-strategy-diagram.webp" alt="LLMO対策の5ステップを示すフロー図：現状分析、構造化データ実装、コンテンツ最適化、被リンク獲得、効果測定" width="800" height="450" loading="lazy"> ```
alt属性がSEOとLLMOに与える影響
alt属性は、以下の3つの観点でSEOとLLMOに影響を与えます。
| 観点 | 影響 | | :--- | :--- | | **Google画像検索** | alt属性のテキストがGoogle画像検索のランキング要素として使用される | | **ページのSEO評価** | alt属性に含まれるキーワードが、ページ全体のテーマ関連性を強化する | | **AI検索での理解** | AIが画像の内容を理解し、回答生成時の文脈情報として活用する | | **アクセシビリティ** | スクリーンリーダーがalt属性を読み上げ、視覚障害者のWebアクセスを支援する |
効果的なalt属性の書き方
alt属性を書く際の基本原則は、「画像を見ていない人に、画像の内容を正確に伝える」ことです。
**原則1：具体的かつ説明的に書く**
| 悪い例 | 良い例 | | :--- | :--- | | alt="画像" | alt="東京都渋谷区のオフィスで打ち合わせをするZESTAのコンサルタント" | | alt="グラフ" | alt="2024年から2026年のAI検索利用率の推移を示す折れ線グラフ：2024年15%、2025年35%、2026年52%" | | alt="ロゴ" | alt="株式会社ZESTAのロゴマーク" |
**原則2：キーワードを自然に含める**
alt属性にターゲットキーワードを含めることはSEO上有効ですが、不自然なキーワードの詰め込み（キーワードスタッフィング）は逆効果です。
- 悪い例：alt="LLMO対策 LLMO LLMO対策会社 AI検索対策 LLMO" - 良い例：alt="LLMO対策の効果を示すビフォーアフター比較：対策前のAI引用率0%から対策後6ヶ月で引用率35%に向上"
**原則3：適切な長さを保つ**
alt属性の推奨文字数は**50〜125文字**です。短すぎると情報が不足し、長すぎるとスクリーンリーダーでの読み上げが冗長になります。
**原則4：装飾画像にはalt=""を設定**
デザイン上の装飾画像（区切り線、背景パターンなど）には、空のalt属性（alt=""）を設定します。これにより、スクリーンリーダーが不要な情報を読み上げることを防ぎます。
あなたのホームページはAIに引用される構造ですか？
ChatGPT・Google AI・Perplexityに選ばれるサイトかどうか、30秒で無料診断できます。
URLを入力するだけ・完全無料・登録不要
次世代画像フォーマット対応
WebPとAVIFの比較
2026年現在、Webサイトで使用すべき画像フォーマットは**WebP**と**AVIF**の2つです。従来のJPEGやPNGと比較して、大幅なファイルサイズの削減が可能です。
| フォーマット | 圧縮率（JPEGとの比較） | ブラウザ対応率 | 特徴 | | :--- | :--- | :--- | :--- | | **JPEG** | 基準 | 100% | 最も広く使われている写真向けフォーマット | | **PNG** | JPEGより大きい | 100% | 透過対応、イラスト・ロゴ向け | | **WebP** | JPEGの25〜35%小さい | 97%以上 | Google開発、写真・イラスト両対応 | | **AVIF** | JPEGの50%以上小さい | 92%以上 | 最新フォーマット、最高の圧縮率 |
Digital Appliedの2026年ガイドでは、**AVIFをプライマリフォーマット、WebPをフォールバック**として使用することが推奨されています。
`<picture>`要素によるフォーマット切り替え
ブラウザの対応状況に応じて最適なフォーマットを配信するには、HTML5の`<picture>`要素を使用します。
```html <picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="LLMO対策の概念図" width="800" height="450" loading="lazy"> </picture> ```
この記述により、AVIFに対応したブラウザではAVIFが、WebPのみ対応のブラウザではWebPが、どちらも非対応の場合はJPEGが表示されます。
レスポンシブ画像の実装
デバイスの画面サイズに応じて適切なサイズの画像を配信することで、モバイルでのページ速度を大幅に改善できます。
```html <img srcset="image-400w.webp 400w, image-800w.webp 800w, image-1200w.webp 1200w" sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px" src="image-800w.webp" alt="LLMO対策の実施フロー" loading="lazy"> ```
Core Web Vitalsと画像最適化
LCP（Largest Contentful Paint）への影響
LCPは、ページの主要コンテンツが表示されるまでの時間を測定する指標です。多くのWebページでは、LCPの対象要素が画像であるため、画像の最適化はLCPスコアの改善に直結します。
**LCPを改善する画像最適化テクニック：**
| テクニック | 効果 | 実装難易度 | | :--- | :--- | :--- | | **次世代フォーマット（WebP/AVIF）の使用** | ファイルサイズ25〜50%削減 | 中 | | **適切なサイズの画像配信** | 不要なデータ転送を削減 | 中 | | **CDNの活用** | 画像の配信速度を向上 | 低 | | **プリロード（preload）の設定** | ファーストビュー画像の読み込みを優先 | 低 | | **遅延読み込み（lazy loading）** | 初期読み込みのデータ量を削減 | 低 |
CLS（Cumulative Layout Shift）への影響
CLSは、ページの読み込み中にレイアウトがどれだけ「ずれる」かを測定する指標です。画像のwidth属性とheight属性を明示的に指定しないと、画像の読み込み完了時にレイアウトがずれ、CLSスコアが悪化します。
```html <!-- CLSを防ぐ：width/heightを必ず指定 --> <img src="image.webp" alt="説明テキスト" width="800" height="450" loading="lazy"> ```
遅延読み込み（Lazy Loading）の実装
ファーストビュー（画面に最初に表示される領域）以外の画像には、遅延読み込みを設定します。これにより、初期読み込みのデータ量が削減され、ページの表示速度が向上します。
```html <!-- ファーストビューの画像：遅延読み込みなし、プリロード推奨 --> <img src="hero.webp" alt="メインビジュアル" width="1200" height="600" fetchpriority="high">
<!-- ファーストビュー以外の画像：遅延読み込みを設定 --> <img src="content-image.webp" alt="コンテンツ画像" width="800" height="450" loading="lazy"> ```
当社はChatGPTに「AI対策で○○業種に強い会社を教えて」と質問した際、不動産・整体院・歯科医院・美容院・ジム・ネイルサロン・リフォーム/工務店の7業種で推薦されています。（2026年5月時点）
質問: 「AI対策でネイルサロンに強い会社教えて」
あなたのホームページはAIに引用される構造ですか？
30秒で無料診断あわせて読みたい
重複コンテンツのSEO対策｜canonicalタグの正しい使い方
Webサイトの重複コンテンツはSEO評価を低下させる原因です。本記事では、重複コンテンツの定義、発生原因、そしてcanonicalタグを用いた正規化による具体的な対策方法を初心者向けに分かりやすく解説します。正しい知識でサイトの価値を守りましょう。
AI検索を意識した画像最適化
AIが画像情報を理解する仕組み
AI検索エンジン（ChatGPT、Perplexity、Google AI Overview）は、現時点では画像そのものを直接「見て」理解する能力は限定的です。代わりに、以下の情報を通じて画像の内容を理解します。
| 情報源 | AIの活用方法 | | :--- | :--- | | **alt属性** | 画像の内容を直接的に理解する最も重要な情報源 | | **キャプション（figcaption）** | 画像の文脈や補足情報を理解 | | **ファイル名** | 画像の内容を推測する補助情報 | | **周囲のテキスト** | 画像が配置されている文脈を理解 | | **構造化データ（ImageObject）** | 画像のメタ情報を機械的に理解 |
ImageObject構造化データの実装
ImageObject構造化データを実装することで、AIが画像の詳細情報を正確に理解できるようになります。
```json { "@context": "https://schema.org", "@type": "ImageObject", "name": "LLMO対策の効果比較グラフ", "description": "LLMO対策実施前後のAI検索引用率の変化を示すグラフ。対策前0%から6ヶ月後に35%に向上。", "contentUrl": "https://example.com/images/llmo-effect-graph.webp", "creator": { "@type": "Organization", "name": "株式会社ZESTA" }, "dateCreated": "2026-03-01" } ```
ファイル名の最適化
画像のファイル名も、検索エンジンとAIが画像の内容を理解するための情報源です。
| 悪い例 | 良い例 | | :--- | :--- | | IMG_20260301_001.jpg | llmo-taisaku-effect-comparison-2026.webp | | screenshot.png | google-ai-overview-citation-example.webp | | photo1.jpeg | zesta-office-consultant-meeting.webp |
図解・インフォグラフィックの活用
AI検索において、テキストだけでなく図解やインフォグラフィックを含むページは、「視覚的に分かりやすいコンテンツ」として評価される傾向があります。特に、複雑な概念やプロセスを図解で説明しているページは、AIが回答生成時に「分かりやすい情報源」として優先的に参照することがあります。
効果的な図解のポイントは以下の通りです。
- **フロー図**：手順やプロセスを視覚的に表現（例：LLMO対策の5ステップ） - **比較表**：複数の選択肢を視覚的に比較（例：SEO vs LLMO vs MEOの違い） - **統計グラフ**：データを視覚的に表現（例：AI検索利用率の推移） - **概念図**：抽象的な概念を視覚的に説明（例：トピッククラスターモデル）
Google Lens・ビジュアル検索への対応
ビジュアル検索の急成長
Google Lensの利用は急速に増加しており、月間120億回以上の画像検索が行われています。ユーザーがスマートフォンのカメラで商品や建物を撮影し、関連情報を検索する「ビジュアル検索」は、特にECサイトや飲食店にとって重要な集客チャネルとなっています。
ビジュアル検索に最適化するためのポイント
| ポイント | 詳細 | | :--- | :--- | | **高品質な画像** | 解像度が高く、被写体が明確な画像を使用 | | **複数アングル** | 商品の場合、正面・側面・背面など複数アングルの画像を用意 | | **白背景** | 商品画像は白背景で撮影し、被写体を際立たせる | | **構造化データ** | Product構造化データで商品情報を明示 | | **alt属性** | 商品名、色、サイズ、素材などの具体的な情報を含める |
画像SEOの効果測定
測定すべきKPI
| KPI | 測定方法 | 目標値の目安 | | :--- | :--- | :--- | | **Google画像検索からの流入** | Googleサーチコンソール（検索タイプ：画像） | 月次で増加傾向 | | **LCPスコア** | PageSpeed Insights / Lighthouse | 2.5秒以下（Good） | | **CLSスコア** | PageSpeed Insights / Lighthouse | 0.1以下（Good） | | **画像の総データ量** | Chrome DevTools | ページ全体の50%以下 | | **WebP/AVIF配信率** | サーバーログ分析 | 90%以上 |
画像SEO最適化チェックリスト
| チェック項目 | 状態 | | :--- | :--- | | 全ての画像に適切なalt属性を設定しているか | □ | | alt属性は50〜125文字で具体的に記述しているか | □ | | 装飾画像にはalt=""を設定しているか | □ | | WebPまたはAVIFフォーマットを使用しているか | □ | | `<picture>`要素でフォーマットのフォールバックを設定しているか | □ | | レスポンシブ画像（srcset/sizes）を実装しているか | □ | | width/height属性を明示的に指定しているか | □ | | ファーストビュー以外の画像にlazy loadingを設定しているか | □ | | ファイル名が説明的で英数字・ハイフンで構成されているか | □ | | LCPスコアが2.5秒以下か | □ | | CLSスコアが0.1以下か | □ |
あわせて読みたい
SEO対策に効果的な内部リンクの貼り方と設計のコツ
自社サイトのSEO評価を高める「内部リンク」。この記事では、その重要性から基本的な貼り方のコツ、さらには戦略的なサイト設計術までを分かりやすく解説します。クローラビリティやUXを向上させ、検索順位アップに繋がる実践的なノウハウが満載です。
まとめ
画像SEOは、ページ速度の改善、Google画像検索からの流入増加、AI検索での情報理解の向上という3つの効果をもたらす重要な施策です。特に2026年現在、Core Web VitalsがSEOランキングに与える影響が増大し、AI検索が普及する中で、画像の最適化は「やった方がいい」施策から「やらなければならない」施策へと変化しています。
alt属性の適切な記述、WebP/AVIFフォーマットの採用、レスポンシブ画像の実装、遅延読み込みの設定——これらの基本的な最適化を確実に実施することで、サイト全体のSEOパフォーマンスを大幅に向上させることができます。
株式会社ZESTAの**AI対策自動プラン**では、画像SEOを含む包括的なテクニカルSEO診断を提供しています。URLを入力するだけで、alt属性の設定状況、画像フォーマットの最適化状況、Core Web Vitalsのスコアなどを自動で分析し、改善提案を行います。まずは無料のAI対策診断をお試しください。
---
あなたのサイト、AI検索時代に対応できていますか？
2026年のSEO対策は、従来の検索エンジン対策に加えて**AI検索対策（LLMO）**が不可欠です。
SEOの基盤を整えつつ、AIに引用されるサイト構造を構築することで、検索流入とAI経由の流入の両方を獲得できます。
**あなたのホームページはAIに引用される構造ですか？ 30秒でAI診断できます。**
ZESTAの無料AI診断なら、SEO対策とAI検索対策の両方の現状スコアが30秒で分かります。