メルカリ（メルペイ）のフロントエンドチームが、AIエージェントと対話しながらランディングページ（LP、商品やサービスを紹介する1枚ページ）を作る社内エディタ「EGP Code」を内製したことを技術ブログで公開した。見た目の生成だけでなく社内システム連携と公開前の検証まで踏み込み、すでに10件以上の本番LPで使われている。
メルカリ（メルペイ）のフロントエンドチームが、AIエージェントと対話してLP（1枚ページ）を作る社内エディタ「EGP Code」を内製した理由を、2026年6月3日に技術ブログで公開した。記事は「Merpay & Mercoin Tech Openness Month 2026」の2日目として出ている。
従来のドラッグ＆ドロップ型「EGP Pages」は人が手で組む前提のJSON構造で、AIに編集を任せると独自記法の説明でプロンプトが長くなり、状態や条件分岐の管理が分散した。さらに素のHTMLの約2倍のトークンを消費し、公開前にAI編集結果を機械的に検証する手段もなかった。
そこで静的な部分を普通のHTML、動的な部分だけを少数のWeb部品（`egp-*`要素）に閉じ込め、スタイルはTailwind CSSに統一した。外部ライブラリ依存を最小化しサプライチェーンリスクも抑えている。すでに10件以上の本番LPで稼働しており、見た目生成にとどまらず社内連携と品質保証まで踏み込んだ点が、AIにページ編集を任せたい企業の設計判断の参考になる。
この変化で何が要点か。図解と出典つきで一目で。
構造化された事実を最初に。誰が何をいつどこでなぜどのように。
同チームはマーケターやプロダクト責任者（PM）向けの社内ツール群「エンゲージメント基盤（Engagement Platform、EGP）」を開発している。以前は部品をドラッグ＆ドロップで組み合わせる見たまま編集型エディタ「EGP Pages」を使っていたが、これは人が手で組み立てる前提のデータ構造（JSON）だったため、AIに直接編集を任せると独自記法の説明でプロンプトが長くなり、状態や条件の管理が複数箇所に分散して扱いにくかった。さらにその構造は素のHTMLの約2倍のトークンを消費し、編集のたびに費用がかさんだほか、公開前にAIの編集結果を機械的に検証する手段もなかった。そこで表現の土台をHTMLベースに作り直すことを選び、新たに「EGP Code」を構築した。
v0やGemini Canvas、Figma MakeなどAIでUIを作るツールは多数あるが、見た目を作れても本番LPとして運用するには社内API連携や品質保証といった企業固有の課題が残る。EGP Codeはその隙間を埋める実例であり、AIにページ編集を任せたい企業が「人にもAIにも馴染むHTMLを土台にする」「動的な部分だけを少数のWeb部品に閉じ込める」という設計判断を参考にできる点で意思決定に効く。
メルペイのフロントエンドエンジニア @mattsuu が、AIと対話してLP（商品やサービスを紹介する1枚ページ）を作る社内エディタ「EGP Code」を内製した理由を公開した。記事は「Merpay & Mercoin Tech Openness Month 2026」の2日目として出ている。
こんにちは。メルペイのフロントエンドエンジニアの @mattsuu です。この記事は「Merpay & Mercoin Tech Openness Month 2026」の 2 日目です。
同チームはマーケターやプロダクト責任者（PM）向けの社内ツール群「エンゲージメント基盤（EGP）」を開発している。以前は部品をドラッグ＆ドロップで組む見たまま編集型の「EGP Pages」を使っていたが、これは人が手で組み立てる前提のデータ構造（JSON）だった。AIに直接編集を任せると、独自記法の説明でプロンプトが長くなり、状態や条件分岐の管理が複数箇所に分散して扱いにくかった。さらにその構造は素のHTMLの約2倍のトークンを消費し、編集のたびに費用がかさんだ。公開前にAIの編集結果を機械的に検証する手段もなかった。そこで表現の土台をHTMLベースに作り直し、新たにEGP Codeを構築した。
EGP Codeの核は、ページの大半を占める静的な部分を普通のHTMLで書き、状態管理や条件分岐といった動的な部分だけを少数のWeb部品（`egp-*`という名前の独自要素）に閉じ込めた点にある。動的なロジックが部品の中に集約されるため、AIが触る範囲が明確になり、独自記法を覚える負担が減る。
見た目のスタイル付けには Tailwind CSS（あらかじめ用意された短い指定をHTMLに直接書いてデザインを当てる手法）を採用した。これにより、人もAIも追加の作法を覚えずに書ける。さらに外部ライブラリへの依存を最小化したことで、npm（JavaScriptの部品配布の仕組み）経由で外部パッケージが起点になって安全性が損なわれるリスク（サプライチェーンリスク）を抑える利点も得られる。AI生成コードを本番に載せる工程で、依存を増やさず検証しやすい土台を選んだ判断だ。
v0、Gemini Canvas、Figma Make、そしてAnthropicが投入した「Claude Design」など、AIで見た目を作るツールは増えている。だが見た目を作れても、本番LPとして運用するには社内API連携や公開前の品質保証という企業固有の課題が残る。
AIにページ編集を任せたい国内事業会社は、メルカリの「人にもAIにも馴染むHTMLを土台にする」「動的な部分だけ少数の部品に閉じ込める」という設計判断を、すでに10件以上の本番LPで動く実例として参考にできる。一方、独自記法やJSON構造に依存した見たまま編集型エディタは、AI編集時にトークン消費が膨らみ検証手段も乏しいという弱点が、メルカリの乗り換え理由として可視化された。見た目生成だけで止まる汎用ツール頼みの運用は、社内連携と品質保証まで埋めない限り本番投入の工程で詰まる構図も示された。
立場別、明日から動ける一手。
メルカリ技術ブログでEGP Codeが動的部分をWeb部品に閉じ込めた設計の境界線を確認する。
AIに本番ページ編集を任せる前提で、外注UI生成ツールと自社HTML土台のどちらが社内API連携と品質保証を満たすかを比較する。
自社の既存エディタでAIに編集させたときのトークン消費量を、素のHTMLと比べて測る。
「AIで見た目を作れるツールは多いが本番運用は別問題」という課題意識に対し、メルカリが土台を普通のHTMLに作り直した判断が技術者の関心を集めている。
公式発表と各所の反応から編集部が要約した主な論点です。個別のX投稿そのものは下部のセクションに表示されます。
「AIで見た目を作れるツールは多いが本番運用は別問題」
論点は、ドラッグ＆ドロップ型のJSON構造が素のHTMLの約2倍のトークンを消費しAI編集に不向きだった点と、動的部分だけをegp-*というWeb部品に閉じ込めTailwind CSSでスタイルを統一した設計の妥当性。すでに10件以上の本番LPで稼働している実績や、外部ライブラリ依存を抑えてサプライチェーンリスクを下げた狙いも、自社で同様の課題を抱える開発現場の参考点として注目されている。
※トレンド検出時刻付近の人気投稿を表示
