--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/ai/image-alt-text' title: 'AIに代替テキストを書かせる | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:26:06+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: '代替テキストはスクリーンリーダーと検索エンジン向けに写真を説明します。Imageエレメント経由で写真をアップロードする際、AIが代わりに書けます。写真がまだアップロードフォームにあるうちに1クリックするだけです。DXPR Builderはそのテキストを画像のAlt attributeにコピーします。動画ではキャンパスの写真をアップロードしてAIに説明させています。' tags: - 'Write and design with AI' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:26:06+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: AIに代替テキストを書かせる description: '代替テキストはスクリーンリーダーと検索エンジン向けに写真を説明します。Imageエレメント経由で写真をアップロードする際、AIが代わりに書けます。写真がまだアップロードフォームにあるうちに1クリックするだけです。DXPR Builderはそのテキストを画像のAlt attributeにコピーします。動画ではキャンパスの写真をアップロードしてAIに説明させています。' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:26:06+0000' dateModified: '2026-10-24T11:26:06+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/ai/image-alt-text' articleSection: AIで書く・デザインする - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/ai/image-alt-text' description: '代替テキストはスクリーンリーダーと検索エンジン向けに写真を説明します。Imageエレメント経由で写真をアップロードする際、AIが代わりに書けます。写真がまだアップロードフォームにあるうちに1クリックするだけです。DXPR Builderはそのテキストを画像のAlt attributeにコピーします。動画ではキャンパスの写真をアップロードしてAIに説明させています。' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[AIで書く・デザインする](/ja/hc/documentation/learn-dxpr-builder/ai) # AIに代替テキストを書かせる. DXPR Builderを学ぶページを作るAIで書く・デザインする ## このガイドの内容 関連ガイド - [AIで画像を生成する](/ja/hc/documentation/learn-dxpr-builder/ai/image-generation) - [ページをアクセシブルにする](/ja/hc/documentation/learn-dxpr-builder/advanced/accessibility) - [AIモデルとプロバイダー](/ja/hc/documentation/learn-dxpr-builder/ai/models-and-providers) 代替テキストはスクリーンリーダーと検索エンジン向けに写真を説明します。Imageエレメント経由で写真をアップロードする際、AIが代わりに書けます。写真がまだアップロードフォームにあるうちに1クリックするだけです。DXPR Builderはそのテキストを画像の**Alt attribute**にコピーします。動画ではキャンパスの写真をアップロードしてAIに説明させています。 ## 始める前に - AIは[DXPR BuilderでAIをオンにする](/hc/documentation/learn-dxpr-builder/ai/setup)の説明どおりにオンになっています。 - 対象は**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の内容 | |---|---| | メディアライブラリーから選んだ写真 | ライブラリーの代替テキスト(ある場合) | | 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をオンにする](/hc/documentation/learn-dxpr-builder/ai/setup)の説明どおりにDXPRプロバイダーフォームを保存します。 - **"We could not create an Alt Text, please try again later."と表示される。**AIサービスが応答しませんでした。少し待ってから**Generate with AI**を再度クリックします。 - **Insert selectedの後もAlt attributeが空のままです。**写真は代替テキストの保存前に挿入されました。テキストは**SEO** > **Alt attribute**に入力するか、写真を削除してライブラリーから選び直します。 ## 次のステップ - [AIで画像を生成する](/hc/documentation/learn-dxpr-builder/ai/image-generation)：写真を作ってから説明する。 - [アクセシビリティ](/hc/documentation/learn-dxpr-builder/advanced/accessibility)：すべての人に使えるページにするその他の方法。 - [モデルとプロバイダー](/hc/documentation/learn-dxpr-builder/ai/models-and-providers)：写真を説明するモデル。