UiKit から MomijiUI へ — AI が画像から画面 JSON を書く宣言的 UI
2026年6月1日
kaedevn の開発日誌をもとに再構成した記事（2026年6月1日） 「手書きの描画コードを書かずに、画面を JSON で書く」という方針が一日で実用レベルに立ち上がった
背景
kaedevn では長らく、画面の見た目を描画コードとして手で書いていました。ボタンの位置、テキストの配置、クリップ処理——これらを一つずつコードに落とす作業です。
この記事で扱うのは、その前提をひっくり返した話です。画面を JSON で宣言し、JSON がそのまま画面になる。手書きの描画コードを書かずに、AI に画像を見せて画面 JSON を生成させ、それをそのままプレイ画面で確認する。当初 UiKit と呼んでいたこの基盤が、ほぼ一日で骨格から実用ウィジェットまで一気に立ち上がり、数日後には MomijiUI と改名されて本番ルートに乗りました。
一日で骨格から実用まで
宣言的データ駆動 UI の立ち上げは、ほぼ一日の中で骨格から実用ウィジェットまで駆け抜けました。
朝はネイティブ側の実装から始まり、実用ウィジェットの完全化、GPU クリップ、外部 JSON ローダー、画面ノードのスキーマ草案を順に積み上げます。続いてスキーマ検証・action コントラクト・CLI・API 公開を整え、放置系・ノベルの全画面を宣言的 UI へ移行して手書き描画を全廃。さらにテーマ（スキン）JSON の差し替え、flex レイアウト、セーフエリア anchor、データ駆動な軽量ゲーム量産パイプラインまで——複数のフェーズを一日で通しました。
リファレンスには「同じ画面 JSON を複数媒体で描く」という媒体跨ぎの節まで添えてあります。画面を JSON にしてしまえば、後から描く先を増やすのは同じ抽象の裏に閉じる話になります。
AI が画像から画面を起こせるのか
宣言的 UI の本当の問いは、「実際に複雑な UI を再現できるのか」でした。
その回答として、参照画像から商用ゲーム風のマイページを 1280×720 横・水彩テーマで再現する作業に取り組みました。全 8 タブの画面を実装し、キャラ画面とキャラ詳細まで作り込む。縦持ちの放置ガチャ風 UI モックも別途起こし、portrait / cover のランタイム対応を入れています。
8 タブぶん作り込んでみて、JSON でここまで描けるという手応えが残りました。AI が画像から画面を起こすという制作経路が、机上の話でなくなった瞬間です。
ネイティブと Web が同じ JSON を食べる
宣言的 UI のもう一つの肝は、同じ画面 JSON を複数の描画先で共有できることです。
立ち上げの締めに、同じ画面 JSON をブラウザの Canvas2D で描く Web 実装を追加しました。これでネイティブと Web の両端がそろい、同一の JSON を食べて同じ画面を出す構図が成立します。一方を直せばもう一方も追従する。媒体を増やすときも、同じ抽象の裏で閉じられます。
UiKit から MomijiUI へ、そして本番ルートへ
数日後、UiKit は MomijiUI へと改名され、本番の配信経路に乗りました。
配信ジョブに Web ランタイムを追加し、本番側にランタイムの URL をビルド時注入して埋め込みを有効化。作例ページとプレイ画面を本番ルート化しました。あわせて、コンセプト・部品化（component-expansion）・画像から UI を起こす経路（image-to-ui）の詳細ドキュメントも本文を起こしています（MomijiUI ドキュメント）。
部品化については、画面 JSON の中で部品を参照しておき、ビルド時に実体へ展開する方式を採っています。書くときは部品名で済ませ、配信されるのは展開済みの JSON。宣言の読みやすさと、ランタイムの素直さを両立させる狙いです。
振り返り
この取り組みでいちばん効いたのは、「手書き描画を全廃する」という決断を、実際に全画面へ適用しきったことだと思います。一部だけ宣言的にしても、結局どこかで手書きが残れば AI は画像から画面を起こせません。全画面を JSON にしたからこそ、制作経路として現実味が出ました。
参照画像から商用 UI 風のモックを 8 タブぶん再現できたことは、「JSON で複雑な画面を描けるのか」という自分への問いに対する回答でした。描けるとわかれば、あとは AI に画像を渡して JSON を書かせるだけです。
そしてネイティブと Web が同一データを食べる構図がそろい、UiKit が MomijiUI として本番ルートに乗ったことで、宣言的 UI は実験ではなく実際の制作基盤になりました。エディタ画面を経由せず、AI が起こした画面 JSON をそのままプレイ画面で確かめる——その制作方針が、ここで一本の線につながっています。
関連ドキュメント
- MomijiUI ドキュメント — コンセプト・部品化・画像から UI を起こす経路の詳細