Visual-to-Codeの精度を向上させるための工夫
検証の結果、雑なスケッチからでも生成精度を高めるためのコツがいくつか明らかになりました。
具体的なキーワードを記述する
今回の実験で最も効果的だったのは、具体的なライブラリ名や機能名を書き込むことでした。
- 「Graph」→ CSSで棒グラフを描く
- 「Graph（recharts）」→ rechartsをimportして使用する
実装したい特定の機能がある場合は、略称でも構わないのでスケッチ内に明記しておくのが良さそうです。
補足のプロンプトを添える
今回はあえてシンプルなプロンプトのみで実施しましたが、本来は画像だけで全ての情報を伝える必要はありません。「売上ダッシュボードを作成して」と一言添えるだけで、コンテキスト補完の精度が飛躍的に向上します。
実際、追試のスケッチ（キーワードなし）において、「売上管理ダッシュボードを作成してください」という文脈を与えたところ、「Key Metricsカード（Total Revenue、Avg．Order Value、Returning Customers）」が追加され、前月比の表示まで生成されました。
キーワードで個別に指定しなくても、文脈プロンプトを一言添えるだけで「売上ダッシュボードらしさ」が大幅に補完されました。
「画像 + キーワード + 補足プロンプト」の組み合わせが、現在の開発における基本形と言えるでしょう。
レイアウトの細部には固執しない
一方で、レイアウトをきれいに描くことの優先度は、そこまで高くありません。ケース2（1分で描いた雑なスケッチ）でも、レイアウトの構造自体は一定の精度で再現されました。
四角が歪んでいたり、線が多少不鮮明であったりしても、AIは「サイドバー」「メインエリア」という構造を正しく理解できます。丁寧に描く時間があるならば、その分をキーワードの記述に充てるべきでしょう。
まとめ
当初は「丁寧に描くほど品質が上がる」と予想していましたが、実際にはAIはスケッチの描線よりも、そこに書かれた「文字情報」に強く反応していました。
美しく描くことに時間をかけるよりも、具体的なキーワードを盛り込むことに注力する。これが今回の実験から得られた最大の学びでした。
このアプローチは新規開発だけでなく、バグ修正にも応用可能です。スマートフォンでレイアウト崩れを発見した際、スクリーンショットを撮影してAIに渡すだけで、修正への第一歩を踏み出せます。
従来のように開発者ツール（DevTools）で原因を特定する前に、まずはAIにタスクを依頼してみてはいかがでしょうか。
次回予告
今回は「スケッチ画像からUIを生成する」という、単発のタスクをAIに依頼しました。
次回は「夜中に働くAI同僚」を作ります。Claude Agent SDKとcronを組み合わせて、寝ている間にリポジトリを自律巡回し、ドキュメントを自動生成するエージェントの実装です。
朝起きたら、リポジトリに443行のレポートが増えている。コードの進化の歴史、新メンバー向けのオンボーディングガイド、技術的負債マップ。誰も書かなかったドキュメントをAIが夜中に勝手に書いてくれる。そんなAIを作る方法を解説します。
次回の連載もお楽しみに！
