AIと一緒にアプリのモックを作って、
友達にURLで配るまで — 完全ガイド

このガイドは GeekSalonのコース受講生で、AIを使った開発はまだやったことがないという人を対象にしています。VS Code はインストール済みという前提で進めます。

上から順番どおりに進めるだけで、次のことが一人で完走できます。

GitHub Copilot(AIアシスタント)を導入する
Copilot Chat と対話しながら、アプリの画面(モック)をHTMLで作る
作ったモックを html-drop でURLにする
友達にそのURLを配って、フィードバックをもらう

途中でどんな画面が出てくるかは、すべてこのガイドの中で再現しています(実機のスクリーンショットではなく、CSSで見た目を再現した擬似画面です)。実際の画面と細部が異なることがある点はご了承ください。

なぜ「モックにフィードバック」なのか

ここまで、アイデア道場などを通じて自分のアイデアをブラッシュアップしてきたはずです。ここからは、いよいよ本格的な実装 — つまり本番環境の開発に入っていきます。

本番の開発では、最初に「外側(画面・機能)をどうするか」を決めることになります。その判断材料として、実際に動くモックを友達に触ってもらったフィードバックがあると、自信を持った状態で開発に入っていけます。

これは学生の練習だからやることではなく、企業でも標準の開発プロセスです。アイデア段階でフィードバックをもらったら、すぐに形(プロトタイプ)にして、また見せてフィードバックをもらう。「まず作って、見せて、直す」の繰り返しで良いものに近づけていきます。
だから、アイデアをくれた人・話を聞いてくれた人には全員フィードバックをもらいに行くくらいの気持ちで、ガンガン声をかけていきましょう。モックを見せるのは恥ずかしいことではなく、正しい開発プロセスそのものです。
もうひとつの狙いは、このガイドを通じて「AIアシスタントと一緒に開発する」体験そのものを味わってもらうことです。これからの開発は、誰もがAIを相棒にして進める時代になります。その第一歩が、この「モック作り」になります。

🎯 このガイドのゴール
「GitHub Copilot を導入 → Copilot Chat と対話しながらアプリのモックをHTMLで作る → html-drop でURLにする → 友達に配ってフィードバックをもらう」まで、この1本で一人で完走できるようになることです。

全体の流れ

Step 0: 事前チェック(VS Code / GitHubアカウント / スマホのLINE)
  ↓
Step 1: GitHub Copilot Free を有効化 + VS Code に拡張機能を導入
  ↓ (承認を待たずに Step 3 へ進んでOK)
Step 2: GitHub Student Pack を申請(並行) ★承認に数時間〜数日
  ↓
Step 3: 教材リポジトリをクローンして VS Code で開く
  ↓
Step 4: Copilot Chat との対話で、アプリのモック(HTML)を作る ★ここが本番
  ↓
Step 5: html-drop でモックをURLにする
  ↓
Step 6: 友達に配って、フィードバックをもらう 🎉

所要時間の目安: 当日の作業自体は合計 1〜2時間程度です。ただし Step 2 の Student Pack 承認には数時間〜数日かかることがあるので、承認を待たずに Step 3 以降へ進んでOKです(Step 1 の Copilot Free だけで最後まで完走できます)。

💡 Copilot Free と Student Pack、両方申請する理由
Copilot Free には月ごとの利用回数の上限があります。Student Pack が承認されると Copilot Pro になり、上限が大幅に増えます。当日は Free でどんどん進めて、Student Pack は並行して申請しておくのがおすすめです。

Step 0: 事前チェック

始める前に、以下がそろっているか確認してください。

VS Code がインストール済み(code.visualstudio.com)
GitHub アカウントを持っている(なければ github.com で Sign up)
スマホに LINE アプリが入っている(Step 6 で、友達からのフィードバックに公式LINEでの認証ステップが入るため)

Step 1: GitHub Copilot Free を有効化する

まずは今日からすぐ使える Copilot Free を有効化します(学生認証は不要です)。

