アクセシビリティ

AI生成画像の代替テキストの書き方

代替テキストは、画像を見られない人にその役割を伝えます。簡単な書き方の型、空にしてよい場面、商品写真・イラスト・グラフの例を紹介します。

読了目安1分
暗いテーブルの上に立てた小さな真鍮の虫眼鏡。レンズ越しに紫の光が輝き、背後には柔らかな霞が広がっている

画像はイメージどおりに仕上がったのに、ページエディタに「代替テキスト」の入力欄が出てきました。多くの人はファイル名を入れたり、プロンプトを貼ったり、空欄のままにしたりします。どれもこの欄を無駄にしています。代替テキストは、画像が見えないときにその代わりをする短い言葉です。スクリーンリーダーの利用者、回線の遅い訪問者、ページを読む検索エンジンのためのものです。ここでは、自分で生成した画像に代替テキストをつけるための、短く実用的な方法を紹介します。

代替テキストは何のためにあるのか

役割はひとつです。画像が置かれている場所で、見える人が画像から得るものを読者に伝えることです。キャプション(誰にでも見えて文脈を補うもの)ではなく、キーワードを詰め込む欄でもありません。検索エンジンも代替テキストを読み、わかりやすく正直な説明はページの理解に役立ちますが、検索語を詰め込んだ文は誰の役にも立たず、スクリーンリーダーの利用者にはすぐ気づかれます。

簡単な型

次の3つを順番に自問し、答えから素直な一文を書きます。

  1. それは何か。 主役を日常の言葉で書きます。陶器のマグカップ、灯台、棒グラフなど。
  2. ここで何が大事か。 そのページに必要な細部です。商品の色、表紙の雰囲気、グラフの傾向など。
  3. どんな種類の画像か。 意味が変わる場合だけ書きます。イラスト、3Dレンダリング、写真風のレンダリング、水彩など。

長さは一文程度にします。「〜の画像」「〜の写真」は省きましょう。スクリーンリーダーが画像であることをすでに読み上げています。

情報を伝えるものか装飾か、先に決める

書き始める前に、その画像が隣のテキストにはない情報を持っているかを考えます。商品ページの商品写真は持っています。見出しの背景にある穏やかな抽象模様は持っていません。装飾の画像には空のalt属性(alt="")をつけます。これで支援技術が読み飛ばします。1ページで3回も「柔らかな光の紫のグラデーション」と聞かされるより、ずっとよい方法です。

  • 情報を伝えるもの: 商品写真、何かを説明するイラスト、グラフ、記事の表紙。説明を書きます。
  • 装飾: テクスチャ、区切り線、雰囲気づくりの背景、タイトルを繰り返すだけのヘッダー画像。altは空にします。
  • 機能を持つもの: リンクやボタンの中の画像。見た目ではなく、行き先や動作を書きます。

スタイルは正直に書く

生成された画像は実在の場所を撮った写真ではなく、代替テキストもそう装うべきではありません。スタイルが読者に関係するなら、そのまま書きます。「夕暮れの崖に立つ灯台のイラスト」や「オークのテーブルに置かれた陶器のマグカップの商品レンダリング画像」のように。撮影されたことのないものに「写真」と書くのはやめましょう。ツールを宣伝するためではなく、自分で確かめられない人を惑わさないためです。生成画像を公開するなら、AI画像の見分け方ガイドがこの誠実さのもう一方の側面を扱っています。

3つの例

商品写真

ショップのページでは、購入者が目にするもの、つまり色や形が必要です。背景は重要な場合だけ書きます。

プロンプト
明るいオークのテーブルの上に、柔らかな窓の光を受けて置かれた、持ち手の広いマットな緑の陶器のマグカップの商品レンダリング画像
主役、大事な細部、そして画像の種類を正直に。キーワードは足していません。

イラスト

雰囲気を伝えるブログの表紙なら、短い一文で十分です。タイトルがすでに内容を語っているなら、altを空にしてもかまいません。

プロンプト
穏やかな水面に浮かぶ小さな舟と、大きな月の水彩風イラスト

グラフのような画像

この画像はデータを伝えるので、altには要点を書く必要があります。注意が必要です。画像モデルはグラフらしきものを描きますが、数字やラベルは信頼できません(理由は手と文字のガイドで説明しています)。本物のグラフはグラフ作成ツールで作り、altはその実データから書きましょう。細かな数値は表や隣のテキストに載せます。

プロンプト
1月から6月まで毎月増え続け、4月の伸びが最も大きい月別登録数の棒グラフ
色ではなく、伝えたい結論を書きます。正確な数値はページ本文に入れます。

プロンプトは下書きであり、コピーではない

自分で書いたプロンプトは、すでに主役が書かれているので良い下書きになります。ただし、そのまま貼らないでください。良いプロンプトはモデルへのレシピで、照明の用語、カメラ用語、スタイルタグなど、聞く人には意味のない言葉が含まれます(なぜモデルに効くのかはプロンプトガイドで解説しています)。また、プロンプトは望んだものを述べたものですが、代替テキストは完成した画像に実際にあるものを述べなければなりません。モデルはぶれます。3つ目のマグカップには持ち手がないかもしれません。結果を見て、プロンプトの主役は残し、技術的な言葉は削り、意図どおりに出なかった部分を直しましょう。

簡単なチェックリスト

  • その画像は情報を伝えるもの、装飾、機能のどれか。
  • 一文で、主役を先に、「〜の画像」は書かない。
  • すべての細部ではなく、このページに必要な細部。
  • 重要な場合は画像の種類(イラスト、レンダリング)を書く。
  • プロンプトだけでなく、完成した画像と一致している。
  • キーワードの羅列やファイル名は入れない。

スタジオができることとできないこと

スタジオは画像を作りますが、代替テキストは書かず、ダウンロードにも追加しません。画像は2Kで届き、説明は公開する場所で自分で書きます。ページの文脈がわかるのはそこだからです。その判断はあなた次第で、画像が何のためにあるかを知っているのはあなただけです。商品や表紙の制作については、商品写真とブログのヘッダー画像の記事が、このアドバイスが当てはまる画像を紹介しています。作成はスタジオで、利用できるスタイルはモデルのページでご覧ください。

よくある質問

代替テキストはどのくらいの長さにすべきですか。

明確な一文程度です。画像が何を示し、なぜそこにあるのかを伝えられる長さで、数秒で聞き終えられる短さにします。グラフのデータなど長い説明はページ本文に入れましょう。

AIのプロンプトを代替テキストとして貼ってもよいですか。

いいえ。主役を拾う下書きとして使い、照明、カメラ、スタイルの用語を削って、完成した画像と照らし合わせてください。結果はプロンプトと違うことがあります。

装飾的なAIアートにも代替テキストは必要ですか。

いいえ。情報を加えない画像には空のalt属性をつけ、スクリーンリーダーに読み飛ばさせます。情報を伝える画像には短い説明をつけましょう。

スタジオは代替テキストを自動で書いてくれますか。

いいえ。画像を生成するだけです。説明は、画像が置かれるページを知っているあなたが、公開する場所で書きます。

#アクセシビリティ#SEO#画像

続けて読む

すべての記事 →