AIでレスポンシブなメールレイアウトを自動生成する方法 MJML Connector

必要な構造、カラム、コンテンツを自然な言葉で伝えてください。エージェントがMJMLツールを使用してマークアップを書き、最終的なHTMLをレンダリングします。そのままメール配信サービスですぐに使える、レスポンシブ対応のコードが手に入ります。

1. 01

   レイアウトの解釈

   エージェントがカラム、セクション、テキストブロックの指示を読み取り、意図した構造を理解します。

   render_mjml
2. 02

   マークアップの記述

   理解した構造要件を、クリーンで有効なMJMLコードへと変換します。

   render_mjml
3. 03

   HTMLへの変換

   マークアップをレンダラーに通し、最終的なHTML出力を生成します。

   render_mjml
4. 04

   レスポンシブ性の検証

   生成されたコードがレスポンシブのルールに従っているかを確認し、モバイルとデスクトップの両方で正しく表示されるようにします。

   render_mjml

MJML Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_LwlmmoPeznMVTkYs7MAzFYiK3XjrkSp7oDHD4F4u/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — MJML capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "mjml-email-markup-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_LwlmmoPeznMVTkYs7MAzFYiK3XjrkSp7oDHD4F4u/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

一度接続するだけで、エージェントがメールコードの記述とレンダリングを行えるようになります。詳細な設定手順はコネクターのページで確認できます。

• 01

  AIは既存のHTMLファイルを編集できますか？

  いいえ。エージェントは指示に基づいて新しいMJMLおよびHTMLファイルを作成します。ローカルドライブ上の既存ファイルを直接書き換えることはありません。

• 02

  画像のホスティングもAIが行ってくれますか？

  いいえ。エージェントがマークアップに画像を含められるよう、プロンプト内で画像のURLを指定する必要があります。

• 03

  作成したメールはOutlookで正しく表示されますか？

  はい。エージェントはMJMLを使用してHTMLを生成します。MJMLはOutlook特有のレンダリングの問題に対処するように設計されています。

• 04

  AIがメールの送信まで代行してくれますか？

  いいえ。エージェントが生成するのはコードとレンダリング済みのHTMLのみです。メールを送信するには、生成されたコードをメール配信サービスにアップロードする必要があります。

• 05

  ブランドカラーはエージェントが決定しますか？

  いいえ。エージェントは、プロンプトで指定された色やスタイルの指示に従って作成します。

• MJMLについてさらに詳しく知りたいですか？ MJML Connectorの全機能を見る