1-1. Copilot Free を有効化

https://github.com/settings/copilot にアクセス
Copilot Free が有効になっていることを確認(未有効なら案内に従って有効化)

📌 Copilot Free は月ごとのチャット/補完の回数に上限があります。コツは Step 4 で説明します。

1-2. VS Code に拡張機能を2つ入れる

VS Code を起動し、拡張機能タブ(Cmd+Shift+X / Ctrl+Shift+X)を開く
「GitHub Copilot」と「GitHub Copilot Chat」の2つを検索してインストール
インストール後、左下(または通知)からアカウントアイコンを開き、GitHubアカウントでサインイン

Visual Studio Code — 拡張機能

インストール済み

Marketplace

Step 2(並行推奨): GitHub Student Pack を申請する

Copilot の利用上限を大幅に増やすため、学生認証を申請しておきましょう。承認まで数時間〜数日かかるので、このステップは Step 3 以降と並行して進めてください(承認を待つ必要はありません)。

https://education.github.com/pack にアクセス
GitHub アカウントでログインし、案内に従って申請
- 大学のメールアドレス(.ac.jp など)を選択・登録
- 学校名を入力
- 求められたら学生証の写真をアップロード
申請完了後は承認を待つ(メールで通知が来ます)
承認されたら https://github.com/settings/education/benefits から Copilot の特典を有効化し、https://github.com/settings/copilot で Copilot Pro になっていることを確認

⚠️ 申請時の注意

申請中にブラウザの位置情報の許可を求められることがあります(大学の近くからの申請だと通りやすいと言われています)
一度落ちても再申請できます。焦らなくてOKです

🎯 承認を待たずに Step 3 へ進んでください。Copilot Free でも Step 4 まですべて完走できます。承認が来たら Step 4 の途中からでも切り替えられます。

Step 3: 教材リポジトリをクローンして開く

「クローン」とは、GitHub 上にあるファイル一式を自分のPCにコピーすることです。教材リポジトリの URL は以下です。

https://github.com/oya-ui/ai-course-trial-vscode.git

方法A: ターミナルで git clone する

ターミナル(VS Code内でもOK)で好きなフォルダに移動

以下を実行:

git clone https://github.com/oya-ui/ai-course-trial-vscode.git
cd ai-course-trial-vscode

VS Code で File → Open Folder...(ファイル → フォルダーを開く)から、クローンした ai-course-trial-vscode フォルダを開く

方法B: VS Code の「Clone Git Repository」機能を使う(コマンド入力なし)

VS Code を起動(何かプロジェクトを開いている場合は File → Close Folder でスタート画面に戻る)
スタート画面の「Clone Git Repository」をクリック(コマンドパレットからは Git: Clone)
URL に https://github.com/oya-ui/ai-course-trial-vscode.git を貼り付けて Enter
保存先フォルダを選ぶ → クローン完了後、「Open」を選んでそのフォルダを開く

3-1. 開くと出る2つのダイアログ

フォルダを開くと、次の2つのダイアログが順番に出ます。両方とも許可してください。

Visual Studio Code

⚠️ このフォルダー内のファイルの作成者を信頼しますか?

ai-course-trial-vscode 内のファイルの作成者を信頼しますか?
信頼済みのワークスペースでは、すべての機能が有効になります。

※実際の画面と表記が多少異なる場合があります

Visual Studio Code

このワークスペースには自動タスクがあります

このフォルダーを開くたびに実行される自動タスクが定義されています。実行しますか?

※実際の画面と表記が多少異なる場合があります

3-2. ターミナルに自動で表示されるガイド

許可すると、ターミナルパネルに次にやることのガイドが自動で表示されます。左のエクスプローラーに .github/prompts/ フォルダが見えていれば成功です。

ai-course-trial-vscode — Visual Studio Code

EXPLORER

📁ai-course-trial-vscode

📁.github/

📁prompts/

📁docs/

📄WELCOME.md

