---
title: Webページ上の要素がもつクリック可能性に対する人間による認知とVLMによる認識の一致度調査
tags: 
author: [Nakamura Laboratory (Meiji University)](https://convert.docswell.com/user/nkmr-lab)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/P7R92Q9RE9.jpg?width=480
description: Webページ上の要素がもつクリック可能性に対する人間による認知とVLMによる認識の一致度調査 by Nakamura Laboratory (Meiji University)
published: March 11, 26
canonical: https://convert.docswell.com/s/nkmr-lab/ZPR8Q6-2026-03-11-103223
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/P7R92Q9RE9.jpg)

Web ページ上の要素がもつクリック可能性に対する
人間による認知とVLM による認識の一致度調査
明治大学
徳原眞彩
木下裕一朗
中村聡史
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/PJXQD5QY7X.jpg)

背景
赤枠の数字部分クリック
により詳細が確認可能
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/3JK9X694JD.jpg)

背景
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LE3W56WDE5.jpg)

背景
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/8EDKDVK27G.jpg)

背景
普及と弊害：
・Webサービスは一般的になったが、使いにくいUIも散見される
・開発者は自作UIに慣れているため、ユーザの
「分かりにくさ」に気づきにくい
問題：
「クリックができなさそうでできる」要素や
「クリックができそうでできない」要素がユーザの
体験を損なわせてしまう
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/V7PKXVKLJ8.jpg)

対象としている要素
△ クリックできそうでできない
×クリックできなさそうでできる
→この要素が残されて
しまうことが問題
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/2JVVLZV6JQ.jpg)

関連研究
UI評価の自動化：
- VLMを用いて、デザイン案に対するフィードバックや修正案を生成
- ユーザビリティ評価ツールによる問題点の検出 [Duan+ 2024]
ユーザ行動の予測と定量化：
- UI要素が「タップ可能」と認識される確率の予測 [Swearngin+ 2019]
- ユーザが特定の要素を見つけるまでの時間や注目箇所の予測 [Schoop+ 2022]
Duan, P. et al.: Generating Automatic Feedback on UI Mockups with Large Language Models, Proc. of the CHI &#039;24, pp. 1-20 (2024).
Swearngin, A. et al.: Modeling Mobile Interface Tappability Using Crowdsourcing and Deep Learning, Proc. of the CHI &#039;19, pp. 1-11 (2019).
Schoop, E. et al.: Predicting and Explaining Mobile UI Tappability with Vision Modeling and Saliency Analysis, Proc. of the CHI &#039;22 (2022).
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/5EGLX4L2JL.jpg)

関連研究
UI評価の自動化：
- VLMを用いて、デザイン案に対するフィードバックや修正案を生成
- ユーザビリティ評価ツールによる問題点の検出 [Duan+ 2024]
ユーザ行動の予測と定量化：
- UI要素が「タップ可能」と認識される確率の予測 [Swearngin+ 2019]
- ユーザが特定の要素を見つけるまでの時間や注目箇所の予測 [Schoop+ 2022]
開発者側への支援を目的とした研究が多い
Duan, P. et al.: Generating Automatic Feedback on UI Mockups with Large Language Models, Proc. of the CHI &#039;24, pp. 1-20 (2024).
Swearngin, A. et al.: Modeling Mobile Interface Tappability Using Crowdsourcing and Deep Learning, Proc. of the CHI &#039;19, pp. 1-11 (2019).
Schoop, E. et al.: Predicting and Explaining Mobile UI Tappability with Vision Modeling and Saliency Analysis, Proc. of the CHI &#039;22 (2022).
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4JQY8GY97P.jpg)

背景
これまでの研究：
VLM (視覚言語モデル) を使い、ユーザが誤認しそうな要素を
自動推定・指摘する手法を提案(HCI212)
徳原 眞彩, 木下 裕一朗, 中村 聡史. Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法, 情報処理学会
研究報告ヒューマンコンピュータインタラクション（HCI） , Vol.2025-HCI-212, No.43, pp.1-8, 2025.
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/K74W25ZRE1.jpg)

背景
これまでの研究：
VLM (視覚言語モデル) を使い、ユーザが誤認しそうな要素を
自動推定・指摘する手法を提案(HCI212)
徳原 眞彩, 木下 裕一朗, 中村 聡史. Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法, 情報処理学会
研究報告ヒューマンコンピュータインタラクション（HCI） , Vol.2025-HCI-212, No.43, pp.1-8, 2025.
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/LJ1YMWRVEG.jpg)

