AIツールを組み合わせたWebアプリケーション開発

AIツールを活用し、コード編集なしでWebアプリケーションを制作・動作確認する手順

【学習内容の構成】

アイデアの言語化：チャットAIで曖昧なアイデアを「アプリ設計書」と「改善のコツ」に変換
アプリケーション生成：Google AI Studioで自然言語からWebアプリケーションを自動生成
動作確認と修正：プレビュー画面での操作確認、チャット欄への修正指示による改善

前提：Googleアカウント、GitHubアカウント（公開時のみ）
、Webブラウザの基本操作
意義：プログラミング未経験でもWebアプリケーションを形にできる体験

開発手順：

チャットAIでアイデアを機能仕様に変換
Stitchで画面デザインを生成（オプション）
Google AI Studioでアプリケーションを生成
プレビュー画面で動作確認
GitHub Pagesで公開（オプション）

スライド資料: [PDF], [パワーポイント]

YouTube動画：https://youtu.be/BBjMe_NwpfU

はじめに

本稿は、プログラミング経験がない人でもWebアプリケーションを制作できるよう、AIツールを活用した開発手順を解説する。HTML、CSS、JavaScriptの知識がなくても、自然言語でアイデアを記述するだけで、アプリケーションの制作と動作確認を完了できる。希望する場合は、インターネット上に公開することもできる。

作成するアプリケーションの概要

作成するのは、シンプルな二択アプリケーションである。「どちらにしよう」と迷ったとき、アプリケーションが代わりに選んでくれる。機能は以下の3つに限定する。

2つの選択肢を入力する
ボタンを押す
アプリケーションがどちらか1つを選んで表示する

このアイデアを最短で形にし、ブラウザで実際に操作できる状態まで仕上げることを目標とする。

使用するAIツール

ツール	役割	URL
チャットAI	アイデアを機能仕様に変換	ChatGPT、Gemini、Claude等
Stitch（オプション）	画面デザインを生成	stitch.withgoogle.com
Google AI Studio	動作するWebアプリケーションに変換	aistudio.google.com

チャットAIは、曖昧なアイデアを具体的な機能仕様として言語化する。ChatGPT、Gemini、Claudeなど、任意の対話型AIを使用できる。

Stitchは、Google Labsが提供するUIデザイン生成ツールである。自然言語の説明から画面デザインとコードを自動生成する。デザインにこだわりたい場合に使用するが、省略してもよい。

Google AI Studioは、Googleが提供するAI開発環境である。自然言語の説明からWebアプリケーションを生成し、プレビュー画面で動作を確認できる。

ここで紹介するツールは2025年時点の情報に基づいている。AIツールは頻繁に更新されるため、画面の配置や操作手順が異なる場合がある。基本的な流れは同じであるため、画面の指示に従いながら進めること。

準備

本稿の手順を実行するには、Googleアカウントが必要である。StitchとGoogle AI Studioは、いずれもGoogleアカウントでログインして使用する。Googleアカウントを持っていない場合は、事前に作成しておく。

ステップ1：チャットAIでアイデアを機能仕様に変換

最初に、チャットAI（ChatGPT、Gemini、Claude等）を開き、以下のプロンプト（AIへの指示文）を入力して送信する。

Webアプリの「アプリ設計書」と「改善のコツ」を作成してください。

【機能要件】
- 二択で迷ったときに決断を支援するアプリ
- 2つの選択肢を入力し、ボタン押下でどちらか1つを表示
- シンプルで使いやすいUI

以下にチャットAI Geminiの画面を示す。

チャットAIはこの入力をもとに、「アプリ設計書」と「改善のコツ」を整理して出力する。その出力例を以下に示す。チャットAIは同じ入力でも毎回異なる出力を返す。この出力は後で使用する。

## 1. Webアプリ設計書

### 1.1 システムアーキテクチャ

Web標準技術を用いたクライアントサイド・レンダリング（CSR）構成を採用します。

* **Frontend:** HTML5, CSS3 (Modern Grid/Flexbox), JavaScript (ES6+)
* **状態管理:** アプリケーション内蔵メモリ（選択肢A、選択肢B、決定結果）