📄README.md

ターミナル

▼ ターミナル: 体験ガイド

╔══════════════════════════════════════════════╗ ║ AIコース体験会 — ようこそ！ ║ ╚══════════════════════════════════════════════╝ このリポジトリでは、Copilot Chat と対話しながら「MVP仮説 → ストーリー・スコープ → UIモック」を作っていきます。 ▼ まだの場合は先に拡張機能をインストールしてください右下に出る通知から「GitHub Copilot」「GitHub Copilot Chat」をインストール → GitHubアカウントでサインイン ▼ 次にやること 1. Copilot Chat を開く（Cmd+Ctrl+I / Ctrl+Alt+I） 2. チャット欄に次を入力して送信: /course-mvp-step1-hypothesis 3. AIの質問に答えていくと mvp/STEP1.md ができます 4. 続けて /course-mvp-step2-story-scope → /course-mvp-step3-ui-mock の順に呼び出す ──────────────────────────────────────────────── このガイドは、フォルダーを開くたびに自動で表示されます。 ────────────────────────────────────────────────

※実際の画面と表記が多少異なる場合があります

📌 このガイドを見逃した/消してしまった場合: コマンドパレット(Cmd+Shift+P / Ctrl+Shift+P)→ Tasks: Run Task → 「AIコース体験ガイドを表示」で再表示できます。

Step 4: Copilot Chat との対話で、モックを作る ★ここが本番

いよいよ AI と一緒に開発します。その前に、一番大事な心得をひとつ。

🎯 いきなり作らせない。まず対話。
このリポジトリの prompt は、Step1(何を作るか)→ Step2(画面とスコープ)→ Step3(UIモック)の順に、AI が質問しながら一緒に固めてくれる作りになっています。飛ばさず順番に進めてください。

4-1. Copilot Chat を開く

ショートカット: Mac は Cmd+Ctrl+I、Windows は Ctrl+Alt+I
または右上のチャットアイコンをクリック

💡 .github/prompts/ の prompt には mode: 'agent' が指定されているので、/ で呼び出すと自動で Agent モードに切り替わります。手動でモードを変える必要はありません(Ask モードのままだとファイルが保存されないので注意)。

4-2. Step1: 「何を作るか」を対話で決める

チャット欄に / を打つと prompt の候補が出ます。course-mvp-step1-hypothesis を選んで実行してください。

Visual Studio Code — Copilot Chat

エディタ

// mvp/ フォルダはまだ空です

Copilot ChatAgent

あなた

/cou

/course-mvp-step1-hypothesis
Step1: MVP仮説インタビュー

/course-mvp-step2-story-scope
Step2: ストーリー・スコープ整理

/course-mvp-step3-ui-mock
Step3: UIモック作成

※実際の画面と表記が多少異なる場合があります

実行するとAIはこんな順番で聞いてきます(最初の質問はこの通りです)。対話例を見てみましょう。

Copilot Chat

Copilot

どんなものを作りたいか、一言で教えてください。

あなた

サークルの練習日程を、みんなで簡単に共有できるアプリを作りたいです。

Copilot

いいですね。誰が、どんな状況で使いますか？（例: 部員が、練習前にスマホでサッと確認する、など）

あなた

テニスサークルの部員20人くらいが、練習日と場所をLINEで探すのが面倒で、いつも埋もれちゃうんです。

Copilot

なるほど、今は LINE で代替しているんですね。それを一番小さく解決するなら「練習日程の一覧が1画面で見られる」だけでも十分嬉しいですか？

※実際の画面と表記が多少異なる場合があります(内容は一例です)

こんな調子で「対象ユーザー」「課題」「最小の成功」「機能の洗い出し」まで対話が進み、最後に難易度(緑/黄/赤)を確認して mvp/STEP1.md が保存されます。正解を探さず、自分の言葉でそのまま答えればOKです。

