🍳
みんなで献立アプリを
作ってみよう🍳
Claude Codeでミニアプリ作成体験オフ会
今日のゴール🎯
Claude Code（クロコ）を使って、
冷蔵庫の食材から献立を提案する
アプリを作ろう！
全部やらなくてOK。
途中で止めても、家で続きから試せます。
自分のペースで進めてね😊
まず確認！
クロコ（Claude Code）、
もう入れてる？
STEP 0
（Windowsの方のみ）ギットをインストールしよう
🪟 Windowsをお使いの方へ
クロコを入れる前に、まず「Git」のインストールが必要です（初回のみ・所要5分）。
🔗 Gitのダウンロードページを開く ↗
①ブラウザで https://git-scm.com/download/win にアクセス
②自動でダウンロードが始まる（始まらない場合は画面のリンクをクリック）
③ダウンロードした.exeをダブルクリック
④インストーラーが起動。基本的に「Next」を押し続けるだけでOK
⑤インストール完了後、念のためPCを再起動
Macの方、またはGitのインストールが終わった方は次へ進んでね
Step 1
クロコをインストールしよう
💡 このステップでは「黒い画面（ターミナル）」を使います。
はじめて見ると少しこわいですが、コピペするだけなので大丈夫！
▼ まずこちらの記事を開いてね
📖 ノウハウ図書館を開く ↗
記事の ステップ1 を実行してね！
・Claude Codeのアイコンがアプリ一覧に表示されている
・開くとチャット入力欄が出てくる
→ これで合ってたらOK！
・エラーメッセージが出たら、その文章をそのままコピーして
　クロコに貼って「どうすればいい？」と聞いてみてね

🪟 Windowsで「Trusted app installs must be enabled」と出たら
　「はい(Y)」→ 開発者モードをオン → セットアップやり直し
　・Windows 11：設定 → システム → 開発者向け
　・Windows 10：設定 → 更新とセキュリティ → 開発者向け
　インストール後はオフに戻して大丈夫です👍
　※スイッチがグレーで押せない場合は会社のPCです。
　　無理せず個人のPCでお試しください🙏

🍎 Macで「Gitをインストールして」と言われたら
　macOSが古い可能性があります。
　OSのアップデートで解決しますが1時間ほどかかるため、
　当日は近くの人の画面を一緒に見る形がおすすめです😊

