無料でAI開発環境をつくって、
Webページを公開するまでの完全ガイド
このガイドは、AIでの開発が初めての大学生向けです。
学生特典をフル活用して、すべて無料で以下を実現します。
- 自分のPCに AI開発環境(WebStorm + GitHub Copilot) をつくる
- AIと対話しながら Webページ(HTML)を実装する
- 作ったページを Cloudflare でインターネットに公開する
上から順番どおりに進めてください(後の手順が前の手順に依存しています)。
全体の流れ
Step 0: 事前準備(大学メール・学生証・GitHubアカウント)
↓
Step 1: GitHub Student Developer Pack を申請 ★承認に数日かかるので最初に!
↓ (承認待ちの間に Step 3・4 は進められます)
Step 2: GitHub Copilot を有効化
↓
Step 3: JetBrains 学生ライセンスを申請
↓
Step 4: WebStorm をインストール
↓
Step 5: WebStorm に GitHub Copilot プラグインを入れる
↓
Step 6: 教材リポジトリをクローンして開く
↓
Step 7: AIに「計画」を立てさせてから、HTML を実装する
↓
Step 8: Cloudflare Pages で世界に公開する 🎉
所要時間の目安: 作業自体は合計 1〜2 時間程度。ただし Step 1 の承認に数時間〜数日かかることがあるので、Step 1 だけ先に済ませておくのがおすすめです。
💡 なぜ全部無料なの?
GitHub も JetBrains も、学生向けに有料機能を無償開放しています(GitHub Student Developer Pack / JetBrains 学生ライセンス)。大学のメールアドレスを持っている今だからこそ使える特典です。
Step 0: 事前準備
以下の3つを用意してください。
0-1. 大学のメールアドレス
.ac.jp などで終わる、大学発行のメールアドレスです。学生認証に使います。
0-2. 学生証(または在学証明書)
GitHub の学生認証で、学生証の写真のアップロードを求められることがあります。手元に用意しておいてください。
0-3. GitHub アカウント
- https://github.com にアクセス
- 「Sign up」からアカウントを作成
- メールアドレスの確認を完了する
- すでにアカウントがある方はそのままでOK
💡 GitHub アカウントのメールには、大学のメールアドレスを追加しておくと後の認証がスムーズです(Settings → Emails → Add email address)。
Step 1: GitHub Student Developer Pack を申請 ★最初にやる
GitHub Copilot(AIアシスタント)を無料で使うための学生認証です。
承認まで数時間〜数日かかることがあるので、このステップだけ先に済ませておきましょう。
- https://education.github.com/pack にアクセス
- 「Sign up for Student Developer Pack」をクリック
- GitHub アカウントでログイン
- 案内に従って入力する
- 大学のメールアドレスを選択(未登録なら追加する)
- 学校名を入力
- 求められたら学生証の写真をアップロード
- 申請完了後は承認を待つ(メールで通知が来ます)
Step 2: GitHub Copilot を有効化
Step 1 の承認が来たら、GitHub Copilot(Copilot Pro)を無料で有効化します。
- https://github.com/settings/education/benefits にアクセス
- GitHub Copilot の特典を有効にする
- https://github.com/settings/copilot で「Copilot Pro」が有効になっていることを確認
Copilot の利用上限について
学生向け Copilot には月ごとの利用上限があります。
- コード補完: 無制限
- Chat / Agent: 月ごとの回数制限あり
節約のコツ(後の Step 7 でも効いてきます):
Step 3: JetBrains 学生ライセンスを申請
WebStorm(開発エディタ)を無料で使うための学生認証です。
- https://www.jetbrains.com/student/ にアクセス
- 「今すぐ申し込む(Apply now)」をクリック
- 認証方法を選ぶ
- おすすめ: 「GitHub」を選ぶ — Step 1 の GitHub 学生認証と連携して、すぐ通ります
- または大学のメールアドレスで申請(確認メールが届きます)
- JetBrains アカウントを作成(メールアドレスとパスワードを設定)
- 承認されると、JetBrains の全製品が在学中ずっと無料で使えます
⚠️ GitHub 連携を使う場合は、Step 1 の承認が済んでから申請してください。
Step 4: WebStorm をインストール
WebStorm は JetBrains 製の Web 開発用エディタです。これが開発の「作業場」になります。
🪟 Windows の場合
- https://www.jetbrains.com/webstorm/download/ にアクセス
- 「ダウンロード(.exe)」をクリック
- インストーラーを実行(設定は基本的にデフォルトのまま「Next」でOK)
- インストール後、WebStorm を起動
🍎 Mac の場合
- https://www.jetbrains.com/webstorm/download/ にアクセス
- お使いのチップに合わせてダウンロード
- Apple シリコン(M1/M2/M3/M4): .dmg (Apple Silicon)
- Intel: .dmg (Intel)
- どちらか分からない場合: 左上の → 「このMacについて」で確認
- .dmg を開いて、WebStorm をアプリケーションフォルダにドラッグ
- WebStorm を起動
ライセンス認証
- 初回起動時にライセンス画面が出ます
- 「Log in to JetBrains Account」を選び、Step 3 で作った JetBrains アカウントでログイン
- 学生ライセンスが認識されて、そのまま使えるようになります
💡 ライセンス画面が出ない/後から認証したい場合は、メニューの Help → Register から同じ操作ができます。
Step 5: GitHub Copilot プラグインを入れる
WebStorm の中から Copilot(AI)を使えるようにします。
- WebStorm を起動
- 設定を開く
- Windows: File → Settings
- Mac: WebStorm → Settings
- 左のメニューから Plugins を選ぶ
- 「Marketplace」タブで GitHub Copilot を検索してインストール
- WebStorm を再起動
- 再起動後、右下などに出る案内から GitHub アカウントでサインイン
- 出てこない場合: 右側の Copilot Chat アイコン(吹き出しマーク)を開くとサインイン案内が出ます
⚠️ プラグインは必ず最新版にしてください。Agent モードや prompt 機能は古いバージョンだと使えません。
Step 6: 教材リポジトリをクローンして開く
「クローン」とは、GitHub 上にあるプロジェクト一式を自分のPCにコピーすることです。
WebStorm の機能を使うので、コマンド入力は不要です。
- WebStorm を起動(プロジェクトを開いている場合は File → Close Project で起動画面に戻る)
- 起動画面の 「Get from VCS」(または「Clone Repository」)をクリック
- URL に以下を貼り付ける:
https://github.com/oya-ui/ai-course-trial-jetbrains.git
- Directory(保存先)はそのままでOK →「Clone」をクリック
- GitHub へのログインを求められたら、案内に従ってログイン
- 「Trust Project」のダイアログが出たら Trust を選ぶ
確認方法
左のファイルツリーに .github/prompts/ フォルダが見えていればOKです。
💡 Git が入っていないと言われた場合は、WebStorm が表示する「Download and Install」を押せば自動でインストールされます。
Step 7: AIに「計画」を立てさせてから、HTML を実装する ★ここが本番
いよいよ AI と一緒に開発します。その前に、一番大事な心得をひとつ。
🎯 いきなり作らせない。まず計画。
AI に「作って」とだけ言うと、意図とズレたものが出てきがちです。
①作りたいものを伝えて計画を出させる → ②計画を自分の言葉で確認する → ③OKなら実装させる。
この型を必ず守ってください。プロもこの順番で AI を使っています。
7-1. Copilot Chat を Agent モードにする(必須)
- 右側の Copilot Chat アイコン(吹き出しマーク)をクリックしてチャットを開く
- チャット入力欄の下にあるモード選択で Agent を選ぶ
⚠️ Ask モードのままだとファイルが保存されません。必ず Agent モードにしてください。
💡 モード選択に Plan がある場合は、計画づくりの場面で Plan モードを使うのがおすすめです。無い場合は、チャットで「まず計画だけ出して。実装はまだしないで」と頼めば同じことができます。
7-2. Step1 → Step2 → Step3 の順に prompt を実行する
このリポジトリには、対話を進めてくれる「prompt(台本)」が入っています。
チャット入力欄に / を打つと候補が出るので、以下の順に実行してください。
| 順番 | prompt | やること | 成果物 |
|---|
| 1 | /course-mvp-step1-hypothesis | 「何を作るか」を対話で決める | mvp/STEP1.md |
| 2 | /course-mvp-step2-story-scope | 画面と機能の範囲を整理する | mvp/STEP2.md |
| 3 | /course-mvp-step3-ui-mock | HTML の画面モックを作って磨く | mvp/STEP3_UI_MOCK.html |
進め方のポイント:
- 各ステップごとに新しいチャットを開く(利用上限の節約にもなります)
- AI からの質問には自分の言葉で答える(正解探しをしなくてOK)
- 成果物が
mvp/ フォルダに保存されているか、都度確認する
- Step3 の見た目の修正は 5往復以内を目安に切り上げる
7-3. できあがりを確認する
mvp/STEP3_UI_MOCK.html を右クリック → Open In → Browser で、ブラウザで表示を確認します。
「これでいい」と思えたら、いよいよ公開です。
Step 8: Cloudflare Pages で世界に公開する 🎉
作った HTML を、無料でインターネットに公開します。ドラッグ&ドロップだけでできます。
8-1. Cloudflare アカウントを作成
- https://dash.cloudflare.com/sign-up にアクセス
- メールアドレスとパスワードで無料アカウントを作成
- 確認メールのリンクをクリックして認証
8-2. 公開用フォルダを用意する
- PC のデスクトップなどに、新しいフォルダを作る(例:
my-first-site)
mvp/STEP3_UI_MOCK.html をそのフォルダにコピーして、ファイル名を index.html に変更する
💡 index.html という名前にすると、URL を開いたときに最初に表示されるページになります。
8-3. アップロードして公開
- Cloudflare のダッシュボードで Workers & Pages を開く
- 「Create」→ Pages タブ → 「Upload assets」(直接アップロード) を選ぶ
- プロジェクト名を入力(例:
my-first-site)— これが URL の一部になります
- Step 8-2 で作ったフォルダごとドラッグ&ドロップ
- 「Deploy site」をクリック
💡 画面の表記は変わることがあります。「Pages」「Upload assets / Direct Upload」というキーワードを目印に探してください。
8-4. 公開URLを確認する
デプロイが終わると、https://プロジェクト名.pages.dev という URL が発行されます。
- URL を開いて、自分のページが表示されることを確認
- スマホでも開いてみる(世界中どこからでも見られます!)
- 公開 URL を Slack のチャンネルに共有してください 🎉
✅ 完了チェックリスト
- GitHub アカウントを作成した
- GitHub Student Developer Pack を申請した → 承認された
- GitHub Copilot(Pro)を有効化した
- JetBrains 学生ライセンスを取得した
- WebStorm をインストールし、ライセンス認証した
- GitHub Copilot プラグインを入れてサインインした
- リポジトリをクローンした(
.github/prompts/ が見える)
- Copilot Chat を Agent モードにした
- Step1〜3 の prompt を実行し、
mvp/STEP3_UI_MOCK.html ができた
- Cloudflare Pages で公開し、
*.pages.dev の URL が開けた
- 公開 URL を Slack に共有した
🔧 うまくいかないとき
| 症状 | 対処 |
|---|
| Student Pack の承認が来ない | 数日かかることがあります。1週間以上来なければ、書類(学生証など)を変えて再申請 |
| Copilot が有効にならない | Student Pack の承認が済んでいるか確認 → settings/education/benefits |
| JetBrains の学生認証が通らない | 認証方法を「GitHub」にする(Step 1 承認後)。大学メールの場合は確認メールの迷惑メールフォルダも確認 |
/ で prompt が出ない | Copilot プラグインを最新版に更新 → WebStorm 再起動 → 新しいチャットで再試行 |
| ファイルが保存されない | Copilot Chat が Agent モードになっているか確認 |
.github/prompts/ が見えない | 正しいフォルダ(ai-course-trial-jetbrains)を開いているか確認 |
| prompt がどうしても動かない | .github/prompts/ 内のファイルの中身をチャットに貼り付けて実行 |
| クローンできない | GitHub にログインできているか確認 |
| Cloudflare で公開したのにページが出ない | ファイル名が index.html になっているか確認。数分待ってから再読み込み |
詰まったら、ひとりで悩まず Slack のチャンネルでスレッドを立てて質問してください。
その際、エラー画面のスクリーンショットを付けてもらえると、すぐに解決できます。
作ったものが世界に公開される体験、楽しんでください!