💡 「アイデア道場」のシートをすでに書いた人は、ゼロから答え直す必要はありません。AIの質問に合わせて、シートの該当部分をそのままコピペで貼っていくだけでどんどん進みます。最初に「アイデア道場でまとめた内容を貼るので、これをもとに進めてください」と宣言してから、内容をまとめて一気に貼ってしまってもOKです。

実際にアイデア道場のシートを貼りながら進めると、こんなやり取りになります。

Copilot Chat

あなた

アイデア道場でまとめた内容を貼ります。これをもとに進めてください。【悩み】自分にあったサークルを選ぶことができない【課題】①全てのサークルの情報収集が大変 ②実際の雰囲気が公式情報では分からない【理想】一つのサイトで全サークルの情報と先輩の生の声が見られる【選んだ機能】投稿、検索、タグ【差別化】活動内容など具体的な情報・細かい絞り込み

Copilot

ありがとうございます、アイデア道場の内容を読み込みました。「サークル選びのミスマッチをなくす情報サイト」ですね。いくつか確認させてください。主なユーザーは新入生という理解で合っていますか？

あなた

はい、合ってます。

※実際の画面と表記が多少異なる場合があります

ai-course-trial-vscode — Visual Studio Code

EXPLORER

📁ai-course-trial-vscode

📁.github/

📁mvp/

📄STEP1.md

STEP1.md

# MVP Step1 仮説 ## 1. 対象ユーザーと課題 - ユーザー: テニスサークルの部員(約20名) - 課題: 練習日程がLINEで埋もれて見つけづらい - 既存代替: LINEグループのトーク ## 2. 主導線(1本) 部員がアプリを開く → 練習日程一覧を見る → 場所と時間を確認する ...(続く)

※実際の画面と表記が多少異なる場合があります(内容は一例です)

📌 各ステップが終わったら新しいチャットを開いてから次の prompt を実行してください(利用上限の節約にもなります)。

4-3. Step2: 画面とスコープを整理する

新しいチャットで /course-mvp-step2-story-scope を実行します。mvp/STEP1.md を読み込んだうえで、画面一覧を一緒に整理してくれます。

💡 アイデア道場のシートの続き(「悩み×機能」で選んだ機能・競合調査・差別化ポイント)は、ここで貼ると効果的です。画面やスコープを決める材料としてそのまま使えます。

Copilot Chat

Copilot

STEP1.md を読み込みました。主導線は「部員が開く → 練習日程一覧を見る → 場所と時間を確認する」ですね。この流れで進めます。画面はいくつに分けましょうか？(例: 一覧画面、詳細画面など)

あなた

一覧画面と、練習を登録する画面の2つで十分だと思います。

Copilot

了解です。S1: 練習日程一覧、S2: 練習登録、の2画面としますね。まずは段Aとして「一覧を見る・登録する」だけに絞り、通知や検索は今回は入れない方針でよいですか？

あなた

はい、それでお願いします。

※実際の画面と表記が多少異なる場合があります(内容は一例です)

画面一覧・除外リスト・スコープ段(A〜D)の確認が終わると mvp/STEP2.md が保存されます。

4-4. Step3: UIモックを作って磨く

新しいチャットで /course-mvp-step3-ui-mock を実行します。mvp/STEP2.md の画面一覧をもとに、静的HTMLのモック(mvp/STEP3_UI_MOCK.html)を作ってくれます。Step2で貼った差別化ポイントが、画面のどこかにちゃんと反映されているか確認しながら見てみましょう。

Copilot Chat

Copilot

STEP2.md の S1(練習日程一覧)・S2(練習登録)をもとに、モックを作成しました。mvp/STEP3_UI_MOCK.html に保存済みです。主導線どおりの流れに見えますか？気になる見た目の希望があれば教えてください。

あなた

いいと思います。ただ、日程一覧の文字がちょっと小さいので大きくしてほしいです。

Copilot

一覧の文字サイズを大きく調整しました。他に気になる点はありますか？

あなた

これでいいです！

※実際の画面と表記が多少異なる場合があります(内容は一例です)

