本研究では，WebUI開発における赤入れプロセスを模倣した，スクリーンショット上の視覚的指示に基づいてコードを修正するタスクを提案し，ベンチマークを構築する．既存研究が主に言語的指示を扱うのに対し，本研究では手書きやデジタルの描画による直感的な修正指示を直接入力として扱う点が特徴である．主要なVLMを用いた評価実験の結果，指示とWebコンテンツを適切に区別する能力の重要性や，矢印による参照等，離れた位置の情報を統合的に理解する能力に課題があることを確認した．

近年，Vision-LanguageModel(VLM)に代表されるマルチモーダルモデルの発展により，画像とテキストを統合的に処理することが可能となっている[1,2,3]．VLMの応用範囲は，画像のキャプション生成や視覚質問応答だけでなく，表やチャートの解析，GUI画面の操作支援といった幅広いタスクへと拡大している．特に，Webサイトやモバイルアプリのユーザインタフェース(UI)は，ボタンやフォーム，テキストなどを要素とする構造化された視覚情報としてVLMの有力な応用対象となっている．先行研究では，ウェブサイト上でのタスク実行ベンチマーク[4]や，フロントエンドUIコード編集ベンチマーク[5,6]が提案され，WebUIに対する言語的指示による操作・編集能力が評価されている．一方で，実務におけるWebUI開発の現場では，仕様や修正内容が必ずしも言語的指示だけで伝達されるわけではない．例えば，「右上のボタンを少し左へ」等の微細な調整は言語化が難しく，認識の齟齬が生じやすい．Newmanら[7]は，デザインの検討過程において，Webサイトのデザイナーがプリントアウトされた図面に手書きのスケッチや注釈を加と対応するHTML/CSSコードを入力として，修正後コードを出力する．えて同僚へフィードバックする事例を報告している．そのため，手書きの意図を解釈し，デジタルな実装へ反映させるプロセスを自動化できれば，迅速な試行錯誤が可能になり，開発効率の向上が期待できる．このような背景から，視覚的指示を直接的にコード修正へと繋げる能力は，VLMの極めて有用な応用シナリオの一つになると考えられる．そこで本研究では，WebUIのスクリーンショット上に描かれた手書き修正指示に基づくコード編集を行うタスクを提案し，その能力を評価するベンチマークUI-Redline-benchを構築する(図1)．本稿の貢献として，手書き修正指示に基づくWebUIコード編集タスクの提案，および実務のデザインレビューを模したデータセットを含むベンチマークの構築が挙げられる1）．さらに，既存のVLMを用いた評価を実施し，手書き指示の解釈やUI要素の特定における課題を明らかにした．1）構築したデータセットはhttps://huggingface.co/datasets/future-architect/UI-Redline-benchに公開した．Thisworkispublishedwithoutpeerreviewandislicensedbytheauthor(s)underCCBY4.0(https://creativecommons.org/licenses/by/4.0/).org/licenses/by/4.0/).モデルAllHand-writtenDigitalGPT-584.782.686.9ClaudeSonnet436.730.343.1Gemini2.5Pro76.976.377.4Qwen3-VL-32B62.165.758.6を作成した．まず，前節の修正案𝐴𝑡𝑥𝑡が修正後Webサイト𝐶𝑟𝑒𝑓に正しく反映されているかを著者4名で検証した．次に，未反映や大幅なレイアウト崩れが無いことが確認されたペア(𝐶𝑠𝑟𝑐,𝐶𝑟𝑒𝑓)に対してのみ，修正前画像R(𝐶𝑠𝑟𝑐)上に修正箇所や内容を示す視覚的指示𝐴𝑣𝑖𝑠を描画した．なお，指示のスタイルによる影響を分析するため，同一の修正内容に対して2種類の指示画像を作成した．一つは，フリーハンドで囲みや矢印，指示テキストを書き込んだ手書き指示(Hand-written)であり，もう一つは，それを図形ツールやテキストボックスを用いて忠実に再現したデジタル指示(Digital)である．以上の手続きで，著者4名が，9種類のベースWebサイトに対し生成された，5カテゴリ分の異なる修正案𝐴𝑡𝑥𝑡に対してアノテーションを行った．最終的に，構築したデータセットは合計で350インスタンス(175修正事例×2スタイル)から構成される2）．5実験5.1実験設定構築したデータセットを用いて，主要なVLMであるGPT-5,ClaudeSonnet4，Gemini2.5Pro[9]，Qwen3-VL-32B-Thinking[10]の4モデルを評価した．データセットに含まれる全350インスタンスに対し，各モデルで推論を行い，合計1,400件(350×4)の出力コードを得た．評価においては，修正後画像R(𝐶𝑡𝑔𝑡)と指示画像Overlay(R(𝐶𝑠𝑟𝑐),𝐴𝑣𝑖𝑠)を比較し，指示が概ね正しく反映された成功，反映が不完全または副作用が生じた部分成功，全く反映されないかコード破損により描画できない失敗の3段階で評価した．生成された1,400件の結果すべてを人手で評価することはコストが大きいため，LLMを用いた自動評価を採用した．自動評価の妥当性検証は付録Aに記載する．2）検証で棄却されたケースは5事例であった．描き込み要素有り無し矢印60.069.5位置を示す囲い70.853.9追加UIの概形57.067.6概形有り概形無し矢印有り48.966.1矢印無し76.668.55.2定量評価定量評価値として，成功を100，部分成功を50，失敗を0としてスコア化し，その平均値を採用した．スコア平均を示した．GPT-5が最も高く，次いでGemini2.5Proが高スコアであった．一方，ClaudeSonnet4は全体的にスコアが低迷した．Claudeでは，長辺が規定の閾値を超える画像はアスペクト比を維持したままリサイズされる3）．本実験で用いた修正前Webサイト画像は縦長の形状をしており，過度に縮小され，手書きの修正指示などの微細な情報が失われたことが，著しい性能低下を招いたと考えられる．また，指示のスタイルで比較すると，GPT-5，ClaudeSonnet4，Gemini2.5Proでは，Digitalの方がHand-writtenよりも高いスコアを示した．これは，手書き文字やフリーハンドによる図形の認識精度が影響しているためだと考えられる．対照的に，Qwen3-VL-32Bにおいては手書き指示の方が高スコアであった．誤答事例において画像内にアノテーションされた視覚的指示を読み取る実験を行ったところ，デジタル指示の場合，モデルが指示文だけでなく周囲の無関係なコンテンツまで過剰に読み取る傾向が確認された．Wasedaら[11]は，文脈に応じて画像内の必要なテキストのみを利用する「選択的テキスト理解」の重要性を指摘しており，本タスクにおいても，指示とWebページのコンテンツを適切に分離・取捨選択する能力が性能を左右することを示唆している．ベースWebサイト種類やCSSフレームワーク，修正カテゴリのスコアへの影響は付録Bに記載する．3）https://platform.claude.com/docs/en/build-with-claude/visionorg/licenses/by/4.0/).(a)(b)(c)画像指示修正後5.3事例分析失敗事例として，図2(a)のように修正位置から矢印を引いて離れた位置に概形を描写する事例が多く観察された．この要因に関して，視覚的指示における描き込み要素から検証した．描き込み要素として，矢印，位置を示す囲い，追加UIの概形の三要素それぞれの有無ごとに全モデルのスコア平均を集計した．その結果，表2に示すように，矢印もしくは追加UIの概形が描き込まれた場合，スコア平均が低くなった．そこで，さらに矢印と概形描写の共起に関して分けてスコアを集計し，表3に示した．のスコアが著しく低くなった．このような例に関しては，矢印が示す修正位置と，実装すべき概形の紐づけに失敗していると考えられ，離れた場所にある視覚情報を統合することがVLMにとって困難であることを示唆している．一方で，矢印無しで概形のみが描かれた場合は高スコアとなった．これは，直接描写したり，位置を文字で示したものであり，指示と対象の空間的距離が近いことが精度向上に寄与していると考えられる．また，表2に示す通り，位置を示す囲いがある場合，高スコアとなった．これは，図2(c)のような例で，囲み線による明示的な領域指定が，空間的に離れた情報の結びつきを強化したと考えられる．以上より，VLMは矢印によって示される修正位置と実装すべき概形を，一連の意味的な塊として正線で示した(c)指示に対する成功事例．しく認識・統合できていないことが示唆される．修正位置に上書きもしくは隣接した位置に描写することで精度は改善するものの，スペースが限られる実際のUI画面では描き込みが困難な場合もある．また，そのような指示をユーザに強いることは手書きによる直感的指示の利点を損なう結果となる．したがって，矢印を用いた離れた位置への参照や概形描写を含む，より直感的かつ抽象的な視覚的指示の意図を汲み取る能力の獲得が，VLMの今後の実用化に向けた重要な課題であるといえる．6おわりに本研究では，WebUI開発における赤入れプロセスを模倣した，視覚的指示に基づくコード修正タスクを提案し，その能力を評価するベンチマークUI-Redline-benchを構築した．実験の結果，指示文とWebサイトのコンテンツを適切に区別・分離する能力の重要性や，指示と対象の空間的距離がモデルの解釈を阻害する要因となることが明らかになった．今後の展望としては，直感的かつ抽象的な指示への対応を実現するため，VLMの空間的な推論能力の強化が不可欠である．具体的には，矢印の指し示す先や，描き込みの意味的な一塊の認識といった，マルチモーダルな照応解析技術の検討が挙げられる．また，データセットに関して，現時点ではアノテータ4名による350事例の小規模なものであるため，デザイナーを含む多様なアノテータの採用やサンプル数の増加によるデータセットの拡張を行っていく．org/licenses/by/4.0/).