【2026年版】LP画像のalt属性（代替テキスト）の書き方完全ガイド｜SEOとアクセシビリティを同時に改善

LP画像のalt属性（代替テキスト）は、SEOとアクセシビリティの両方に直結する重要な設定です。しかし「alt属性が必要なのはわかっているが、正しい書き方が分からない」「とりあえず画像のファイル名を入れている」という担当者の方も多いのではないでしょうか。

alt属性を適切に設定することで、スクリーンリーダーユーザーへの情報伝達・Google画像検索での流入増加・Lighthouseアクセシビリティスコアの向上という3つの効果が得られます。逆に空のalt属性・ファイル名そのまま・意味のないキーワード羅列は、これらすべてでマイナスに働きます。

本記事では、LP画像のalt属性の正しい書き方を実例付きで解説します。

この記事でわかること

• alt属性とは何か、なぜ必要なのか
• 意味のある画像・装飾画像・アイコンの書き分け方
• LP画像タイプ別の正しいalt属性例
• SEOとアクセシビリティを両立するalt属性の書き方
• NGパターンとその修正方法

---

目次

• alt属性とは
• 画像の種類別alt属性の書き方
• LP画像タイプ別の実例集
• SEOとアクセシビリティを両立するalt属性の書き方
• alt属性のNGパターンと修正例
• 自動チェックと手動確認の方法
• DejamでLPのSEOとアクセシビリティを改善する
• よくある質問
• まとめ

---

alt属性とは

alt属性（alternative text、代替テキスト）とは、<img> タグに設定する属性で、画像が表示されない場合や視覚的に確認できない場合に代わりに表示・読み上げられるテキストです。

<img src="/images/cta-hero.jpg" alt="パソコンの前で笑顔のマーケター。Dejamでデータ分析中の様子" />

alt属性が必要な理由は3つあります。

1. アクセシビリティ：スクリーンリーダーユーザーへの情報提供
視覚障害者が使用するスクリーンリーダーは、alt属性のテキストを読み上げることで画像の内容を伝えます。alt属性がない場合「画像」とだけ読み上げられ、情報が伝わりません。

2. SEO：Googleへの画像内容の伝達
Googleの画像認識は向上していますが、alt属性のテキストが最も確実な情報源です。Google画像検索でのランキングにもalt属性が影響します。

3. 画像が表示されない場合のフォールバック
通信速度が遅い環境・ブラウザが画像をブロックしている場合・画像のURLが壊れている場合に、alt属性のテキストが代わりに表示されます。

---

画像の種類別alt属性の書き方

alt属性の書き方は画像の種類・役割によって異なります。

パターン1：情報を伝える意味のある画像

<!-- ✅ 画像の内容と文脈に合ったalt属性 -->
<img 
  src="/images/dashboard-screenshot.jpg" 
  alt="Dejamのダッシュボード画面。左側にヒートマップ、右側にCVRグラフが表示されている"
/>

• 画像が何を示しているか（What）
• 文脈において何が重要か（Why）
• 画像を見た人が受け取る情報を言語化する

パターン2：装飾的な画像

<!-- ✅ 装飾画像はalt=""（空）にする -->
<img src="/images/decorative-wave.svg" alt="" role="presentation" />

装飾的な画像（背景・区切り線・デザイン要素等）はalt属性を空（alt=""）にします。スクリーンリーダーが読み飛ばすため、ユーザーの邪魔になりません。

パターン3：アイコン

<!-- テキストが隣にある場合：alt=""で読み飛ばす -->
<img src="/images/check-icon.svg" alt="" />
<span>30日間無料トライアル</span>

<!-- テキストがない場合：alt属性で意味を伝える -->
<a href="/dejam/signup/">
  <img src="/images/arrow-right.svg" alt="Dejamの登録ページへ" />
</a>

パターン4：テキストが入った画像（バナー・インフォグラフィック）

<!-- テキスト情報をalt属性に含める -->
<img 
  src="/images/campaign-banner.jpg" 
  alt="期間限定キャンペーン！Dejamを3ヶ月無料でご利用いただけます。2026年6月30日まで"
