「社内に、こんな業務システムがあったら便利なのに」

そう思ったことがあっても、これまではプログラミングができなければ、自分でアプリを作ることは簡単ではありませんでした。

開発会社へ相談しようにも、何をどう伝えればよいか分からない。要件定義や仕様書と言われると難しそうに感じる。見積もりを取るほど、まだアイデアが固まっているわけでもない。

こうした「作りたいものは何となく頭の中にあるけれど、形にする方法が分からない」という壁を大きく変えつつあるのが、Google AI Studioを使ったアプリ開発です。

Google AI StudioのBuildモードでは、「こういうアプリを作りたい」と自然な言葉で指示すると、必要なコードやファイルが生成され、その場でWebアプリをプレビューできます。現在はフロント画面だけではなく、Node.jsによるサーバーサイド処理を含むフルスタック開発にも対応しています。

私自身もプログラミングを本業としているエンジニアではありませんが、AIと対話しながら、質問画面、診断ロジック、診断結果表示、PDF生成、メール送信、回答データ保存、管理者ログイン、顧客管理画面まで備えた診断アプリを作りました。

ただし、実際に業務で使えるところまで進めると、ひとつ重要なことが分かります。

Google AI Studioのプレビューで動いたことと、本番環境で正しく動いていることは別です。

本番運用では、「Google AI Studio → GitHub → Cloud Build → Cloud Run → 本番URL」という流れで、それぞれ正しく反映されているか確認する必要があります。

この記事では、Google AI Studioで何が作れるのかという基本から、非エンジニアが実際に業務アプリを作った経験、本番公開後に確認すべきポイントまで、経営者や業務担当者の視点で解説します。

Google AI Studioのアプリ開発とは？

自然言語で「作りたいもの」を伝えてWebアプリを生成できる

Google AI Studioは、Geminiを活用したAI開発環境です。以前の生成AIによるプログラミングは、「コードを書いてもらう→自分でコピーする→開発環境へ貼り付ける→エラーが出たら再びAIへ聞く」という使い方が中心でした。

Google AI StudioのBuildモードでは、この流れが大きく変わっています。作りたいものを自然言語で説明すると、AIが複数のファイルを含むアプリケーションを生成し、画面上でライブプレビューを確認できます。Webアプリの場合、標準的にはReactを使ったクライアント側の画面と、Node.jsのサーバー側処理を含むフルスタック環境を生成できます。

例えば、「質問に答えるとタイプを診断できるアプリを作ってください」「顧客情報を登録し、あとから一覧で確認できるアプリを作りたいです」「入力内容をもとに結果を表示し、その結果をPDFにしてください」といった日常の言葉から始められます。

従来の開発では、仕様書を書いた段階では完成画面を想像するしかありませんでした。AIを使った開発では、まず動くものを作ってから考えられることが大きな違いです。

コードを書いてもらうだけではなく、対話しながら修正できる

最初から完璧なアプリを作る必要はありません。「質問を10問から15問にしてください」「回答しないと次へ進めないようにしてください」「診断結果をもう少し分かりやすくしてください」「スマートフォンでも見やすくしてください」「管理者だけが回答一覧を見られるようにしてください」というように、完成した画面を見ながら修正していきます。

頭の中だけで「必要な機能」を全部決めるのは難しくても、実際に動く画面を見ると、「ここに戻るボタンが必要だ」「この説明では利用者が迷う」「結果を画面で見せるだけではなくPDFにしたい」といった改善点が見えてきます。

非エンジニアに重要なのは「コードを書く力」より要望を言語化する力

もちろん、プログラミングの知識がある方が有利な場面はあります。しかし、Google AI Studioを使い始める段階で最も重要なのは、JavaScriptやNode.jsを書く技術ではありません。むしろ重要なのは、何を実現したいのかを言葉にする力です。

「顧客管理システムを作って」だけでは、AIも何を作ればよいのか判断しづらくなります。一方、「お客様がフォームへ会社名、氏名、メールアドレスを入力する。回答内容を保存する。管理者はログイン後に回答者の一覧を確認できる。一覧から個別の回答結果を開ける」と伝えれば、具体的な機能へ変換しやすくなります。

AI時代のアプリ開発では、プログラムを書く作業の一部をAIへ任せる代わりに、人間側には業務を整理して言葉にする力がより求められます。