この「作る → 見る → 直す」の改善ループは最大5往復を目安に、「これでいい」と思ったら終了と伝えてください。修正はそのつど同じファイルに反映されます。

4-5. できあがりをブラウザで確認する

エクスプローラーで mvp/STEP3_UI_MOCK.html を右クリック
「Finderで表示」(Windowsは「エクスプローラーで表示」)を選ぶ
表示されたファイルをダブルクリックしてブラウザで開く

ブラウザ

file:///Users/you/.../mvp/STEP3_UI_MOCK.html

🎾 サークル練習日程(モック例)

7/30(水) 18:00〜 / テニスコートA

8/2(土) 10:00〜 / 市民体育館

＋練習を登録する

※実際の画面と表記が多少異なる場合があります(内容は一例です。あなたのモックは自由な内容でOKです)

「これでいい」と思えたら、いよいよ次のステップで友達に見せられる形にします。

Step 5: html-drop でモックをURLにする

https://html-drop.oya-858.workers.dev/ にアクセスします。GeekSalon生向けのツールで、HTML(またはZIP)をドロップするだけで共有URLが発行されます。

html-drop.oya-858.workers.dev

https://html-drop.oya-858.workers.dev/

⚡ GeekSalon生向けツール

あなたのプロダクトを、
即URLで共有

FBをもらって、あなたのアイデアをより洗練させましょう。
氏名を選んでHTMLまたはZIPをドロップするだけ。

1あなたは誰ですか？

氏名（漢字フルネーム）

✓田中太郎として送信します変更

IDで入力したい方はこちら

2ファイルをアップロード

📂

ここにファイルをドロップ

またはクリックして選択 — .html / .zip 対応

⚠️画像・CSS・JSを参照するモックは必ずZIPでまとめてアップしてください。HTMLファイル単体だと外部リソースが読み込めません。

ファイルは14日後に自動削除されます · Cloudflare Workers + R2
自分が候補に出ない / うまく動かない場合は運営にSlackでご連絡ください

※実際の画面と表記が多少異なる場合があります

5-1. 自分の名前を選ぶ

「氏名（漢字フルネーム）」欄に入力すると候補がインクリメンタルに表示されます。自分の名前を選ぶと「✓ ○○さんとして送信します」の確定チップになります(この時点でファイル欄が押せるようになります)。

📌 候補に自分の名前が出ない場合は「該当者がいません。運営にSlackでDMしてください。」と表示されます。その通りSlackで運営にDMしてください。

5-2. モックをアップロードする

mvp/STEP3_UI_MOCK.html をそのままドラッグ&ドロップ(またはクリックして選択)します。

⚠️ 画像・CSS・JS を外部ファイルとして参照しているモックは、必ずZIPでまとめてアップしてください。HTML単体だと外部リソースが読み込めません。もし単体HTMLに外部参照が見つかった場合は、次の確認ダイアログが出ます。

html-drop.oya-858.workers.dev

⚠️ 外部ファイルの参照を検出

このHTMLファイルは外部CSS・JS・画像を参照しています。HTMLファイル単体でアップするとデザインや動作が崩れる可能性があります。ZIPでまとめてアップするのがおすすめです。

※実際の画面と表記が多少異なる場合があります

STEP3のモックは .github/prompts/course-mvp-step3-ui-mock.prompt.md の指示により外部CSS不要の1ファイル完結で作られているはずなので、多くの場合そのままHTML単体でアップロードできます。

5-3. URLが発行される

html-drop.oya-858.workers.dev

✓共有URLが発行されました

html-drop.oya-858.workers.dev/s/a1b2c3

⏱ 14日後に自動削除されます

※実際の画面と表記が多少異なる場合があります

「コピー」を押すとボタンが「コピー済み ✓」に変わります。このURLが、友達に配るリンクです。

Step 6: 友達に配って、フィードバックをもらう

6-1. 送付文面(コピペOK)

