タグ: 代替テキスト

LP画像のaltは、その画像を見られないときに必要になる情報や、リンクの行き先を書くのが基本です。 飾りだけの画像には空のaltを使い、画像だけで伝えている料金や申込条件はページ本文にも残します。

AIで見栄えのよい画像を作れても、掲載時の設定がすべて「バナー画像」「メインビジュアル」のままでは、何を伝える画像か分かりません。一方、どの画像にも長い説明を入れると、読み上げ時に同じ情報が繰り返されることがあります。

この記事では、画像制作を依頼する担当者やWordPress更新担当者向けに、LPでよく使う画像のaltを具体例で整理します。

altを考える前に、画像の役割を分ける

altは、HTMLの画像要素に設定する代替テキストです。画像を見ることが難しい利用者へ内容を伝えるために使われます。画面に見えるキャプションや、画像に焼き込まれた文字とは別のものです。

最初に、次の三つを確認します。

1. この画像にしかない情報があるか。
2. 画像がリンクやボタンの内容になっているか。
3. 近くの本文や、同じリンク内の文字だけで意味が伝わるか。

W3C WAIのaltの判断手順も、文字の有無、機能、文脈での意味などを確認して判断する構成です。画像ファイルだけを見て決めず、掲載ページを一緒に確認しましょう。

LPで使う画像	altの考え方	このページでの例
告知内容が画像にしかないバナー	読者に必要な告知文を伝える	「相談会 11月8日開催、参加無料、事前予約制」
本文と情報が重複する装飾画像	追加情報がなければ空にする	alt=""
画像だけの相談リンク	行き先や行動を伝える	「LP制作の相談フォームへ」
商品の形を伝える写真	本文だけでは分からない特徴を書く	「白いマグカップ。取っ手は指を掛けやすい角形」
複雑な料金比較表の画像	要約と、本文側の表・説明を用意する	「3プランの料金比較。詳細は次の表」

ここからの告知日・商品・料金プランは説明用の架空例です。実際の掲載文言と一致するように調整してください。

例1：文字入りバナーは、必要な告知内容を落とさない

画像に「相談会」「11月8日」「参加無料」「事前予約制」とだけ書かれていて、本文に同じ案内がないケースを考えます。

この場合、「明るい黄色のイベントバナー」では、参加の判断に必要な情報が伝わりません。altには「相談会 11月8日開催、参加無料、事前予約制」のように、画像内の告知内容を入れます。

W3C WAIの文字を含む画像の説明では、画像化された文字を使う場合の代替テキストに、表示されている文字を含める考え方を示しています。

ただし、長い注意事項まで画像に詰め込み、altだけで補う運用は避けたいところです。見出し、日時、料金、条件をページ上の文字として掲載し、画像は短い訴求を担う形にすると、文言の修正もしやすくなります。

生成時の誤字や数字の校正は、AIで日本語入りバナーを作るときの注意点で確認できます。本稿のalt設定は、画像そのものの校正の代わりにはなりません。

例2：装飾だけなら、空のaltを使う

サービスの説明文の横に、雰囲気づくりのための抽象的な光や模様が置かれているとします。その絵にしかない情報がなく、リンクにもなっていないなら、alt=""が候補です。

「青い光の装飾画像」と読ませても、相談するための情報は増えません。

W3C WAIの装飾画像の説明では、装飾画像に空のaltを指定し、読み上げで余分な情報を増やさない方法を示しています。alt属性そのものを省略することと、空の値を指定することは別です。

同じ写真でも、ページによって役割は変わります。店舗の雰囲気を伝えるだけなのか、入口の段差や座席配置を説明する写真なのかで、必要な情報を判断してください。

例3：画像だけのリンクは、見た目より行き先を伝える

相談フォームへ移動する画像リンクに「オレンジ色の角丸ボタン」と設定しても、何ができるか分かりません。画像だけでリンクを構成する場合は、「LP制作の相談フォームへ」のように行き先を示します。

W3C WAIの機能を持つ画像の説明では、リンクやボタンの画像は、その機能を代替テキストで伝える考え方が示されています。

一方、同じリンクの中に「LP制作の相談フォームへ」という文字があり、その横に矢印画像を添えているだけなら、矢印のaltは空にできる場合があります。文字で分かる行動を、画像でも重ねて読ませる必要はありません。

