こんにちは。LINEヤフーでアクセシビリティの向上・啓発を行っている中野です。ウェブアクセシビリティの重要性が高まる中、ウェブの課題を解決するために、ChatGPTのカスタムGPTとして開発されたツール「Dekashibe v2」について、その概要、機能、そしてウェブアクセシビリティへの効果を解説します。
ウェブアクセシビリティにおける代替テキストの重要性と課題
代替テキストの定義と役割
画像の代替テキストは、「画像が見えない場合に使われるテキスト」であり、ウェブコンテンツ上で画像を用いて表現・説明したいことが書 かれたテキストです。これは、ウェブアクセシビリティの技術基準であるWeb Content Accessibility Guidelines（WCAG）の「達成基準 1.1.1：非テキストコンテンツ」にも書かれている、アクセシビリティを担保する上で不可欠な要素です。
代替テキストが果たすべき最も重要な役割は、ページ中の画像を代替テキストと置換してもページの意味が変わらないことです。つまり、代替テキストは単なる画像の説明ではなく本文の一部としての役割を担います。
代替テキスト付与が難しい理由
代替テキストの作成が難しいとされる主な理由として、コンテンツ制作者が「何をどこまでテキストで説明してよいか分からない」という点が挙げられます。代替テキストを付与するためのフローチャートとして、W3Cが公開しているaltディシジョンツリーがありますが、それでも簡単な画像と複雑な画像の違いや、何が装飾画像に当たるかを判断することは難しいです。
さらに、情報設計上の問題によってそもそも写真や図を使って何を伝えるかが明確になっていない場合は、代替テキストの内容を検討すること自体が困難です。また、同じ画像であっても、ウェブサイトのヘッダーで企業名が隣接している場合はalt=""（空）でよい一方で、ロゴデザイン自体を紹介する文脈では「青い月とオレンジの星のロゴマーク」のように具体的な説明が必要です。文脈によって最適な代替テキストは異なるため、判断が複雑になります。
代替テキストがないと誰が困るのか
代替テキストがない、または不適切な場合、特に困難を来すのは、スクリーンリーダーなどの読み上げ機能を用いる見えない・見えにくい人たちです。そのような人たちは、画像の内容を受け取れない場合に、ウェブコンテンツからの情報取得や操作が困難になります。例えば、アイコンやボタンが画像だった場合、代替テキストがないと操作すらできなくなります。
AIによる代替テキスト生成
代替テキストの作成は、コンテンツの文脈を理解している著者、編集者、あるいは画像作成者が行いますが、アクセシビリティの知識の濃淡によって品質のばらつきや作業漏れの原因となります。近年、この課題を解決するためにAIを活用した代替テキスト生成ツールが多数登場しています。AIを用いることで、コンテンツ作成者が代替テキスト作成時に用いる、あるいはサービスプラットフォームが画像に自動的に代替テキストを付与する、といった使われ方が見られます。
LINEヤフーでも社内で使えるツールとして、「Dekashibe」を作成しました。
Dekashibeの紹介
「Dekashibe」は、社内で利用することを目的に作られた、図や写真などの画像の種類に応じて代替テキストを生成できるChatGPTのカスタムGPTツールです。
このツールの最大の目的は、利用者に 「画像の代替テキストをどのように付ければよいか分からない」というゼロの状態からの脱却を支援することです。ChatGPTで画像をアップロードして「代替テキストを生成したい」と入力することで使用できます。また、生成された代替テキストに加えて、色のコントラストなどアクセシビリティ上の懸念点について評価して改善方法が添えられることもあります。
例1：風景
生成された代替テキスト：緑が生い茂る森の中を、土の道がゆるやかにカーブしながら奥へと続いている。道の両脇には白い幹の白樺が整然と立ち並び、奥には木々に覆われた山が見えている。全体に柔らかな緑の光が差し込み、静かで爽やかな雰囲気が漂っている。
例2：組織図
生成された代替テキスト：社長を頂点とした企業の組織体制を示す図。社長の下に、CEO（最高経営責任者）、CIO（最高情報責任者）、COO（最高執行責任者）、CFO（最高財務責任者）、CTO（最高技術責任者）が横一列に並んでいる。CEOの下には開発本部があり、CTOの下には技術戦略本部が配置されている。COOの下には事業推進本部があり、その配下にシステム開発部、プラットフォーム開発部、AI・データサイエンス部、品質保証部、アーキテクトチームが箇条書きで記載されている。
開発の経緯と名前の由来
Dekashibeは、アクセシビリティの課題の中でも画像の代替テキストに関する問題の比率が高い（社内プロダクトで10％〜20％）という問題意識から開発されました。
最初に開発されたDekashibe v1は社内の生成AIが限られたリソースしかなかったため、開発はWeb UI込みで進められ、主にLINEギフトで用いられるバナーに最適化して開発されました。Dekashibe v1で生成AIの一定の有用性が確認できたため、バナー以外にも体制図、グラフ、人物写真などさまざまな画像に適切な代替テキストを作成できるよう拡張したDekashibe v2の開発を行いました。その頃には社内でChatGPTが使えるようになったことを受けてカスタムGPTへと移行しました。
なお、ツールの名前とキャラクターはアクセシビリティとは全く関係なく、開発者が「でっかい柴犬を飼いたい」という思いから名付けられました。Dekashibeの回答は、開発者の思いを反映し、エージェントっぽく「〜だワン！」という口調で提供されます。
代替テキスト生成の仕様
Dekashibe v2は、単に画像を説明するだけでなく、画像の用途に応じて詳細なルールに基づいて代替テキストを生成します。画像をアップロードすると、まず以下の8パターンのいずれかに分類して代替テキストを生成します。
| 画像の種類 | 指示内容（代替テキスト生成時のルール） |
|---|---|
| イラスト | 対象と様子、イラストのトーンやテイストを簡潔に説明 |
| グラフ | 何を対象としているかと、数字の推移を説明 |
| システム構成図 | 要素と要素の関係を含めて詳細に説明。矢印や囲み 枠で示された要素ごとの関係性も説明 |
| バナー | 画像に含まれる文字をすべて説明。要素の簡潔な説明と、トーンやニュアンスを簡潔に説明 |
| 人が含まれる写真 | 外見的特徴、動作や所作を説明。人名の追加説明があれば含める |
| 漫画 | コマごとに分けて、セリフ・人物・要素などを説明。縦書きの場合は右上から左下の順番に説明 |
| 組織図・体制図 | 要素と要素の関係を含めて詳細に説明 |
| 風景や建物などの写真 | 建物や機器などの要素に加え、周囲の情景も説明 |
生成された代替テキストは、最初に端的な説明があり、続けて詳細な説明がある構成になっています。長すぎる場合は、最初に記載されている「端的な説明」のみを使うことで短くすることができます。ただし、画像の内容が複雑で要素が多い場合は、説明が長くなることを避けられない場合もあります。また、人名や画像の概要を代替テキストに含めたい場合は「写真に写っているのは出澤CEOです」のように、指示内容に含めてアップロードすることで、生成結果に反映させることができます。そして、写真がイラストと誤認識されるように生成AIによるパターン分類が間違っていた場合は、追加指示で正しいパターンを指示することで修正できます。加えて、複数の画像を一度にアップロードし、それぞれの代替テキストを分けて生成することも可能です。
このように、生成AIと対話をすることで、よりページコンテンツに適切な代替テキストを作成することができるようになっています。
Dekashibe v2が もたらす効果と成果
Dekashibe v2の導入前は、担当者が手作業で文案作成と校正を行っていましたが、導入後は自動生成により校正中心の作業となり、作業時間が短縮されます。また、担当者のアクセシビリティに関する知見が十分ではなくても、最低限の品質を維持できるため、品質のばらつきや作業漏れを防ぐ効果があります。今はまだ量的な効果は出ていませんが、「アクセシビリティについて全く分からない状態でも代替テキスト作成の作業に着手できる」という面では有用です。
具体的な例として、Dekashibe v2はコーポレートサイトでの画像追加・修正時に実際に活用されています。担当者のアクセシビリティの知見を問わず代替テキストを作成できるため、コンテンツ運用フェーズでの品質確保に貢献しています。
AIの限界と人間による調整の重要性
Dekashibe v2のような生成AIを用いたツールは強力なアシスタントとなりますが、生成内容は人間が必ず確認した上で加筆修正を行う必要があります。AIが生成した代替テキストには、次のように不正確な情報や誤解を招く表現が含まれている可能性があるため、必ず内容を確認し調整することが重要です。
- 独自作文：カメラで撮影したパッケージに書かれていない文章をAIが独自に作文してしまうこともあります。
- 位置関係の誤り：「右側の人」「手前のコップ」のように、画像に含まれる要素の位置関係が誤っている場合があるため、よく確認する必要があります。
- 固有の要素の認識不足：キャラクターを「かわいいキャラクター二匹」や、リボンではない模様を「青いリボン 」と誤認するなど、AIが苦手とする分野も存在します。
したがって、AIが生成した文章をベースに、人間が加筆修正したものを最終的な代替テキストとして適用することが必要です。また、バナー画像に対して、生成された代替テキストが、イラストの内容まで詳細に説明しすぎた結果、読み上げに使われるテキストとしては過剰になる場合もありました。そのため、コンテンツ（文脈）に応じた文章量と内容調整は必須です。
なお、Dekashibe v2は、画像の周辺情報によるテキスト量・内容の調整について、カスタムGPTでは周辺テキストを与えても効果が薄かったため、画像のみの情報で代替テキストを生成しています。今後プロンプトの改良などが待たれるところです。
今後の展開とアクセシビリティの未来
Dekashibeは、生成AIを用いたアクセシビリティ改善に糸口を見つけました。今後の展開として、Dekashibeの利用プロダクトを増やしていくことが挙げられます。CMSなどのサービスにおいて、画像アップロードUIとプロンプトを連携させることで、効率的な入力支援ができます。さらに、代替テキストの自動生成だけでなく、アクセシビリティチェックに対するAI支援や、自動化の推進を目指しています。
ウェブアクセシビリティは、生成AIにとっても人間にとっても、これまで以上に重要です。生成AIを用いることでアクセシブルなコンテンツ作成やアクセシビリティチェックを行えますが、生成AI自身もマシンリーダブルな文書構造や制作者によるオリジナルな情報を必要とします。
Dekashibe v2のようなAIツールの活用は、代替コンテンツの作成作業を効率化し、人間が「その情報はどう表現すれば最も伝わるのか」といった、より本質的な仕事に注力できるようになる未来を目指しています。
