スマートソサエティセンターの飯田です。
突然ですが、今回のエントリーでは、 コードを1行も書かずに、アイデアを形にする衝撃 をお伝えします。
前回のブログでお見せしたGeminiと音声通話を連携させるデモ実装、実はソースコードを1行も書いていません
デザインのクオリティも問題ない、さらにはGeminiのような生成AIの組み込みまでが、コーディング作業なしにできちゃう世界になってきてます。
これまでは、「こんなサービスが欲しい」というアイデアを思いつくと、下記のようなステップで最初のMVP（Minimum Viable Product）を制作していました。
- FigmaでのUIデザイン まずFigmaを使い、画面遷移や見た目のイメージを具体化（いわゆる「紙芝居」）
- 価値の概念実装 「紙芝居」だけでは伝えきれないサービスの核心的価値、特にAIによる分析の「凄さ」などは、別途、概念実証（PoC）のための簡易的な実装を行う
新規事業開発において最も重要なのは「いかに早く仮説を構築し、顧客からのフィードバックを得るか」、
つまり「いかに早く失敗し、学習するか」だと考えています。このサイクルを高速化することこそ、成功の鍵を握ります。
私自身、プログラミング実装のスキルは持っていますが、得意ではなく、決してスピーディーとは言えません苦笑
そのため、このプロセスには、それなりの時間と労力が必要でした。
それが、Firebase Studioの登場により、AIがコーディングをしてくれるようになり、実装の時間が大幅に短縮されました。
Firebase Studioとは何か？ 何ができるのか？
FirebaseStudioは2025/4月にGoogleが発表したクラウドベースのエージェント開発環境です。
2025/6/1現在、Firebase Studio はプレビュー版ですので、ご注意ください
https://firebase.google.com/docs/studio?hl=ja
ざっくりの使い方は以下のとおりです
- アプリのベースとなる機能や実現したいことをプロンプトで入力する
- 機能やデザインのトンマナ、使用するフレームワークなどの確認があるので、問題なければ作成をする
- 修正や機能を加えていく。右下のプロンプトで指示を入れていきます
- UIの言語を英語から日本語に変更したい場合の例
- AIが理解してくれて、ソースコードの修正を行ってくれます。
- どこにどういう変更をいれたのかも教えてくれます
- タブからエレメント指定モードにすれば、特定の要素に対する指示もできます
- ちなみに、GeminiはGemini APIを入力をすれば、すぐに連携してくれます
- 右上のPublishボタンをおすと、新しくFirebaseプロジェクトが作られて、AppHostingにデプロイされます
- 参考：FirebaseStudio公式のプロンプトテクニック https://firebase.google.com/docs/studio/prompting?hl=ja
「FirebaseStudio」の魅力
- ノーコード/ローコードでのUI構築
- FigmaのようなデザインツールでUIを設計する感覚で、あるいはそれ以上の速さで、実際に動作するフロントエンドを構築できます。
デザインの再現性も高く、プロトタイプの段階から高品質なユーザー体験を提供可能です。
- FigmaのようなデザインツールでUIを設計する感覚で、あるいはそれ以上の速さで、実際に動作するフロントエンドを構築できます。
- Gemini AIのシームレスな統合
- Geminiをはじめとする生成AIモデルを、複雑なコーディングなしにアプリケーションに組み込むことができます。これにより、これまで概念実証に留まっていたAI活用アイデアも、手軽に実サービスに近い形で検証できるようになります。
- 開発サイクルの劇的短縮
FirebaseStudioがもたらす、MVP開発のパラダイムシフト
このMVPの検証を回すための時間と苦労が、「FirebaseStudio」によってガラリと変わりました。
FirebaseStudioによって、FigmaでUIデザインを描くよりも速く、かつ、実際に動作するAI組込みのプロトタイプが完成してしまうのです。
MVPやプロトタイプの開発のあり方そのものが、根本から変わるほどのインパクトを感じました。
アイデアの着想から検証までのリードタイムが劇的に短縮され、動くWebアプリを顧客に提示でき、より多くの挑戦と、より質の高いフィードバックループができます。
今後、重点的に検証していきたいポイント
ただし、MVPで終わらず、プロダクションコードにそのままもっていけるか？その実用性を確かめるためには、さらに以下の点を深掘りして見ていく必要があると考えています。
- 生成されるコードの品質
- ノーコード/ローコードで生成されたコードが、どの程度の品質と保守性を備えているのか。
- データベースとの連携
- 実際のアプリケーション開発に不可欠なデータベース（Firebase Realtime DatabaseやCloud Firestoreなど）との連携は、どの程度スムーズに行えるのか。
- プロダクション利用へのハードル
- 作成したプロトタイプを、実際の製品コードとして利用していく際に、技術的な障壁や制約がないか。
- ご注意
- ログイン認証とかをそのまま指示してしまうと、JavaScriptに埋め込む方式で実装してくる可能性もあるので注意してください
これらの検証を通じて、「FirebaseStudio」が持つ真のポテンシャルを見極めていきたいと考えています。
思考が即座に形になる未来
最後に、私が「FirebaseStudio」とGeminiの組み合わせで最も感動した体験を少しだけ。
それは、最初のプロンプトもGeminiに考えてもらい、編集もさらに音声入力で『ここのボタンの色を赤に変えて』『このリストに検索機能を追加して』といったプロンプトをいれていくという開発スタイルです。
アプリ開発を行うときに、「なんかこんな感じのモノ」が欲しいというように、イメージはあるが言語化できないということがあると思います。その言語化もGeminiがサポートしてくれますし、音声入力を使うことで、頭の中にあるアイデアがリアルタイムに具現化されていく開発体験になりました。
「アプリを実装している」感覚ではなく、「どういうアプリがいいかを議論していたら、そのまま議論のアプリが作られてた」みたいな感覚です。
「FirebaseStudio」は、新規事業開発の「自由の翼」を与えてくれる存在だなぁと思いました。
最後まで読んでいただき、ありがとうございました。
↓ のスターを押していただけると嬉しいです。励みになります。
執筆：@iida.michitaka7b3a3dd24e9c454b、レビュー：寺山 輝 (@terayama.akira)
（Shodoで執筆されました）