画像の中に描いただけのボタンは、ページ上の操作部品にはなりません。実際にクリックできるリンクやフォーム送信ボタンが必要です。掲載時にはTabキーで移動できるか、リンクならEnterキーで目的のページへ進むかも確認します。

例4：商品写真は、購入や相談の判断に必要な特徴を書く

商品写真なら「商品画像1」ではなく、その場所で伝えたい特徴を簡潔に書きます。

たとえばマグカップの取っ手を説明する段落なら、「白いマグカップ。取っ手は指を掛けやすい角形」が候補です。すでに本文で色も形も十分に説明している場合は、写真が追加で何を伝えているかを見直します。

W3C WAIの情報を伝える画像の説明も、画像の意味を掲載文脈に合わせて伝える考え方です。

AI生成のイメージ画像を、実物の写真や納品実績と誤解させないことも大切です。「制作イメージ」などの説明が必要なら、altだけに隠さず、見えるキャプションや本文にも書きます。

例5：料金表や手順図は、altだけに全部を詰め込まない

三つのプランについて、料金・対応範囲・納期・追加条件を一枚の画像で比較しているとします。全セルを長いaltへ詰め込むと、項目同士の関係をつかみにくくなる場合があります。

画像の近くにページ上の表を用意し、各項目を確認できる形にします。altは「3プランの料金比較。詳細は次の表」のように概要と説明の場所を示す方法が考えられます。画像と本文が完全に同じ内容で、画像が追加情報を持たない場合は、空のaltにする判断もあります。

W3C WAIの複雑な画像の説明では、短い代替テキストと詳細な説明を組み合わせる方法などを紹介しています。

料金や条件を更新するときは、画像と本文の両方が対象です。「画像は旧料金、本文は新料金」という食い違いが起きるなら、変更の多い情報を本文や表で管理する設計を先に検討しましょう。

SEO目的のキーワードを詰め込まない

altに「LP制作 格安 おすすめ 東京 集客」と並べても、画像の意味は伝わりません。

Google検索セントラルは、画像のSEOベストプラクティスで、代替テキストや周囲のコンテンツなどを画像理解に利用すると説明し、キーワードの乱用を避けるよう案内しています。

画像の内容や行き先にサービス名が関係するなら自然に含めます。関係のない地域名や売り文句を追加する必要はありません。altを設定しただけで検索順位や問い合わせ件数が上がると考えず、まず必要な情報が伝わるかを確認します。

公開前は「入力したか」より「掲載ページで伝わるか」を確認する

WordPressのメディア情報に代替テキストを入力した後も、実際の画像ブロックや公開前プレビューを確認します。管理画面の値だけで、ページに反映されたと判断しないようにしましょう。

次の順序なら、少人数のチームでも確認しやすくなります。

1. LPの上から、画像を「情報・装飾・リンク」に仮分類する。
2. 画像だけに書かれた料金・日付・申込条件を探す。
3. alt案を作り、隣接する本文やリンク文言との重複を確認する。
4. プレビューのHTMLで、画像のaltとリンクの構造を確認する。
5. キーボード操作と、可能ならスクリーンリーダーで実際の読み上げを確認する。

画像を非表示にする確認は、情報の欠落を探す補助にはなりますが、読み上げの確認を置き換えるものではありません。スマホでの文字の大きさや見切れも別に確認します。

画像容量や表示の待ち時間も気になる場合は、LP画像の軽量化チェックリストで、情報の伝え方と読み込みの問題を分けて確認できます。

YOSHIO.devに相談するときのメモ

相談時は、現在のLPのURL、対象の画像、画像に入れたい文言、リンク先が分かると整理しやすくなります。

たとえば、次のようなメモで構いません。

トップの告知画像に日付と参加条件が入っています。スマホで読みにくく、更新のたびに画像を作り直しています。画像に残す文字とページ本文に出す情報、相談ボタンの置き方を整理したいです。

YOSHIO.devでは、LP制作と画像・バナー素材制作を相談できます。画像の用途とページ構成を一緒に確認し、対応範囲を相談する入口としてご利用ください。

LP画像と本文・相談導線の整理について相談する

よくある質問