Claude Code × Cloudflare｜マカロン店主がLINEアプリを12時間で作った話【準備編・2026年最新】
こんにちは！マカロン屋を独立して4年目・Claude Code歴2か月のいろはです🍰
朝の仕込みの合間や夜の発送作業の合間に、Claude Code（クロード・コード／Anthropic社のAI開発アシスタント）を触っています。
前回の「お返事Skill」の記事めっちゃよかった…
続編って本当に作れたの？
作れました🙂↕️
しかも正味12時間で。今回はその記録を【準備編】と【実装編】の前後編で全部公開します
- 非エンジニアの店主が 12時間でLINE自動返信アプリを作った全記録（準備編）
- Claude Code に頼んで Mac の 開発ツール一式（Homebrew・Node.js・pnpm・wrangler）を入れる流れ
- Cloudflare・LINE Developers・Anthropic Console・GitHub の5つのアカウント準備手順
- 非エンジニアの私が踏んだ 落とし穴2つと Claude Code に頼んでの解決方法
※全部覚えなくてOK！「あ、こんな名前のものが出てくるんだ〜」と眺めるだけで大丈夫です。本文中でも都度説明します🙂↕️
- Cloudflare（クラウドフレア）/ Workers / D1：世界中で使われている「Webサイトを動かすクラウドサービス」。今回はWorkers＝アプリ本体を動かす場所、D1＝メッセージを記録するデータベースとして使います。両方とも個人用途なら無料枠で十分
- Claude Code Pro / Claude API（別々のお財布です）：Claude Code Pro＝あなたのMacで Claude Code を動かす月額契約（月$22）／Claude API＝あなたが作ったアプリから Claude を呼ぶ従量課金（使った分だけ）。同じ「Claude」でも支払いが2系統あると覚えてください
- Webhook（ウェブフック）：「新着メッセージが来たよ」と LINE が自動で知らせを送ってくる仕組み。お店で例えるなら来店ベル
- API（エーピーアイ）：外部サービス（今回は Claude や LINE）をプログラムから呼び出すための窓口
- ターミナル / Finder（ファインダー）：ターミナル＝Mac標準の「黒い画面でコマンドを打つアプリ」／Finder＝Mac標準のファイル管理アプリ
- リポジトリ（repository）：プログラムやファイルを1つのプロジェクト単位でまとめて保管しておく箱のこと。GitHub上で作ります
- Node.js / pnpm / wrangler：Mac で動かす「開発の道具」3つ。Node.js＝調理場・pnpm＝仕入れ係・wrangler＝Cloudflare用のリモコンくらいに思ってOK
⚠️ この記事の対象範囲（読む前に確認）
① この記事は Claude Code をインストール済みの前提ではありません。むしろ 「これから Claude Code を入れて何かやってみたい」非エンジニアに向けて書いています。
② プログラミング言語のコードはほぼ出てきません
私自身プログラムが書けないので、本文はすべてマカロン店の比喩で説明しています。プログラミング言語のコードは Claude Code が裏で書いてくれた象徴的な部分を 「こんな感じのものが出てきました」と数行だけ見せる程度。ターミナルに打ち込むコマンドは出てきますが、すべてコピペで動きます🙂↕️
③ 「初心者向け」と「中級者向け」の中間です
この記事は連載第1弾の 「お返事Skill」 を作り終えた方や、基本的なターミナル操作（コマンドのコピペ）に慣れた方向けの内容になります。完全初心者の方は、まず第1弾からお読みいただくのがおすすめです。
▼ 結論｜お返事Skill 1人運用の限界がきて、アプリ化を決めた話
まずは結論からですが、前回作った個人用の「お返事Skill」は便利だったけれど、お店として運用するにはあまり活用できないというのが今回のスタートでした。
連載第1弾で公開した「お返事Skill」は、私の Mac の Claude Code に話しかければ返信下書きが3パターン作れる仕組みです。これ自体は1人で使う分には最強でした。
でも、棒付きマカロン専門店「いろはのおと」は実は夫婦2人で運営しているお店。お客さま対応も2人で分担しているのですが、Skillだと…
- 私の Mac の Claude Code に話しかけないと使えない（もう1人は使えない）
- お客さまから来た文章を毎回コピペして渡す必要がある
- 夜中や仕込み中だと Mac を開けないことも多い
たしかに「個人用」って書いてたよね…
そうなんです。
だから「複数人で共有できて、外出先でも使えて、自動でメッセージを受け取ってくれる仕組み」が必要だなと思って、Cloudflare で本格アプリを作ることにしました🙂↕️
結果として、2026年5月7日〜8日のたった2日間（実作業12時間）で、こんなアプリが完成しました。
この記事は前後編の【準備編】。ここでは「アプリを作る前にどんな準備が必要だったか」を全公開します。実装の中身（コード生成・Webhook・管理画面）は次回【実装編】で解説します。
💡 困ったときの「黄金パターン」（先に覚えておいてほしい）
この記事を読み進める中で、「これ何？」「動かない…」「何していいか分からない…」という瞬間が必ず来ます。私もたくさんありました。
そんな時の魔法の言葉は3つだけ：
- ① 「ターミナルにこんなエラーが出ました」とそのまま全文コピペして Claude Code に送る
- ② 画面のスクショを撮って「こんな画面が出ました」と Claude Code に渡す
- ③ 「ここの『●●』って何？意味分からないので教えて」と具体的に困ってる箇所を伝える（恥ずかしくない・むしろ歓迎）
この3パターンで、9割の詰まりは Claude Code が解決してくれます。「自分で覚えなきゃ」と思わないことが、非エンジニアが最後まで作り切る一番のコツでした🍰
では、ここから準備編を始めていきます。
▼ そもそも何を作ったの？｜マカロン店オペレーションで例える
非エンジニア視点で「結局どんな仕組み？」を一度整理させてください。
マカロン店の業務に例えると、こんな感じです。
🍰 アプリ全体の流れ（マカロン店で例えると）
① お客さまが LINE でメッセージを送る
→ お店の入り口で「ピンポン♪」と来店ベルが鳴ります
② 「メッセージ来たよ！」とお知らせが届く（Webhook ＝ 来店ベル）
→ 奥にいるスタッフに「お客さま来店！」と呼びかけが届く感覚
③ Cloudflare の小さなお店（Workers）が応対（応対するスタッフが出てくる）
→ レジ前まで出てきて、お客さまの注文を聞きます
④ 受注ノート（D1 ＝ データベース）にメッセージを書き写す
→ 「○月○日にこんなご注文・ご質問がありました」と記録
⑤ 「いろは口調」を覚えた新人さん（Claude）に下書きを頼む
→ 新人さんが「いろはさんならこう返すかな」と3パターン書きます
⑥ もう1人（妻）のスマホに「下書きできたよ」と通知
→ もう1人はキッチン作業中でもスマホでチェックできる
⑦ もう1人が確認・編集して、OKしたものをお客さまへ送信
→ 「これで送って大丈夫」と判断したものだけを送ります
研修済みの新人スタッフって表現、めっちゃわかりやすい！
Claude は「いままでの口調」を覚えてくれているんです。第1弾の Skill をシステムプロンプトに渡しているので、絵文字の使い方や朝のあいさつまで再現してくれます🙂↕️
「新人スタッフ（AI）が下書き → 人間（私たち2人）が承認」というワークフローが、このアプリの一番大事な設計思想です。お客さまには絶対に自動返信しない。
これだけは絶対に崩せませんでした。
誤情報を勝手に送るリスクを取るなら、自動化なんてしないほうが100倍マシです。お客さまに「アレルギー：なし」と誤って返信したら、その瞬間に4年間積み上げた信頼が崩れます。
「下書きまで」って制限がめっちゃ大事よね！
▼ 開発期間と費用｜12時間・初期約800円＋月額約3,500円で作れた
正直、書き始める前に一番気になっていたのは「非エンジニアがやって、どれくらいの時間とお金がかかるのか」でした。結果はこちら。
⏱ 実作業時間の内訳（朝〜夜）
2026年5月7日（木）：道具を準備する日（約4時間）
・Mac に Claude Code が動く道具4つを入れる（Homebrew・Node.js・pnpm・wrangler）
・Cloudflare で「アプリを置く場所」を借りる
・LINE Developers で「お客さまLINE と通信する権利」をもらう
・GitHub に「コード保管庫（自分しか見られない）」を作る
2026年5月8日（金）AM：アプリの心臓部を作る日（約4時間）
・Cloudflare D1 でメッセージを記録するノートを作る
・LINE 公式アカウントから「新着があるよ」が届く仕組みを作る
・Claude（AI）に下書き3パターンを書いてもらう仕組みを作る
・店舗運営用 LINE に「📩新着あり」通知が飛ぶ仕組みを作る
・本番に公開して、自分で実際にテストメッセージを送る
2026年5月8日（金）PM：管理画面と鍵を作る日（約4時間）
・私たちが使う管理画面（一覧・詳細・編集・送信ボタン）を作る
・「私たち以外は管理画面に入れない」ようパスワードで鍵をかける
・運用開始前の最終調整
合計：実作業 約12時間（昼休み・お店の業務を除く）
⚠️ 「12時間」の前提と読者の現実値（先に正直に書きます）
「正味12時間」の定義：Mac の前で実際に作業していた時間。昼食・店舗業務（仕込み・接客・発送）・トイレ休憩は除いた実作業時間です。
大事な前提：このうちコードを書く部分（7〜8割）は Claude Code が代わりにやってくれました。私の役割は「お願い文を伝える」「エラーログをコピペで送り返す」「画面のスクショを送る」が中心です。
読者の方が同じことを試す場合：調査時間・試行錯誤・Claude Code とのやり取りを含めて 「半日〜2日程度（実時間 6〜16時間）」が現実的な見込みです。「12時間で完成する保証」ではない、ということだけは正直にお伝えしておきます。
※ 各STEPの所要時間や試行錯誤の詳細は、続編【実装編】で詳しく公開します。
💸 月額・初期費用の内訳
| 項目 | 月額・初期費用 |
|---|---|
| Claude Code Pro（既契約） | 月額 $22（既に契約済み・第1弾と同じ） |
| Claude API（Opus） | 初期チャージ $5・1返信案あたり 3〜5円 |
| Cloudflare（Workers + D1） | 無料枠で運用可（月10万リクエストまで） |
| LINE Messaging API | 無料枠で運用可（月200通まで） |
| GitHub（Private） | 無料 |
| Anthropic Console | 無料（API使用料のみ） |
→ 初期費用：実質 $5（約 ¥800）＋月額：$22 +α（API使用料）。Claude Code Pro が元から月22ドルかかっているので、「このアプリのために追加で払ったのは Claude API のチャージ ¥800 だけ」というのが正直なところです。
え、追加で800円だけ…？それで自動化アプリができたの…？
正直、私もここまで安く済むとは思ってませんでした😅 Cloudflare の無料枠は Workers が月10万リクエスト・D1（データベース）が月25億行読み取りまで無料なので、月数百件のメッセージくらいなら全部無料で動きます。
ちなみに「なぜ Cloudflare は無料で使わせてくれるの？」と気になりますよね。Cloudflare は世界中の大企業（GoogleやNetflixなど大規模サービス）から有料プランで収益を上げていて、個人や小規模事業者には無料枠を提供して将来のユーザーを増やす戦略を取っているからです。「太っ腹」というよりビジネス戦略上の無料。だから私たち個人事業主は安心して使わせてもらえます
「Claude Code Pro 月$22 は元が取れるか」という疑問は、第1弾の Skill を作った時点でほぼ「YES」になっていましたが、今回のアプリ開発で完全に確信に変わりました。
▼ 【準備STEP 1〜5】開発環境とアカウントを整える
ここからが本番。実装に入る前に、5つのSTEPでMacと各種アカウントを整えていきます。すべてClaude Codeに頼みながら進めたので、自分でコマンドを覚える必要はゼロでした。
STEP 1｜Macの開発ツールを Claude Code に入れてもらう
このアプリを動かすには、Mac に 4つの「土台」が必要でした。
- Homebrew（ホームブリュー）：Mac で開発ツールをまとめて管理する道具箱
- Node.js（ノードジェイエス）：今回のアプリの調理場（実行環境）
- pnpm（ピーエヌピーエム）：必要な部品（ライブラリ）を取り寄せる仕入れ係
- wrangler（ラングラー）：Cloudflare とやり取りする専用リモコン
名前だけで4つも覚えるの…？
大丈夫、覚える必要はないです。Claude Code に「これ4つ入れて」と頼めば、全部代わりにやってくれます🙂↕️
実際にClaude Codeへ送ったお願い文がこちら。
Mac の開発環境をセットアップしてください。
具体的には：
1. Homebrew を入れて（なければインストール手順を教えて）
2. Node.js（LTS版・推奨はv20以上）を入れて
3. pnpm（パッケージマネージャ）を入れて
4. Cloudflare の wrangler CLI を入れて
5. すべてバージョンを表示して、正しく入ったか確認
各コマンドの目的も教えてください。私は非エンジニアです。Claude Code は途中で詰まったときも「このコマンドを打ってください」と一つずつ教えてくれて、出力結果を貼ると次のステップを進めてくれます。まるで横にエンジニアの友達が座ってくれている感覚です。
最終的に、ターミナルでこんな表示が出れば成功です（数字は環境によって変わります）。
$ brew --version
Homebrew 4.x.x
$ node -v
v25.x.x
$ pnpm -v
10.x.x
$ wrangler --version
4.x.xターミナルとか怖いんだけど…
大丈夫です！私も最初そう思ってました（笑）でも今回のアプリ作成でターミナルに自分で打ったコマンドは、ほぼコピペだけです。Claude Code が「これ打ってください」と渡してくれるので、それを貼って Enter するだけ🙂↕️
STEP 2｜Cloudflare アカウント作成と支払い登録
次はアプリを動かす場所、Cloudflareのアカウント作成です。
- Cloudflare の公式サイト でアカウント作成（メアド＋パスワード）
- メール認証を完了
- Workers Free プランで動作確認可（必要に応じてあとで Paid $5/月にアップグレード）
個人事業主のお店運用なら、最初は無料プランで十分です。月数百件のメッセージなら無料枠を超えません。
STEP 3｜LINE Developers でチャネル設定（30分）
お客さま用 LINE 公式アカウントを Webhook に繋ぐため、LINE Developersで設定します。
- LINE Developers にログイン（既存の LINE アカウントで）
- 「Provider（運営元）」を確認 or 新規作成（お店名でOK）
- お店の公式 LINE アカウントに対応する Messaging API チャネルを選択
- 以下の3つの値をメモ（あとで使う）
・Channel ID（あなたのお店の番号札＝識別用の番号）
・Channel Secret（チャネルシークレット＝鍵を作るための合言葉）
・Channel Access Token（長期）＝実際にお店を操作する「鍵」そのもの
⚠️ アクセストークンの扱いに要注意
これら3つの値は「お店のLINEを操作できる鍵」です。絶対に：
- チャットや SNS には貼らない
- パスワード管理ツール（1Password等）に保管
- 万が一漏れたら即「再発行」（古いものが無効化される）
→ 私はここで実際に1度ヒヤッとしました。詳細は【実装編】の「7つの落とし穴」で正直に書きます💦
もう一つ、店舗運営用に「別のLINE公式アカウント」も新規作成します（無料）。これを「もう1人のスマホ」として使います。
LINE公式アカウント、2つ作るの…！？
はい。お客さま用と店舗運営用は分けたほうが混乱しないです。店舗運営用は無料プランで十分。夫婦2人で「友だち追加URL」から登録するだけ🙂↕️
STEP 4｜Anthropic Console で Claude API キー取得（10分）
AIに返信案を書かせるための「Claude APIキー」を取得します。
- Anthropic Console にログイン（または新規登録）
- 「API Keys」→「Create Key」
- キー名を「iroha-reply-app」などに設定
- 表示されたキーをパスワード管理ツールにメモ（再表示できないので注意）
- 初期チャージは $5 で十分（月数百件なら数か月もちます）
Claude Opus は入力 $15/1Mトークン、出力 $75/1Mトークンです。1返信案あたりだと 3〜5円くらい。月100件返信しても $1〜3 程度で済みました。
STEP 5｜GitHub Private リポジトリ作成（5分）
最後にコードの保管場所としてGitHubの「Private（自分だけ見られる）リポジトリ」を作ります。
- github.com/new にアクセス
- リポジトリ名：
iroha-reply-appなど - 「Private」を必ず選択（「Public」は世界中に公開されるので絶対NG）
- README は作らずに空のリポジトリで作成（Claude Code 側で作るので）
「Public」と「Private」の違い、初心者にはちょっと…
Public は世界中に公開・誰でもコードが見られる。Private は自分（と招待した人）だけが見られる。お店の業務アプリは絶対 Private。万が一 API キーがコードに混じっていても、外には漏れません🙂↕️
▼ 非エンジニアの私が踏んだ「環境構築の落とし穴」2つ
準備編で実際に詰まったポイントを正直に書きます。「Claude Codeに頼めば全部スムーズ」というわけではありませんでした。
落とし穴①｜ターミナルが「キーを押しても反応しない」事件
STEP 1 の Homebrew インストール中に、ターミナルにこんな表示が出ました。
Press RETURN/ENTER to continue or any other key to abort:「Enter キー押せばいいんだな」と思って何度押しても、反応せずに勝手に「abort（中止）」扱いになってしまう。
え、Enter 効かないの…？
原因はターミナルウィンドウがアクティブになっていないこと。コピペ操作の余韻で他のウィンドウが前面に来ていて、Enter キーがターミナルに届いていなかったみたい💦
解決策はシンプル。ターミナルウィンドウを1度クリックしてアクティブにしてから Enter を押す。これで進みました。
「非エンジニアあるある」というか、ターミナルに慣れている人は無意識にやっていることなんだと思います。私みたいな初心者は「ターミナル＝ウィンドウ全体が常にキー入力を受け付けている」と思い込んでいたので、ここで20分くらい止まりました。
落とし穴②｜pnpm のパスが通らない事件
STEP 1 の最後、wrangler を入れようとしたら：
ERR_PNPM_NO_GLOBAL_BIN_DIR
Unable to find the global bin directory
Run "pnpm setup" to create it automatically...「pnpm setup を実行してください」というメッセージ。Claude Code に出力をそのまま貼ったら、即座にこう返ってきました。
$ pnpm setup && source ~/.zshrc && pnpm install -g wranglerこれをコピペで実行したら一発で解決。「インストール直後は同じターミナルだとパスが反映されないことがある」という非エンジニアにはよく分からない落とし穴を、Claude Code が代わりに知っていてくれました。
「source ~/.zshrc」って何…
「インストールした道具をターミナルに『使えるよ』と教え直す」呪文だそうです。詳しい仕組みは私もよく分かってませんが、Claude Code が指示してくれたコマンドをコピペすれば動きます🙂↕️
💡 落とし穴体験から学んだこと
- 「Enter 効かない」はウィンドウクリックで解決することが多い
- エラーメッセージはそのまま Claude Code に貼るのが最速の解決法
- 「自分で覚える」必要はない。Claude Code が次の手を渡してくれる
- 非エンジニアが詰まる箇所は、誰もが踏む「あるある」の連続です
▼ まとめ｜準備編はここまで・実装編につづく
準備編で完了したのは：
- ✅ Mac の開発ツール4つ（Homebrew・Node.js・pnpm・wrangler）
- ✅ Cloudflare アカウント作成
- ✅ LINE Developers でお客さま用＋店舗運営用の2チャネル設定
- ✅ Anthropic Console で Claude API キー取得
- ✅ GitHub Private リポジトリ作成
ここまでで実作業 約4時間。あとはこのアプリの中身を作っていくだけです。
🎯 今日から始める3つのアクション（準備編）
- ① Cloudflare アカウントを作る（10分）：まずは無料枠でOK
- ② Claude Code Pro を契約する（5分）：相棒なしでは始まらない
- ③ 1時間だけターミナルを触ってみる：「
brew --version」を打つだけでも世界が変わります
次の【実装編】では何を扱うの？
実装編では5つのSTEPでアプリを動かす全工程＋落とし穴5つを全公開します。Webhook・Claude API・管理画面・お客さまへの送信まで。2026年5月中旬に公開予定です🙂↕️
📚 あわせて読みたい
※ 本記事にはアフィリエイトリンクを含みますが、紹介する判断軸・体感はすべて4年間の個人事業主としての本音です。広告収入とは無関係に、自分が納得した選択肢だけを書いています。
ご質問・ご相談はお気軽にどうぞ
お問い合わせはこちら