### 1.2 UI/UX デザイン設計

直感性を重視し、以下の要素で構成します。

1. **ヘッダー:** アプリ名「Choice Focus（仮）」
2. **メインエリア:** * 入力フィールド × 2（プレースホルダー：例「カレー」「ラーメン」）
* 決断ボタン（視認性の高いアクセントカラー）


3. **結果表示エリア:** * 選択された項目を強調表示
* 再試行（リセット）ボタン



### 1.3 処理ロジック（アルゴリズム）

決断の公平性を担保するため、暗号学的擬似乱数生成器（CSPRNG）に近い振る舞いをする `Math.random()` を利用した選択ロジックを実装します。

1. ユーザーが2つの文字列を入力。
2. ボタン押下時、バリデーション（空入力チェック）を実行。
3.  の乱数を生成し、 ならA、それ以外ならBを出力。
4. 結果をアニメーションと共に表示。

---

## 2. アプリ改善のコツ（高度化への提言）

情報工学および行動経済学の視点から、このアプリをより「価値ある道具」にするための改善案を提案します。

### ① 心理的摩擦の軽減（UXの改善）

* **「迷い」の可視化:** 決定ボタンを押した直後に、あえて数秒の「スロット風アニメーション」を挟みます。この待機時間に、ユーザーは「どちらが出てほしいか」を無意識に念じるため、結果に対する納得感が高まります。
* **音声入力の統合:** キーボード入力を面倒に感じるユーザー向けに、Web Speech APIを用いた音声入力を実装し、思考を妨げない工夫を凝らします。

### ② 技術的信頼性の向上

* **履歴機能（Local Storage）:** 過去に何を迷い、どちらを選んだかをブラウザに保存します。これにより、自分の「迷いの傾向」を分析できるデータを提供できます。
* **オフライン対応（PWA化）:** Service Workerを実装し、地下鉄などのオフライン環境でも即座に起動できるようにします。「今すぐ決めたい」というニーズに応えるための必須要件です。

### ③ 決断ロジックの拡張

* **「第3の選択肢」の提示:** 稀に（例：1%の確率）「どちらも選ばない（保留）」や「両方やる」といった特殊な結果を出すことで、ユーザーに新しい視点を与えます。
* **重み付け機能:** 「どちらかといえばこっちに傾いている」という主観を  などの比率で反映できるスライダー機能の追加。

曖昧だったアイデアが機能仕様として言語化される。この出力は次のステップで使用するため、コピーしておく。

補足：プロンプトの構成

上記のプロンプトは、以下の構成で書かれている。他のアプリケーションを作る場合も、この構成を参考にするとよい。

Webアプリの「アプリ設計書」と「改善のコツ」を作成してください。

【機能要件】
- 〇〇するアプリ。
- 〇〇して、〇〇すると、〇〇する。
- シンプルで使いやすいもの。

例：割り勘計算アプリケーション

Webアプリの「アプリ設計書」と「改善のコツ」を作成してください。

【機能要件】
- 割り勘を計算するアプリ。
- 合計金額と人数を入力すると、1人あたりの金額を表示する。
- シンプルで使いやすいもの。

次のステップについて：デザインにこだわりたい場合はステップ2に進む。すぐにアプリケーションを動かしたい場合は、ステップ2を省略してステップ3に進んでもよい。

ステップ2：Stitchで画面デザインを生成（オプション）

本ステップはオプションである。省略してステップ3に進んでもアプリケーションは完成する。

チャットAIが出力したアプリ設計書をStitchに入力し、画面デザインを生成する。

https://stitch.withgoogle.com を開く。
Stitchのデザイン画面を開く。初回アクセス時は「今すぐ試す」（Try it now）等のボタンが表示される場合がある。Googleアカウントでのログインを求められた場合はログインする。
ステップ1で出力された「アプリ設計書」と「改善のコツ」の全体をコピーして、画面中央のプロンプト入力欄に貼り付ける。矢印のボタン（生成ボタン）をクリックする。
デザイン提案が表示されるまで待つ（数十秒程度）。
デザインが提示される。
左側の欄でAIに説明を依頼したり、デザインの変更を依頼したりできる。ここでは、「テキストを日本語にしてください」と入力して、英語の表示を日本語に変更するように依頼している。

