author
authorDisplayName
Koki Kanazono
category
AI
frontend
mainImage
published
published
publishedAt
Feb 3, 2026
slug
generate-lp
tags
next.js
AI
web
LLM
こんにちは！令和トラベルでエンジニアをしている zono です。
旅行アプリ『NEWT（ニュート）』では、カスタマーに「かんたん・おトク・えらべる・あんしん」な旅行体験を届けるため、エリアやテーマ（家族旅行、ハネムーンなど）に特化したLPを展開しています。
しかし、その裏側にあるLP制作フローは、非常に属人的かつ重い工数に支えられていました。今回は、そんなLP制作の「負」を、Next.js + microCMS + MCP（Model Context Protocol）+ Claude というスタックで、属人性をなくして高品質なLPを迅速に量産できる仕組みに変えた舞台裏をお話しします。
背景：1本のLPリリースに「10時間以上」を要していた旧フロー
これまでは、マーケティングチームやインターン生が中心となり、ノーコードツールの「Framer」を使って手作業でLPを構築していました。当時のフローは以下の通りです。
かつての制作フロー
- IA設計 (2時間):
- コンテンツの優先順位決定
- カスタマージャーニーを考慮した情報配置
- セクション間の論理的な流れの構築
Claudeなどを使って、以下のような情報設計（IA）を詳細に行います。
- Framerへの実装 (5時間):
テンプレートを使い、手作業でコンポーネントを配置し、一つ一つテキストや画像を入稿していきます。
- デザイン・IAチェック (2時間):
デザイナーによる「崩れ」や「情報設計」の細かなチェックを行います。
- 修正・リリース (1時間):
指摘事項を修正し、ようやくリリース。
一見モダンですが、Framerの自由度が高すぎるゆえの「デザイン崩れ」の修正と、デザイナーによるチェックに膨大な時間が溶けていました。結果として、LP1本に10時間以上かかっており、ビジネス上の大きなボトルネックとなっていました。そこで、これらの課題を以下の2stepの仕組み化によって根本的に解決することにしました。
- 「自由なデザイン」から「構造化されたデータ」に移行
→ 操作ミスによるデザイン崩れが起きる可能性の排除
- 「人力での手入力」から「AIによる自動入稿」に移行
→ 作業の工数自体を大幅削減
詳しく解説していきます。
解決への Step 1：「自由なデザイン」から「構造化されたデータ」へ
まず、プラットフォームを Framer から microCMS + Next.js による動的生成へと移行し、土台を「自由なキャンバス」から「構造化されたデータ」へと作り変えました。
ヘッドレスCMS「microCMS」の採用
microCMS は、コンテンツを API 経由で操作できる日本発のヘッドレスCMSです。
数多くあるヘッドレスCMSの中でmicroCMSを選定した理由は、すでに社内で利用している実績がありナレッジが豊富にあったためです。また、Next.js などのモダンなフロントエンドと非常に相性が良く、今回の「構造化データによる入稿」の土台となりました。
デザインの「崩壊」をエンジニアリングで防ぐ
自由すぎるキャンバスを廃止し、あらかじめ定義された「カスタムフィールド」にデータを入れる形式に絞ることで、操作ミスによる崩れを物理的に排除しました。
- メリット: フィールドを埋めるだけなのでレイアウトが崩れない。
- 品質の安定: すべての要素がコンポーネント化され、デザイナーの「崩れチェック」の手間が激減。
これにより「箱」は完成しましたが、依然として「膨大なデータの入稿作業」という手作業の苦しみは残っています。
解決への Step 2：AIによる「自律型入稿エージェント」の構築
次に、Step 1 で整えた「型」に対し、Claude × microCMS MCP を連携させ、入稿作業そのものを自動化しました。ここで今回の主役である「MCP」が登場します。
microCMS MCP（Model Context Protocol）とは？
MCP は Anthropic 社が提唱した、AIが外部ツールと安全に接続するためのオープンプロトコルです。これを導入することで、Claude は以下のことが可能になります。
- スキーマの自律理解: AI が自ら「今どんな入力項目があるか（APIスキーマ）」を取得・理解します。
- 動的なツール利用: エンジニアがプロンプトで「このフィールドにこれを入れて」と教える必要はありません。AI が取得したスキーマから自分で判断し、入稿（POST/PATCH）まで完結させます。
- メンテナンスフリー: フィールドを追加・変更しても、AI が実行時に最新定義を読み込むため、プロンプトの修正は基本的には不要です。
結果：完成した「新しい制作フロー」
これらの仕組みを組み合わせた結果、人間が「作業」を行うのではなく、AIの「監修」を行う形にシフトしました。
新しい制作フロー
実際の操作イメージ
制作担当者は、専用のプロンプトテンプレートに「国・地域」「キーワード」などを入力し、Claude に投げるだけです。
- プロンプト入力・調整 (1時間): 制作担当者が、専用のテンプレートに「国・地域」「ターゲット」「狙いたいキーワード」などを入力し、Claudeに投げます。
- AIによる自律入稿 (5分): ClaudeがmicroCMS MCPを介して最新のスキーマを把握し、コンテンツの生成から入稿までを自律的に実行します。
- プレビュー確認・調整 (1時間): microCMS上に生成された「下書き」を、microCMSのプレビュー画面で確認します。微調整が必要な場合も、Claudeにチャットで指示を出すだけで反映されます。
- リリース (1時間): 最終的な社内チェックを経て、公開ボタンを押して完了です
ブランド品質を守るためのプロンプト設計の詳細
AIに自動入稿を任せるにあたって、私たちが特に工夫したのが「ブランド品質の維持とガードレールの構築」です。
NEWTが定義する「ブランド品質」
単に情報が正しいだけでなく、以下のような極めて細かな基準をプロンプトに内包しています。
- 表記の厳格な統一: 「NEWT」は半角大文字、「おトク」はカタカナ指定。安価表現（格安・激安等）の禁止など。
- 読みやすさの数値化: 漢字比率は3割程度に抑制（5文字以上の連続禁止）。英数字は半角。
- 情報の構造: UXに直結するセクション順序（家族旅行なら年齢別おすすめ表を必須にする等）の指定。
品質を鉄壁にする「3層のガードレール」
これらのルールをAIに守らせるため、3つのレイヤーでガードレールを構築しました。
- UI/構造によるガードレール: microCMSのスキーマ制約とフロントエンドのコンポーネント固定により、デザイン崩れの余地を物理的に排除。
- 生成プロセスによるガードレール: プロンプトに禁止事項を網羅し、AI自身に最終チェックとリライトを行わせるステップを挿入。
- 公開前フローによるガードレール: AIの提案を人間が承認し、さらにプレビュー環境で最終確認を行うフロー。
実現したこと：10時間から3時間。そして「事業インパクト」へ
このシステムにより、社内に以下の大きなレバレッジがかかりました。
- 属人性の排除 マーケターやインターン生は、技術的な知識は不要です。「ブランド品質を担保する厳格なプロンプト」を使って、誰でも高品質な LP を量産できるようになりました。
- リードタイムの劇的な短縮 これまでLP制作全体で 10時間以上（実質数日）かかっていた作業が、3時間程度で完了 するようになりました。
結論
今回のプロジェクトを通じて、LP1本あたりの制作時間が圧倒的に短縮されました。
運用はまだ始まったばかりのため、具体的な数値の推移に関する検証はこれからですが、制作のリードタイムが大幅に短縮されたことで、カスタマーとの接点を爆発的に増やす土台が整いました。
これまで工数の制約で断念していた細かなテーマの LP も、今では即座に形にできます。
浮いた時間で、私たちはより高度で重要な価値提供に向き合うことができます。これからもエンジニアリングによってビジネスを加速させ、一人でも多くのカスタマーに素晴らしい旅行体験を届けるための挑戦を続けていきたいと思います。
今後の課題と展望
自動生成の基盤は整いましたが、理想とする「完全自律型エージェント」に向けては、まだ解決すべき課題があります。
- 実データ（ツアー・ホテルID）の動的紐付け: 内部データと連携し、AI が最適な実在リソースを自動で選定・取得できる仕組み。
- 自律的な構成案への進化: 既存LPを参照せずとも、AI がテーマごとに最適な構成をゼロから考え抜き、クオリティを向上させていける「思考するプロンプト」へのブラッシュアップ。
- コンポーネント追加の非属人化: 非エンジニアでも直感的にパーツを追加し、システムを拡張していけるセルフサービス化。
これからも AI エージェント を実務に徹底的に落とし込み、組織全体の DX をアップデートし続けていきます。
令和トラベルでは一緒に働く仲間を募集しています
この記事を読んで会社やプロダクトについて興味を持ってくれた方は、ぜひご連絡お待ちしています！お気軽にお問い合わせください！
フランクに話だけでも聞きたいという方は、カジュアル面談も実施できますので、お気軽にお声がけください。
そのほか、毎月開催している技術発信イベントについては、connpass にてメンバー登録して最新情報をお見逃しなく！
それでは次回のブログもお楽しみに！Have a nice trip ✈️