Google AI Studioでは何が作れる？

入力フォームや診断アプリ

非エンジニアが最初に試しやすいのが、フォーム型のアプリです。アンケート、簡易診断、ヒアリングフォーム、問い合わせ受付、チェックリスト、社内申請、顧客情報入力、見積もり前の条件確認などが考えられます。

単に情報を入力するだけではなく、「回答Aなら結果A」「合計点が80点以上なら結果B」「特定の条件を満たした場合だけ追加質問を表示する」といった判定ロジックも組み込めます。

生成AIを組み込んだWebアプリ

Geminiを使ったAI機能も組み込めます。例えば、入力文章の要約、内容の分類、回答内容からアドバイス生成、営業文章の作成、会議内容の整理、質問への回答、データをもとにしたコメント生成などです。

通常の生成AIでは、社員がChatGPTやGeminiを開き、その都度プロンプトを入力します。しかし、業務アプリとして作れば、「入力欄へ必要事項を入れてボタンを押す」という形にできるため、利用者全員が複雑なプロンプトを書く必要はありません。

データを保存する業務アプリ

業務アプリに発展させるためには、入力した情報を保存できることが重要です。Google AI StudioではFirebaseとの連携によって、Firestoreデータベースをアプリへ追加できます。

例えば診断アプリであれば、「顧客が回答する→診断結果を表示する→回答内容をFirestoreへ保存する→管理画面であとから確認する」という流れを作れます。ここまで来ると、単なるデモ画面ではなく「実際に業務で使うシステム」に近づきます。

外部サービスと連携するアプリ

Google AI Studioのフルスタック環境では、Node.jsのサーバーサイド処理やnpmパッケージを利用できます。そのため、メール送信、外部APIの呼び出し、他システムとの連携、ファイル生成、外部データベース利用などへ発展させることもできます。

ただし、外部サービスを接続すればするほど、認証やAPIキー管理、エラー処理、セキュリティなどの確認事項も増えます。「AIが作ってくれたから大丈夫」と考えるのではなく、重要な処理ほど人間による確認が必要です。

社内ツール・顧客向けツール

Google AI Studioの用途は、不特定多数へ提供するサービスだけではありません。むしろ中小企業では、最初は社内向けの小さな業務ツールに向いています。営業ヒアリングツール、社内診断、見積もり条件整理、問い合わせ振り分け、作業チェック、顧客カルテ、報告内容の要約、社内FAQ、文書作成補助などです。

Google AI Studioは画面だけではなくフルスタックのアプリ開発に対応している

フロントエンドとは利用者が見る画面

フロントエンドとは、利用者がブラウザで見る部分です。診断アプリなら、質問画面、選択ボタン、次へボタン、診断結果、管理画面の一覧などです。Google AI StudioのWebアプリではReactが標準的なフロントエンドとして利用されています。

バックエンドとは裏側で処理する仕組み

利用者には見えないところで、入力データの保存、AIへの問い合わせ、外部APIへのデータ送信、メール送信、認証情報の確認などを行うのがバックエンドです。Google AI StudioではNode.jsのサーバーサイドランタイムを利用できるため、ブラウザ側だけでは安全に実行しづらい処理をサーバー側へ分けられます。

Firestoreによるデータ保存

業務アプリでは「入力して終わり」ではなく、あとから確認できることが必要になります。Firestoreを使えば、顧客情報、回答履歴、診断結果、日時、ステータスなどを保存できます。これにより「診断を受けた人の一覧」「誰がどの回答をしたか」「どの結果になったか」といった管理画面を作れるようになります。

ログイン認証も組み込める

業務データを扱う場合、誰でも管理画面を開ける状態では困ります。Google AI StudioとFirebaseの連携ではFirebase Authenticationを使った認証も利用でき、一般利用者が使う画面と管理者だけが使う画面を分ける設計が可能です。

本格的な顧客情報や機密情報を扱う場合は、ログイン機能を付けただけで安全と言えるわけではありません。権限設計、アクセス制御、保存するデータ、ログ管理などを含めて検討する必要があります。

非エンジニアがGoogle AI Studioで診断アプリを作った実例

最初は質問画面から始めた

ここからはGoogleの公式事例ではなく、私自身が非エンジニアとして実際に作った業務アプリの経験を紹介します。スタート地点は「質問に回答すると診断結果が表示されるアプリを作りたい」というアイデアでした。