変更結果を確認する。このとき、「画面が変わっていないのでは」と感じるかもしれないが、スクロールして確認できる。変更前のものも残るようになっている。
SHIFTキーを押しながら、2つの画面をクリックする。2つの画面の両方が青い枠で囲まれたことを確認する。マウスで2つの画面を囲むように範囲選択する操作でも同じ結果が得られる。
メニューの「Generate」をクリックし、「プロトタイプ」を選ぶ。
しばらく待つ。プロトタイプの画面が増えるので確認する。
Interact モード
プロトタイプのところにマウスを移動すると、メニューが現れる。メニューの「Interact」をクリックする。この操作により、プロトタイプの動作を確認し、画面のイメージと基本の操作を確認できる（最初にAIに与えた全機能が実現されているわけではない。画面のイメージと基本操作の確認を行う）。

2択の画面に「うどん」、「ラーメン」のように入力して決断ボタンをクリックする。画面が変わり結果が表示されることを確認する。以上の流れでデザインの確認と変更を行う。
デザインが完了したら、コードを取得し、Google AI Studioで動作するWebアプリケーションを生成するためのエクスポート操作を行う。このコードは、次のAI Studioで使用する。
そのために、再びSHIFTキーを押しながら、2つの画面をクリックする。2つの画面の両方が青い枠で囲まれたことを確認する。マウスで2つの画面を囲むように範囲選択する操作でも同じ結果が得られる。
メニューの「... More」をクリックし、「エクスポート」を選ぶ。
メニューで、「AI Studio」を選び「AI Studioで構築」をクリックする。
以上の手順によりGoogle AI Studioが起動する。次のステップ3に続く。

ステップ3：Google AI Studioで動作するアプリケーションに変換

Google AI Studioで動作するWebアプリケーションを生成する。

ステップ2を行わなかった場合は、次の手順でGoogle AI Studioを起動し、ビルド（Build）のための画面を表示して、ステップ1の結果を入力する。
1. https://aistudio.google.com を開き、Googleアカウントでログインする。
2. 左側メニューから「Build」を選択する。次のような画面が表示された場合は、「Build apps with Gemini」または「Build」をクリックする。
ここから先は、ステップ2を行った場合も行わなかった場合も同じ操作になる。
プロンプト入力欄に、ステップ1の「アプリ設計書」と「改善のコツ」を入力する。
「Build」ボタンをクリックする。
コードが自動生成され、プレビュー画面にアプリケーションが表示される。

ステップ4：動作を確認する（推奨）

ステップ3で、アプリケーションの制作ができた。AI Studioのプレビュー画面でアプリケーションを操作し、期待どおりに動作することを確認できれば、目標は達成である。

手順

AI Studioのプレビュー画面でアプリケーションを操作する。入力欄への入力、ボタンのクリックなど、想定した操作が正しく動作するか確認する。
AI Studioでは、ステップ1の「改善のコツ」も反映されていることが確認できる。
プレビュー画面で意図どおりに動作すれば、動作確認は完了である。
修正が必要な場合は、チャット欄に修正内容を入力する。修正を繰り返し、意図どおりに動作する状態に仕上げる。

修正指示の例を以下に示す。
- 「ボタンの色を青に変更して」（色の変更）
- 「選択結果を大きな文字で表示して」（文字サイズの変更）
- 「結果表示にアニメーションを追加して」（演出の追加）

補足：ローカル開発環境について

Google AI Studioが生成するReactアプリケーションを自分のパソコンで動作させるには、Node.jsなどの開発環境が必要である。興味がある場合は、「React 開発環境構築」などで検索し、学習を進めるとよい。

ステップ5：アプリケーションを公開する（オプション）

完成したアプリケーションをインターネット上に公開したい場合は、GitHub Pages（ギットハブ・ページズ）を使用する。GitHubが提供する無料の公開サービスであり、クレジットカードの登録は不要である。

