AI × microCMS MCP で「ブランド品質を担保した LP 自動入稿システム」を構築した話

旅行アプリ「NEWT」のテーマ特化型LP制作を、microCMS × MCP × Claude × Next.js で自動化し、10時間→約3時間に短縮した事例です。スキーマとコンポーネントの1:1対応で崩れを防ぎ、MCPでAIが入稿まで自己完結させる仕組みと品質担保の工夫を紹介します。

Transcript

1. AI×microCMS MCP で 『ブランド品質を担保した LP ⾃動⼊稿システム』を構築した話 株式会社令和トラベル フロントエンドエンジニア ⾦園孔樹 © 2026 Reiwa Travel, Inc.
2. About Me ⾃⼰紹介 3 名前 ⾦園孔樹（Kanazono Koki） 所属 株式会社令和トラベル エンジニアリング部エンジニアリング2グループ SNS X：@koki_811 経歴 ‧法⼈営業2年 ‧エンジニア5年半 © 2026 Reiwa Travel, Inc.
3. Agenda 本⽇の流れ 1. はじめに - LP ⾃動⼊稿システムを作ることになった背景 2. 課題 - ⼿作業と「デザイン崩れ」の修正による⼯数 3. 打ち⼿ - microCMS × MCP × Next.js による仕組み 2 © 2026 Reiwa Travel, Inc.
5. Background エリア‧テーマ特化の LP を数多く展開 目的 カスタマーとの接点を増やすこと。 ‧エリア‧家族旅⾏‧ハネムーン‧世界遺産… テーマが細かいほど検索意図に刺さる。 ‧「速く‧たくさん‧⾼品質に」出したい。 家族旅⾏特集 サグラダファミリア特集 newt.net/theme/family newt.net/theme/sagrada-familia 出したい LP の数に、制作スピードが追いつかない 5 © 2026 Reiwa Travel, Inc.
6. Background 従来のテーマ特化 LP 制作フロー 1 2 3 4 企画 / 情報設計 Framer で実装 デザインチェック 修正 → リリース ビジネスサイド ビジネスサイド デザイナー チーム全体 構成‧訴求‧導線を 設計 テンプレを複製し⼿作 業で構築 「崩れ」や情報設計を 確認 指摘を反映して公開 特に Framerでの実装とデザインチェック‧修正に⼯数がかかっていた 7 © 2026 Reiwa Travel, Inc.
7. Background 従来のテーマ特化 LP 制作フロー 1 2 3 4 企画 / 情報設計 Framer で実装 デザインチェック 修正 → リリース ビジネスサイド ビジネスサイド デザイナー チーム全体 構成‧訴求‧導線を 設計 テンプレを複製し⼿作 業で構築 「崩れ」や情報設計を 確認 指摘を反映して公開 ↑の⼯数をもっと短縮したい microCMS MCP × AI × Next.jsで効率化できそう 6 © 2026 Reiwa Travel, Inc.
8. Context 前提：Framer とは 9 © 2026 Reiwa Travel, Inc.
9. Context 前提：Framer とは ノーコードの Web サイトビルダー • ⾃由なキャンバスに、ドラッグ&ドロップで直感的にデザインできる • デザイナー品質のサイトを⾼速に構築‧公開できる優れたツール • 弊社では、マーケター‧インターン‧デザイナーが主にテンプレート を使い、⼿作業でテーマ LP を構築していた 「⾃由なキャンバス」は強みであり、品質管理ではリスクにもなる 9 © 2026 Reiwa Travel, Inc.
10. Problem 従来フローの⼯数：LP 1本に「10時間以上」 10h+ 1 企画/情報設計 情報の優先順位‧導線などを検討 2h 2 Framer 実装 コンポーネント配置と⼿⼊稿 5h 3 デザインチェック 「崩れ」と情報設計の確認 2h 4 修正‧リリース 指摘対応して公開 1h ⾃由度の⾼さゆえの「デザイン崩れ」修正に、時間が溶けていた 10 © 2026 Reiwa Travel, Inc.
11. Solution 解決策の⽅針：2ステップに分けて進めた Step 1 — microCMS ⾃由なデザイン ↓ 構造化されたデータと コンポーネント デザイン崩れが起きる可能性をそもそも排除 Step 2 — microCMS MCP  Claude ⼈⼒での⼿⼊⼒ ↓ AI による⾃動⼊稿 ⼊稿という作業そのものをなくす microCMS MCP × AI ×Next.jsで「崩れ」をなくし、「作業」をなくす 11 © 2026 Reiwa Travel, Inc.
12. Detail 2 — microCMS MCP  Claude 前提：microCMS MCPとは ※MCP（Model Context Protocol） … AI が外部ツールと安全に接続するためのオープンプロトコル。Claude が microCMS を直接 操作できる。 スキーマの⾃律理解 ⼊稿まで⾃⼰完結 メンテナンスフリー 「今どんな⼊⼒項⽬があるか 取得したスキーマから⾃分で判断 フィールドを追加‧変更しても実 （API スキーマ）」を AI が⾃分で し、⼊稿（POST / PATCH）まで ⾏時に最新定義を読むため、プロ 取得‧理解する。 実⾏する。 ンプト修正は基本不要。 「こういうフィールドがある」「このフィールドに〇〇と⼊⼒して」など、⼈がわざわざ 指⽰しなくてもいい 13 © 2026 Reiwa Travel, Inc.
13. Detail 1  Structured Data 新フローの全体像 claudeにプロンプト⼊⼒ 例： microCMS（構造化データ） Next.js（事前に定義したコンポーネント群） firstView FirstView /> 表示 「スペイン世界遺産のテーマLPを作り たい。microCMS MCPでスキーマ確認 MCP API features Features /> した上で、内容考えて。」 「その内容で入稿して。」 faq plans Faq /> 未⼊稿 Plans /> 描画されない ↑基本触らない （※動的にデータ取得し LPが表示される） ⼈のUI操作をなくすことで、デザイン崩れの可能性を仕組みとして排除 12 © 2026 Reiwa Travel, Inc.
14. Detail 2  In Action ① プロンプトを投げる 1 STEP 1 / 6 LP 制作依頼テンプレに「対象 の国‧地域」「LP タイプ」 「Content ID」「狙うキーワー ド」などを書き込み、丸ごと Claude に貼るだけ。 エンジニアでなくても、テンプレを埋めて投げるだけ 14 © 2026 Reiwa Travel, Inc.
15. Detail 2  In Action ① AI が microCMS を⾃律操作 2 STEP 2 / 6 Claude が MCP 経由で microCMS のツール （microcms_get_content な ど）を⾃分で呼び出し、参照 LP の構成やスキーマを取得。 「どのツールを‧どう使うか」を AI が⾃分で判断する 15 © 2026 Reiwa Travel, Inc.
16. Detail 2  In Action ① 企画‧構成を提案 3 STEP 3 / 6 最新スキーマと参照 LP を踏ま え、ターゲット‧ペルソナから LP 構成案までを提案。 参照 LP とスキーマから、構成案まで⼀気に提案 16 © 2026 Reiwa Travel, Inc.
17. Detail 2  In Action ② 承認すると全セクション⾃動⽣成 4 STEP 4 / 6 提案に「OK」と返すだけで、 SEO 設定から Hero‧全セク ションまでを⼀気に⽣成。 承認ひとつで、SEO設定 と全セクションが⽣成される 17 © 2026 Reiwa Travel, Inc.
18. Detail 2  In Action ② microCMS に下書き⼊稿 5 STEP 5 / 6 ‧⽣成結果は microCMS に下書きと してMCPで⾃動⼊稿される。 ‧ページタイトルや説明⽂などのカ スタムフィールドが、そのまま構造化 データとして収まります。 ⽣成物が、そのまま microCMS の構造化データに 18 © 2026 Reiwa Travel, Inc.
19. Detail 2  In Action ② 公開された LP 6 STEP 6 / 6 ‧microCMS のデータを Next.js が描画し、ブランド品 質を保ったまま公開。 ‧プロンプト投⼊から、この公 開ページまで到達します。 プロンプトから、この公開ページまで⼀気通貫 19 © 2026 Reiwa Travel, Inc.
20. Quality ブランド品質を守る「3層のガードレール」 01 02 03 UI / 構造 ⽣成プロセス 公開前フロー microCMS のスキーマ制約とコン プロンプトに禁⽌事項を網羅し、 AI の提案を⼈間が承認し、プレ ポーネント固定で、崩れの余地を AI ⾃⾝に最終チェックとリライト ビュー環境で最終確認する。 物理的に排除。 をさせる。 表記ルールもプロンプトに内包：e.g.「NEWT」は半⾓⼤⽂字 / 「おトク」はカタカナ / 漢字⽐率は3割程度/etc… 誰が使っても、NEWT の品質でアウトプットされる 21 © 2026 Reiwa Travel, Inc.
21. Detail 3  New Flow まとめ：従来フロー → 新フローで何が変わったか 従来フロー Framer ⼿作業 企画 / 情報設計 Framer 実装 デザインチェック 修正‧リリース 2h 5h 2h 1h 計 10時間以上 新フロー microCMS × MCP 企画 / 情報設計 AIが⾃動⼊稿 デザインチェック 修正‧リリース 1h 5min 1h 1h 計 約3時間 ⼈⼿の実装⼯程がまるごと消え、リードタイム約70%削減 20 © 2026 Reiwa Travel, Inc.
22. ご清聴ありがとうございました 株式会社令和トラベル ⾦園孔樹 © 2026 Reiwa Travel, Inc.