# UTAGEもプロラインも使わず、Codex／ClaudeだけでLINE導線を作る方法

以前、YouTuberのマーケティング支援をしていた立場から言うと、LINEマーケで一番大変なのは「ツールの操作」より、導線を考えて実装し、改善し続けることです。

今はAIとPCがあれば、専用ツールを契約しなくても、リッチメニュー、自動返信、診断、フォーム、決済、会員ページまで自分で作れます。

今回は、実際に僕が組んだ導線を例に、初心者でも再現できる順番でまとめます。

---

## 完成する導線

**友だち追加 → リッチメニュー → 自動トーク → 食事プランナー／コミュニティ紹介／肉食マップ／レシピ集／無料面談 → 審査フォーム → 回答確認 → Stripe決済**

さらに、コミュニティ人数やレシピ数をAPIで取得し、LINEカードとサイトへ自動反映できます。

大切なのは、最初から全部作ろうとしないことです。まず「1つのボタンを押すと、1つの回答が返る」状態を作り、あとから育てます。

---

## STEP 1｜AIが作業できる環境をつくる

![AIの作業環境](01-ai-setup.png)

用意するものは次の5つです。

1. **CodexまたはClaude Code**：設計、実装、修正、テストを担当
2. **GitHub**：コードと変更履歴を保存
3. **LINE公式アカウント**：ユーザーとの接点
4. **Cloudflare**：Webhookとサイトを公開
5. **Stripe**：決済が必要な場合のみ

Codexでは、設定画面からGitHubなどのMCP・コネクターを接続します。Claude CodeならMCP設定ファイルへ利用するサーバーを追加します。

最初にAIへ、こう伝えれば大丈夫です。

> LINE公式アカウントの自動導線を作りたいです。GitHubで管理し、Cloudflare WorkersでWebhook、Cloudflare Pagesでフォームを公開します。初心者向けに、必要な設定を1つずつ確認しながら進めてください。

### 安全のためのルール

チャネルアクセストークンやAPIキーは、チャットやGitHubへ直接貼りません。Cloudflareの **Secrets** やローカルの環境変数へ保存し、コードから読み込みます。

---

## STEP 2｜GitHubにプロジェクトの土台を作る

![GitHubで土台を作る](02-github.png)

GitHubで空のリポジトリを作り、そのURLをCodexへ渡します。

> このリポジトリをクローンして、LINE Webhook用のプロジェクトを作って。READMEにセットアップ手順も書いて。

すでにPC内にコードがあるなら、Codexでそのフォルダをプロジェクトとして開き、そこからチャットを作ればOKです。

AIに任せられる作業は、ファイル作成、依存関係の設定、テスト、コミット、デプロイ用設定まで。GitHubを使う理由は、失敗しても前の状態へ戻せるからです。

---

## STEP 3｜LINE Messaging APIをつなぐ

![LINE Messaging API](03-line-api.png)

LINE Developersでチャネルを作り、Messaging APIを有効にします。その後、Cloudflare WorkerのURLをWebhook URLへ設定します。

AIへ伝える内容はシンプルです。

> LINE Messaging APIのWebhookをCloudflare Workersで作って。署名検証を入れて、受信したメッセージに返信できるようにして。トークンはSecretから読み込んで。

CodexがブラウザやMCP、CLIを操作できる環境なら、管理画面の設定や検証も進められます。ただし、アカウント作成、権限付与、秘密情報の発行は、自分で内容を確認して実行するのが安全です。

最低限テストするのは次の3つです。

- 友だち追加時に最初の案内が届く
- メニューの文字を送ると正しい返答が届く
- 同じイベントが再送されても二重送信されない

---

## STEP 4｜売る前に「選べる導線」を作る

![LINEマーケティング導線](04-funnel.png)

今回の導線では、リッチメニューを5つに分けました。

- **01 食事プランナー**：無料で価値を体験してもらう
- **02 コミュニティ**：活動内容と参加メリットを見せる
- **03 肉食マップ**：参加後の具体的な体験を見せる
- **04 無料面談**：興味が強い人だけ審査フォームへ送る
- **05 肉食レシピ**：一部を無料公開し、続きはコミュニティへ案内