GitHub Pagesは、パブリックリポジトリであれば無料プランで利用できる。プライベートリポジトリの場合は有料プラン（GitHub Pro等）が必要である。

Google AI Studioが生成するReactアプリケーション（Viteを使用）をGitHub Pagesで公開するには、以下の手<順に従う。この手順はワークフローファイルの編集を含むため、プログラミング初学者には難易度が高い場合がある。

公開手順

GitHubアカウントを持っていない場合は、github.com でアカウントを作成する。
Google AI Studioの画面上部にあるGitHubのアイコンをクリックする。
初回はGitHubアカウントとの連携を求められる。画面の指示に従って認証を行う。

リポジトリ（コードの保管場所）のレポジトリ名、説明、privateかpublicかの設定を行う。
この版の説明を行う。
リポジトリ（コードの保管場所）が自動作成され、コードがGitHubにプッシュされる。

次のような表示により、プッシュされ他ファイルが確認できる。次回からも同様の操作でプッシュを行うことができる。

GitHubで作成されたリポジトリを開き、「Settings」タブをクリックする。

左側メニューの「Pages」をクリックする。

「Build and deployment」の「Source」で「GitHub Actions」を選択する。

ワークフローの選択画面が表示される。「Static HTML」の「Configure」をクリックする。
ワークフローファイルの編集画面が表示される。Google AI Studioが生成するReactアプリケーションはViteを使用しているため、表示されたワークフローをVite用に書き換える必要がある。Vite公式ドキュメントのGitHub Pagesセクションに掲載されているワークフローをコピーして、編集画面の内容を置き換える。
「Commit changes」をクリックする。
「Actions」タブでビルドとデプロイの進捗を確認できる。緑色のチェックマークが表示されれば成功である。
「Settings」→「Pages」に戻ると、「Your site is live at...」と表示される。このURLがアプリケーションの公開アドレスである。

vite.config.jsの設定

GitHub Pagesでは、リポジトリ名がURLのパスに含まれる（例：https://ユーザー名.github.io/リポジトリ名/）。このため、vite.config.jsにbase設定を追加する必要がある場合がある。画面が空白になる、ファイルが見つからないなどのエラーが発生した場合は、この設定を確認する。

注意事項

GitHub Pagesで公開したものは全世界に公開される。プログラムの中に個人情報やパスワードを含めないこと。
上記の手順はツールの更新により変更される場合がある。画面の指示に従いながら進めること。
ビルドエラーが発生した場合は、「Actions」タブでエラー内容を確認し、Google AI Studioでコードを修正して再度プッシュする。

まとめ

AIツールを組み合わせることで、以下の手順でWebアプリケーションを開発できる。

ステップ	内容	必須/オプション
ステップ1	チャットAIでアイデアをアプリ設計書に変換	必須
ステップ2	Stitchで画面デザインを生成	オプション
ステップ3	Google AI Studioで動作するアプリケーションに変換	必須
ステップ4	プレビュー画面で動作を確認	推奨
ステップ5	GitHub Pagesで公開	オプション

すべてのステップはGoogleアカウントとGitHubアカウントがあれば無料で利用できる。

付録：ミニゲームを作る場合

この手順は、ミニゲーム制作にも応用できる。Stitchはゲーム画面の生成に適していないため、ステップ2を省略してGoogle AI Studioに直接プロンプトを入力する方がよい。その際、操作方法（クリック、キーボード等）をプロンプトに含め、シンプルな動作から段階的に機能を追加していくとよい。

プロンプト例

数字当てゲーム

数字当てゲームの小さなWebアプリを作りたい。
1から100までのランダムな数字をアプリが決め、プレイヤーが予想を入力する。
「大きい」「小さい」のヒントを表示し、正解したら「正解！」と回数を表示する。
クリックで操作する。シンプルで、直感的に操作できる体験にしたい。

モグラたたき風ゲーム

モグラたたき風の小さなWebアプリを作りたい。
画面に9つのマスがあり、ランダムにマスが光る。光ったマスをクリックするとスコアが増える。
30秒の制限時間があり、終了後にスコアを表示する。
クリックで操作する。シンプルで、直感的に操作できる体験にしたい。