Learning to Detect UI Principle Violations via Reinforcement Learning

想像してみてください。あなたはロボットに絵を描く方法を教えています。何百万枚もの写真を見せ、「オブジェクトの色を合わせ、線を真っ直ぐにするように」と指示します。ロボットはそのルールに従うのが非常に上手くなります。しかし、ある時、あなたがドアを描くよう頼んだとします。するとロボットは、技術的には取っ手のある長方形のドアを描きますが、その取っ手が小さすぎて掴めなかったり、ドアの枠を壁と同じ色にしてしまって、どこからがドアなのか分からなくなったりします。ロボットはあなたの指示を完璧に守りましたが、その結果は人間にとって役に立たないか、あるいは危険なものです。これは、現代の「コーディング・ロボット」（AIエージェント）がウェブサイトを構築する際に抱えている問題です。彼らは動くコードを作ることは得意ですが（ドアが開くなど）、それがどのように見え、どのように感じられるべきかという「人間のルール」を見落としがちです。

これを解決するために、科学者たちは、すべてのページに人間を雇って目を通させることなく、ロボットの仕事をチェックする方法を見つける必要があります。単なるチェックリストを使うこともできません。なぜなら、悪いデザインの中には巧妙なもの（罠のようなボタンなど）があるからです。また、すべてのページに人間を雇うことも、時間がかかりすぎ、コストもかかりすぎるため不可能です。この論文は、「スマート・ロボット・インスペクター（賢いロボット検査官）」を構築することについて書かれています。この検査官は、ウェブサイトを見て、画像を確認し、コードを読み取り、「おい、このドアの取っ手が見えないぞ！」とか「この看板はユーザーを騙そうとしているぞ！」と言い出すことができるのです。研究者たちは、「強化学習」と呼ばれる特別なトレーニング手法を用いました。これは、犬が正解したときにはおやつを与え、間違えたときには与えないことで、自力で間違いを見つけられるようになるまで教え込む方法に似ています。

---

悪いデザインを見抜くことを学んだロボット

さて、ここからの物語です。カリフォルニア大学サンタクルーズ校とカーネギーメロン大学の研究チームは、コーディングAIが犯すミスを捕まえるための、小さくて非常に賢いロボット検査官を作ろうと決めました。彼らはこれを「UI/UXクリティック（UI/UX批評家）」と呼んでいます。これは、単に絵が完成しているかどうかをチェックするだけでなく、遠近法や色彩に関するルールが守られているかどうかまで厳しくチェックする、厳しい美術教師のようなものです。

問題点：「動くけれど、使いにくい」ウェブサイト
現在、AIツールは次々とウェブサイトを量産しています。それらはコードが実行され、ボタンがクリックできることを保証するように訓練されています。しかし、サイトの「雰囲気」や「安全性」を無視してしまうことがよくあります。ウェブサイトは完璧に動作するかもしれませんが、以下のような問題を抱えている可能性があります：

• アクセシビリティの障壁： 手が震えやすい人にとって取っ手が小さすぎたり、文字が薄すぎて読めなかったりすること。
• ダークパターン： 「結構です」というボタンが極小の透明なテキストで隠されていたり、「結構です、全額支払う方がマシです」といった、断ることに罪悪感を抱かせるような表示があったりすること。
• 混乱を招くレイアウト： メニューに20個の選択肢があり、すべてが同じように見えて、脳が一度にピザを丸ごと食べようとしているような感覚に陥ること。

研究者たちは、これらを手動でチェックするのは遅すぎ、巨大で高価なAIモデルを使ってチェックするのはコストがかかりすぎると考えていました。彼らが必要としていたのは、「ゴールドロック（ちょうど良い）」な解決策でした。つまり、これほど巧妙なエラーを見つけられるほど賢く、かつ小さくて安価なモデルです。

解決策：「注入と検証」のゲーム
この小さなロボット検査官を教えるためには、膨大な量の練習テストが必要でした。しかし、このような特定の悪いデザインを持つ実際のウェブサイトを見つけるのは困難です。そこで、彼らは「インジェクト・アンド・ベリファイ（注入と検証）」という巧妙なゲームを考案しました。