AIへの依頼例です。

> 5つのメニューごとにLINE Flex Messageのカードを作って。画像、説明、メインCTA、白枠の補助CTAを入れて。ボタンを押したらすぐ反応し、追加直後でもカードが既存メッセージに重ならないようにして。

ポイントは、いきなり購入ボタンだけを置かないことです。無料コンテンツで理解を深めてもらい、「もっと見たい」と思った場所にCTAを置きます。

---

## STEP 5｜フォームとコンテンツサイトを公開する

![Cloudflare Pagesで公開](05-cloudflare.png)

Cloudflare Pagesをつなぐと、AIが作ったHTML・CSS・JavaScriptをすぐ公開できます。今回作ったのは次のページです。

- 無料面談の審査フォーム
- 未入力項目の下へ案内を出す入力エラーUI
- 回答内容の確認ページ
- 横スワイプ式の肉食レシピ集
- 食事プランナー

依頼例：

> スマホ優先で審査フォームを作って。背景は白、入力カードは黒。未入力で送信したら、その項目の直下に案内を出して最初の未入力欄まで移動して。回答後は内容確認ページを表示して。

CloudflareはWorkersでAPI、Pagesでサイトを公開できます。小さなLPや診断ページを用途ごとに増やせますが、無料枠や各プランの上限は確認してください。

Stripe CheckoutはStripe側で読み込むため、回線が遅い環境で表示速度を完全には制御できません。LINE側ではボタンを押した瞬間に反応を返し、決済ページへ迷わず移動できる設計にします。

---

## STEP 6｜人数や投稿数を自動同期する

「現在コミュニティに212人参加中」「レシピ107件」のような数字を、毎回手作業で変更する必要はありません。

1つの統計APIに数字をまとめ、LINEカードとWebサイトが同じAPIを見る構成にします。

> memberCountとrecipeCountを返すAPIを作って。LINEカードとサイトの両方で利用し、取得失敗時は前回値を表示して。アクセス過多を防ぐため3日キャッシュにして。

表示は目的に合わせて丸められます。たとえば212人なら「210人以上」、116レシピなら「110+」です。

定期更新のたびにCodexの新しいチャットを作る必要はありません。Cloudflareのスケジュール処理とキャッシュで自動化します。

---

## STEP 7｜改善は日本語で依頼する

![日本語で改善する](06-improve.png)

一度土台ができれば、修正は日本語で伝えられます。

- 「カード上部の画像だけ、この写真に差し替えて」
- 「赤を薄いピンクとオレンジのグラデーションに」
- 「このボタンを前の白枠デザインへ戻して」
- 「追加直後も一番下まで自動スクロールして」
- 「変更後にテストして、そのまま本番へ反映して」

ここで大事なのは、**変更箇所と、触ってほしくない箇所をセットで伝えること**です。

> 05のカード画像だけ変更。それ以外の文言・ボタン・サイトは変更しない。

この伝え方だけで、意図しない変更がかなり減ります。

---

## 初心者が最初に作るなら、この順番

1. LINEで「こんにちは」に返信する
2. リッチメニューを1つ作る
3. 無料コンテンツを1ページ公開する
4. LINEカードからそのページへつなぐ
5. Stripeの決済リンクをつなぐ
6. 審査フォームや人数同期を追加する

最初の完成ラインは「友だち追加 → 価値提供 → CTA」の3点だけで十分です。

AIを使う一番のメリットは、コードを書かなくていいことだけではありません。思いついた改善を、その日のうちに試せることです。

以前は外注や専用ツールが必要だった導線も、今は自分のPCで作り、数字を見ながら育てられます。YouTubeでもLINEでも、最後に成果を分けるのは派手な機能ではなく、ユーザーが迷わず次へ進める小さな改善の積み重ねです。

保存して、まずは「1ボタン・1返信」から作ってみてください。