AIがコードからUIを自動生成する革新的技術を解析：HTMLベースのバーチャルスクリーンショット手法が切り開く未来

AIがコードからUIを逆算する「バーチャルスクリーンショット」実験を始めた理由

最近になって、流行りのGitHubに並んでいるAI絡みや開発効率を意識したツールを、いくつかぼんやり見ていたことがある。まあ、大抵の場合、試す手順は似たり寄ったりだった気がする。つまり、だいたい「クローンして」「インストールして」「とにかく動かす」。Dockerのコマンドひとつで何となく動き出すものも珍しくなくなってきたような…。それでね、多くのプロダクトには一応画面が付いてるっぽいけど、どうもドキュメントだけじゃ見た目の雰囲気まではわからないことが多かった印象。普通なら、とりあえず手元で走らせれば話は早いはず——たぶん、それがシンプルな答えなんだろう。

でも、この前ちょっと違うこと考えてみたんだよね。コードを直接動かさずに、そのアプリの特定画面が「実際にはどんなUIになるか」をAIに推測させてみたい、とふと思った。つまりコードだけ読ませて、その結果を“計算”した画像として出力できないかな？という感じ。これ、勝手に「仮想スクリーンショット」なんて呼んでるけど、本当に上手くいくかどうかはまだ自信ないし…今後もう少し試してみる価値はあるかもしれない、と頭の片隅で思っている。

Geminiで実現した驚きのシミュレーション結果を見てみよう

Screenthostだけじゃなくて、AIがアプリを起動しないまま流れ全体を仮想的に再現することもできるんだって。Geminiでコードを入れるだけで何かしらのシミュレーションが出てきた例もあったような気がする。コード実行なんてしていないのに、画面ごとの流れとか手順、かなりそれっぽく知っているみたいで。どこかに「シミュレーション開始」みたいなボタンがあったはずで、それを押すと一連の動作を見ることができる感じ？
例えば、airabbitXさんのHugging Face Spaceで見かけたCode Simulatorとか。リンク貼っておくけど、画像も載せてあったような。

そもそも何故こういうことをやるのかというと…最初はただ興味本位だったらしい。でも考え直してみたら案外色々使い道ありそうだとも思えてきた、と。一つにはチュートリアル作成。実際にアプリを動かさずとも、視覚的な手順ガイドを手軽に用意できそう。それから商品バリエーションやプレビュー用途にも…要するに、プロダクトの違う使い方とかイメージ図みたいなものまで仮想的に作れてしまう。実物とはちょっと違う「予告編」みたいなもの、とでも言えばいいかな。

こうした技術が今後どう活用されるかはまだ分からないけど、一部ユーザーには役立つ場面も出てくるかもしれないね。

Comparison Table:

項目	内容
AIモデルの再現性	高い再現度を持ち、操作に応じてHTMLコードや画像を生成可能。
ユーザーインターフェースの操作	サイドバーや入力欄など特定部分だけを強調して表示可能。
アニメーション機能	ユーザー操作の流れをアニメーションで示すことができる。
精度とコスト	大規模なテキスト処理はコストがかかるが、精度も向上傾向。
今後の進展	デザインやUI/UXテストに役立つ可能性があり、さらなる改善が期待される。

アプリ未実行でもUIプレビューができる3つの実用的な活用例

なんだか最近、コードを元にいろんなファイナンス系のアプリ画面を作ってみたくて。シミュレーションとか動きもつけられたら面白そうだなと思ったんだよね。適当にネットで見かけたグラディオのサンプルアプリ、確かHugging Faceだったかな、あれでちょっと試してみた話になる。

やりたかったことは…まあ、一つにはAIにそのアプリのコードを渡して「仮想的なスクリーンショット」みたいなのをHTML形式で作ってもらうこと。細かい部分だけ抜き出したい時もあるし、画面全体じゃなく一部だけとか。あと簡単なUIアニメーション？ユーザーが触ったときにどう動くか、それっぽく見せる感じかな。

画像生成する方法ももちろん考えなくはないんだけど、HTMLやSVGとかテキストベースのほうが、後から微妙なところをサクッと修正できて便利だったりするし。絵として出すより小回り効くというか、そういう印象持ってる人も少なくない気がする。

まあ実際使える場面は限られると思うけど、そのへんまだ手探り状態で…将来的にはもうちょっと色々応用できそうな雰囲気あるよね。

