田口和裕の「ChatGPTの使い方！」 第35回

【無料】グーグル神AIツール5選　「Google AI Studio」はこれがやばい

【神機能5】コードなしアプリ作成

　「Build」タブでは、用意されたテンプレートを選び、自然言語で指示を出すだけで簡単なWebアプリケーションを作成できる。基本的なプログラミング知識すら不要なのだ。

　それではさっそくテンプレートからアプリを作成してみよう。まずはサイドメニューから「Build」、続けて「Start from a template」をクリック。

　テンプレートが一覧表示される。今回は「Chat example」テンプレートを試してみよう。

「Chat example」を選択

　「Chat example」テンプレートが表示された。画面は縦に三分割されており、左側がGeminiを使ったチャットウィンドウ「code assistant（チャット）」、真ん中がプログラムコード自体を表示・編集する「code editor（コード）」、右側がプログラムの実行結果を表示する「preview（プレビュー）」の画面になっている。

　画面左上の3つのボタンがそれぞれ「code assistant」、「code editor」、「preview」の画面を表しており、オン・オフすることで必要なウィンドウだけを表示できる。

　例えば下記は「code assistant」と「preview」を消して「code editor」のみを表示している。

code editorだけを表示したところ

　では、サンプルアプリをノーコードで改造していこう。code assistantを開いて下記のプロンプトを入力して実行。

プロンプト：このチャットアプリを日本のカスタマーサポート用に変更してください： - タイトルを「お客様サポートチャット」に変更 - 背景色を青系に変更 - 最初に「何かお困りのことはございませんか？」と表示 - より丁寧な日本語で回答するように設定

　AIが思考を開始する。

　展開することで思考内容を確認できる。「index.html」「index.css」などを日本語に変換する方法について検討しているようだ。

　1分程度で作業は終了。コードが書き直されプレビュー画面も新たなものになっている。

　Preview画面を確認。問題なく日本語で動作するようだ。

　チャット画面には変更内容がぎっしり記述されているのでプログラミングの勉強に役立てることもできる。

　追加修正も自然言語で可能。色味を少し変更してもらいたいので下記プロンプトを実行。

プロンプト：カラースキームをもっと落ち着いた色に変更

　CSSファイルを変更し、落ち着いた色味に変更してくれた。

　画面右上には作成したアプリを利用するためのボタンが並んでいる。左から「アプリのコピー」、「アプリのダウンロード」、「Cloud Runへのデプロイ」、「アプリの共有」、「有料プランの設定」となっている。

　注目すべきは「Cloud Runへのデプロイ」機能だ。アプリに独自URL（例：https://your-app-12345.run.app）が発行され、24時間365日誰でもアクセス可能な本格的なWebアプリケーションとして稼働させることができる。他社のノーコードツールでは、この公開機能だけで月額数千円かかることが多いが、Google AI Studioなら無料で利用可能だ。

　ノーコード・ローコード開発ツールは多数存在するが、多くは月額数千円から数万円の料金設定で、複雑な設定画面の理解も必要だ。Google AI Studioなら完全無料でテンプレートベースでの開発が可能。「もう少しモダンなデザインにして」といった曖昧な指示でも、AIが適切に解釈して実装してくれる。

　個人事業主なら簡単な予約システムや問い合わせフォーム、教育現場ではクイズアプリ、中小企業では売上計算や在庫管理といった基本的な業務ツールを作成できる。ただし、複雑な業務システムは作成できず、あくまで「プロトタイプ」レベルと考えるべきだろう。

　本格運用には技術的な知識も必要になる。もしきちんとプログラミングを学びたいなら、CursorなどのAI統合開発環境の方がいいだろう。それでも、これまで数十万円かかっていたアプリ開発を無料で体験できるインパクトは大きい。