1. クリーンなキャンバス： まず、AIを使用して、何千もの完璧でクリーンなウェブサイトを生成しました。
2. サボタージュ（破壊工作）： 次に、超高性能な「ティーチャーAI（先生AI）」に、これらのウェブサイトを密かに壊すよう依頼しました。ティーチャーAIは、完璧なページを取り込み、ボタンを極端に小さくしたり、手数料を薄いテキストで隠したり、あるいは「結構です」というリンクを意地悪な言い回しに変えたりといった、特定の違反を注入します。
3. リアリティ・チェック： ここが魔法の部分です。ティーチャーAIは単に「壊した」と言うだけではありません。それを証明しなければなりませんでした。システムは、壊れたページのスクリーンショットを撮ります。もしティーチャーAIが「ボタンを透明にした」と主張したのに、スクリーンショット上でボタンがはっきりと見えていた場合、システムは「ダメだ、やり直し」と言います。違反は、コードの中だけでなく、画像の中でも「目に見えて」壊れていなければなりません。
4. データセット： 彼らは約10,000ページを作成しました。各ページには、検証された目に見える間違いが1〜3個含まれています。これが、学生ロボットのためのトレーニング校となりました。

トレーニング：実践による学習
彼らが選んだ学生ロボットは、「ビジョン・ランゲージ・モデル（視覚言語モデル）」（40億パラメータのモデル）です。これは、テキスト（コード）を読み、同時に画像（ウェブサイトのスクリーンショット）を見ることができることを意味します。

彼らは単に答えを見せたわけではありません。強化学習を使用しました。ロボットが隠れた罠を見つけるビデオゲームをしているところを想像してください。

• 罠（違反）を見つけたら、ポイントをもらえる。
• 罠を見逃したら、ポイントを失う。
• 狼少年（良いデザインを悪いと言う）になったら、ポイントを失う。
• 考えすぎて時間を使い切り、答えを出す前に時間が切れたら、ポイントはゼロ。

ロボットはこのゲームを何度も繰り返しプレイし、ポイントを得たり失ったりするたびに、自分の脳を調整していきました。ロボットはスクリーンショットを見て、コードだけでなく、画像を見ることを学びました。なぜなら、ボタンが小さすぎるなどの間違いは、テキストではなく画像でのみ確認できるからです。

結果：無知からエキスパートへ
トレーニングの前、ロボットはかなり下手でした。コードを読んで明らかなテキストエラーを見つけることはできましたが、「画像を見て、このボタンは小さすぎるか？」と尋ねると、ほとんどの場合で予測を外しました。そのスコアはわずか36%（micro-F1という指標）でした。それは、教科書を勉強したけれど実技試験には落ちてしまった学生のような状態でした。

強化学習トレーニングの後、ロボットはプロになりました。スコアは**84%**へと跳ね上がりました。

• 低コントラストの色（精度0%から64%へ）や、乱れた間隔（精度4%から94%へ）といった視覚的な間違いを見つけるのが非常に上手くなりました。
• ユーザーを騙そうとする「ダークパターン」のようなトリッキーなデザインを捉えることにも長けました。
• 簡潔になることを学び、明確な答えを出すために「思考」プロセスを時間内に終わらせる術を身につけ、これにより高速かつ信頼性の高いものになりました。

今、できること
この小さなロボットは単なるおもちゃではありません。研究者たちは、これが以下のような用途で使用できると述べています：

• 新しいウェブサイトを即座に監査し、安全で使いやすいかどうかを確認する。
• 悪いトレーニングデータをフィルタリングし、将来のコーディングAIが悪い例から学習しないようにする。
• コーディングAIが良いデザインを作ったときに報酬を与え、彼ら自身がより優れたデザイナーになれるよう手助けする。

限界
研究者たちは、自分たちのロボットがまだできないことについても正直に述べています。例えば、多くの要素を一度に比較する必要がある、メニューに選択肢が多すぎる（ミラーの法則）といったことや、ボタンがクリックすべき場所から離れすぎている（フィッツの法則）といった、非常に難しい課題にはまだ苦戦しています。これらには、現在のロボットが苦手とする、より高度な「空間推論」が必要です。また、彼らは「注入された」間違いに基づいてトレーニングを行ったため、現実世界の雑多で奇妙なウェブサイトに対してどのように機能するかは100%確実ではありませんが、うまく機能すると予想しています。

要約すると、この論文は、悪いデザインをチェックするために巨大で高価な脳は必要ないということを示しています。少しの巧妙なトレーニングと多くの練習があれば、小さな安価なロボットでも、人間ユーザーが嫌う「見えない罠」や「混乱を招くレイアウト」を見抜くことができ、インターネットをより多くの人々にとって親しみやすい場所にすることができるのです。