Google AI Studioだけでアプリをゼロから作ってWeb公開できるようになる

コードを生成する前に「何を作るか」を言語化します。AIへの指示が明確になるほど、生成されるコードの精度が上がります。以下の要件整理シートをコピーして使ってください。

【アプリ名】
（例: 自己紹介ページ / Todoリスト / タイマーアプリ）

【このアプリで何ができるか（機能）】
1.
2.
3.

【デザインのイメージ】
- 全体の雰囲気: （例: シンプル・ミニマル / カラフル・ポップ）
- メインカラー: （例: 青系 / モノクロ）
- 表示するデバイス: PCのみ / スマートフォンでも使いたい（レスポンシブ対応）

【使う人（ターゲット）】
（例: 自分だけ使う / 友人に見せる / 不特定多数に公開する）

【入れたいコンテンツ（テキスト・画像など）】
-
-

Google AI Studioの「System instructions」にAIの振る舞いを設定すると、一貫性のある高品質なコードが生成されます。

▲ Google AI Studio の System instructions 設定とチャット画面

設定手順:

1. https://aistudio.google.com を開く
2. 「New chat」をクリックして新しいチャットを開始
3. チャット画面の上部または右側に「System instructions」の入力欄を探す
4. 以下のプロンプトをコピーして貼り付ける
5. 入力欄の外をクリックして保存（自動保存されます）

あなたは優秀なWebフロントエンドエンジニアです。
以下のルールでコードを生成してください。

【コードのルール】
- HTML / CSS / JavaScript の3つを1つのHTMLファイルにまとめて出力する
- JavaScriptは <script> タグ内に書く。外部ファイルは使わない
- CSSは <style> タグ内に書く。外部ファイルは使わない
- 外部ライブラリは CDN リンク（<script src="https://...">）で読み込む形式にする
- 生成するコードは必ず完全なHTMLファイルとして動作するようにする

【デザインのルール】
- モダンでシンプルなデザインにする
- スマートフォンでも見やすいようにレスポンシブデザインにする
- フォントはGoogle Fontsを使ってよい（CDNで読み込む）

【出力のルール】
- コードは必ずコードブロック（```html〜```）で囲んで出力する
- コードの後に「このコードでできること」「変更するとよいポイント」を日本語で説明する
- 日本語で回答する

System Instructionsを設定したら、アプリの生成プロンプトを入力します。以下は自己紹介ページとTodoリストの2つのコピペ用プロンプトです。

以下の要件で自己紹介ページを作ってください。

【アプリ名】
自己紹介ページ

【ページの内容】
- ヘッダー: 名前と肩書き（プレースホルダーテキストでOK）
- プロフィール写真エリア: 丸いプレースホルダー画像（実際の画像はなしでOK）
- 自己紹介文: 2〜3段落のサンプルテキスト
- スキル・趣味: アイコン付きのリスト形式（3〜5項目）
- 連絡先: メールアドレスとSNSのプレースホルダーボタン

【デザイン】
- 全体の雰囲気: シンプルでプロフェッショナル
- メインカラー: 落ち着いた青（#3B82F6）
- 背景: 白または薄いグレー
- フォント: Noto Sans JP（Google Fonts）

完全に動作するHTMLファイルとして出力してください。

以下の要件でTodoリストアプリを作ってください。

【機能要件】
1. テキストを入力して「追加」ボタンまたはEnterキーでTodoを追加できる
2. 各Todoにチェックボックスがあり、クリックで完了/未完了を切り替えられる
3. 完了したTodoは取り消し線スタイルでグレーアウトする
4. 各Todoに「削除」ボタンがあり、クリックで削除できる
5. 入力欄が空の状態で追加しようとしたら「タスクを入力してください」と警告を表示する
6. Todoの件数を「残り X件」として表示する

【デザイン】
- 全体の雰囲気: カードスタイルのシンプルなUI
- メインカラー: 緑（#10B981）
- 最大幅 600px、中央揃えのレイアウト
- フォント: Noto Sans JP（Google Fonts）

完全に動作するHTMLファイルとして出力してください。

AIが生成したコードをそのまま使う前に確認します。以下のチェックリストを使って品質を確認してください。

出力されたコードを確認しましたが、以下の点が要件と違います。
修正してください：

[何が違うかを具体的に書く]

完全なHTMLファイルとして再出力してください。

作業フォルダを作り、生成されたHTMLコードを貼り付けます。

▲ Cursorでindex.htmlを作成してコードを貼り付け

1. Cursor の左サイドバーの空白部分を右クリック → 「New File」
2. ファイル名を index.html と入力して Enter
3. Google AI Studio で生成されたコード（コードブロック内のHTMLコード全体）をコピー
4. Cursor の index.html 編集画面に Ctrl+V（Mac: Cmd+V）で貼り付け
5. Ctrl+S（Mac: Cmd+S）で保存

2つの方法でブラウザプレビューを確認できます。方法Aが最も簡単で、方法BはリアルタイムのHMR（ホットリロード）ができます。

ブラウザで確認して「ここを直したい」という箇所が見つかったらスクショで修正依頼します。

▲ Cursorのエージェントモードでスクショを使って修正

添付のスクショを見てください。
[修正したい箇所]が[どんな状態か]になっています。
[どう直したいか]に変更してください。
HTMLファイル全体を修正して出力してください。

添付のスクショを見てください。
スマートフォン表示でレイアウトが崩れています。
CSSのmedia queryを追加してスマートフォン（画面幅375px以上）でも
正しく表示されるように修正してください。

公開前に以下のチェックリストで最終確認します。スマートフォン表示の確認は必ず行ってください。

Vercelは無料でWebアプリを公開できるホスティングサービスです。GitHubアカウントと連携して使います。

▲ Vercel サインアップ画面

1. ブラウザで https://vercel.com を開く
2. 「Sign Up」をクリック
3. 「Continue with GitHub」を選択
4. GitHub の認証画面で「Authorize Vercel」をクリック
5. プラン選択: 「Hobby（無料）」を選択
6. ユーザー名を入力してダッシュボードに進む

Node.js や Git を使わず、ファイルをドラッグするだけで公開できます。

1. https://vercel.com/new を開く
2. 画面の下部に「Or deploy from your local file system」という欄を探す
3. エクスプローラー（Windows）または Finder（Mac）で index.html ファイルを確認
4. index.html ファイルを Vercel のブラウザ画面にドラッグ＆ドロップ
5. プロジェクト名を入力（例: my-app）
6. 「Deploy」ボタンをクリック
7. 数秒〜1分後に「Congratulations!」が表示される

公開URLが発行されたら、PCとスマートフォンの両方で動作確認します。

1. 表示された公開URL（https://プロジェクト名.vercel.app）をブラウザで開く
2. 以下を確認する
3. 確認できたら公開URLをコピーして、家族や友人に共有してみましょう！

公開後に「やっぱりここを直したい」と思ったら以下のフローで修正します。

Vercelのドラッグ&ドロップで再デプロイします。プロジェクトの本番URLは変わらず、中身だけ更新されます。

1. Vercelダッシュボード（https://vercel.com/dashboard）を開く
2. 対象のプロジェクトをクリック
3. 「Deployments」タブを開く
4. 「+ New Deployment」または「Deploy」をクリック
5. 修正した index.html を再度ドラッグ&ドロップ
6. 数秒後に新しいURLが発行される（古いURLにも自動で反映される）

「公開→使う→修正→再デプロイ」のサイクルを繰り返すことで、アプリを継続的に改善できます。このサイクル自体がエンジニアの日常的な開発フローです。