【初学者向け】Google AI Studioでwebアプリを作ってみよう

Google AI Studio は Google が提供するアプリ開発プラットフォームです。作りたいものを文章で伝えるだけで Gemini がコードを書いてくれるので、プログラミングの経験がなくても web アプリや Android アプリを作成し、そのまま公開できます。

この記事では「大学の時間割管理アプリ」を題材に、アプリを作って公開するまでの流れを一通り紹介します。

Google AI Studio を開く

まずはGoogle AI Studioにアクセスします。右上の「Get started」から Google アカウントでログインするだけで、すぐに使いはじめられます。

無料で試せますが、無料枠には利用回数の上限があります。使い込みたい場合は有料プランを検討してください。

ログインしたら、左メニューの「New app」を選び、作りたいアプリの内容を入力します。今回は次のように書きました。

大学の時間割管理アプリを作成してください。
それぞれのコマであと何回休めるか管理、表示できるようにしてください。
ダークトーンでモダンなデザインにして下さい。

ポイントは「何を作るのか」「どんな機能が欲しいのか」「どんな見た目にしたいのか」を分けて伝えることです。細かい仕様が決まっていなくても構いません。まずはざっくり伝えて、あとから追加のプロンプトで調整していくほうがうまくいきます。

入力できたら「Build」を押します。

プロンプトを送ると、デザインの候補がいくつか提案されます。プレビューを見ながら好みのものを選び、「Select this design」を押します。こだわりがなければ「Skip」でも構いません。

今回は「Clean Minimalism」を選びました。

あとは待つだけです。数分ほどで必要なファイルが一通り書き上がり、画面右側の「Preview」タブで動くアプリがそのまま確認できます。「Code」タブに切り替えれば、生成されたソースコードも読めます。

今回は指示していない機能まで作り込まれていました。左側のチャットには、シラバスの文章を貼り付けると授業名や教室を自動で読み取る機能や、入力したデータをlocalStorageに保存する仕組みを追加した、といった説明が並んでいます。

できあがったアプリは、画面右上の「Share」からすぐに共有できます。「General access」を「Public: Anyone with the link can view」に変更し、「Copy link」でURLをコピーすれば、リンクを知っている人なら誰でもアプリを開けるようになります。

このとき「Include your Gemini chat history」をオンにすると、アプリを作るまでのやりとりも一緒に公開されます。見せたくない内容が含まれている場合はオフのままにしておきましょう。

コピーしたURLを開くと、アプリだけが表示された状態になります。

気になるところがあれば、チャット欄にそのまま伝えるだけで直してもらえます。今回はスマートフォンで開くと情報量が多すぎたので、次のように依頼しました。

スマホで見るには要素が多くて閲覧、操作がしづらいので、最低限の要素のみに絞って下さい。

修正が終わると、共有したURLはそのままで内容だけが更新されます。曜日を切り替えるタブと、その日のコマの一覧だけが並ぶ、スマートフォンでも扱いやすい画面になりました。

Google AI Studio を使うと、作りたいものを文章で伝えるだけでアプリができあがり、そのまま公開まで進められます。はじめから完璧な指示を書こうとせず、まずはざっくり作ってもらい、動かしながら追加のプロンプトで整えていくのがおすすめです。

思いついたアイデアを形にするまでの距離がぐっと縮まるので、ぜひ試してみてください。