HTMLを使った柔軟なUI再現方法が選ばれたワケ

HTMLって、JavaScriptを使えば動きもつけられるし、特定の部分に色付けしたり、いろいろできるんですよね。まあ、それはさておき──何かやってみたくなって、Hugging Face Spaceのひとつ（mozilla-ai/surf-spot-finder）をちょっと選んでみた記憶がある。リンク貼っておいたけど…[https://huggingface.co/spaces/mozilla-ai/surf-spot-finder] ほら、こんな感じ。

どう始めるかというと…まずアプリのコードを手元に持ってこないとですね。Gitコマンドで複製するやり方は昔からよく見ます。「$ git clone https://huggingface.co/spaces/mozilla-ai/surf-spot-finder」みたいな。GitHubから取る時も似たような流れなんじゃないかなあ。[Deepwiki]とかでも、多分同じやり方が使える気はします。ただ、自分ではそこまでは試してなくて、「Gemini」と呼ばれているものとの違いもよく知らないので、このあと出てくる内容ともしかしたら違うかもしれません。

それで次なんですが……全部のソースコードを一個にまとめたい場面があるんですよね。不思議なことに、そのためだけのツールまで世の中にはあったりして。[Repomix]という名前ですぐ出てくると思いますし、ネット上で動かす方法もあった気がします。それだと、一式まとめてAIモデルとかに読み込ませたりしやすくなるそうです。「npx repomix . 」とかコマンド打つと──

途中経過は省略するけど、おおざっぱに二十数個くらいファイル拾ってきて、全部合わせても五万字台半ば？トークン数で言えば一万ちょっとだったかな…。スキャンした結果として「repomix-output.xml」っていうファイルができて、「怪しいファイルは見当たりませんでした」的な表示が最後についてましたね。

さて、それから仮想的なスクリーンショットみたいなのをHTML形式で作りたかったんです。つまり画像そのものじゃなくコードとして再現するという話。この仕組みだとブラウザとかオンラインビューアー（[html.]など）でもパッと開けますし──まあ手順としてはそんな流れでした。全部厳密じゃないですが、おおまかな雰囲気はこんな感じです。

Hugging Faceのサンプルアプリで試した全体の手順解説

[onlineviewer. net]っていうサイト、何度か見かけた気がする。で、話を戻すと、コードをまとめ終わったら次にGemini AI Studio（だいたい「aistudio.google.com/prompts/new_chat」だったと思う）を開くらしい。最初のステップでAIに「このアプリ内にどんなビューがある？」みたいなことを聞くっぽいんだよね。

それで選択肢が出てきたら、「メインビュー」を選ぶか、それともAIがコードから拾った個別のビューを選ぶ…まぁどちらでも良さそう。ただ、その時点ではまだ大雑把な流れしか掴めてない人もいるんじゃないかな。

それから、次のプロンプトとして「メインウィンドウが開いている時のアプリのメイン画面っぽいHTMLコード作って」って頼む流れになりやすいはず。ここでは画像じゃなくて、HTMLだけで実際のスクリーンショットみたいな雰囲気になるようにしてほしい、と伝える必要ありそう。さらに、その下あたりに「ここがレポジトリだよ」と言いつつ前段で用意したコードも貼り付けることになる場合もある。

ちなみに、このアプリにはいくつか違う画面（まあビュー）が存在する可能性も無視できない。例えばだけど、「e.」とかで始まる別パターンへの分岐も含まれているケースも考えられるし、その辺は実際に触ってみないと何とも言えない感じ…そんな印象だったような。

AIにコードを食べさせて部分的なUIパーツだけ生成する方法

（たしか、ダッシュボードとか設定画面、アカウントのページとか…そんな感じで、AIに作ってほしいビューをけっこう細かく指定できるっぽい。なんか操作すると、「こんなHTMLコードどうです？」みたいなのが数秒後に出てきて、それをコピペしてオンラインのHTMLビューアー（どこだったかな…html.onlineviewer.net？みたいなところ）に貼り付けると、一応見た目は再現されてる。実際、自分がHugging Faceで見たときのアプリ画面と比べても、ほぼ同じ――いや、正確には一部微妙なズレもあったような？でも七割くらいは似ていた気がする。正直、この再現度はちょっと驚きがあるし、人によっては「本物と区別つかない」って思うこともありそうだ。ただし全体的には、細部までは完全じゃないかな、とも感じた。）

赤枠や吹き出しで入力欄を強調する小技あれこれ

何度も試してみたんだけど、表示される結果が実際のアプリ画面とすごく近いことが多かった気がする。細かい部分で違うところは見つかるかもしれないけど、全体の雰囲気としてはほぼ本物に見える時もあったような印象。

そうだな、例えばサイドバーだけを「仮想スクリーンショット」で切り取ってみて、と頼むこともできる。
「サイドバー部分だけをスクリーンショット風に」と入力したら、案外それっぽい画像が返ってきたりして。
! []

他にも、UI要素を強調して見せたい場合とか。「入力欄を赤枠で囲って、それぞれの用途を吹き出しで説明してください」なんて指示も通るみたい。
! []

ユーザー操作の流れも動き付きで再現可能なこともあるらしい。「入力欄に順番に情報を入れていく様子をアニメーションで」とお願いすれば、その手順がわかるデモ画像（？）みたいなのを見ることができた人もいるみたい。[https://huggingface.co/spaces/airabbitX/reverse-mockup-demo] という場所でも似た例が載っていた。

AIモデル同士の比較という話題になると——OpenAIのGPT-4o miniモデルでも似たテストをやったケースが幾つか挙げられていたけど、その詳細については語られている場面によって異なる感想や観察結果だったようだ。

GPT-4o miniと比較して分かったGeminiの強みとは？

観察したことなんだけど、どうもメインのアプリ画面全体はうまく映せてなかったみたい。右側だけ、グラディオのアプリが半分ぐらい表示されてた感じ。いや、それでも全部消えてたわけじゃないから微妙だったかもしれない。

それでね、画像生成だとどうなるか試してみたんだ。HTMLじゃなくてイメージを作ってほしいってお願いしてさ。リポジトリのコードを渡してプロンプトも入力したけど、出てきた画像は本物のアプリ見た目とはちょっとズレてるように思えた。何となく似てる部分はあったけど、細かいところはかなり違っていた印象。

まあ、この一連の試み自体が最初から実験的なものだったし、「ジェミニ」みたいな大きめ文脈まで扱えるモデルが、本当にコードや機能性だけじゃなくて、その外見——つまり画面設計とかまである程度分析できるのか気になってやってみただけなんだよね。今後もう少し調整すれば変わる可能性もありそうだけど、今回はそんな感じだったかな。

画像生成ではなくHTMLが向いている決定的な理由

なんだか最近、モデルの進化って本当に目まぐるしい気がする。例えばGeminiとか、やたらと長いテキストを処理できるって話を聞いたんだけど、その規模は七十万～百万語近くになることもあるみたい。ただ、GitHubのコードリポジトリがそれよりもずっと大きいケースもあって、そういう時には今のところ全部をまとめて使う方法はなさそう。もっと広い範囲を一度に見渡せるLlama 4 Mavericksとかいうモデルも話題になってて、もし誰かすでに試した人がいれば、その体験談をちょっとでも教えてもらえたら嬉しいな。

ただね、この手順だとどうしても入力に必要なトークン数が膨れ上がることが多くて、例えば百万語分くらい処理しようとすると、大体十数円くらいコストがかかるって聞いた。でも細かな精度については元データそのままとは限らなくて、少しズレたりすることもあるんじゃないかな。それでも、この結果を見ると個人的には驚かされる場面が多かったと思う。

100万トークン時代のUIシミュレーション技術が開く未来

コストが少しずつ下がってきて、推論の精度もなんとなく良くなってきたような印象がある。こういった機能は、デザイナーやUI/UXのテストをする人、それに開発者なんかにも、案外役立つことがあるかもしれない。ただ、全部の場面で便利とは言い切れないけど。そういえば、この話は「生成AI」というところで公開されていた気がする。LinkedInとかでも何かしら情報を見かけたことがあったかな…ちょっと記憶曖昧だけど。あと、ニュースレターや動画チャンネルみたいなものもあって、そこから最新の動向とか、新しい発表を受け取れる場合もあるらしい。AIの未来について、一緒に考えてみるという選択肢も、人によっては悪くないと感じることがありそうだ。でも、全てがすぐに変わるわけじゃなくて、小さな進歩を繰り返しているだけなのかもしれないね。