最初に必要だったのは、「質問を表示する→回答を選択する→次の質問へ進む→最後に結果を表示する」という最低限の流れです。最初から管理画面やメール送信まで作ろうとせず、まず診断として動くかを確認しました。

実際に触ることで、「戻る機能が欲しい」「未回答なら次へ進めない方がよい」「残り何問か分かった方がよい」「スマートフォンで回答しやすくしたい」といった改善点が見えてきます。

診断ロジックを追加した

次に必要になるのが、回答から結果を判断する仕組みです。回答ごとに点数を設定し、項目別にスコア計算し、条件によって結果を分岐し、特定の回答がある場合に別の判定を行う、といったロジックを追加しました。

ここでも自分でコードを書くより、「この回答の場合はこの項目へ2点追加してください」「この条件の場合は結果Aではなく結果Bにしてください」というように、業務ルールを言葉で説明して修正していきました。

結果表示を作った

診断結果も、単に「あなたはタイプAです」と表示するだけではありません。実際に使うことを考えると、総合結果、項目別結果、強み、改善ポイント、次に取るべき行動などを表示したくなります。動くものを見ることで、結果画面に何が必要かが具体化していきました。

PDF生成を追加した

次に、「結果を画面で見るだけではなく、PDFとして持ち帰れるようにしたい」という要望が出ました。そこで、診断結果からPDFを生成する機能を追加しました。業務ではこのように、最初に想定していなかった要望が、実際にアプリを触ることで見えてきます。

メール送信を追加した

さらに、「診断後に結果をメールでも送れるようにしたい」という機能を追加し、最終的には自社ドメインからメールを送信する仕組みまで実装しました。ここから先は、外部サービスとの接続、認証情報、送信処理、エラー処理なども必要になります。

回答データを保存した

診断を業務で活用するなら、回答結果を保存したくなります。そこで、回答者情報、回答内容、診断結果、登録日時などをデータとして残す機能を追加しました。これによって、単なる診断ツールから顧客データを扱う業務アプリへ変わっていきました。

管理者ログインを追加した

回答データが蓄積されると、誰でも見られてはいけません。そのため管理者ログインを用意しました。ここで初めて、「利用者用の画面」と「運営者用の画面」という二つの役割が生まれました。

顧客管理画面まで発展した

最終的には、顧客一覧、個別顧客情報、診断結果、回答履歴などを管理できる画面へ発展しました。最初は「診断するだけのアプリ」だったものが、「質問 → 診断 → 結果表示 → PDF → メール → データ保存 → 管理者ログイン → 顧客管理」までつながったのです。

この経験から感じたのは、Google AI Studioの価値は「一発で完成したシステムを作ってくれること」ではありません。自分でも完成形が分かっていない状態から、AIと会話しながら少しずつ完成形を見つけていけることに大きな価値があります。

実際に作って分かったGoogle AI Studioアプリ開発のメリット

頭の中のアイデアをすぐ画面にできる

最大のメリットは、「こういうものが欲しい」と言葉で説明したものが、実際に操作できる画面になることです。頭の中だけで考えていたものと、実際に触れるものでは、理解度がまったく違います。

動くものを見ながら要件を考えられる

従来のシステム開発では、最初に要件定義をすることが一般的です。しかし非エンジニアにとって、「必要な機能を全部洗い出してください」と言われても簡単ではありません。AI開発なら、まず作ってみて、「違う」「もっとこうしたい」「ここはいらない」と考えることができます。

専門用語を知らなくても修正を依頼できる

「CSSを変更してください」「このコンポーネントを修正してください」といった専門用語を使わなくても、「このボタンをもっと目立つようにしてください」「スマートフォンでは縦に並べてください」と伝えられます。

「何が欲しいのか分からない」状態から始められる

業務改善では、「今の仕事は不便だけれど、どんなシステムを入れればよいか分からない」という状態がよくあります。AIとの対話型開発では、「今こういう作業をしています」「ここで毎回手間がかかります」というところから相談できます。つまり、完成した仕様をAIへ渡すだけではなく、仕様そのものをAIと一緒に考えられます。

Google AI Studioアプリ開発のデメリット・注意点

AIが生成したコードが常に正しいわけではない

