はじめかた

作れる人だけ。Gemini などに「こんな画面のアプリ」と書いて (喋ってもOK) 画像を1枚作り、 ダウンロードしておきます。作れなければ飛ばしてください。指示文だけで動きます。

Gemini を開く

紙に書いた A〜D を、下の {A} 〜 {D} に入れて使います。

あなたはUI設計とプロトタイピングの補助役です。
以下の「要件ボード」を読んで、Google AI Studio の Build モードに
そのまま貼り付けられるアプリ生成指示文を1本だけ出力してください。

# 要件ボード
- やりたいこと: {A}
- 使う場面: {B}
- 完成の条件: {C}
- やらないこと: {D}

# 出力する指示文に必ず含めること
1. 何のアプリか (1文)
2. 使う人と場面 (画面サイズの前提を明記)
3. 画面構成: 1画面で完結。上から順に何が並ぶか
4. 操作の流れ: ユーザーが何をすると何が起きるか (3〜5ステップ)
5. 完成の条件: 「完成の条件」をそのまま受入条件として書く
6. スコープ外: 「やらないこと」を「今回は実装しない」として明記
7. 見た目: 配色の方向を1行。添付画像がある場合は
   「添付のUIイメージの配色とレイアウトを参照する」と書く
8. 最初の一手: 「細部より先に、通しで動く1画面を出してください」

# 出力の形式
- 日本語のプレーンテキスト。そのまま貼れる状態にする
- 前置き・解説・見出し装飾は付けない (指示文だけを出力する)
- 300〜500字
- 「〜してください」の断定形で書く

プロンプトをコピー

コピーできないときは、上の枠を長押し (PCはドラッグ) で全選択してください。

コピーしたら、Gemini などのチャットAIに貼って送ります。AI Studio 用の指示文が返ってきます。

Gemini を開いて貼る

ChatGPT など、使えるチャットAIでもかまいません。

Googleアカウントでログインするだけで使えます。左メニューの「New app」を開き、 入力欄に 1 で出てきた指示文を貼って「Build」を押します。0 で作った画像があれば 「+」で添えると近づきます。3〜4分かかります。

AI Studio Build を開く

開かないときは aistudio.google.com/apps を直接開いてください。

生成中に出てくる案内カード (Cloud / API キーなど) は閉じてかまいません。

エラーが出たら、その文をそのまま貼って「直して」と返します。

思ったのと違うところを、1つだけ言葉にして返します。 長い説明はいりません。「ここをこうしたい」の一言で十分です。

どこを見ればいいか迷ったら、手元の紙の C「完成の条件」と見くらべてください。 自分が書いたことと違っていれば、それがそのまま次に返す一言になります。

これを何度か繰り返すのが今日ずっとやることです。一度で完成しないのが普通です。

今日話した「7つの通過点」を、ひとつずつ文章にした資料です。帰ってからどうぞ。

この資料のリンクは、当日この場所でご案内します。