第212回HCI研究会にて「Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法」というタイトルで発表してきました（徳原眞彩）

はじめに

中村研究室B4の徳原眞彩です。

2025年3月5日〜7日に芝浦工業大学豊洲キャンパスにて開催された第212回ヒューマンコンピュータインタラクション研究会（HCI）にて研究発表を行いましたので、ご報告させていただきます。

今回は「Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法」というタイトルで発表してきました。

研究概要

多くの場面において、情報発信やサービス提供を目的としたWebページやアプリケーションの利用が増えてきており、我々ユーザもそれらの利用は必要不可欠となってきています。それに伴い、多くの企業や団体は自社の商品やサービス、イメージを魅力的に見せるためそこに工夫を凝らしたデザインを取り入れることが多くなってきました。しかし、デザインが複雑になってしまうとサイトの操作が分かりづらくなってしまうという問題も同時に起きてしまいます。見た目が魅力的であっても使いづらいUI（ユーザインタフェース）を含むサイトはそのサイトを訪れた目的を達成するまでに時間を要してしまいます。

そこで、我々はいくつかの使いづらいUIのうちの、クリック可能性に着目し「クリックできなさそうな見た目でありながら、実際にはクリックすることができる要素の提示」をユーザに行えるようなシステムの開発を行い、その精度の測定と検証を行いました。

ここで、今回の研究で対象としたUIの例をお見せします。下の画像はとあるショッピングサイトの購入履歴を示すページのスクリーンショットとなるのですが、例えばここから配達日の確認をしようとした際、どこをクリックすれば良いと考えられますか？

正解は下の画像の赤枠で囲んだ部分である「10284278」の所になります。クリック可能性を示すものとしてよく使われている下線や青文字などが使われていないため、気付きにくいようなUIとなってしまっています。

そのため、こういった要素をユーザに提示するようなシステムの作成を目指しました。

また、ここで重要になるのがどこを人々はクリック可能と認識し、クリック可能では無いと認識するかを判断する事になります。UIを改善する手法として、使いづらいUIを共有するようなシステムを作成したり、機械学習によりクリック可能性を算出したりするような研究は様々されています。しかし、こういった研究の問題として、事前にユーザによる大量な情報を集めなければいけないという点が挙げられます。そこで我々はVision-Language Model（VLM）に着目しました。VLMは、画像と言語の両方を理解し、それらを組み合わせて情報を提供できるAIモデルです。加えて、AIも人々と同じように分かりづらいUIに対しては間違った回答を行うという結果が得られた研究もあります。そこで、本研究ではVLMがクリック可能と判断しなかった要素は人間も同様にクリック可能と判断するのが難しいと考え、そういった要素を先述した「クリックできなさそうな見た目でありながら、実際にはクリックすることができる要素」としてユーザに提示するシステムを目標としました。

下の画像が実際のシステムの動作例となります。下の例ですと、「コチラ」の部分と「お問い合わせフォーム」の部分が実際にはクリック可能であるのにもかかわらず、VLMがクリック可能と予測しなかった場合になります。こういった要素があった時にハイライトによってユーザに提示するようなシステムとなっています。

評価

本システムはGoogleのChrome拡張機能として実装しました。サイト内のクリック可能要素のうち、VLMがクリック可能だと判定した要素がどの程度除外できるかを測るために、検出率の評価を行いました。評価には日本でのアクセス数が上位30のサイトを用いました。「実際にはクリック可能であるがVLMがクリック可能と予測しなかった要素の数」を「実際にクリックが可能な要素の数」で割った割合を未認識率として求めたところ、約29%という結果になりました。そのため、本システムをページ上で用いると、ページ上のクリック可能要素のうち、約3割をクリック可能と判断するのが難しい要素としてユーザに提示できる事になります。

やや高い結果となってしまいましたが、下の分布表から分かるように一部のサイトが突出して未認識率が高くなってしまった傾向が見られました。そのため、こういったサイトにおける特徴を明らかにした上でプロンプトの修正などを行っていけばこの未認識率は下げられると考えています。

追加検証

今回評価に用いたサイトは長期的な運用により比較的洗練されたデザインとなっていることが考えられられます。そこで、どの程度使いづらいUIに対して本システムが有用かどうかを測るため、我々が実際に使いづらいと考えられるサイトを対象に追加検証を行いました。

下のサイトは赤枠で囲んだ文字列の部分をクリックするとガイドラインが書かれているページへと遷移できるようなUIとなっています。こちらはVLMもクリック可能と判断しなかったため、クリック可能と判断するのが難しい要素としてユーザに提示できるということが分かりました。

また下の画像は天気予報のサイトになります。赤枠で囲んだ地名の部分をクリックすると各地の詳細な天気予報が確認できるようなデザインとなっているのですが、こちらもVLMはクリック可能と判断しませんでした。このようにサイトの使い方を知らないようなユーザにとっては使いづらいUIとなってしまうようなものに対しても本システムは有用であると考えています。

今後

今回の研究ではVLMとユーザの間においてクリック可能と判断する要素に差があるのかという調査を行えていませんでした。そこで今後は人とAIの認識の差を実験により明らかにしたり、今回はハイライトによる表示でユーザへ提示を行いましたが、サイトのデザインを損ねない提示を模索したりすることを考えています。

おわりに

HCI研究会での発表は初めてでやや緊張もありましたが、練習に近い発表ができたので良かったです。また本分野に近い研究をされている先生方からは今後の参考になる貴重な意見を頂けました、ありがとうございました。

東京の学会なので各地を見回ることはしませんでしたが、芝浦工業大学のおしゃれな学食を利用できたり近くのショッピングモールで食事などができたりしました。また今年卒業してしまう先輩方とも最後の学会に行けたので良かったです。3日間楽しむことができました。

最後に、本論文や卒業論文を完成させるに当たって何度も意見を頂き、修正などをして下さった中村先生や先輩方、本当にありがとうございました。