アプメイクこれだけ！アプリ作成の準備完了！！
手元の Excel や Word を渡して、「このファイルをアプリにしてよ」と頼むだけ。プログラムは書きません。AI に日本語で頼みます。
このページだけで、事前準備はおしまいです。 上から順に4つ。全部で50分ほどです。
ステップ1〜3 は当日までに。ステップ4 は当日の最初にやりますが、家で済ませてくると当日の待ち時間が減ります。
| やること | 時間 | いつ | |
|---|---|---|---|
| ステップ1 | AI の準備（Claude のアプリを入れる） | 15分 | 当日までに |
| ステップ2 | Git の準備（入れておくだけ） | 10分 | 当日までに |
| ステップ3 | Cloudflare の登録（無料） | 10分 | 当日までに |
| ステップ4 | 準備する（start.bat を管理者として実行） | 15分 | 当日の最初（家でも OK） |
黒い画面（ターミナル）の最後に 準備OK と出て、ブラウザで「準備中」のページが開けば、アプリ作成の準備完了です。
ステップ1. AI の準備（15分・当日までに）
「どの AI を選ぶか」で止まっている会社が多い。どれを選ぶか、ではありません。 手元のフォルダを開ける画面で使うかどうか、それだけです。
お使いの AI を選んでください。選んだものに合わせて、このページの中身が変わります。
（あとから選び直せます。ここで選んだものは、ほかのページでも覚えています）
配布物の中に、どの AI でも読める指示書（AGENTS.md）が入っています。
だから「このファイルをアプリにしてよ」と頼めば、どれを選んでも同じようにアプリができて、同じように公開できます。
大事なのは1つだけ。「手元のフォルダを開いて、コマンドを動かせる画面」で使うこと。
ブラウザのチャットに頼んでも、手元にアプリはできません。
Claude のアプリの左上に、吹き出し（チャット）と </>（Code）のボタンがあります。今日使うのは </> の Code（Claude Code）だけ です。
チャットに「このファイルをアプリにしてよ」と送っても、手元にアプリはできません。
Claude・Claude Code・Cowork・Claude in Chrome の違い
名前が似ていて、よく取り違えます。「Claude」はサービス全体の名前で、その中に使い方がいくつかあります。
| 名前 | どこで使う | 何をする | 今日 |
|---|---|---|---|
| Claude（チャット） | claude.ai・アプリの Chat・スマホのアプリ | 話しかけると、答えや文章を返す。手元のフォルダを開いてコマンドを動かすことはしない | 使わない |
| Claude Code | デスクトップアプリの左上の </>（Code） |
手元のフォルダを開き、ファイルを作り、コマンドを動かして、アプリを作って公開する | これを使う |
| Cowork | アプリのチャット（吹き出し）の入力欄で切り替える（Web・スマホからも） | 資料作り・調べものなど、何段階もある仕事を任せる。Claude Code と同じ仕組みで、黒い画面は出ない | 使わない |
| Claude in Chrome | Chrome の拡張機能 | 開いているページを読む・クリックする・入力する（このページの下の「参考」） | 講師のデモ |
「Code」で開いているか分からないとき
- 左上の
</>が選ばれていて、作業フォルダ（my-app）を開いていれば Claude Code です - 「次のコマンドを実行してください」とコマンドだけが返ってきたら、Chat で開いています。Code に切り替えてください
1-1. 有料プランにする
今日の作業には、Claude の 有料プラン（Pro 以上） が必要です。無料プランのままではできません。
- claude.ai にログインする（アカウントがなければ作る）
- 画面の案内に沿って、Pro 以上のプランを契約する
1-2. デスクトップアプリを入れる
Claude のデスクトップアプリには、Chat・Cowork・Code が1つに入っています。
手元のフォルダを開いて Claude Code を使うには、このデスクトップアプリが要ります。 Web の claude.ai だけでは、今日の作業はできません。
（デスクトップアプリでは、Cowork も手元のファイルやブラウザを使えます）
- Windows 用をダウンロードして、インストーラーを開く
- Mac 用をダウンロードして、Claude を「アプリケーション」フォルダに入れる
- アプリを起動して、1-1 と同じアカウントでログインする
Windows はタスクバー、Mac は Dock を見ます。次のどちらかのアイコンがあれば、Claude のアプリが入っています（講師・サポーターもここで見分けます）。
- オレンジのアイコン（Claude）
- 黒い
A\のアイコン（Claude を作っている Anthropic のマーク）
どちらも無いときは、アプリがまだ入っていないか、起動していません。
1-3. Code が開くことを確かめる
アプリの左上の </> を押して、Code に切り替えます（吹き出しのボタンはチャット）。
切り替えたときに Git のインストール画面が勝手に出てきたら、下の「ステップ2」を見ながら進めてください。基本はすべて「次へ」で OK です。
うまくいかないとき
- Code が見当たらない … 無料プランのままか、アプリが古い可能性があります。プランを確かめ、アプリを最新にしてください
- ログインできない … 1-1 で契約したアカウントと同じメールアドレスか確かめてください
参考：Claude in Chrome とは
Chrome に入れる、Claude の拡張機能です。有料プランで使えます（パソコンの Google Chrome だけ。Edge やスマホでは使えません）。
今日は入れなくて大丈夫です。 講師がデモします。
- 見ているページを、Claude が一緒に見てくれる … 「このページの要点をまとめて」「この表を Excel に貼れる形にして」。クリックや入力も任せられます
- 決まった仕事を、時間になったら勝手にやってくれる … うまくいった頼み方を「ショートカット」に保存し、毎日・毎週・毎月などの決まった時刻に自動で動かせます
- Chrome で考えた続きが、Cowork の履歴に残る … Chrome の横のパネルで話した内容は Cowork の会話として保存され、デスクトップ・Web・スマホのアプリで続きができます（Max・Team プランから始まり、Pro にも順に広がっています）
ログインしているサイトも操作できるので、何をさせるかを確かめてから任せてください。
1-1. ChatGPT のプランを確かめる
Codex は ChatGPT のプランにそのまま乗ります。 Codex だけの契約はありません。
- Plus 以上（Plus・Pro・Business・Enterprise）なら、そのまま使えます
- 無料プランでも使えますが、回数が少なく、当日途中で止まることがあります。Plus 以上をおすすめします
すでに会社や個人で ChatGPT を契約していれば、追加のお金はかかりません。
1-2. Codex CLI を入れる
入れ方は、Codex の公式ページ の案内に沿って進めてください。
バージョンや手順が変わることがあるので、このページには細かい手順を書いていません。
覚えておくことは2つだけです。
- Windows でもそのまま動きます。 WSL（Linux の仕組み）を入れる必要はありません
- 入れたあと、ChatGPT のアカウントでログインします（1-1 で確かめたアカウント）
うまくいかないとき
- コマンドが見つからないと出る … 入れたあとに、黒い画面（ターミナル）をいったん閉じて開き直してください
- どのプランか分からない … chatgpt.com にログインして、左下のアカウント名から確かめられます
1-3. フォルダを開けることを確かめる
黒い画面（Windows はコマンドプロンプト、Mac はターミナル）で codex と打って、画面が出れば入っています。
当日は、作業フォルダ（my-app）の中でこれを立ち上げます。 開き方は当日案内します。
codex と打って、入力できる画面が出れば準備OKです。
1-4. 公開で止まらないようにする（ふつうは自動）
Codex は、はじめの設定のままだと 公開のところで止まります。 ネットにつながらない設定になっているためです。
当日のステップ4を済ませると、この設定は自動で入ります。 自分で変える必要はありません。
入るのは「書けるのは作業フォルダの中だけ」という設定と、公開のためのネット接続です。
うまく入らなかったときの直し方は、AI が何度も聞いてくるのを止める にまとめてあります。
1-1. 契約とポリシーを確かめる
まず確かめてほしいことが1つあります。 名前が似ていて、よく取り違えます。
| 名前 | 今日使えるか |
|---|---|
| GitHub Copilot（Pro・Pro+・Business・Enterprise） | 使えます |
| GitHub Copilot Free | 回数が少なく、途中で止まることがあります |
| Microsoft 365 Copilot（Word・Excel・Teams の中のもの） | 使えません。手元のフォルダにファイルを作れないためです |
会社で契約している場合、管理者が「Copilot CLI / Agent」の利用を許可している必要があります。
許可されていないと、当日その場では使えません。前もって情報システムの担当者に確認してください。
1-2. VS Code と Copilot を入れる
入れ方は、GitHub Copilot の公式ページ の案内に沿って進めてください。
今日は VS Code（エディタ）の Copilot を使います。黒い画面で動かす「Copilot CLI」もありますが、
Windows では別の道具（PowerShell 6 以上）を追加で入れる必要があるので、当日は VS Code のほうをおすすめします。
- VS Code を入れる
- VS Code の中で GitHub Copilot を有効にし、GitHub のアカウントでログインする
1-3. エージェント（Agent）で開けることを確かめる
VS Code の Copilot の入力欄に、「Ask」「Edit」「Agent」 の切り替えがあります。
今日使うのは「Agent」だけ です。Ask（質問するだけ）では、手元にファイルは作られません。
Copilot のパネルを開いて、モードを Agent にできれば準備OKです。
うまくいかないとき
- Agent が見当たらない … VS Code か拡張機能が古い可能性があります。更新してください。会社の契約の場合は、管理者の許可（1-1）も確かめてください
- ログインできない … 会社で配られた GitHub アカウントかどうかを確かめてください
1-1. 契約を確かめる
Antigravity は、Google アカウントがあれば無料で始められます。 当日のために新しく契約する必要はありません。
- 無料 … Google アカウントだけ。1週間に使える量に上限があります
- Google AI Pro（Gemini の有料プラン）… すでに契約していれば、使える量が増えます。追加のお金はかかりません
会社で Gemini を導入している場合は、そのアカウントでログインできるかを前もって確かめてください。
「Gemini CLI」を聞いたことがある方へ
以前あった Gemini CLI は、2026年6月に終わりました。 今は Antigravity がその役割です。
Gemini CLI を入れている方も、Antigravity を入れ直してください。
1-2. Antigravity を入れる
入れ方は、Antigravity の公式ページ の案内に沿って進めてください。
覚えておくことは2つです。
- Windows でも Mac でもそのまま動きます
- 入れたあと、Google アカウントでログインします（1-1 で確かめたアカウント）
1-3. フォルダを開けることを確かめる
Antigravity を起動して、フォルダを開く画面が出れば入っています。
当日は、作業フォルダ（my-app）を開いて使います。 開き方は当日案内します。
Antigravity が起動して、Google アカウントでログインできていれば準備OKです。
うまくいかないとき
- 会社のパソコンで入れられない … 管理者の許可が要ることがあります。情報システムの担当者に確認してください
- どのプランか分からない … 無料のままでも、当日の作業はできます
1-4. 途中で止まらないようにする（ふつうは自動）
Antigravity は、はじめの設定のままだと 作業の途中で何度も「これでいいですか」と聞いてきます。
そのままだと、アプリが1つできるまでに何十回も押すことになります。
当日のステップ4を済ませると、この設定は自動で入ります。 自分で変える必要はありません。
入るのは「途中で止まらないようにする」ことと、この作業フォルダで使うコマンドだけの許可です。
サンドボックスの入り切りや、作業フォルダの外のファイルを見せるかは変えません。
うまく入らなかったとき（Antigravity を先に起動していた場合など）の直し方は、
AI が何度も聞いてくるのを止める にまとめてあります。
ステップ2. Git の準備（10分・当日までに）
Git は、Claude が作業に使う道具です。入れておくだけ。当日、自分で操作することはありません。
Code に切り替えたら、画面が勝手に出てきた人へ
「ステップ1」で Code に切り替えると、Git のインストール画面が自動で出てくることがあります。
- これは何？ … Claude が作業に使う道具（Git）を入れる画面です。足りないので、Claude のアプリが入れようとしています。怪しいものではありません
- どうすればいい？ … すべて「次へ（Next）」 で進めます。途中の設定は何も変えません。最後に「インストール（Install）」→「完了（Finish）」
- 「このアプリがデバイスに変更を加えることを許可しますか？」と出たら「はい」
終わったら、Claude のアプリを一度終了して、開き直してください。
画面が出なかった人は、自分で入れます
- Git for Windows のダウンロードページ を開き、インストーラーをダウンロードする
- インストーラーを開き、何も変えずに「Next」 で進めて「Install」を押す
- 終わったら「Finish」を押す
- 「ターミナル」を開く（command + スペースを押して「ターミナル」と入力し、Enter）
- 次の1行を貼り付けて Enter を押す
git --version
- 「デベロッパツール」をインストールするか聞かれたら「インストール」を押す（10分ほどかかります）
git version 2.〇〇と表示されたら、もう入っています
Windows はインストールが「完了（Finish）」まで進めば、Mac は git version 2.〇〇 と表示されれば OK です。
ステップ3. Cloudflare の登録（10分・当日までに）
Cloudflare は、作ったアプリをインターネットに公開する場所です。今日の使い方なら無料。アカウントを1つ作るだけです。
3-1. アカウントを作る
- Cloudflare の登録ページ を開く
- メールアドレスとパスワードを入れて登録する
- 届いたメールのリンクを押して、メールアドレスを確認する
メールアドレスの確認まで済めば OK です。公開に使う道具（Node.js）は、ステップ4 の黒い画面が入れます。自分で入れる必要はありません。
つまずきやすいところは「Cloudflare でつまずくところ」にまとめてあります。
ステップ4. 準備する（管理者として実行）
ここが、いちばん人が止まるところです。だから1つの操作にまとめました。
道具のインストールから、Cloudflare へのログイン、「準備中」のページの公開までが、まとめて進みます。ここでは、まだ AI は使いません。
配る道具（スターター一式）は、受講した方だけがダウンロードできます。
先に パスワードを入れる を開いて、講師から聞いたパスワードを入れてください（一度入れると、このブラウザでは30日間そのままです）。
4-1. スターター一式をダウンロードして展開する
- starter.zip をダウンロード する
- ダウンロードした starter.zip を右クリック →「すべて展開」→「展開」を押す
4-2. start.bat を「管理者として実行」する
- 展開してできたフォルダの中の start.bat を右クリック →「管理者として実行」を押す
- ダブルクリックではなく、右クリックから開きます（管理者として実行しないと、はじかれるパソコンが多いためです）
- Windows 11 で見当たらないときは、右クリック →「その他のオプションを確認」の中にあります
- 「このアプリがデバイスに変更を加えることを許可しますか？」と出たら「はい」を押す（別の人（管理者）のパスワードを聞かれたら、自分で入れずにサポーターを呼んでください）
- 「開いているファイル - セキュリティの警告」と出たら、「実行」を押す（インターネットから取ってきたファイルなので、Windows が念のため確認しています）
- 黒い画面が開きます。画面の案内に沿って進めてください
- ブラウザで Cloudflare が開いたら、ログインして Allow（許可）
- 初めて公開する人は、URL の一部になる名前（サブドメイン）が 自動で決まります（例：
aiapp-k3x9q2m7）。まれに「register a workers.dev subdomain」と英語で聞かれたら y → 小文字の英数字で好きな名前を入れて Enter
作業フォルダは、自動で C:\ws\my-app に作られます。どこで展開しても大丈夫です。
4-1. ターミナルに1行貼る
- 「ターミナル」を開く（ステップ2 と同じ。command + スペースで「ターミナル」と入力）
- 下の1行をコピーして貼り付け、Enter を押す
curl -fsSL "https://zen-m.net/handson/files/setup-mac.sh?k={{KEY}}" | bash -s -- "https://zen-m.net/handson" "{{KEY}}"4-2. 案内に沿って進める
- 「Password」と出たら、Mac のパスワード を入れて Enter（入力中の文字は表示されません。Node.js が入っていない人だけ）
- ブラウザで Cloudflare が開いたら、ログインして Allow（許可）
- 初めて公開する人は、URL の一部になる名前（サブドメイン）が 自動で決まります（例：
aiapp-k3x9q2m7）。まれに「register a workers.dev subdomain」と英語で聞かれたら y → 小文字の英数字で好きな名前を入れて Enter
作業フォルダは、自動でホームフォルダの ws の中の my-app に作られます。
黒い画面（ターミナル）の最後に 準備OK と出て、ブラウザで「準備中」のページが開けば完了です。
うまくいかないとき
- 黒い画面がすぐに消える … zip の中から直接開いています。starter.zip を右クリック →「すべて展開」してから、展開したフォルダの start.bat を開いてください
- 「管理者として実行されていません」と出る … 画面を閉じて、start.bat を右クリック →「管理者として実行」→「はい」で開き直してください。会社のパソコンで、別の人（管理者）のパスワードを聞かれたら、サポーターを呼んでください
- 「実行」を押しても何も起きない・警告の画面に「実行」が無い … 会社の設定で止められている可能性があります。サポーターを呼んでください
- 「Node.js を自動で入れられませんでした」と出る … 開いたページから入れて、もう一度 start.bat を管理者として実行してください（Mac は1行をもう一度貼る）
- ブラウザが開かない … 黒い画面に出ている長い URL を、自分でブラウザに貼って開いてください
- Cloudflare のログインや、英語の質問で止まった … 「Cloudflare でつまずくところ」を見てください
- 途中で止まった … 画面を閉じずにサポーターを呼んでください。もう一度開き直しても大丈夫です。済んだところはとばして進みます