モバイルアプリ開発でAIにレイアウト修正を頼むと微妙なのはなぜか？

この記事は2025年9月時点の情報です
読むのにかかる時間: 約5分

前段

モバイルアプリ開発者のみなさん、AI使ってますか？
世間でわーわー言われてるほどかな？って思いませんか。

AIにレイアウト組んでもらうと、最初のうちはいいけど長いテキストでレイアウトが崩れたりして直してもらおうとすると 「なにもわからない。。。最初から全部やり直しますね。。。」 みたいなこと言い出したりしていやいや自分で3分で直せますわ、という感じ

ここらへんの原因を掘り下げていきます。

『on distribution』という概念

技術に対して使われるワードで、AIが普段から触れている領域（訓練データ）で得意としているものを 『on distribution』 と呼ぶ。

AIは訓練データの分布（distribution）に強く依存していて、 『on distribution』 は訓練データに豊富に含まれているという意味。

• on distribution = 訓練データに豊富に含まれているので得意
• off distribution = データが少なく苦手、または新しくて未学習

Web系技術は on distribution

• TypeScript / React / Node.js など
• OSSや記事が圧倒的に多い
• 定型的なコードパターンも豊富

→ AIが学習しやすい

iOS/Swift は off distribution 寄り

• ドキュメントや記事の総量が少ない
• 最新APIが変わりやすい
• Appleフレームワークはクローズドで、サンプルコードも限定的
• Xcode/Simulator依存で、WebのようにCLIベースで簡単に試せない

→ AIが試行錯誤しづらく、苦手になりやすい

Flutter/dartは『on distribution』なのにAIのレイアウト修正微妙じゃない？

FlutterもdartはGoogleが中心に開発してるOSSでドキュメントや記事もそこそこWeb上にある。
前述の 『on distribution』 の定義に当てはまるのにAIにレイアウトの最終調整をお願いすると微妙、これはどういうことなのか？

実行して観測しないと最適解がわからない

FlutterのUIは「親から子へ制約を渡す」 制約駆動レイアウト で決まる。

親が「この範囲で収まってね」と伝えると子が「じゃあこのサイズで描画します」と答える。この「制約の整合性」は 実行時のコンテキスト （画面幅/親のBoxConstraints/実データの文字数/言語）がないとわからない。

例: Row + Text

Row(
  children: [
    Icon(Icons.star),
    Text("ここにとても長いテキストが入る..."),
  ],
)

1. Row → 「横幅は無限に広げてもいいよ」と制約を渡す
2. Text → 「じゃあ全文表示するね！」と無限に伸びる

→ 結果、右端でオーバーフロー警告 (yellow/black stripes)

LLMは推論してるだけで、実際にレンダリングしてるわけじゃないのでなにが正しいのか、間違ってるのかがわからない。

Flutterが描画に使ってるSkia/ImpellerもOSSなんだからAIがシミュレーションすればよいのでは？

理論的には可能です（現状は無理）

AIがコードを生成して実際にFlutterのエンジンでレンダリングして検証する、というのは現在研究中らしい。

まーあきらかコストかかりそうな処理なのでしばらくは来ないでしょう。

まとめ

• AIをフル活用したいなら 『on distribution』 な技術選定を考えるべき
• 今のところiOSやFlutterはAIと人間の役割分担したほうがよさげ
  • AI: UIのベース、ビジネスロジック、アルゴリズム、テストコード
  • 人間: UIの細部、レイアウト、ローカライズ調整
• iOSはプロプライエタリな環境なのでAppleがAI作るしか解決策なさそう