AIに代替テキストを書かせる.

DXPR Builderを学ぶページを作るAIで書く・デザインする

代替テキストはスクリーンリーダーと検索エンジン向けに写真を説明します。Imageエレメント経由で写真をアップロードする際、AIが代わりに書けます。写真がまだアップロードフォームにあるうちに1クリックするだけです。DXPR Builderはそのテキストを画像のAlt attributeにコピーします。動画ではキャンパスの写真をアップロードしてAIに説明させています。

始める前に

  • AIはDXPR BuilderでAIをオンにするの説明どおりにオンになっています。
  • 対象はAI Image Alt Textモジュールで、有効になっています。DXPR CMSでは自動的に有効になります。
  • ロールにはGenerate AI Alt Tags権限があります。DXPR CMSではコンテンツ編集者、コンテンツ管理者、サイトビルダーに付与されます。

セットアップ

  1. ページにImageエレメントを追加します。設定ダイアログが開きます。
  2. クリックするのはSelect Imageです。
  3. 対象はAdd fileで、Choose Fileをクリックして写真を選びます。
  4. クリックするのはAlternative textフィールドの下にあるGenerate with AIです。
  5. 写真をメディアライブラリーに追加するにはSaveをクリックします。
  6. クリックするのはInsert selectedです。
  7. 開くのはSEOです。Alt attributeにAIの説明が入っています。
  8. ダイアログのSaveをクリックします。

すでにページにある画像の場合は、設定をMore > Settingsで開き、手順2から始めます。サイトに"Transfer image and meta data to chosen AI service?"と表示されたら承認します。写真は説明のためにAIサービスに送信されます。

表示内容

AIが写真を確認している間、フィールドの下に"Generating alt text..."と表示されます。その後、Alternative textに1文の説明が入ります。写真と一緒にメディアライブラリーに保存されるため、その写真を使うすべてのページに反映されます。ImageエレメントではSEO配下のAlt attributeに同じテキストが表示されます。このページのみ変更する場合はそこで変更します。

Alt attributeが「Five laptops and a teapot on a table」と表示されたImage element SEOパネル。その机の写真の横に表示されている

代替テキストの取得元

ソース Alt attributeの内容
メディアライブラリーから選んだ写真 ライブラリーの代替テキスト(ある場合)
AIで生成・編集した画像 説明文または指示文。プレーンな説明に短縮します
手入力 反映先はSEO > Alt attribute

Image carouselエレメントにも同じSEOフィールドがあります。そのAlt attributeはカルーセル全体のトピックを説明します。

空なのはAlt attributeで、その場合画像には代替テキストがまったくなく、スクリーンリーダーがファイル名を読み上げる場合があります。純粋に装飾的な画像には、代わりにセクションまたはカラムの背景画像を使います。背景に代替テキストは不要です。

設定

AI Image Alt Textの設定はConfiguration > AI > AI Image Alt Text settings (/admin/config/ai/ai_image_alt_text)にあります。

設定 動作 デフォルト
Alt text generation prompt AIが従う指示 良質な代替テキストのルール入りプロンプト
Image style 送信前に写真を縮小し、クレジット消費を抑えます モジュール独自のスタイル
AI provider/model 写真を説明するモデル Use Default Image Vision Model。DXPRプロバイダーを先に保存した場合はDXPR
Autogenerate on upload 写真のアップロードと同時にクリックなしで代替テキストを書き込みます オフ
Hide button アップロード時に代替テキストが書き込まれる場合にGenerate with AIを非表示にします オフ

良い代替テキストの書き方

  • 写真の内容を1〜2文で説明します。
  • このページで重要な詳細を含めます。
  • "image of"や"picture of"で始めません。
  • 一般的ではなく具体的に書きます。
写真 悪い例 良い例
チーム写真 "Image" "Five team members in the office lobby"
Open Day "Event" "Students touring the new library on Open Day"
グラフ "Graph" "Bar chart showing 40% more applications in 2026"

代替テキストが表示されない場合

  • Alternative textの下にGenerate with AIボタンがありません。写真がまだアップロードされていないか、ロールにGenerate AI Alt Tagsがないか、画像を読めるAIモデルがありません。先に写真をアップロードし、/admin/people/permissionsで権限を確認して、DXPR BuilderでAIをオンにするの説明どおりにDXPRプロバイダーフォームを保存します。
  • "We could not create an Alt Text, please try again later."と表示される。AIサービスが応答しませんでした。少し待ってからGenerate with AIを再度クリックします。
  • Insert selectedの後もAlt attributeが空のままです。写真は代替テキストの保存前に挿入されました。テキストはSEO > Alt attributeに入力するか、写真を削除してライブラリーから選び直します。

次のステップ