この記事は、2026年5月6日時点の画面・手順をもとにしています。AI系サービスは画面や機能の変化が速いので、実際に試すときは最新の表示に読み替えてください。
はじめに
この記事では、Google AI Studio の Build mode を使って、プロンプトだけで簡単な「ガチャアプリ」を作る流れを紹介します。
いわゆる Vibe Coding 的な作り方です。コードを最初から書くのではなく、「こういうアプリを作って」と自然言語でお願いして、生成されたアプリを見ながら追加修正していきます。
今回作るものは、画像URLをもとにカードをランダム表示するガチャアプリです。
準備するもの
必要なものは次の通りです。
- Google アカウント
- ガチャに使う画像の URL 一覧
- 公開する場合は、Google サービスの利用設定に必要なクレジットカード
画像は手元のファイルをアップロードするよりも、公開済みの画像 URL を渡す方が簡単です。今回の例では、次のような URL を使います。
https://uchi-kore.nanisono.com/wp-content/uploads/2024/05/025_ura.jpg
https://uchi-kore.nanisono.com/wp-content/uploads/2024/05/023_ura.jpg
公開機能を使う場合は、Google のサービスを利用することになります。小規模な個人利用なら大きな費用になる可能性は低いですが、無料とは限りません。公開前に料金や利用条件は確認しておきましょう。
Google AI Studio にアクセスする
まず Google AI Studio にアクセスします。
ログイン後、案内が表示されたら内容を確認して進みます。
Build mode を開く
Google AI Studio の画面から、アプリ作成用の Build mode に入ります。
スライド作成時点では、Playground の下の方にある Start Building から開始できました。画面構成は変わる可能性があるので、見つからない場合は「Build」「Start building」「Apps」などの名前を探してみてください。
開発画面を確認する
Build mode に入ると、プロンプトを入力するボックスが表示されます。
ここに「どんなアプリを作りたいか」を日本語で入力します。細かい仕様を最初から完璧に書く必要はありません。まず動くものを作って、あとから修正していくのがこの作り方のよいところです。
最初のプロンプト
今回は、次のプロンプトを入力しました。
ガチャアプリを作ってください。
ガチャカードの画像URLと、画像下の一言コメントは次の通りです。
https://uchi-kore.nanisono.com/wp-content/uploads/2024/05/025_ura.jpg , 困った月牙様
https://uchi-kore.nanisono.com/wp-content/uploads/2024/05/023_ura.jpg , 綺麗な月牙様
なお、画像サイズを取得してアプリの表示画面で見切れないようにしてください。
ガチャを引いた際の演出は、和風(Japanese Style)でお願いします。
ポイントは次の 3 つです。
- 何を作るかを最初に書く
- 使用する画像 URL と表示したいコメントをセットで渡す
- 画像が見切れないこと、演出の雰囲気など、気になる条件を明記する
このプロンプトの画像 URL やコメントを入れ替えると、別テーマのガチャアプリにも応用できます。
Build を実行する
プロンプトを入力したら、Build を押します。
Google AI Studio がコードを生成し、アプリのプレビューを作ってくれます。途中で Next や Try it out のようなボタンが表示された場合は、画面の案内に従って進めます。
完成例
しばらく待つと、ガチャアプリが表示されます。
生成には数分かかることがあります。5分程度待つこともあります。すぐに完成しなくても、少し待ってみましょう。
生成される画面は毎回まったく同じではありません。ボタンの見た目、背景、演出などが変わることがあります。ここが生成AIでアプリを作る面白いところです。
作成したアプリを修正する
できあがったアプリを見て、「ここを変えたい」と思ったら、追加で指示します。
たとえば、画面の雰囲気を変えたい場合は次のように入力します。
黒いのはいや～！
画面を青色基調にしてください。
入力したら、上向き矢印の送信ボタンを押します。
うまく直らない場合は、修正を重ねるより最初から作り直した方が早いこともあります。特に、初期プロンプトでアプリの方向性がずれてしまった場合は、最初の指示を整理して再生成する方が安定します。
公開する
アプリが完成したら、Publish から公開できます。
公開するとアプリに URL が付き、その URL を配布することで他の人にも使ってもらえるようになります。
ただし、公開には注意が必要です。
- Google のサービスを使って公開する
- 無料とは限らない
- アクセス数が増えると費用が発生する可能性がある
- 使っている画像の権利や利用条件を確認する
身内で少し試す程度なら大きな問題にならないことも多いですが、SNSなどで広く公開する場合は、料金と権利関係を必ず確認しておきましょう。
うまく作るコツ
今回のような小さなアプリでも、プロンプトの書き方で結果がかなり変わります。
画像とコメントは対応が分かるように書く
画像 URL とコメントを 1 行ずつ並べると、AI が仕様を理解しやすくなります。
画像URL , 表示コメント
画像URL , 表示コメント
見た目の条件を明確にする
「和風」「青色基調」「かわいい」「シンプル」など、雰囲気は言葉で指定できます。ただし、抽象的すぎると毎回違う結果になりやすいので、必要なら色・演出・レイアウトも追加で指定します。
背景は淡い青色にしてください。
ボタンは中央に配置してください。
カード画像は画面内に収まるようにしてください。
気に入らなければ作り直す
生成AIで作るアプリは、最初の生成結果にかなり左右されます。
細かく修正してもうまくいかない場合は、プロンプトを整理して最初から作り直すのも有効です。
今回使ったプロンプトの応用例
ガチャのテーマを変えたい場合は、画像 URL とコメントを増やすだけで応用できます。
ガチャアプリを作ってください。
ガチャカードの画像URLと、画像下の一言コメントは次の通りです。
画像URL1 , コメント1
画像URL2 , コメント2
画像URL3 , コメント3
画像URL4 , コメント4
なお、画像サイズを取得してアプリの表示画面で見切れないようにしてください。
ガチャを引いた際の演出は、テーマに合う雰囲気でお願いします。
キャラクターガチャ、料理ガチャ、今日のおすすめガチャ、名言ガチャなど、URL とコメントの組み合わせを用意すればいろいろ遊べます。
おわりに
Google AI Studio の Build mode を使うと、プロンプトだけでも簡単なWebアプリを作れます。
コードを書ける人にとってはたたき台作成として便利ですし、コードを書かない人にとっても「こういうものが欲しい」をすぐ形にできるのが魅力です。
AI の開発環境は変化が激しいので、試せるうちに試してみるのがおすすめです。
利用画像・クレジット
今回のスライドでは、次の作品・キャラクター画像を利用しています。
- 境界を行くもの 月牙風来伝 by 境界堂てら様 より、紫玖月牙、杏華
- 宝石卿の縁結び by 宇佐美ナナ より、登場キャラ多数
作者様の代表作はこちらです。
- 境界堂てら様: 理系蛮族日誌Ⅰ 学徒黒歴史編
- 宇佐美ナナ: 現代知識で楽勝！？ と思いきや何もかも足りない中世ライフ
制作日: 2026年5月6日