・それでも難しければ近くの人に声をかけてね😊
Step 2
設定を確認しよう
下の記事を開いて、ステップ2を確認してね
（Step 1で開いた人は、同じ記事です）
📖 ノウハウ図書館を開く ↗
・プライバシー設定の確認が終わっている
・不安な設定があればオフにしてある
→ これで合ってたらOK！
・設定画面が見つからない場合は近くの人に聞いてみてね😊
・後から確認してもOK！次に進んでも大丈夫です
Step 3
学長の呪文を入れよう🔮
「学長の呪文」って何？
クロコに最初から覚えてもらう"お願いごと"のこと。
「こんな話し方をしてね」「これはやらないでね」など、
毎回言わなくていいように設定しておくものだよ！
📖 ノウハウ図書館を開く ↗
記事の ステップ3 を実行してね！
・CLAUDE.mdというファイルが作られている
・クロコが「わかりました」みたいな返答をしてくれた
→ これで合ってたらOK！
・そのままクロコに「CLAUDE.mdを作りたい」と貼り付けてみてね
・ファイルの場所がわからなくても大丈夫！クロコが教えてくれます
Step 4
🔶 中上級者向け
PM（責任者）を立てよう
⚠️ 今日はスキップでOK！
このステップは少し難しめです。
献立アプリが作れるようになってから
ゆっくり読んでみてね🔖
📖 気になる人はこちら ↗
Step 5
献立アプリを作ろう！🍳
いよいよメインです！
冷蔵庫の食材から献立を提案してくれるアプリを
クロコと一緒に作ろう😊
📌 記事が開いたら…
目次の中の
『プロンプト（ここからコピーしてください）』
をクリックしてね！
（最初から読んでも大丈夫👌）
📖 ノウハウ図書館を開く ↗
📣 この記事がよかったら…
いいね！＆ブックマーク！
→ 作者が泣いて喜びます😂
（記事ページの下の方にあるよ）
・クロコがコードを生成してくれた
・画面にアプリらしきものが表示された
→ 見た目が変でも動いてたらOK🎉
・うまくいかないときは、クロコにこう聞いてみてね😊
　「どこで止まっていますか？次に私がすることを、1つずつ教えてください」
・3回やり取りしても難しそうなら近くの人に声をかけてね
Step 6
自分用に
カスタマイズしてみよう！🛠️
アプリができた人は、自分好みに変えてみよう😊
前回のオフ会では、みんなこんなアレンジをしていました！
🎯 まずは1つだけ選んでみよう！
全部やろうとすると時間が足りません。
気になったものを1つ、クロコに頼んでみてね😊
オレンジのかわいい系、和風の落ち着いた「品書き」風など、
雰囲気をまるごと変えた人がいました。
さっき作った献立アプリの見た目を、和風の落ち着いたデザインに変えて。旅館の品書きみたいな雰囲気で。文字は読みやすい大きさのままにして、今ある機能は変えないでね。直したら、ブラウザを開き直して見せて。
毎回キーボードで打つのは大変！
よく使う食材をボタンで選べるようにした人が多かったです。
さっき作った献立アプリに、よく使う食材をボタンで選べる機能を追加して。肉・魚／野菜／その他でグループ分けして、押すと食材の入力欄に入るようにして。今までどおりキーボードでも入力できるようにしてね。直したら、ブラウザを開き直して見せて。
冷蔵庫だけじゃなく、冷凍庫やツナ缶・そうめんなどの
ストックもまとめて見られるようにした人がいました。
※入れた食材はこのパソコンの中だけに残ります
さっき作った献立アプリの食材の入力欄を、「冷蔵庫」「冷凍庫」「常温ストック」の3つに分けて。3つ全部をまとめて見て、今日の献立を考えてね。入れた食材はこのブラウザに保存して、次に開いたときも残るようにして。直したら、ブラウザを開き直して見せて。
「今日は和食の気分」「3品でいい」「このじゃがいもを使い切りたい」
そんな希望を出せるようにした人も。
さっき作った献立アプリに、和食・洋食・中華で絞り込めるボタンを追加して。レシピにジャンルの情報がなければ、あなたが判断して振り分けていいよ。選んだジャンルの料理が少ないときは、近いものも出してね。直したら、ブラウザを開き直して見せて。
さっき作った献立アプリに、使い切りたい食材を1つ選べる機能を追加して。選んだ食材を使う料理を優先して出してね。ぴったりの料理がないときは、近いものを出して。直したら、ブラウザを開き直して見せて。
「今日は疲れたから15分で作れるものだけ見たい」
そんなときに便利なアレンジです。
さっき作った献立アプリで、それぞれの料理に作るのにかかる時間の目安を表示して。あわせて「15分以内で作れるレシピだけを表示する」のチェックボックスもつけて、チェックを入れると短時間で作れるものだけに絞られるようにして。時間はおおよその目安だと画面のどこかに書いておいてね。直したら、ブラウザを開き直して見せて。
「子どもがピーマンを食べない」など、
家族の苦手なものを避けられるようにしたアレンジです。
※登録した食材はこのパソコンの中だけに残ります
さっき作った献立アプリに、苦手な食材を登録できる欄を追加して。登録した食材を使う料理は出さないようにしてね。複数登録できるようにして、あとから消せるようにもして。登録した内容はこのブラウザに保存して、次に開いたときも残るようにして。全部よけると料理が出せないときは、その理由を画面に出してね。直したら、ブラウザを開き直して見せて。
カロリー表示や、「家にある食材で何％作れるか」を出した人、
足りない食材をそのまま買い物リストにした人がいました🛒
さっき作った献立アプリで、それぞれの料理におおよそのカロリーを表示して。1人分の目安でいいよ。あわせて、出てきた料理全部の合計カロリーと、1品あたりの平均も表示してね。画面のどこかに「カロリーはおおよその目安です」と書いておいてね。直したら、ブラウザを開き直して見せて。
さっき作った献立アプリに、買い物リストの機能を追加して。出てきた献立を作るのに足りない食材を、まとめて一覧で表示して。同じ食材は1つにまとめてね。直したら、ブラウザを開き直して見せて。
食費の管理に使いたい人向け。
「1人分 約250円」のように出した人がいました。
さっき作った献立アプリで、それぞれの料理におおよその材料費を「1人分の目安」として円で表示して。あわせて、その日の献立ぜんぶの合計金額も出してね。金額はおおよその目安だと画面のどこかに書いておいて。直したら、ブラウザを開き直して見せて。
「作った！」ボタンを押すと記録が残り、
1週間で何を作ったか振り返れるようにした人も。
※記録は今使っているパソコンの中だけに残ります
さっき作った献立アプリに、作った料理を記録する機能を追加して。それぞれの料理に「作った！」ボタンをつけて、押したら記録が残るようにしてね。記録はこのブラウザに保存して、閉じても消えないようにして。直近1週間で作ったものを一覧で見られるようにもして。直したら、ブラウザを開き直して見せて。
💡 うまくいくコツ
一度にたくさんお願いすると失敗しやすいです。
1つ直す → 動いたら次、が確実だよ👌
画面が変わらないときは
「閉じて開き直して」とお願いすればOK。
思いついたことを日本語で言うだけでOK。
「もっとかわいくして」でもちゃんと伝わります😊
提供、おーちゃん。AI活用研究中。身近な困りごとをAIでミニアプリに。個人タクシー乗務記録、少年野球リアルタイムスコア、AI費用対効果計算、せどり支援ツールの制作例
「これ、できるかな？」
「これ毎回やるの、
めんどくさいんだけど……」
その困りごと、AIで形にできるかも！
💬 おーちゃんに相談する
Step 7
🟢 早い人向け
スマホでも見れるようにしよう！📱
アプリが完成した人は、スマホからも見られるように
ネットに公開してみよう！
Cloudflareへの公開、どっちでやる？
📚 みんなのクロコ活用事例
他のみんながクロコで何してるか気になる？
活用アイデアが盛りだくさん！
📖 みんなの活用事例を見る ↗
🎉 お疲れさまでした！
またオフ会でお会いしましょう✨
今日できたこと・できなかったことは
どちらでもOK！
家で続きを試してみてね😊
📝 最後にこれだけお願いします！
感想・ご意見をぜひ聞かせてください😊
📋 Claude Codeでミニアプリ作成体験オフ会｜参加者アンケート ↗