非エンジニアPdMがCursorでHTMLメルマガテンプレートを実装し、Pardotに反映した話
この記事は スターフェスティバルアドベントカレンダー2025 の18日目の記事です。
こんにちは。スターフェスティバルのkaneyasuです。
今回は、非エンジニアである私が、Cursor（AIコードエディタ）を活用してHTMLメルマガの新規テンプレートを実装し、Pardotに反映した話を書いていきます。
「エンジニアに頼まずに自分で実装したい」「AIでHTMLを生成してPardotに反映したいけど、どうやって進めればいいかわからない」という方の参考になればと思います。
※本記事では、旧名称である「Pardot（現：Salesforce Account Engagement）」という呼称を使用しています。
背景：なぜ非エンジニアが実装することになったのか
ここ半年で社内でAIの活用が浸透しつつあり、PdMも日々の業務にAIを使って対応することが増えてきました。AIを通して自分自身でやれることが急激に増えてきた中、「メルマガこそAIでもできそう」という声もあり、普段Cursorを使うことが多いので、HTMLメルマガテンプレートの実装もCursorでやってみようと思いました。
全体の流れ
今回の取り組みは、以下の流れで進めました：
デザイナーによるデザイン作成: まずは1つのテンプレートデザインをFigmaで作成してもらう
CursorでのHTML生成: FigmaのデザインをCursorに読み込ませてHTML化
Pardotへの反映: 作成したHTMLをPardotのテンプレートに反映
テスト配信と表示確認: 各メールクライアントで表示確認
修正と繰り返し: 問題があればCursorに修正を依頼し、再度Pardotに反映して確認
複数テンプレートの作成: 同じプロセスで計8本のテンプレートを作成
この流れの中で、特に時間がかかり、多くの学びがあったのがPardotへの反映の部分でした。Pardotの特殊な機能（クリーニング機能など）による制約を理解し、それに対応する必要があったからです。これについては後ほど詳しく説明しますね！
Cursorを活用したHTML生成
なぜCursorを選んだのか
HTMLメルマガの実装には、以下の技術的な要件があります：
メールクライアント対応（Outlook、Gmail、Apple Mailなど）
レスポンシブ対応（モバイル・デスクトップ）
ダークモード対応
Pardotの動的コンテンツ機能との連携（`pardot-region`属性）
メルマガをAIで生成するという記事は良く見かけますが、テンプレートを作成する記事はそんなに多くなく、やれるかどうかもわからないけど、やってみたらきっと面白いだろうなと思い、Cursorを信じて突き進むことに。普段から使い慣れているCursorは、AIがコードの文脈を理解してくれるので、長文のHTMLコードを扱えるし、エラー修正もAIに依頼できるので、非エンジニアの私には最適でした。
CursorでのHTML生成のポイント
デザイナーが作成したFigmaのデザインを、Cursorに読み込ませてHTML化しました。最初はFigmaのプラグインを使用していたのですが、freeで利用できる回数に限りがあったのと、あまり精度が高くなかったので、途中でFigmaのデータを直接Cursorに読み込ませ、コード化もCursorに対応してもらう方法に切り替えました。
Cursorでのプロンプト例：
以下のFigmaデザインをもとに、HTMLメルマガテンプレートを作成してください。
要件：
- メールクライアント対応（Outlook、Gmail、Apple Mail）
- レスポンシブ対応
- ダークモード対応
- Pardotの動的コンテンツ機能（pardot-region属性）を使用
[Figmaのデザインデータを読み込む]
※レスポンシブ対応したい場合は、PCとモバイル両方のリンクを読み込ませるのがおすすめCursorは、Figmaのデザインを理解し、HTMLメルマガテンプレートを生成してくれました。修正が必要な場合は、具体的な問題点を伝えることで、Cursorが適切に修正してくれました。
Cursorは画像添付もできるので、どういう崩れが発生しているかをテキストで伝えるのが難しい場合は、キャプチャを添付して参照してもらう方法も有効でした。
レスポンシブ対応は実装しましたが、PCとモバイルで画像を出し分けるなどは難しいので、共通画像で対応できるように、デザイナーと相談しながら修正をしました。メールクライアントの制約を考慮すると、シンプルな実装の方が確実に動作するため、デザインと実装の両面から調整していきました。
1つテンプレートの作成を完了しておくと、そのデータをベースに作成してくれるので、量産自体はスムーズに進むことが多かったです。
Pardotへの反映：実装したHTMLをテンプレートとして登録する
全体の流れの中で、特に時間がかかり、多くの学びがあったのがPardotへの反映の部分でした。Pardotによるメルマガ作成に関する記事が少なかったので、実際にやってみないとわからないことも多かったです。
Pardotでのテンプレート登録手順
1. HTMLファイルの準備
まず、Cursorで生成したHTMLをファイルとして保存します。ファイル名は分かりやすい名前にしておくと、後で管理しやすくなります。
例：
catering-template.html
feature-template.html
2. Pardotのテンプレートエディタで開く
Pardotの管理画面から、メールテンプレートを作成または編集します。
3. HTMLをコピー＆ペースト
Cursorで作成したHTMLをコピーして、PardotのHTMLエディタに貼り付けます。
ここで重要なポイント：
画像パスの確認
画像はPardotのアセットライブラリにアップロードし、CDN URLを使用します
ローカルパス（`assets/image.png`など）は使えないので、事前に画像をアップロードしてURLを取得しておきます
CSSの配置
`<style>`タグ内のCSSは、Pardotのテンプレートエディタでも保持されます
ただし、一部のCSSプロパティはメールクライアントでサポートされていない場合があるので、注意が必要です
エディター機能での修正チェック
エディター機能で任意で修正できる箇所（画像・リンク・テキスト）がちゃんと変更できるかをチェックする必要があります
運用でマーケティング担当者が内容を変更できるようにするため、`pardot-region`属性が正しく設定されているか、エディターで選択・編集できるかを確認します
4. プレビューで確認
HTMLを貼り付けたら、必ずプレビューで確認します。ここでのプレビューはほぼローカルで確認しているものと同じになります。
Pardotには表示テスト機能があるので、複数のメールクライアントでの表示を確認できますが、私は今回使用しませんでした。
5. テスト配信
テンプレートを登録したら、テスト配信を行いました。
テスト配信のポイント：
自分のメールアドレスに送信
複数のメールクライアントで確認（Outlook、Gmail、Apple Mailなど）
モバイルでも確認
これで、テンプレートの登録とテスト配信は完了です。テスト配信で実際にメールが届いたときは、少し感動しましたね。以降の運用（動的コンテンツの設定、実際の配信など）は、マーケティング担当者が行います。
Pardotへの反映で注意すべきポイント
Pardotによるメルマガ作成に関する記事が少なかったので、実際にやってみないとわからないことも多かったです。ここでは、実際に作業を進める中で気づいた注意点をまとめます。
1. Pardotのクリーニング機能に注意
PardotはテンプレートにHTMLをそのまま流し込むと、クリーニング機能で勝手にstyleなどを修正したり、不要と判断されたコードを削除したりしてしまいます。それにより表示が崩れるということがありました。
対策：
貼り付けた後、必ずHTMLを確認する
特に<table>タグや<style>タグが正しく保持されているか確認
表示が崩れている場合は、Pardotが変更した部分を元に戻す必要がある
pardot-regionタグを使って、styleを崩さないように工夫する
動的に変更したい部分にはpardot-region属性を設定し、Pardotのクリーニング機能がその部分を保護してくれるようにします。例：<p pardot-region="商品名">商品名</p>
2. 画像のアップロードと差し替え
画像は、テンプレートのエディタ画面で直接差し替えるか、事前にコンテンツフォルダ内にassetsフォルダを作成してアップロードしておく必要があります。アップロードするとその画像に対して固有のCDN URLが発行されるので、そのURLをメルマガの画像パスとして使用する方法もあります。
画像差し替え時の注意点：
画像、リンク、テキストは実際にメルマガを運用するマーケティング担当者が自由に差し替えできるように、styleを崩さずに差し替えられる方法を模索する必要がありました。
HTMLでテンプレートに反映後に、エディター機能で画像を差し替えると、styleで比率を指定しているにもかかわらず、画像サイズを強制的に変えてしまうことがあります。エディターで差し替えるときは、自動で入る画像サイズを手動で削除すると、元のstyleを維持してくれることが分かりました。
この方法であれば、htmlを直接触ることなく、マーケティング担当者が画像を差し替えても、デザインが崩れないようになりました。
成果と学び
成果
計8本のテンプレートを実装し、Pardotに反映
デザイナーが作成したFigmaデザインをCursorでHTML化し、Pardotに反映
`pardot-region`の活用により、マーケティング担当者が自由に差し替えできるテンプレートを作成
Pardotのクリーニング機能による制約を理解し、`pardot-region`を活用することで解決
マーケティング担当者が画像やテキストを自由に差し替えできるテンプレートを実現
非エンジニアでも実装可能なプロセスを確立
Cursorを使ったHTML生成のプロセスを確立
エンジニアへの依頼が不要に
テンプレート更新を自分で対応できるようになった
学び
1. Cursorはコードの文脈を理解してくれる
Cursorの良いところは、既存のコードファイルを開いていると、その文脈を理解してくれることです。
活用方法としては、既存のテンプレートHTMLファイルをCursorで開いて、新しいテンプレートを作成する際に既存テンプレートを参考にするよう指示します。すると、Cursorが既存テンプレートの構造やスタイルを理解し、同じパターンで新しいテンプレートを生成してくれるんです。
これにより、一貫性のあるテンプレートを作成できました。最初は「本当にうまくいくのかな？」と思っていましたが、実際に使ってみると、かなり精度が高いことに驚きました。
2. プロンプトの書き方が重要
Cursorを使う際も、プロンプトの書き方で品質が大きく変わります。要件を具体化することで、その後のCursorが生成するものの精度がとても上がります。そこを怠ると無駄なやりとりに時間を費やしてしまうので、プロントの書き方には注意が必要です。
以下の点を意識するようになってから、品質が向上しました：
具体的な要件を明記: 「メールクライアント対応」だけでなく、「Outlook、Gmail、Apple Mailで正しく表示される」と具体的に
既存テンプレートを参照: ゼロから生成するのではなく、既存のテンプレートを参考にするよう指示
エラー修正のプロンプト: エラーが発生したら、エラー内容と期待する結果を明確に伝える
プロンプトの書き方を工夫することで、AIの力を最大限に活用できるようになりました。
3. Pardotの特殊な機能による対応の難しさと`pardot-region`の活用
Pardotへの反映で最も時間がかかったのは、Pardotの特殊な機能（クリーニング機能など）への対応でした。前述の通り、HTMLをそのまま流し込むと、Pardotが勝手にstyleを修正したり、不要と判断したコードを削除したりしてしまい、表示が崩れることが何度もありました。
なので`pardot-region`の活用は、今回の取り組みの中で大きな成果でした。Pardotの特殊な機能による制約を理解し、それを回避する方法を見つけることで、マーケティング担当者が自由に画像やテキストを差し替えできるテンプレートを作成できました。
4. 非エンジニアでも実装できる
HTMLメルマガの実装は、エンジニアの専売特許ではありません。Cursorを活用することで、非エンジニアでも実装できることがわかりました。
ただし、以下の点は重要です：
HTMLの基本構造を理解する: 完全に理解する必要はないが、基本的な構造（head、body、tableなど）は理解しておく
メールクライアントの制約を知る: OutlookやGmailの制約を理解しておく
Pardotの機能を理解する: `pardot-region`属性の使い方を理解しておく（動的コンテンツの設定はマーケティング担当者が行う）
品質チェックを怠らない: AIが生成したコードをそのまま使うのではなく、必ず確認する
5. メールクライアントの制約と早々に諦める勇気
メールクライアントによってstyleが効いたり効かなかったりするので、画面幅による画像の出し分けだったり、画像の上に要素を重ねたりするのに、実装に時間がかかる場合があります。
エンジニアだったら解決できるかもしれない部分を、結局はAIだけで補填しなければならず。
エンジニアだったら、「これ無理できない！やってもいいけど時間かかるかも」とはっきりって言ってくれることもあるので、その時々で判断できるのですが、AIはきっぱり「できない」とは言ってはくれないのです。
いろんな方法で試してくれるのはありがたいのですが、AIが修正してくれる内容を完全に理解できているわけではないので、修正→テストを繰り替えしていくうちに、これちゃんと修正されているのか？もしかして堂々巡りしている？なんてこともあったりするので、気付いたら沼っていて、ほぼ一日つぶれたわーみたなこともありました。なので、あーこれ無理ゲーだなと思ったら、早々に諦めてデザイナーに相談するのがよいと感じました。
デザイナーと相談しながら、メールクライアントの制約を考慮したデザインに調整することで、実装の負担を減らすことができます。
AIを使っているからといって無敵になるわけではないので、無理そうと思ったら「早々に諦める」というのも一つの手です。完璧を目指しすぎて時間をかけるよりも、制約を理解した上で実装可能な範囲でデザインを調整する方が、結果的に効率的でした。
まとめ
非エンジニアである私が、Cursorを活用してHTMLメルマガテンプレートを実装し、Pardotに反映できたポイントをまとめてみました。
「非エンジニアだから実装できない」という固定観念を捨て、Cursorを活用することで、新しい可能性が広がりました。同じように「非エンジニアだけど実装したい」「Pardotにテンプレートを反映したい」という方の参考になれば幸いです。
スターフェスティバルでは、エンジニアを募集中です。
カジュアル面談もやっておりますので、こちらからお気軽にご連絡ください！