/>

---

LP画像タイプ別の実例集

ヒーロー画像（LP最上部のメイン画像）

<!-- ✅ 商品・サービスの価値と人物を説明 -->
<img 
  src="/images/hero-lp.jpg"
  alt="Dejamのダッシュボードを操作しながら、CVR改善施策を検討するマーケター"
/>

<!-- ❌ NG：ファイル名そのまま -->
<img src="/images/hero-lp.jpg" alt="hero-lp" />

<!-- ❌ NG：意味のないキーワード羅列 -->
<img src="/images/hero-lp.jpg" alt="CVR改善 LPO ヒートマップ ABテスト ツール" />

実績・数字を示すグラフ・図表

<!-- ✅ グラフが示す情報をalt属性で伝える -->
<img 
  src="/images/cvr-improvement-chart.png"
  alt="Dejam導入前後のCVR比較グラフ。導入前1.2%から導入後2.8%に改善（約2.3倍）"
/>

グラフや図表は画像だけでなく、HTML内にも同等のデータをテーブル等で提供することがアクセシビリティのベストプラクティスです（WCAG 1.1.1）。

導入事例の顔写真

<!-- ✅ 人物名と役職・文脈を含める -->
<img 
  src="/images/case-tanaka.jpg"
  alt="株式会社〇〇 マーケティング部長 田中様"
/>

CTAボタン横のアイコン

<!-- ✅ テキストが隣にある場合は装飾として空alt -->
<button type="button">
  <img src="/images/rocket-icon.svg" alt="" />
  今すぐ無料で始める
</button>

<!-- ✅ アイコン画像がボタンの意味を補完する場合はalt属性を付ける -->
<a href="/dejam/plan/">
  <img src="/images/pricing-icon.svg" alt="料金プランを確認する" />
</a>

---

SEOとアクセシビリティを両立するalt属性の書き方

alt属性はアクセシビリティとSEOを同時に改善できます。正しく書くためのルールを整理します。

良いalt属性の特徴

特徴	例
画像の内容を具体的に説明する	✅「2025年のCVR推移グラフ。3月から8月にかけて1.5%→3.2%に改善」
文脈に合った情報を含める	✅「満足そうにスマートフォンを操作する20代女性ユーザー。ECサイトの購入完了画面」
自然な言葉で書く（キーワード羅列はしない）	✅「CVR改善事例を説明するグラフ」
50〜125文字程度（長すぎない）	—

NGパターン一覧

NGパターン	問題	修正方法
alt="img_001"	ファイル名そのまま	画像の内容を説明するテキストに変更
alt="画像"	意味のないalt	画像の内容を説明するテキストに変更
alt="CVR LPO ヒートマップ ABテスト"	キーワード羅列	自然な文章で内容を説明
alt属性なし	アクセシビリティ違反	必ずalt属性を追加（装飾画像はalt=""）
alt="クリックしてください"	操作指示（意味なし）	画像が伝える情報を説明
alt="" （意味のある画像に使用）	情報が伝わらない	画像の内容をalt属性に記述

---

alt属性のNGパターンと修正例

LP最頻出のNG例とその修正

<!-- ❌NG1：ファイル名がそのまま入っている -->
<img src="/images/feature-heatmap.jpg" alt="feature-heatmap" />

<!-- ✅修正1 -->
<img src="/images/feature-heatmap.jpg" alt="Dejamのヒートマップ機能画面。クリック集中エリアが赤〜黄色で可視化されている" />

---

<!-- ❌NG2：装飾画像なのにalt属性がない -->
<img src="/images/bg-pattern.svg" />

<!-- ✅修正2：装飾画像はalt=""を明示 -->
<img src="/images/bg-pattern.svg" alt="" />

---

<!-- ❌NG3：グラフに「グラフ」とだけ書いてある -->
<img src="/images/roi-chart.png" alt="グラフ" />