背景
これまでの研究：
VLM (視覚言語モデル) を使い、ユーザが誤認しそうな要素を
自動推定・指摘する手法を提案(HCI212)
徳原 眞彩, 木下 裕一朗, 中村 聡史. Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法, 情報処理学会
研究報告ヒューマンコンピュータインタラクション（HCI） , Vol.2025-HCI-212, No.43, pp.1-8, 2025.
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GJWG361372.jpg)

背景
これまでの研究：
VLM (視覚言語モデル) を使い、ユーザが誤認しそうな要素を
自動推定・指摘する手法を提案(HCI212)
×
徳原 眞彩, 木下 裕一朗, 中村 聡史. Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法, 情報処理学会
研究報告ヒューマンコンピュータインタラクション（HCI） , Vol.2025-HCI-212, No.43, pp.1-8, 2025.
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4EZLVYPG73.jpg)

背景
人とVLMが同程度の誤認をするかは明らかにしていない
RQ：
クリックできなさそうで機能する要素に対し、VLMは人間と
同様の傾向を示すか？
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/Y76W5DMQ7V.jpg)

データセット構築
対象：
日本全国の市区町村ホームページ 1,000枚の
スクリーンショット
アノテーション：
4人の学生にそれぞれ500枚、1つの画像に対し2回づつ
クリックができそうな場所をボックスで囲んでもらった
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/G75MY3Z274.jpg)

データセット構築
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/9J29GZR1ER.jpg)

結果
2人のアノテータの両方がクリック可能と判断した要素を
人間のクリック可能判断数として算出
それぞれの要素の数と結果
人間のクリック可能判断数
10,884
VLMのクリック可能認識数
10,081
人間：クリック可能◯
人間：クリック不可能×
VLM：クリック可能 ◯
9,436
645
VLM：クリック不可能×
1,448
×
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/DEY4VRD4JM.jpg)

VLM ＞ 人 要素の分類
文字や写真に対して人がクリック可能と判断していない要素に
対してクリック可能と認識する割合が高かった
VLMのみがクリック可能と判断した要素のカテゴリ内訳(N=230)
カテゴリ
件数
割合
文字
121
52.6%
写真
56
24.3%
ロゴ
29
12.6%
バナー
13
5.7%
アイコン
11
4.8%
合計
230
100.0%
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/VJNYMD6678.jpg)

VLM ＜ 人 要素の分類
文字をクリック可能と判断しないことが多いという結果に
人のみがクリック可能と判断した要素のカテゴリ内訳(N=1,448)
カテゴリ
件数
割合
文字
957
66.1%
アイコン
241
16.6%
バナー
204
14.1%
写真
31
2.1%
ロゴ
14
1.0%
その他
1
0.1%
合計
1,448
100.0%
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/YE9PNGLRJ3.jpg)

VLMのみが推定した要素の例
×
◯
人が正解の例
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/GE8DKVXGED.jpg)

VLMのみが推定した要素の例
×
◯
人が正解の例
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/LELMZ58X7R.jpg)

VLMのみが推定した要素の例
×
◯
人が正解の例
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/4JMYV363JW.jpg)

VLMのみが推定した要素の例
×
◯ VLMが正解の例
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/PJR92QPR79.jpg)

VLMのみが推定した要素の例
×
◯ VLMが正解の例
23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/PEXQD53YJX.jpg)

人のみが推定した要素の例
◯ 人が正解の例
×
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/3EK9X6Y4ED.jpg)

人のみが推定した要素の例
◯ 人が正解の例
×
25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/L73W569D75.jpg)

考察
過剰検出が起きた理由
行政などの文字に対して自治体のサイトと判断した上で
意味的な解釈をしたことで検出してしまった可能性がある
文字をぼかしたり
視覚的特徴の評価を優先する
プロンプトを入れたりする必要がある
26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/87DKDVG2JG.jpg)

まとめ
背景： クリックできなさそうでできる要素がWebサイトにある
目的： 提案システムの有効性の確認
データセット構築： 1,000枚のWeb画像で認識領域の比較
結果： 適合率は比較的高くなったが、自明な要素の見落としが多い
考察： VLMの意味的な解釈が過剰な可能性
27


