はじめに
iOSアプリ（Swift / SwiftUI）をFlutterに移植するとき、GitHub CopilotなどのAIコーディングツールを使った。
ロジック部分はわりとスムーズに移植できた。でもUIの初期アウトプットがひどかった。
「ラベルとボタンがただ縦に並んでいるだけ」のような、デザインが完全に欠落した状態のコードが出てきた。機能はするかもしれないが、とてもユーザーに見せられるものではない。
その問題を打開したのが、スクリーンショットをAIへの入力として併用するというアプローチだった。
何が起きていたか
テキスト指示だけだと「形」が伝わらない
最初はこんな感じのプロンプトを投げていた。
このSwiftUIのコードをFlutterに移植してください。
Material Designに準拠したUIにしてください。
コードも一緒に渡していた。でも出てきたのは、機能的には合っているけど、見た目は「とりあえず動く」レベルのUIだった。
問題は、テキストとコードだけでは「どう見えるべきか」が伝わらないことにあった。
SwiftUIのコードには .padding()や .cornerRadius()、.background()といった情報は含まれている。でもそれが画面上でどういう空気感を作っているか、余白のバランスや要素の重なり感、全体のトーンはコードからは読み取りにくい。
AIが出力したのは、コードを機械的に解釈した結果だった。
打開策：スクショを一緒に渡す
やったこと
iOS側で実装済みの画面のスクリーンショットを撮って、それをプロンプトと一緒にAIに渡した。
このSwiftUIの画面（スクリーンショット添付）をFlutterに移植してください。
レイアウト・余白・コンポーネントの選び方をできるだけ再現し、
Material Designに沿った実装にしてください。
これだけで、アウトプットの質が明確に変わった。
何が変わったか
- レイアウトの再現度が上がった 余白の感覚、要素の配置、カードの使い方など、画面の「構造」が伝わるようになった
- コンポーネントの選択が適切になった ただの
ContainerやTextの羅列ではなく、Card・ListTile・Dividerなど文脈に合ったWidgetを選んでくれるようになった - デザインの「トーン」が近くなった フラットすぎず、かつ過剰装飾でもない、元のUIの空気感に近い出力になった
なぜ効くのか
このアプローチは Visual Prompting（ビジュアルプロンプティング） と呼ばれる手法だ。テキストだけでなく画像をAIへの入力として加えることで、言語化しにくい視覚的なコンテキストを伝える。
AIは画像を見ると、テキストやコードだけでは伝わらない「視覚的な情報」を補完できる。
コードは「何をするか」を伝える。スクショは「どう見えるか」を伝える。
UIの実装においては、この両方が揃って初めて「意図通りのもの」が出力される。片方だけだと、どうしても欠落が生まれる。
特にデザインのニュアンスや余白感、全体のバランスはコードや言語化では伝えにくい領域だ。スクショはそこを一発で埋めてくれる。
具体的な渡し方のコツ
実際にやってみて効果的だったポイントをまとめる。
1. 画面単位で渡す
1枚のスクショに複数の画面を詰め込まない。1画面 = 1スクショで渡す方が精度が高い。
2. 実機・シミュレータのスクショを使う
Xcodeのプレビューより、実際のシミュレータや実機のスクショの方が「本物に近い見た目」が伝わる。
3. 「再現してほしい部分」を言語化で補足する
「このカードのシャドウの感じを再現してほしい」「このボトムナビゲーションの構造を維持してほしい」など、特に重視したい箇所はテキストで補足すると精度が上がる。
4. 一発完成を期待しない
最初のアウトプットをベースに、細かい部分をテキストで修正指示していく。スクショは「初期精度を上げるためのもの」として使うのが現実的。
その後の使い方
この経験はFlutter移植だけで終わらなかった。
その後の継続的な改修でも、「新しい画面を作るとき、参考にしたいデザインのスクショを渡す」 というアプローチが定着した。
- 既存画面に新しいコンポーネントを追加するとき
- デザインを微調整するとき
- 別プラットフォームの画面と揃えたいとき
いずれも、スクショをAIへのインプットに加えることで、テキストだけの指示より明確に精度が上がっている。
まとめ
AIにUI実装を任せるとき、テキストとコードだけで指示しているなら、スクショを加えるだけで精度が上がる可能性がある。
- コードは「何をするか」を伝える
- スクショは「どう見えるか」を伝える
この2つを揃えることで、AIは意図通りのUIを出力しやすくなる。
特にクロスプラットフォーム移植や、既存デザインを別環境に再現したい場面では、試してみる価値がある。
+
=
No responses yet