AIが人の代わりにアプリやサイトを操作する時代が近づいている。旅行の予約も、面倒なフォーム入力も、AIが画面を触って進めてくれる。そのAIがうまく動けるかどうかは、実は画面の「見た目」ではなく「裏の作り方」で決まる。そんな研究「Affora」が公開された。
ひとことで言うと、見た目は自由に変えてよい。ただしボタンの名前や状態といった「意味」を機械が読める形で残すと、AIの操作成功率が大きく上がる、という話だ。
目次
- AIは画面の「意味」を読んでいる
- 見た目は変えてよい、意味が抜けると失敗する
- 人に親切な工夫が、AIには効かないことも
🤖 AIは画面の「意味」を読んでいる
AIエージェントとは、ひとことで言うと、人の代わりにアプリやサイトを自分で操作するAIのことだ。画面を見て、押す・入力する・選ぶを自分で判断する。
このAIは画面を2通りで読む。1つは人と同じ見た目。もう1つは、画面の裏にある構造データだ。ここにボタンの名前や、押せるかどうか、選べる項目などが書かれている。この記事で「意味」と呼ぶのは、この裏側の情報のことだ。
問題は、見た目は「ボタン」でも、裏では「ただの飾り」になっている画面が多い点だ。人にはボタンに見えても、AIには何なのかわからない。ここでAIはつまずく。
<!-- AIに伝わらない: 見た目だけのボタン -->
<div class="btn" onclick="buy()">購入</div>
<!-- AIに伝わる: 役割と名前を持つ本物のボタン -->
<button type="button" onclick="buy()">購入</button>
上と下は人には同じに見える。でもAIには、下だけが「押せる購入ボタン」だと伝わる。
これまで: 見た目だけ作る → AIが「これは何?押せる?」と迷う → 失敗
Affora: 見た目は自由 + 意味を残す(名前・状態・選択肢) → AIが読める → 成功
矢印は「作り方から結果までの流れ」を表す。箱の中の「意味」とは、ボタンの名前・押せるか・選べる項目など、画面の裏で機械が読める情報のことだ。
見た目は変えてよい、意味が抜けると失敗する
論文は60種類の部品(ボタンや選択欄など)でAIの成功率を測った。素直なHTMLで作ると91%成功する。一方、人気のUI部品集(UIライブラリ)を使うと68〜87%まで下がった。見た目を整える便利な道具が、かえって意味を隠してしまうのだ。
意味が壊れた画面を直すと、成功率は43%から67%へ上がった。さらに選べる項目や状態まで見せると、90%まで戻った。
逆に、見た目を大きく変えても成功率はほとんど落ちなかった。色を16通り、レイアウトを6通りに振っても、意味さえ保てば成功率は99%台のまま。「中身を保てば、見た目は自由」というのが、この研究のいちばん実用的な発見だと思う。
🙃 人に親切な工夫が、AIには効かないことも
意外なのは、人向けの親切な工夫がAIには効かない、あるいは逆効果になる場合があることだ。
例えば「本当に削除しますか?」という確認を足すと、AIには手間が増えるだけだった。長いフォームを複数ページに分ける定番の工夫も、AIの成功率を上げなかった。人間のUIの常識をそのままAIに当てはめてはいけない、というわけだ。ここは実務でも見落としやすい。
なお、AIに専用の窓口(別のAPIや、Chromeで話題のWebMCPなど)を用意する流れもある。Afforaはそれとは別の立場で、人もAIも同じ画面を使い、その画面の構造を整えることを勧める。視覚障害者向けの読み上げ情報(ARIA)と重なる部分も多く、一度の対応で人にもAIにも効くなら投資効果は高い。
著者はサンフランシスコの独立研究者Jin Gao氏。論文と全文は下記で読める。
🔑 今日覚えること
まだ誰でも試せるツールとして配られてはいない。まずは論文のFigure 2(直し方を3つ描いた図)だけでも眺めると要点がつかめる。自分でサイトを作る人なら、見た目だけの飾りを本物のボタンに直す一歩から始めるとよい。
- AIは見た目ではなく、画面の裏の「意味」を読む
- 意味さえ残せば、見た目は自由に変えてよい
- 人に親切な工夫が、AIにも効くとは限らない
※本記事は一次情報の調査をAIが行い、事実確認のうえ執筆・公開しています。