はじめに
モバイルアプリ開発の現場において、「この素敵なデザイン、実装コストはどれくらいだろう？」「そもそもComposeで再現できるのかな？」と疑問に思うことはありませんか？
これまでは、それを確認するためにエンジニアの調査を待つか、自分で重いAndroid Studioを立ち上げる必要がありました。しかし、Gemini と Kotlin Playground を組み合わせることで、誰でも・ブラウザだけで・瞬時に UIコードの動作確認ができるようになります。
今回は、非エンジニア（デザイナー、PM）でも実践できる、新しいCompose UI検証フローをご紹介します。
課題：コードは生成できても「確認」ができない
GeminiなどのAIの進化により、「このデザインをJetpack Composeで実装して」と頼めば、精度の高いコードが一瞬で出力されるようになりました。
しかし、ここで大きな壁にぶつかります。
- 環境構築の壁: 出力されたコードを動かすには、Android Studioのインストールや環境構築が必要
- 確認の壁: エンジニア以外は、コードを実行して実際の見た目を確認することが難しい
- 「思ってたのと違う」問題: いざエンジニアに実装してもらうと、「AIのコード、実は動かなかった」「デザインが微妙に崩れていた」という手戻りが発生する
「Geminiが書いたコード、本当に動くの？」を確かめる術が、これまではエンジニアの手元にしかありませんでした。
解決策：Kotlin Playground × Compose Multiplatform
そこで活用したいのが、Kotlin Playground です。
通常、Kotlinの学習用に使われるこのWebツールですが、実は Compose Multiplatform の動作確認にも利用可能です（※Composeに対応した設定やWasmターゲットのPlaygroundを利用する場合）。
これを使えば、ブラウザさえあれば誰でもComposeの描画結果（Preview）を確認できます。
PlaygroundでのCMPの確認方法
Kotlin Playgroundを開き、右上の ▽ JVM と表示されてるところをクリックし、Compose Multiplatformに切り替えます。
デフォルトでサンプルコードが入ってますが、確認には不要なものも多いです。
以下自分の方で作った最小で動かせるPlaygroundのコードになります。
import androidx.compose.runtime.*
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.ComposeViewport
import kotlinx.browser.document
@OptIn(ExperimentalComposeUiApi::class)
fun main() {
ComposeViewport(document.body!!) {
App()
}
}
@Composable
fun App() {
// Geminiに作ってもらったComposableの呼び出し
}
// ここにGeminiから出力されたコードを貼り付け
依存関係も必要になるので不安になるかもしれませんが、そこも込みでGeminiが出力してくれるので問題ありません。
ただ、import文とか出力されたコードからどれをAppから呼び出すかなどは非エンジニアでは難しいかもしれないので、そこはエンジニアが最初に案内する or ドキュメント化するなどした方がいいかもしれません。
新しい検証ワークフロー
エンジニアの手を借りずに、以下の3ステップでデザインの実現可能性（Feasibility）チェックが完結します。
Step 1. Geminiにコードを書いてもらう
まずはGeminiに、作りたいUIのスクリーンショットやワイヤーフレームを渡し、コードを生成してもらいます。
プロンプト例:
「添付した画像のUIデザインを、Compose Multiplatformで実装するためのコードを書いてください。単一のファイルで実行できるようにしてください。」
Step 2. Kotlin PlaygroundでPreview確認
Geminiが出力したコードをコピーし、Composeが動作するKotlin Playgroundにペーストして実行（Run）します。
- 数秒でコンパイルが完了し、ブラウザ上にUIが描画されます。
- アニメーションやタップ時の挙動もその場で確認可能です。
Step 3. 差分修正ループ（スクショ × Gemini）
もし表示されたUIが想定と違っていた場合（色が違う、配置がずれている等）、その修正も自分で行えます。
- Playgroundの実行結果（間違っている状態）をスクリーンショットに撮る
- その画像をGeminiに渡す
- 「右側の余白が広すぎるので修正して」「ボタンの色をもっと濃くして」「渡したデザイン案との差分箇所を修正して」 などの指示を出す
- 修正されたコードを再度Playgroundに貼り付ける
このループを回すことで、エンジニアに依頼する前の段階で「このデザインはComposeで実装可能であり、コードのベースはこれです」という状態まで持っていくことができます。
このフローがもたらすメリット
この手法を取り入れる最大のメリットは、「待ち時間の短縮」 です。
- デザイナー: 自分のデザインがコードでどう表現されるか、複雑なアニメーションが可能かを自分で実験できる
- PM/ディレクター: 仕様検討段階で、実現可能性の高いモックアップを触りながら確認できる
- エンジニア: 「これ実装できる？」という漠然とした質問ではなく、「このコードで動作確認済みです」という状態でタスクが渡ってくるため、実装開始がスムーズになる
まとめ
「コードを書く」だけでなく「コードを動かして確認する」という工程までが、GeminiとKotlin Playgroundによって非エンジニアでも実行可能になりました。
また、このフローでは全てがWebツールで完結しているため、環境構築に時間を使うこともありません。導入ハードルは非常に低くなっています。
エンジニアのチェックを待たずに、アイデアをすぐに形にして検証する。この新しいワークフローをぜひ試してみてください。