<!-- ✅修正3：グラフの内容・結論を書く -->
<img src="/images/roi-chart.png" alt="Dejam導入企業のROI分析グラフ。平均投資回収期間2.3ヶ月、ROI約320%を示す棒グラフ" />

---

自動チェックと手動確認の方法

自動チェック

Google Lighthouse（Chrome DevTools内）またはaxe DevToolsでalt属性の欠落を自動検出できます。

# Chrome DevToolsでのLighthouseチェック
F12 → Lighthouse タブ → アクセシビリティにチェック → Analyze page load

Lighthouseは「alt属性がない画像」を検出しますが、alt属性の内容が適切かどうかは人間による確認が必要です。

手動確認

1. スクリーンリーダーで確認: NVDAやVoiceOverでLPを読み上げ、画像の説明が適切に読まれるか確認
2. 画像を非表示にして確認: ブラウザの設定で画像を非表示にし、alt属性のテキストだけでページの情報が伝わるか確認
3. axe DevToolsで詳細確認: axeはaltが空になっている画像（装飾ではない可能性）も指摘してくれます

---

DejamでLPのSEOとアクセシビリティを改善する

alt属性を含むアクセシビリティ改善の効果は、Dejamのウェブアクセシビリティ機能で診断できます。alt属性の欠落・不適切な設定を含む複数のアクセシビリティ問題を一括スキャンし、改善箇所を優先度順に提示します。

またLPOチェッカーでは、alt属性を含む技術的なSEO問題も同時に診断できます。アクセシビリティとSEOを一体的に改善することで、LPへのオーガニック流入増加とCVR向上を同時に実現できます。

詳しくは「【2026年版】LPアクセシビリティチェックリスト完全版｜WCAG AA準拠と改善の優先順位を解説」も参考にしてください。

---

よくある質問

Q. 画像がリンクになっている場合のalt属性はどう書きますか？

A. リンク画像のalt属性は、画像の見た目の説明ではなくリンクの目的を書きます。例えばロゴ画像がホームへのリンクの場合、alt="〇〇社 - ホームへ" と書くのが正しいです（alt="会社ロゴ" ではなく）。

Q. 同じ画像が複数箇所に出てくる場合、alt属性は同じで良いですか？

A. 同じ画像でも、文脈によってalt属性を変えることがあります。例えば同じ人物写真が「チームメンバーの紹介」と「導入事例」の2箇所に使われている場合、前者は「鈴木太郎（CTOとして在職）」、後者は「株式会社〇〇 導入担当者 鈴木様」と文脈に合わせた説明が適切です。

Q. alt属性の文字数制限はありますか？

A. 公式な文字数制限はありませんが、実用的な上限として125文字程度が推奨されています（多くのスクリーンリーダーが長すぎるaltを途中で切ることがある）。グラフや複雑な図表で詳細な説明が必要な場合は、alt属性を簡潔にしたうえで、本文中またはfigcaption要素で詳細を補足してください。

---

まとめ

LP画像のalt属性（代替テキスト）は、スクリーンリーダーユーザーへの情報提供・Google画像検索でのSEO効果・ページのアクセシビリティスコア向上に直結する重要な設定です。

正しい書き方の基本は、①意味のある画像には画像の内容を文脈に合わせて具体的に説明、②装飾画像はalt=""（空）で読み飛ばし、③アイコンはテキストが隣にあればalt=""、単独なら目的を説明——の3パターンです。

ファイル名・キーワード羅列・「画像」などの意味のないalt属性は、アクセシビリティとSEOの両方でマイナスになるため今すぐ修正しましょう。

---

CVR改善ならDejam！アクセシビリティ対応からLP改善まで一気通貫

Dejamは、LP制作・ヒートマップ分析・ABテスト・ウェブアクセシビリティ診断をオールインワンで提供するCVR改善特化ツールです。alt属性を含むアクセシビリティ問題の診断から改善・効果測定まで一気通貫で支援します。

Dejamの詳しい機能を見る →　無料トライアルを申し込む →