そのまま使える送付文面の例です。LINEやDMで送ってください。

〇〇です！GeekSalonのAIコースでアプリのモックを作ってみました。
1分くらいで見れるので、感想もらえたら嬉しいです🙏
→ https://html-drop.oya-858.workers.dev/s/a1b2c3

ページの下(スマホは画面下)に出てくる
「フィードバックを送る」から一言もらえると助かります！

6-2. 友達が開くと見える画面

共有URLを開いた友達の画面には、右下(スマホは画面下部)に「フィードバックを送る」パネルが常時表示されます。

ブラウザ — 友達が見ている画面

html-drop.oya-858.workers.dev/s/a1b2c3

フィードバックを送る最小化

お名前

1. 全体印象

最初に見たとき、何のサービスだと思いましたか？

2. 具体的な体験

操作していて迷ったところはどこでしたか？

3. 価値・使いたいか

こういうものが実際にあったら使いますか？

4. 改善アイデア

もし変えるとしたら、どこですか？

回答内容は GeekSalon の運営および担当受講生が確認します。

フィードバックを送信する

回答は1項目以上で送信可 / 14日で自動削除

※実際の画面と表記が多少異なる場合があります

4つの質問は1項目以上答えていれば送信できます。全部埋める必要はありません。

6-3. 送信前にLINE認証が入る理由

「フィードバックを送信する」を押すと、送信の前にLINE公式アカウントを使った本人確認のステップが入ります。これは広告や勧誘のためではなく、運営上必要なステップとして設けています。

📌 LINE認証を挟んでいる理由
・レビューを確実に受講生本人に届けるため
・なりすましやスパム送信を防ぐため
・フィードバック後のお礼や続報のやり取りを円滑にするため
という運営上の必然性から、GeekSalon公式LINEを通した本人確認ステップを挟んでいます。スパムなし・いつでもブロックOKです。

ブラウザ — 送信まであと一歩

💬 レビューは田中太郎さんに届きます

送信まであと一歩

かんたん3ステップで

レビューを送信できます。

LINEを友だち追加

すでに追加済みの方はそのまま②へどうぞ

友だち追加する

ボタン1つで「コード」と送る

タップするとLINEのトークが開きます。あとは送信ボタンを押すだけでOK

LINEで「コード」と送る

届いた6桁を入力

botからすぐに届きます

______

※ LINEでは氏名や大学名を聞くメッセージも届きますが、レビューの送信には②の「コード」だけでOKです。プロダクトの更新情報もこのLINEでお届けします。スパムなし・いつでもブロックOK。

※実際の画面と表記が多少異なる場合があります

6-4. 友達のLINE画面(②のボタンを押した後)

②のボタンをタップすると、LINEアプリが開いて「コード」という文字が入力欄に自動で入った状態になります。そのまま送信ボタンを押すだけです。

⚠️ 重要: 公式LINEのbotは「コード」という一言に完全一致でのみ反応します。「コードください」のように余計な文字を足すと反応しません。友達に伝える際は「そのまま送信ボタンを押してね」と一言添えてあげると親切です。

LINE

‹GeekSalon公式

友だち追加ありがとうございます！
お名前を教えてください🙌

コード

認証コード: 123456
(10分間有効)
レビュー画面に戻って入力してください。

メッセージを入力

➤

※実際の画面と表記が多少異なる場合があります

届いた6桁の数字を、さきほどのレビュー画面の③の欄に入力して「確認して送信」を押せば、フィードバックが送信されます。

ブラウザ — 送信完了

フィードバックを送る最小化

送信ありがとうございます！あなたのレビューが田中太郎さんのプロダクトを育てます。

※実際の画面と表記が多少異なる場合があります

💡 友達からのフィードバックは、受講生であるあなた宛てにSlackにも通知されます。届いたら忘れずにチェックしてみてください。

✅ 完了チェックリスト

