AI がデザインした HTML ページを、本当に編集できる Elementor ページに変える公式の方法が登場しました。Elementor 4.3 とともにリリースされた Elementor MCP です。私たちはまっさらな WordPress サイトにこれを設定し、10 のセクションからなるランディングページを作り直し、途中でつまずいた点をすべて記録しました。この記事はその記録です。MCP とは何か、どう接続するか、うまくいく作業の流れ、そして始める前に知っておくと役立つ細かな点をまとめています。
Elementor MCP とは
MCP（Model Context Protocol）は、AI ツールが他のソフトウェアの機能を呼び出すための標準的な仕組みです。Elementor MCP は、Elementor のページ作成機能を、すでに使っている AI ツール——Claude Code、Claude Desktop、Codex、Cursor、またはその他の MCP クライアント——に公開します。これによりアシスタントは、ページを作成し、要素を追加してスタイルを設定し、グローバルクラスや変数を管理し、その結果をあなた自身のサイトに保存できます。手作業での貼り付けやインポートは一切ありません。AI が Elementor の中で直接組み立て、作られたものはすべて通常の要素なので、あとからパネルで選択して編集できます。
使われるのは Elementor の新しい atomic 要素です。フレックスボックス、Div ブロック、グリッドの各コンテナ、そして見出し、段落、ボタン、画像、SVG、タブ、アコーディオンなどで、スタイルはウィジェットごとの設定ではなく、グローバルクラスと変数で指定します。これは始める前に理解しておくべき最も大切な点です。必要な環境と作業の流れの両方を左右するからです。
必要なもの
- WordPress 6.8 以降と Elementor 4.3 以降。接続と作成は無料版のプラグインだけで行えます。Elementor Pro と無料の Angie プラグインを入れると、フォーム、テーマテンプレート、カスタムウィジェットなどの機能が加わります。
- Atomic Editor の有効化。最初から Elementor 4 でインストールしたサイトでは、たいてい有効になっています。古いバージョンから 4.3 に更新したサイトでは無効の状態から始まり、Elementor → 設定 → Atomic Editor で有効にするまで、MCP の作成ツールはロックされたままです。
- MCP に対応した AI ツール。Elementor 自体は MCP に料金を請求しません。かかるのは、その作業に対して AI ツールが請求する料金です。
接続はおよそ 1 分
- WordPress で Elementor → Elementor MCP を開き、Enable MCP access をクリックします。
- 使うツールを選びます：Claude Code、Claude Desktop、Codex、Cursor、または Other。
- サイト用のアプリケーションパスワードが作成されることを確認するチェックボックスにチェックを入れます。
- Generate Prompt をクリックしてプロンプトをコピーし、AI ツールに貼り付けます。接続の設定はそれで完了します。ツールによってはその後に再起動が必要です。
この接続は、作成した WordPress ユーザーの権限で動作します。つまり編集者アカウントなら、編集者にできることしかできません。個々の接続は ユーザー → プロフィール → アプリケーションパスワード で取り消せます。サイト全体で MCP を止めたいときは、同じ Elementor の画面から無効にできます。
うまくいく作業の流れ
Elementor 自身の解説と私たちのテストは、同じ作業順序を示しています。大切なのは、各ステップが次のステップに確かな手本を渡すことです。そうすれば AI は自分で判断をひねり出すのではなく、すでに決まったことをなぞるだけになります。最初から最後まで通して見たい場合は、このワークフローを扱った Elementor のウェビナー（約 45 分、YouTube）で、エディターチームのプロダクトマネージャーがこの方法で 1 ページを丸ごと作る様子を見られます。
- まず見た目を固める。手早く作った画像で方向性を探り、そのうえで AI にページを素の HTML と CSS で書いてもらいます。HTML は変更が安く済むので、レイアウト、文章、配色はここで繰り返し調整します。
- 画像をアップロードする。作り始める前にページで使う画像をメディアライブラリに入れておき、AI が間に合わせではなく実物を参照できるようにします。
- デザインシステムを作る。AI に HTML を読ませ、配色とフォントをグローバル変数に、繰り返し使うスタイル——ボタン、セクション見出し、カード——をグローバルクラスにしてもらいます。数は絞りましょう。Elementor 自身のデモでは、最初に 100 を超えるクラスが作られ、汎用的なおよそ 60 個に整理されました。
- セクションは 1 つずつ作る。「うちのクラスを使って、HTML どおりに料金セクションを作って」のような短い指示で十分です。小さく進めるほど確認しやすく、やり直しも安く済みます。
- セクションごとに確認する。次に進む前に、エディターとモバイル幅の両方で見ておきます。Elementor チームもはっきり言っているとおり、仕上げには人の手が必要です。彼らのデモでも、モバイルで画像を 1 枚調整し、タブ付きのヒーローに微調整が要りました。
テストでわかった 7 つのこと
新規インストールした WordPress に Elementor 4.3.5 を入れ、Pro も Angie も使わずに、ヒーロー、ロゴの帯、6 枚の機能カード、数値、お客様の声、3 つの料金プラン、FAQ、CTA の帯、フッターからなるランディングページを作り直しました。仕上がりは元のデザインにとても近いものでした。時間を取られたのは次の点です。
- SVG アイコンのアップロードには設定が 1 つ必要。SVG 要素はメディアライブラリにあるアイコンしか表示できませんが、WordPress は既定で SVG のアップロードを拒否します。Elementor の Enable Unfiltered File Uploads を有効にし、Elementor のメディア選択画面からアップロードしてください。
- 線画のアイコンが塗りつぶされることがある。SVG 要素はアイコンの塗りを現在の文字色に設定するため、線だけのアイコン——AI が作るページの多くがこのスタイルです——が塗りつぶされた形で表示されます。SVG 要素の文字色を透明にすると、線画に戻りました。
- クラスの順番が優先順位。2 つのグローバルクラスが同じプロパティを設定している場合、リストの上にあるほうが勝ちます。クラスは作成順に並ぶので、基本のボタンクラスのあとに作った小さいボタン用のクラスは、小さいパディングが効かなくなってしまいます。私たちは作り始める前に、修飾用のクラスを基本のクラスより上に移すよう AI に頼みました。
- 黙って捨てられるスタイルに注意。対応していない CSS の多くは、ツールの応答に警告として報告されます——辺ごとの枠線の色、サイズ指定のある放射状グラデーション、行方向だけ別に指定したギャップなどです。しかし、警告なしに捨てられたものもありました。見出しの中で強調した語句の色が消え、価格の中の span に向けた入れ子のルールも反映されませんでした。これを見つけるには、応答だけでなくページそのものを見る必要があります。
- テキスト要素のタグは決まっている。段落要素が受け付けるのは
pかspanだけなので、<blockquote>で書いた引用は通常の段落になります。 - アコーディオンの開閉マークは前もって考えておく。私たちのテストでは、アイコンの枠を空にしても、まったく書かなくても、FAQ の開閉マークは表示されませんでした。ツール自身の説明によるとこの枠には SVG 要素が入るので、アップロードしたアイコンを指定するか、あとからエディターで追加してください。
- プレビューリンクで自己チェックする。MCP は現在の下書きの一時的なプレビュー URL を作れます。セクションを作るたびに AI にそれを見てもらうのが、問題を早く見つけるいちばん安上がりな方法です。
規模の目安として、ページ全体でおよそ 30 回のツール呼び出しがかかりました。そのうち 2 回は私たち自身のミス（要素名の重複と、段落要素が受け付けないタグ）で失敗し、送り直しが必要でした。動作の遅いローカルのテストサーバー上で、アシスタントが作業した時間はおよそ 15 分です。また新しいセッションは毎回、MCP が提供するツールの一覧を読むところから始まり、これがかなりの分量になるため、短く範囲を絞ったセッションのほうが 1 回の長いセッションより経済的です。
もっとシンプルな方法が合う場合
すでに AI のコーディングツールを使っていて、きちんとしたデザインシステムの上にページを作りたいなら、MCP がいちばん高機能な選択肢です。既存のページにブロックを 1 つ貼り付けたいだけの場合、AI ツールを使わない場合、あるいはクラシックエディターのままのサイトで使いたい場合は、クラシックウィジェットを出力するコンバーターのほうがシンプルです。このサイトのコンバーターがまさにそれで、ブラウザーの中だけで動作します。両者は組み合わせることもできます。AI ツールで仕上げた HTML は、どちらの方法でもそのまま同じ入力になります。
まとめ
HTML でデザインし、素材をアップロードし、小さなデザインシステムを作ってから、MCP にセクションごとに作らせ、そのたびに確認します。Elementor MCP は良い HTML デザインを、ネイティブで編集できる Elementor の構造に変えてくれます。結果がきれいに仕上がるかどうかは、準備にかけた時間で決まります。
このガイドは独自に作成したもので、Elementor とは関係ありません。2026 年 10 月に Elementor 4.3.5 でテストした内容に基づいており、今後のバージョンでは細部が変わる可能性があります。