AIで画像のaltを作るプロンプト｜装飾・リンク・図表を先に分ける

結論：AIにaltの候補を作らせるときは、画像の説明に加えて「ページ内の役割」「近くの文章」「リンク先」を渡します。装飾画像、意味のある画像、操作に使う画像を先に分けると、見た目の説明だけが返るのを減らせます。

ここでは架空のコーヒー店のLPを題材に、3ケースの入力と出力を作りました。画像認識の精度を測る実験ではなく、文章で渡した条件からaltの候補を組み立てる例です。実際のページへ入れる前には、画像と周辺のHTMLを人が確認します。

この記事の目次

1. 「何が写っているか」だけでは決められない
2. W3Cの判断手順を、そのまま質問の順番にする
3. そのまま使えるプロンプト
4. この3ケースに対する出力例
5. HTMLに入れるときの確認
6. 候補を採用する前のレビュー表
7. まとめ：画像より先に、画像の仕事を渡す

「何が写っているか」だけでは決められない

同じコーヒーカップの画像でも、背景として飾る場合と、商品を紹介する場合と、メニューへ進むボタンにする場合では役割が違います。

← 表は横にスクロールできます →

W3Cの判断手順は、画像の用途や周辺の情報に応じて代替テキストを考える構成です。装飾や周辺テキストと重複する画像では空のaltが適切な場合があります。W3Cの判断手順

AIへの入力にも、その判断に必要な文脈を含めます。「この画像のaltを書いて」だけでは、画像の役割が抜けたまま候補が作られます。ファイル名から店名や商品名を推測させないことも大切です。

W3Cの判断手順を、そのまま質問の順番にする

W3CのAn alt Decision Treeは、上から順に答えていくと書き方が決まる構成になっています。この順番をそのままAIへの指示に写すと、役割の判定を飛ばさずに済みます。

← 表は横にスクロールできます →

注目したいのは、空のalt（alt=""）が正解になるケースが4通りあることです。画像内の文字が本文と重複する場合、視覚効果だけの文字、近くの本文と内容が重複する画像、純粋な装飾。AIは「何か書かなければ」と動きやすいので、空でよい場合があると明示しておきます。

もう1つは、グラフや複雑な図はaltに詰め込まないという方針です。W3Cは複雑な画像について、画像に含まれる情報をページ上の別の場所に記載するとしています。売上推移のグラフなら、数値を読める表やテキストを本文側に置き、altはその図が何を示すかの短い説明にとどめます。

この4つの質問を指示文に含めるだけで、「カップが置かれた写真」のような外観の描写だけが返る状態からは抜けられます。

そのまま使えるプロンプト

候補だけでなく、理由と確認が必要な点を別に出すよう指定します。理由をaltの中へ入れさせないのがポイントです。

次の画像について、ページの文脈に合うalt候補を作ってください。
入力にない事実、人物名、商品名、効果は補わないでください。

先に役割を「装飾・情報・機能・要確認」から選んでください。
装飾なら空文字の候補を出してください。
画像だけのリンクならリンク先の目的が伝わる候補にしてください。
図表の数値を長文で詰め込まず、本文側に必要な説明も分けてください。

出力はJSON配列にしてください。
項目は id, role, alt, reason, needsReview の5つです。

入力：
1. id=hero-cup
   内容=無地のカップを置いた写真
   役割=見出し横の装飾。画像に固有の情報はない
   近くの文章=自家焙煎コーヒーを毎日の一杯に
   リンク=なし
2. id=menu-link
   内容=カップのアイコン
   役割=文字を伴わないリンク
   近くの文章=リンクの目的を説明する文はない
   リンク先=/menu/。コーヒーメニュー一覧
3. id=price-chart
   内容=3商品の価格を棒で示す図
   役割=価格の比較
   近くの文章=直後に同じ3商品の価格表がある
   リンク=なし

実案件では入力の3ケースを置き換えます。画像に見える文字は、読み間違いがないか確認したものを渡してください。機密のある画面や顧客情報を例のまま貼り付ける必要はありません。

この3ケースに対する出力例

この例で作成した候補は次のとおりです。図表は、直後の表が同じ情報を伝えるかを確認項目として残しました。

[
  {
    "id": "hero-cup",
    "role": "装飾",
    "alt": "",
    "reason": "画像に固有の情報がなく、見出しを飾る用途のため",
    "needsReview": false
  },
  {
    "id": "menu-link",
    "role": "機能",
    "alt": "コーヒーメニューを見る",
    "reason": "画像だけのリンクなので、移動先の目的を伝えるため",
    "needsReview": false
  },
  {
    "id": "price-chart",
    "role": "要確認",
    "alt": "",
    "reason": "直後の価格表が同じ比較情報を伝えるなら重複する説明を避けられるため",
    "needsReview": true
  }
]

これは3ケースに対する候補で、すべての画像へ当てはめる正解表ではありません。特に図表は、数値だけでなく傾向や注釈も表から読み取れるかを確認します。図にしかない意味があれば、本文の説明やaltを補う必要があります。

画像だけのリンクでは、カップの色や線の形より、何をするリンクかを伝えます。W3Cの機能画像の説明でも、操作やリンクの目的が代替テキストの焦点になります。W3Cの機能画像の案内

HTMLに入れるときの確認

空文字とalt属性の省略を混同しないようにします。装飾として空の候補を採用する場合は、HTMLでも意図を明示します。

<img src="cup.jpg" alt="">
<a href="/menu/">
  <img src="cup-icon.svg" alt="コーヒーメニューを見る">
</a>

実装時には、次の3点を確認します。

1. 画像リンクに、同じ目的を伝える別のテキストが追加されていないか。
2. ページの編集で画像の役割が変わっていないか。
3. 図表の代わりになる表や本文が、実際にページへ出ているか。

たとえばデザイン変更でアイコンの横に「メニューを見る」という文字が入り、同じリンクにまとめられた場合、画像だけのリンクという前提が変わります。以前の候補をそのまま残すのではなく、リンク全体で何が伝わるかを確認します。

HTMLを組むプログラムでは、AIの文字列を属性へそのまま連結せず、使っているテンプレートのエスケープ処理を通してください。引用符などを含む候補でも、属性が途中で切れないようにするためです。

候補を採用する前のレビュー表

JSONが返ってきたことと、ページに適した代替テキストであることは別です。出力形式の検査と内容の確認を分けておくと、作業を戻しやすくなります。

← 表は横にスクロールできます →

候補に店名や値段が追加されていたら、長さを整える前に事実を確かめます。入力にない情報を補った候補は、そのまま使わず入力の不足を直して作り直します。

同じページの画像をまとめて処理する場合も、1枚ずつidを付けておきます。順番だけで対応させると、画像の追加や並べ替えで別のaltが入る可能性があります。候補と画像の対応表を残すほうがレビューしやすくなります。

まとめ：画像より先に、画像の仕事を渡す

AIにaltを頼むときは、画像内容、役割、周辺テキスト、リンク先の4点をそろえます。候補が出たら、実際のHTMLで前提が合っているかを確認してください。

最初はLPの全画像ではなく、装飾1枚、情報を伝える画像1枚、画像リンク1個で試すと判断を比較できます。採用した候補と直した理由を残せば、次のページでもレビューの基準として使えます。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。