AIは間違えることがあります。機能Aを直した結果、機能Bが動かなくなることもあります。「エラーが表示されていないから正しい」とも限りません。重要な計算、個人情報、契約、決済などを扱う場合は、特に慎重な確認が必要です。

機能が増えるほど全体への影響が大きくなる

最初の数画面では問題がなくても、機能を追加していくと依存関係が増えます。「ログイン処理を修正したら管理画面へ入れなくなった」「データ保存方法を変更したら既存の一覧表示が動かない」といったことが起こり得ます。一つずつ変更し、そのたびに重要機能を確認する運用が必要です。

APIキーや認証情報を画面側へ直接書かない

これは非常に重要です。機密性の高いAPIキーなどはファイルへ直接ハードコードせず、サーバー側や適切な秘密情報管理機能で扱うべきです。特にブラウザへ配信されるクライアント側コードに秘密情報を置くと、利用者から見えてしまう可能性があります。

AIへ実装を依頼するときも、「APIキーが公開されない構成にしてください」といったセキュリティ上の条件を明示した方がよいでしょう。

個人情報を扱う業務システムではセキュリティ設計が必要

顧客名、メールアドレス、回答内容などを保存するなら、単なる試作品ではありません。誰が閲覧・編集・削除できるか、何を保存するか、保存期間、不正アクセス対策、バックアップ、ログ管理などへ検討範囲が広がります。「AIで作れた」ことと「企業が安全に運用できる」ことは別です。

最重要｜AI Studioのプレビューと本番環境は別物

AI Studio上で見ているのは開発中の確認環境

Google AI Studioで修正し、プレビューを見ると、変更後のアプリが正常に動いているように見えます。しかし、「AI Studioで正しく動いた＝本番の利用者が見るアプリも更新された」とは限りません。

AI Studio内では新しいコードが動いていても、GitHubへ反映されていない、Cloud Buildが失敗している、Cloud Runへ新しい版がデプロイされていない、古いリビジョンへトラフィックが向いている、といった可能性があります。

「修正したのに本番画面が変わらない」が起きる理由

例えば、AI Studioでボタン名を変更したとします。AI Studio上では変わっているのに、本番URLへアクセスすると以前のままということがあります。この場合、「AIが修正できていない」とは限りません。途中のどこかで本番環境への反映が止まっている可能性があります。

本番公開では5段階で確認する

1．Google AI Studio｜修正内容を確認する

最初はAI Studioです。依頼した修正が、見た目、入力、計算、データ保存、メール、PDF、管理画面などで正常に動くか確認します。この段階では、本番公開のことを考える前に、まず開発版として正しいことを確認します。

2．GitHub｜最新コードが反映されているか確認する

Google AI Studioで作ったコードはGitHubへ出力できます。ここで確認するのは、AI Studioで直した最新コードが、本当にGitHubへ入っているかです。AI Studioでは直っているのにGitHubが古ければ、その先のCloud BuildやCloud Runへ新しい内容が反映されることはありません。

3．Cloud Build｜ビルドが成功したか確認する

GitHubへ新しいコードが入ったら、次はCloud Buildです。GitリポジトリへのPushをきっかけにCloud Buildトリガーを実行し、コードを自動でビルドしてデプロイする継続的デプロイを構成できます。

ここでビルドが失敗していれば、当然Cloud Runは新しい版になりません。「本番が変わっていない」ときは、まずビルド結果を確認する必要があります。

4．Cloud Run｜新しいリビジョンがデプロイされたか確認する

Cloud Buildが成功したら、Cloud Runを確認します。Cloud Runでは、アプリの新しい版が「リビジョン」として管理されます。新しいリビジョンが作られているか、デプロイが成功しているか、本番トラフィックが新しいリビジョンへ向いているかを確認します。

5．本番URL｜最後は利用者と同じ環境で確認する

最後は必ず本番URLへアクセスします。ここで確認して初めて、「本番への反映が完了した」と言えます。重要なのは、開発者側の画面ではなく、実際のお客様と同じURL・同じ操作で確認することです。

可能であれば、パソコン、スマートフォン、ログイン前、ログイン後、新規登録、既存データ確認など、実際の利用パターンに近い状態で確認します。

5段階を習慣にすると問題箇所を切り分けやすい

