🍳
みんなで献立アプリを
作ってみよう🍳
Claude Codeでミニアプリ作成体験オフ会
今日のゴール🎯
Claude Code（クロコ）を使って、
冷蔵庫の食材から献立を提案する
アプリを作ろう！
全部やらなくてOK。
途中で止めても、家で続きから試せます。
自分のペースで進めてね😊
まず確認！
クロコ（Claude Code）、
もう入れてる？
Step 1
クロコをインストールしよう
💡 このステップでは「黒い画面（ターミナル）」を使います。
はじめて見ると少しこわいですが、コピペするだけなので大丈夫！
▼ まずこちらの記事を開いてね
📖 ノウハウ図書館を開く ↗
記事の ステップ1 を実行してね！
・Claude Codeのアイコンがアプリ一覧に表示されている
・開くとチャット入力欄が出てくる
→ これで合ってたらOK！
・エラーメッセージが出たら、その文章をそのままコピーして
クロコに貼って「どうすればいい？」と聞いてみてね
・それでも難しければ近くの人に声をかけてね😊
Step 2
設定を確認しよう
さっきと同じ記事の、ステップ2を確認してね
📖 ノウハウ図書館を開く ↗
・プライバシー設定の確認が終わっている
・不安な設定があればオフにしてある
→ これで合ってたらOK！
・設定画面が見つからない場合は近くの人に聞いてみてね😊
・後から確認してもOK！次に進んでも大丈夫です
Step 3
学長の呪文を入れよう🔮
「学長の呪文」って何？
クロコに最初から覚えてもらう"お願いごと"のこと。
「こんな話し方をしてね」「これはやらないでね」など、
毎回言わなくていいように設定しておくものだよ！
📖 ノウハウ図書館を開く ↗
記事の ステップ3 を実行してね！
・CLAUDE.mdというファイルが作られている
・クロコが「わかりました」みたいな返答をしてくれた
→ これで合ってたらOK！
・そのままクロコに「CLAUDE.mdを作りたい」と貼り付けてみてね
・ファイルの場所がわからなくても大丈夫！クロコが教えてくれます
Step 4
🔶 中上級者向け
PM（責任者）を立てよう
⚠️ 今日はスキップでOK！
このステップは少し難しめです。
献立アプリが作れるようになってから
ゆっくり読んでみてね🔖
📖 気になる人はこちら ↗
Step 5
献立アプリを作ろう！🍳
いよいよメインです！
冷蔵庫の食材から献立を提案してくれるアプリを
クロコと一緒に作ろう😊
📌 記事が開いたら…
目次の中の
『プロンプト（ここからコピーしてください）』
をクリックしてね！
（最初から読んでも大丈夫👌）
📖 ノウハウ図書館を開く ↗
📣 この記事がよかったら…
いいね！＆ブックマーク！
→ 作者が泣いて喜びます😂
（記事ページの下の方にあるよ）
・クロコがコードを生成してくれた
・画面にアプリらしきものが表示された
→ 見た目が変でも動いてたらOK🎉
・クロコが「できません」と言ってきたら
「できるでしょ？やって！」と強めにお願いしてみて😊
・3回やり取りしても難しそうなら近くの人に声をかけてね
Step 6
🟢 早い人向け
スマホでも見れるようにしよう！📱
アプリが完成した人は、スマホからも
アクセスできるようにしてみよう！
クロコにこのプロンプトを貼ってみてね
さっき作った献立アプリをスマホでも見られるように公開してください。
Cloudflare PagesでURLを発行してほしいです。
【私のこと】
- Cloudflareアカウントはまだ持っていない
- パソコン操作は慣れていない
- ブラウザ操作は自分でやります
【進め方】
- 途中で私に質問せず、最後まで自分で判断して進めてください
- 私のブラウザ操作が必要な場面だけ「今○○してください」と1つずつ教えてください
- それ以外は全部自動で進めてください
【お願いしたいこと】
1. HTMLファイルを自分で探す
2. ファイルを index.html にリネームして専用フォルダに入れる
3. Cloudflare Pagesへアップロードして公開する
- プロジェクト名は「kondate-app」にする
- 使えなければ「kondate-app-123」など数字を足す
- 個人名やメールアドレスは絶対に使わない
4. 公開できたら「このURLをスマホで開くと見られます → ○○○」と表示する
【注意】
- コマンドやビルドは不要（HTMLファイル1枚を置くだけでOK）
- エラーが出ても自分で対処して進めてください
- どうしても詰まったときだけ日本語で状況を教えてください
⏳ アップロード後、URLが使えるようになるまで2〜3分かかります。
「開けない！」と思っても焦らず少し待ってみてね😊