Visual-to-Codeを実際に検証
今回は「Codex CLI」を使用します。「Cursor」や「Claude Code」など、画像入力に対応したエージェントであれば同様の検証が可能です。
お題は「売上管理ダッシュボード」。左側にサイドバー、メインエリアには売上グラフと注文リストのテーブルがある、業務アプリケーションで標準的な画面構成です。
※注意
今回の実験は各ケース数回ずつという小規模なものであり、環境や条件も限定的です。あくまで個人的な検証結果として、情報の正確性についてはあらかじめご了承ください。
ケース1：スケッチを丁寧に描いた場合
まずは、お手本となるスケッチを作成します。
ホワイトボードに各要素を正確に配置し、「Header」「Sidebar」「Graph」「Table」といったラベルも丁寧に記述しました。構造だけでなく、使用したいライブラリや機能も一部明示しています。
Codexに画像を渡し、プロンプトは「この画像のワイヤーフレームをReact + Tailwind CSSで実装してください」と記述し、実行します。
結果：AIが要素を補完してそれらしいものを生成
スケッチに「recharts」と記述したところ、rechartsがimportされました。また「sorting」という記述に基づき、useMemoとuseStateを用いたテーブルソートが実装されました。
細かなデザインや配色はさておき、スケッチ内に書き込んだキーワードは一通り反映されています。テーブルには「顧客名」「ステータス」「金額」「日付」といった、売上ダッシュボードらしいカラムも再現されており、実用的なレベルと言えます。
さらに興味深いのは、スケッチに描いていない「Revenue内訳カード（Online Orders 63%、Retail Stores 21%など）」がAIの判断で追加されている点です。「売上ダッシュボード」という文脈から、AIがそれらしい要素を補完しています。
ケース2：スケッチを簡略化して描いた場合
次は、1分程度で作成できる簡単なスケッチを試していきます。
文字は「Nav」や「Tbl」といった略語を用い、「急いでいるため雰囲気だけ伝えたい」というシチュエーションを想定しました。
ケース1で記述した「recharts」や「sorting」といった具体的なライブラリ・機能の指定も省略しています。同じく「この画像のワイヤーフレームをReact + Tailwind CSSで実装してください」という指示で実行します。
結果：レイアウトは再現される
レイアウト（サイドバー:メイン ≒ 2:8）は、ほぼ正確に再現されました。ダッシュボード全体の雰囲気も維持されていますが、出力結果はスケッチ画像の質感そのものを反映したものとなりました。
ケース1の洗練された仕上がりとは対照的に、スケッチの「ラフさ」がデザインテイストにも伝播しているようです。
ライブラリはほとんど使用されず、AIは最小構成で実装してきました。指示やキーワードによる文脈が少なければ、AIはスケッチの視覚的な雰囲気そのものを手がかりにするようです。
わかったこと
ケース1では「recharts」や「sorting」というキーワードをスケッチに明示した結果、rechartsがimportされ、ソート機能が実装されました。
対してケース2では、同じく「棒グラフ」や「テーブル」を描いたものの、具体的なライブラリ名は記述しませんでした。その結果、ライブラリは使用されず、素朴なスケッチ通りのレイアウトを再現するにとどまりました。（今回のプロンプトが簡潔すぎたという側面もあるかと思われます。）
心理学におけるプライミング効果のように、特定のキーワードを提示することでAIの出力が誘導される効果が寄与していると考えられます。
「図の丁寧さ」と「キーワード」の影響力
ここで1つの疑問が生じました。ケース1が良好な結果を出したのは、本当に「図の丁寧さ」のおかげなのでしょうか。単にスケッチに書いた「recharts」「sorting」というキーワードが効いているだけではないでしょうか。
この要因を切り分けるため、追試を実施しました。ケース1の丁寧なスケッチをベースに、「recharts」と「with sorting」というキーワードだけを削除したバージョンを作成します。レイアウトの丁寧さはそのまま維持しています。つまり「丁寧だが詳細なキーワードはなし」という条件です。
結果：グラフのクオリティが低下
大枠の構造は再現していますが、グラフのクオリティは低下し、ソート機能も実装されませんでした。また、スケッチには存在しない「Exportボタン」が追加されたり、「Monthly Sales」というテキストが「Monthly Pulse」に変更されたりしました。キーワードで固定しなければ、AIが独自にコピーを生成する傾向があります。
また、参考までに「売上管理ダッシュボードを作成してください」という文脈をテキストで与えると、以下の通りになります。
キーワードで指定していないSortingなどは実装されませんが、「売上管理ダッシュボード」という文脈を与えるだけで「Key Metricsカード」の中身など、それらしい要素を補完してくれます。改めて文脈情報の威力を感じます。
なぜキーワードが重要なのか
では、なぜキーワードがこれほど大きな影響を与えるのでしょうか。
検証の結果、図を簡単に描いても丁寧に描いても構造の再現精度はそれなりに高く、より精緻に制御したい場合には、キーワードの有無が重要になることがわかりました。
起きていることはシンプルです。AIは画像内のテキストを「指示の一部」として処理しています。「recharts」という文字列がスケッチにあれば、AIはそれをライブラリ指定として解釈します。つまり、図形の形状を解析しているだけでなく、画像に埋め込まれたテキストを「読んでいる」のです。
Claudeの公式Visionドキュメントにも、画像内テキストの取り扱いについて以下の記述があります。
>If the image contains important text, make sure it’s legible and not too small. Avoid cropping out key visual context just to enlarge the text.
画像内テキストの視認性が結果に影響することは、公式も認識しています。
つまり、私はスケッチを描いているつもりで、実は「視覚的に配置されたテキストプロンプト」を書いていたのです。そう捉えると、これは「プロンプトエンジニアリング」の延長線上にあります。
Nielsen Norman Groupも、AIプロトタイピングツールにおいて「プロンプトの具体性が出力品質を左右する」と指摘しています。NNgの知見はテキストプロンプトに関するものですが、「曖昧な入力は不完全なレイアウトを生む」という原則は、スケッチへのキーワード記述にもそのまま当てはまります