この5段階を理解していると、問題が発生したときに原因を切り分けやすくなります。「AI Studioでは正しい→GitHubは？→GitHubも正しい→Cloud Buildは？→ビルド成功→Cloud Runのリビジョンは？→Cloud Runも新しい→本番URLは？」という順番です。

「何となく動かない」と考えるのではなく、どこまでは正しいのかを確認することが非常に重要です。

Google AI Studioでアプリ開発するときの7ステップ

STEP1｜解決したい業務を1つ決める

最初に「AIアプリを作ろう」と考えないことです。先に考えるのは業務です。「問い合わせ内容を毎回人が分類している」「ヒアリング結果から毎回同じ診断をしている」「入力内容をExcelへ転記している」など、困っている業務から始めます。

STEP2｜入力・処理・出力を整理する

次に、「入力 → 処理 → 出力」で整理します。診断なら、入力は質問への回答、処理は点数計算・条件判定、出力は診断結果です。この3つが分かれば、AIへ説明しやすくなります。

STEP3｜最小限のアプリを作らせる

いきなり「ログインもPDFもメールも顧客管理も全部作って」としない方がよいでしょう。最初は「質問に回答すると結果が表示される」ところだけ作り、まず中心機能が成立するか確認します。

STEP4｜実際に触りながら修正する

自分で使ってみて、分かりにくい、押しにくい、情報が足りない、余計な機能がある、処理がおかしいと感じたところをAIへ伝えます。

STEP5｜データ保存や認証などを追加する

中心機能が固まったら、データベース、ログイン、メール、PDF、外部APIなどを追加していきます。

STEP6｜GitHubなどでコードを管理する

アプリが大きくなってきたら、コードのバージョン管理も重要です。GitHubへ保存しておけば、いつ変更したか、何が変わったか、過去の状態、デプロイ対象を管理しやすくなります。

STEP7｜本番環境へ公開して確認する

最後に本番公開します。改めて「Google AI Studio → GitHub → Cloud Build → Cloud Run → 本番URL」を確認します。アプリ開発は「コードを書いたら終わり」ではありません。利用者が使う場所で正しく動いて、初めて完成です。

非エンジニアが失敗しやすいポイント

最初から全部入りのアプリを作ろうとする

機能が多いほど、修正時の影響範囲も大きくなります。まず一番重要な処理だけ作りましょう。

「いい感じに作って」で済ませる

AIは具体的な条件があるほど動きやすくなります。「いい感じの顧客管理」ではなく、「顧客一覧には会社名、氏名、登録日、診断結果を表示してください」と伝えます。

エラーを直すたびに別の機能を壊してしまう

修正後は、その場所だけではなく重要機能を一通り確認します。特にログイン、保存、計算、メール、PDFなどは、変更のたびにテストした方が安全です。

プレビューだけ確認して公開完了だと思う

AI Studioで動くことと、本番で動くことは分けて確認しましょう。これは本記事で最も伝えたい失敗ポイントの一つです。

セキュリティを最後まで後回しにする

試作品なら問題がなくても、実際の顧客情報を入れた瞬間に責任が変わります。個人情報や企業秘密を扱う場合は、必要に応じて専門家によるレビューを受けるべきです。

Google AI Studioで自分で作るべきアプリ・専門家へ相談すべきアプリ

「AIでアプリが作れるなら、開発会社はいらないのでは？」と思う人もいるかもしれません。重要なのは、自分で作るか外注するかの二択にしないことです。

Google AI Studioの価値は、専門家を不要にすることではありません。以前なら「こういうシステムが欲しいです」と口頭で説明するしかなかった経営者が、自分でプロトタイプを作り、「この画面で、この入力をして、こういう結果を出したい」と動くものを見せられるようになります。これは開発会社とのコミュニケーションも大きく変えます。

Google AI Studioは「開発会社の代わり」ではない

Google AI Studioについて、「AIがシステム開発会社の仕事をすべて代替する」と考えると、本質を見誤ると思います。私が実際に使って最も価値を感じたのは、開発費をゼロにできることではありません。これまで頭の中にしかなかったものを、自分自身で動く形にできることです。

経営者や業務担当者は、日々の仕事の中で、「この作業、もっと簡単にならないか」「この情報を自動でまとめられないか」「お客様に入力してもらった内容から、自動で結果を返せないか」というアイデアをたくさん持っています。

