@potato4d が @Pittan に、LINEギフトのアクセシビリティ向上のために活用している社内AIツールの中身を伺いました。
@potato4d
皆さんこんにちは。UITのpotato4dです。ユーザーインターフェイスとテクノロジーを愛する開発者のためのポッドキャスト UIT INSIDE、今回もやっていきたいと思います。
@potato4d
まずはじめに簡単に慶島さんの方から自己紹介をお願いしてもよろしいでしょうか。
@Pittan
はい、私は今LINEヤフー株式会社のコマースカンパニーでLINEギフトのフロントエンド開発をしてます慶島と言います。よろしくお願いします。
@potato4d
よろしくお願い致します。今日はLINEギフトの現場でちょっと使われだしているツールって話なんで楽しみです。
@potato4d
では早速ですねお話をお伺いしようかなと思うんですけど、今回冒頭でアクセシビリティに関するAIベースのツールっていうところを開発したっていうところをASDに話させてもらったかなと思うんですけど、ちょっとそのツールについて詳しくお話をしていただいてもよろしいですか。
@Pittan
はい、今回作ったのはLINEギフトの中のいろんな場所で使われている画像バナーとかそれ以外のものとかに入れる代替テキストをAIが考えて作成してくれるというツールになります。
@Pittan
名前はDekashibeと言うんですけど、特にこの名前にアクセシビリティ上の理由があるわけではなくて、ただ自分がちょっと大きい柴犬が飼いたかったというだけの理由でついてるんですけど。
@Pittan
中身としては画像をまず入力します。この画像がどういう種別なのかバナーなのかそれ以外のものなのかっていうのと、
@Pittan
あと何文字ぐらいで出力が欲しいですかっていう大きく1000文字、100文字、50文字、20文字ってあるんですけど、
@Pittan
それを選んで生成するボタンを押してもらえれば、その画像の中身の情報を読み取ってこんな代替テキストはどうですかと提案してくれるようなものになってます。
@potato4d
これ結構その普段の業務でおそらく代替テキストを用意したいみたいなところのモチベーションから来てるかなと思うんですけど、
@potato4d
なんかもともとどういった課題感があって開発に至ったんですかね。
@Pittan
そうですね、もともとやっぱりLINEギフトの中でも代替テキストのサポートがあんまりしっかりとされていないという状態があって、
@Pittan
いろんな要因があるんですけど、1個目はまずシステム的にそもそも対応してない、入稿できる文字数が少ないとか、
@Pittan
そもそも入稿できないみたいなケースがあるんですけど、それがちょっとシステム的にやっぱり改善していかなきゃいけないよねっていうところで、
@Pittan
今徐々に改善していってはいるんですけど、一方でそのシステムができても、じゃあ実際に入力をする側、
@Pittan
入力するコンテンツもちゃんとしてないといけないねっていうところで、やっぱりちょっと何て言うんですかね、
@Pittan
ちょっとなんか経験が必要な部分もなんかやっぱあるというか、アクセシビリティの代替テキストっていうと
@Pittan
書いてあることそのまま書いていいケースもあるんですけど、そうじゃないケースもやっぱあるかなと思ってて、
@Pittan
そういうところのちょっと判断が難しい、みんなができるようになる、こういったAIの支援があるといいのかなというところで、
@Pittan
ちょっと実験的に始めてみたツールになってます。
@potato4d
アクセシビリティの代替テキストみたいなのがもともとないところからスタートして、
@potato4d
機能的にまずは入力できるようにしたっていうステップが完了していて、
@potato4d
次はしっかりみんなでデータ入れていこうねっていうフェーズになってきたんで、
@potato4d
そこを支援するツールの需要が高まってきたみたいな感じなんですね。なるほどありがとうございます。
@potato4d
確かにそうですよね、なんかaltを設定するってなっても物によって付け方とか変わるでしょうし、
@potato4d
毎回判断してくださいってなると慣れてきたらスムーズにできるようになるのかなと思うんですけど、
@potato4d
全員が全員そこにめちゃくちゃコストを割いてるかっていうとそうでもないっていう風なところかなと思うんで、
@potato4d
これで誰が担当してもある程度分かりやすいものが出てくるっていう風な形になるのはすごい良さそうですね。
@Pittan
あとちょっとギフトならではの事情というかあるんですけど、商品棚って呼ばれる機能が実はあって、
@Pittan
みたいなものを簡単に作れるみたいな機能があるんですけど、本来であればフロントエンドの人がちゃんとマークアップをしてっていう風に
@Pittan
やる必要があるかなと思ってるんですけど、ちょっとデザイン上の都合でCSSとかではちょっと実現が難しいデザインだったりとか、
@Pittan
そういったものとかも画像をバンバンバンって貼っていくことでそのページを実現するみたいな機能になってて、
@Pittan
そういった時にやっぱちょっと長いテキストが必要になってくるケースとかがあると、やっぱ入力の人も大変だよねっていう、
@Pittan
入れられても大変だよねっていうところもやっぱあって、そういったところも同様にサポートできればいいかなっていうところがあってこのようになってます。
@potato4d
確かにそういういろんな情報が詰まった大きい画像ってなると、じゃあどこまでどういう風に書くんだっけみたいなの大変ですし、
@potato4d
全部考え切ってきれいに入稿できるかっていうとそうでもないですもんね。
@Pittan
本来であればもしかしたらちょっとそのやり方も良くないっていうのはなんとなく気づいてはいるんですけど、
@Pittan
やっぱちょっと一気に全部を変えるというよりかはちょっと一歩ずつ一歩ずつちょっと改善していければいいなというところで一旦はこの形に落ち着いてます。
@potato4d
それこそ1年かかって全部完璧な状態にしましたっていうよりは、ちょっとずつ良くなっていく方が総合的には絶対プラスですもんね。
@potato4d
すごい開発のモチベーションみたいなの理解できました。せっかくなんでちょっとツールベースのところで合わせてもう一つお伺いしたいのが、
@potato4d
この代替テキストみたいなのって結構なんでしょうね、人間でも付け方悩む部分かなとは思ってるんですけど、
@potato4d
この生成のロジックみたいなところってどういう風にやってるんですかね今。
@Pittan
今はそうですねまずDekashibeが裏でChatGPTのGPT-4oに投げてます。
@Pittan
でプロンプトとしては、一旦なんかそのギフト、LINEギフトっていうものは何なのかっていうところと、
@Pittan
「あなたの役割はユーザーから送られている送られてきた画像のaltテキストを作ることです」みたいなっていう前提があった上で、
@Pittan
じゃあもっと細かいところ、画像には大体2種類の区分けがあって、まずはバナー、
@Pittan
バナーは書いてある情報を基本的にそのまま書いておいて欲しいけど、なんかちょっと挿絵みたいなものは無視する方向でいいですよっていうのがバナーです。
@Pittan
それ以外例えばそのプレスリリースとか、あとはさっき言った商品棚と呼ばれるデカいLPみたいなところに置く画像っていうのは、
@Pittan
基本的に書いてあるもの挿絵だったりも情報を全部入れておいて欲しいです、まず2種類の区分けがありますっていうところと、
@Pittan
あと文字数の制約が50文字100文字1000文字とあります。
@Pittan
でその後に、じゃあこの入力した画像のタイプはどっちで何文字以内で出力してくださいっていう指示の方のプロンプトがあって、
@Pittan
それをベースに吐き出してくれるという感じになってます。
@potato4d
結構あれですね。前提条件となるところのプロンプトをしっかり作り込んでサービスに今回の場合だと特化して、
@potato4d
ちなみに今のだと、結構種別ごとに「こういう風に出力してほしくて」「こういう風なコンテキストがあります」みたいなのって
@potato4d
かなり詳細に書いてるかなとは思うんですけど、作っていく中で初めの方は割とざっくり書いてて「あんまり思った通り出なかった〜」みたいなのってありました?
@Pittan
そうですね、やっぱり最初とりあえずこの画像のaltを出してくださいって雑に投げてしまうと、ちょっと期待したものと違う、
@Pittan
なんか本来自分はこう入れたかったんだけど、ちょっと情報が多めに出てきちゃったなとか、逆に情報が少ないな、
@Pittan
みたいなものとかがあったので、やっぱりなんかちょっとどういう文脈で使うんですか?っていうところの情報は補助的に入れてあげた方が
@Pittan
意図したものがちゃんと出てくるというところで良かったのかなっていう風に思ってます。
@potato4d
やっぱりあれですよね、こういうツールってサービスに特に特化してる領域みたいなのがプロンプトエンジニアリングといいますか、
@potato4d
どんだけ詳細に伝えるかによって内容変わってきますよね。
@Pittan
多分おそらく今回の場合、あまりLINEギフトならではのプロンプトっていうのはそんなにないような気はしてます。
@Pittan
一応補助的にLINEギフトで使うよみたいなことは言ってはいるものの、もしかしたらいらないかもなとちょっと今更ながら思ったりはしてます。
@potato4d
確かにポイントであるのはあれですね、今のバナーとその商品棚と呼ばれるようなところごとに
@potato4d
期待されるaltの性質が違うよっていうところが結構みそな感じな気はしますね。
@Pittan
実はこの画像をaltを吐き出した後に、補助的にその画像の例えばコントラスト比がちょっと低いかもしれないよみたいな
@Pittan
ちょっとしたアドバイスも吐き出すようには実はしてて、なんですけどちょっとそっちはまだあまり詰め切れてないので、
@Pittan
いつもコントラストが低いって言っちゃうみたいな感じになってます。そこはどうしたらいいのか分かんないんですけど、
@Pittan
ちょっと本質的ではないところなので一旦置いといてるという感じですね。
@potato4d
確かになんかあれですね、コントラスト比とか指摘したいって思ったとしても、結構どうしても性質上イメージトゥテキストというか、
@potato4d
最終的にテキストで表現されちゃうんで、コントラストまでAIで見切れるかどうかってなると、
@potato4d
ちょっと分かんないみたいなとこありそうですもんね。ただ元々本文でやったaltをしっかり出すっていうのは達成できたっていう風なところですね。
@potato4d
ちょっと次をお伺いしたいのが、実際こういうツール使うと生産性向上とかあるいはクオリティ向上みたいなところに、
@potato4d
ちゃんと書いてる人にとっては生産性向上になるし、まだまだ書くのが難しいみたいな人にとってはクオリティ向上に役立つかなと思うんですけど、
@potato4d
実際ギフトのチームとかにこれを展開した時の反応とかってどういう感じでした?
@Pittan
そうですね、まずは便利そうですねというポジティブな反応をいただけたっていう感じですね。
@Pittan
あんまりネガティブな情報は情報というかフィードバックはなかったかなっていう風に思ってます。
@Pittan
そうした上でちょっと実際使ってみてどうなんだろうっていうところがちょっとまだこれから本格的に運用に乗っていくっていうところで
@Pittan
思うのでちょっとまだつかみ切れてないんですけど、一旦は良くなっていくんじゃないかなっていうような感触を持っていただいてる感じです。
@potato4d
これまでもLINEギフトといえば外部向けにアクセシビリティでの取り組みみたいなのって発信してきたかなと思うんですけど、
@potato4d
こういうツール使って多少行っても何も書かないよりはちょっと手間がかかるかなと思うんですけど、
@potato4d
それでもしっかりaltつけていこうぜみたいなのはチーム内でみんな意識が共有できてる感じなんですかね。
@Pittan
そうですね、一旦ちょっと前にaltちゃんとつけていけませんかっていう話を全体のミーティングなんかでした覚えがあって、
@Pittan
その時にデザインの方面とかいろんな方からAIとか使ってなんとかならないんですかみたいな、
@Pittan
ちょっとこんな言い方ではないんですけど、AIとかうまく使ったりできないんですかねみたいなフィードバックをもらって、
@Pittan
確かにそうですねっていうところでこれをちょっと作ってみようかっていう感じにもなったので、
@Pittan
ある意味要望されていたものを作ってみたという感じのものでもあったりはします。
@Pittan
これでちょっとうまくいかなかったら、じゃあちょっと違う方法考えようかとか、もし良さそうならもうちょっと深い管理ツールとの統合、
@Pittan
今だと別で用意して貼り付けに行かなきゃいけないんですけど、そうじゃなくてもう画像をアップロードしたら
@Pittan
もうついでにそのままAIに投げてそのまま入力フォームにバンって戻してもらうみたいな、
@Pittan
そういったことももう少しもう一歩先にできるかなとは思ってるので、ちょっとそこは実際に運用に乗ってみてからっていう感じですかね。
@potato4d
なんか現時点だとまだせっかくなんで実験プロダクトとして使ってみてもらうみたいな形かなと思うんですけど、
@potato4d
クオリティとかが十分担保できるようになってきたらシステムによってる方が効率的というか絶対逃さないですしいいですもんね。
@potato4d
アクセシビリティを広めていくみたいな観点でもやっぱりコースが世界がかかってしまうっていうのってネックな部分かなと思うんですけど、
@potato4d
そこに対してAIである程度こう楽にじゃないですけどローコストにできますよっていうのがいいアンサーになりそうですね。
@potato4d
ぜひまたチームからの反応とか得られたらちょっと取り上げさせてもらえればと思います。
@potato4d
少しお伺いしたいのがもう一点あるんですけど、なんかその他今後の展望とかAIかけるアクセシビリティみたいなところの領域で、
@potato4d
なんかこういうことできるといいんじゃないかなみたいな思ってることがあったらお伺いしてもいいですか。
@Pittan
今だと内部で作る画像とか、今のこのAIツールが使えるという状態ではあるんですけど、
@Pittan
やっぱりアイテムの商品とかの画像だと思ってて、それを管理してるのは自分たちではなくて、
@Pittan
出展してくださってるショップの方々ではあるので、そういった方々にもちゃんと代替テキスト入れてもらうことによって
@Pittan
初めて多分スクリーンリーダーで使ってる方がちゃんと商品の内容を理解して商品を購入することができるみたいな流れになっていくと思ってます。
@Pittan
なのでゆくゆくはそういったものを入れていきたいなと思うんですけど、やっぱりフリーに入力欄がただあるだけだと
@Pittan
やっぱ正しく代替テキストを入れてもらえるようなテキストが入ってるとか、そもそも何入れたらいいの?みたいな話になったりとかしちゃうので、
@Pittan
そこもやっぱりAIの力をうまく使って入力をしてもらうだけじゃなくて、入ってるものもやっぱりちょっと判断して
@Pittan
これ違うんじゃないですかみたいな話もやっぱりできるといいのかなっていう風に思ってます。
@Pittan
ただちょっとサンプル数がまだ足りないというか、一旦内部でちょっと試してみて、
@Pittan
こういう感じで社外にも展開できるんじゃないかなみたいなものがあれば、またその時に提案させてもらえればなという感じで思ってます。
@potato4d
社内ツールであったら軌道修正とかもやりやすいですし、こういうところでクオリティのブラッシュアップじゃないですけど、
@potato4d
Production Readyな感じになったら加盟店さんのコンソールの方にも追加するみたいなのもできそうですもんね。
@potato4d
社内での実験だけじゃなくて、社外向けというか機能として提供するための実験もある意味で兼ねられてるかなっていう風なところもあるんですね。
@Pittan
同じコマースカンパニーの中にはYahoo!ショッピングとか違うコマース系のサービスがあるんですけど、
@Pittan
多分同様に同じく商品画像にはaltがないみたいな、多分課題があるんじゃないかなっていう風には思ってて、
@Pittan
そういったところどう考えてるんだろうとか、どう解決しようとしてるんだろうみたいなところっていうのは
@Pittan
ちょっと積極的に情報交換とかこれからしていきたいなっていう風に考えてます。
@potato4d
こういうのをきっかけに横の繋がりというか開発者同士で意見交換できて、
@potato4d
よりどのプロダクトもアクセシブルに出会ったりだとか、よりいいクオリティを求めていけると良さそうですね。
@potato4d
というわけで今回は慶島さんにLINEギフトの内部で使われているアクセシビリティのaltの生成ツールについて話していきました。
@potato4d
LINEヤフーではこのようにフロントエンドに関する議論であったりだとか、意見交換っていったものも日々行っております。
@potato4d
これまでUIT INSIDEで取り上げてきた内容の中にはですね、社内勉強会などで発表されていたものも多くありますので、
@potato4d
今後も様々な情報を発信していきたいと考えております。またこのエピソードに関する感想につきましては、
@potato4d
#UIT_INSIDEでポストいただけますとスタッフの方で埋まって拝見させていただきますので、
@potato4d
ぜひぜひお気軽にご意見ご感想など書いていただければと思います。
@potato4d
というわけで今回はLINEギフトの内部で使われているアクセシビリティのaltの生成ツールについて慶島さんと共に話していきました。ありがとうございました。
@Pittan
ありがとうございました。