GitHub Copilot Free を有効化した
VS Code に「GitHub Copilot」「GitHub Copilot Chat」を入れてサインインした
GitHub Student Pack を申請した(承認待ちでもOK)
教材リポジトリをクローンし、2つのダイアログを許可した
/course-mvp-step1-hypothesis で対話し、mvp/STEP1.md ができた
新しいチャットで /course-mvp-step2-story-scope を実行し、mvp/STEP2.md ができた
新しいチャットで /course-mvp-step3-ui-mock を実行し、mvp/STEP3_UI_MOCK.html ができた
できあがったモックをブラウザで確認した
html-drop でアップロードし、共有URLが発行された
友達にURLを送った
友達からのフィードバックが届いた(Slack通知を確認した)

🔧 うまくいかないとき

症状	対処
Copilot が使えない	github.com/settings/copilot で有効化されているか確認 → VS Code拡張のアカウントアイコンからサインインし直す
Student Pack の承認が来ない	数時間〜数日かかることがあります。急がず Step 3 以降を Copilot Free で進めてください。1週間以上来なければ書類を変えて再申請
クローン時のダイアログが出ない/フォルダが違う	正しいフォルダ(`ai-course-trial-vscode`)を開いているか確認。開き直すとダイアログが再度出ます
ウェルカムガイドが出ない	コマンドパレット → `Tasks: Run Task` → 「AIコース体験ガイドを表示」
`/` で prompt が出ない	Copilot Chat 拡張を最新版に更新 → ウィンドウを再読み込み(`Developer: Reload Window`)→ 新しいチャットで再試行
ファイルが保存されない	Agent モードになっているか確認(`/` で呼べば自動でAgentになるはずです)
prompt がどうしても動かない	`.github/prompts/` 内の該当ファイルの中身をチャットに貼り付けて実行
html-dropで自分の名前が候補に出ない	「該当者がいません」と表示された場合は、運営にSlackでDMしてください
html-dropで見た目が崩れる	外部CSS/JS/画像を参照している場合はZIPでまとめてアップし直す
友達がLINEで認証コードを受け取れない	botは「コード」の一言だけに完全一致で反応します。余計な文字が付いていないか確認して送り直してもらう
6桁コードの有効期限が切れた	10分間有効です。もう一度②のボタンを押して新しいコードをリクエストしてもらう

詰まったら、ひとりで悩まず Slack のチャンネルでスレッドを立てて質問してください。その際、エラー画面のスクリーンショットを付けてもらえると、すぐに解決できます。

あなたのアイデアが画面になって、友達のリアクションが返ってくる。その体験を楽しんでください!

AIと一緒にアプリのモックを作って、友達にURLで配るまで — 完全ガイド

なぜ「モックにフィードバック」なのか

全体の流れ

Step 0: 事前チェック

Step 1: GitHub Copilot Free を有効化する

1-1. Copilot Free を有効化

1-2. VS Code に拡張機能を2つ入れる

Step 2(並行推奨): GitHub Student Pack を申請する

Step 3: 教材リポジトリをクローンして開く

3-1. 開くと出る2つのダイアログ

3-2. ターミナルに自動で表示されるガイド

Step 4: Copilot Chat との対話で、モックを作る ★ここが本番

4-1. Copilot Chat を開く

4-2. Step1: 「何を作るか」を対話で決める

4-3. Step2: 画面とスコープを整理する

4-4. Step3: UIモックを作って磨く

4-5. できあがりをブラウザで確認する

Step 5: html-drop でモックをURLにする

5-1. 自分の名前を選ぶ

5-2. モックをアップロードする

5-3. URLが発行される

Step 6: 友達に配って、フィードバックをもらう

6-1. 送付文面(コピペOK)

6-2. 友達が開くと見える画面

6-3. 送信前にLINE認証が入る理由

6-4. 友達のLINE画面(②のボタンを押した後)

✅ 完了チェックリスト

🔧 うまくいかないとき

AIと一緒にアプリのモックを作って、
友達にURLで配るまで — 完全ガイド