以前は「アイデア→担当者へ説明→要件定義→見積もり→開発→完成して初めて確認」という長い距離がありました。Google AI StudioのようなAI開発環境を使えば、「アイデア→AIへ話す→その場で試作品を見る→直す→さらに考える」という進め方ができます。

つまり、Google AI Studioは「完成した仕様を開発するためだけの場所」ではなく、「仕様そのものを考える場所」にもなっています。だからこそ、非エンジニアの経営者や業務担当者にとって大きな可能性があります。

よくある質問

Google AI Studioだけでアプリを作れますか？

簡単なWebアプリから、サーバーサイド処理を含むフルスタックアプリまでGoogle AI Studioで作成できます。ただし、本格運用ではデータベース、認証、外部サービス、クラウド環境なども関係するため、必ずしもAI Studioだけを見ればよいわけではありません。

プログラミング未経験でも使えますか？

試作段階なら十分可能です。最初はコードを書く力よりも「何を作りたいのか」「現在の業務がどうなっているのか」を説明する力が重要です。ただし、複雑なシステムやセキュリティが重要なシステムでは、技術者の確認が必要になるケースがあります。

データ保存やログイン機能も作れますか？

Google AI StudioはFirebaseと連携でき、Firestoreによるデータ保存やFirebase Authenticationによる認証を追加できます。企業で個人情報を扱う場合は、単にログイン機能を追加するだけでなく、アクセス権限やデータ管理ルールまで含めて設計してください。

AI Studioで作ったアプリを一般公開できますか？

可能です。Google AI StudioではCloud Runへのデプロイが案内されています。また、GitHubへコードを出力し、既存の開発・デプロイ工程へつなげることもできます。

業務システムとしてそのまま使っても大丈夫ですか？

用途によります。社内の簡易ツールや試作品であれば自分で作って使えるケースもあります。一方、顧客の個人情報、決済情報、機密情報、基幹システム、多数の利用者、厳格な権限管理などが関係する場合は、セキュリティや運用面を含めて専門家に確認することをおすすめします。

まとめ｜Google AI Studioならアイデアからアプリ開発を始められる

Google AI Studioのアプリ開発で最も大きく変わったのは、非エンジニアでも「作りたいものを考える側」だけではなく、「実際に動くものを作る側」に参加しやすくなったことです。

現在のBuildモードでは、自然言語からWebアプリを生成し、Reactを中心とした画面、Node.jsによるサーバーサイド処理、Firebaseを利用したデータ保存や認証などを組み合わせたフルスタックアプリへ発展させられます。

私自身も、プログラミングを本業としない立場から、「質問 → 診断 → 結果表示 → PDF生成 → メール送信 → データ保存 → 管理者ログイン → 顧客管理」という診断アプリまで作ることができました。

一方、実際に本番運用するなら、「Google AI Studio → GitHub → Cloud Build → Cloud Run → 本番URL」というように、開発画面だけではなく本番まで正しく反映されているかを確認することが重要です。

そして、Google AI Studioを「開発会社の代わり」と考える必要もありません。むしろ本当の価値は、頭の中にある業務アイデアを、AIと対話しながら具体化できることにあります。

まずは、「毎日繰り返している業務」「Excelやフォームでは少し不便になってきた業務」「こんな仕組みがあれば便利なのにと思っている業務」を一つ選び、「入力 → 処理 → 出力」の3つに整理してGoogle AI Studioへ伝えてみる。それが、非エンジニアがAIと一緒に業務アプリ開発を始める最初の一歩です。

頭の中にある「こんな業務アプリが欲しい」を整理してみませんか？

「この業務をもっと楽にしたい」「Excelではそろそろ限界」「こんな仕組みがあれば便利なのに」と感じていても、最初から仕様書を作る必要はありません。

現在の業務、入力している情報、行っている判断、最終的に欲しい結果を整理すれば、Google AI Studioなどを使って自社で試作できる部分と、本格的なシステム開発を検討した方がよい部分を切り分けられます。

自社の場合、どこからAI・アプリ活用を始めればよいか整理したい方は、お気軽にご相談ください。

※Google AI Studioをはじめ、AIサービス・Google Cloudの機能、料金、提供条件は変更される場合があります。実際に開発・運用する際は最新の公式情報をご確認ください。