AIでメルマガを作成する方法｜デザイン・HTMLコードを生成するプロンプト例付き

メルマガを作成する際、「毎回テーマや文章を考えるのに時間がかかる」「HTMLメールを作りたいけれど、デザインやコーディングが難しい」と感じる方も多いのではないでしょうか。

Claude、ChatGPT、Geminiなどの生成AIは、メルマガの企画や件名、本文の作成だけでなく、レイアウトの提案やHTMLコードの作成にも活用できます。作成したHTMLコードを対応するメール配信システムに貼り付ければ、AIで考えたデザインをメールとして配信することも可能です。

この記事では、AIを使ってメルマガの文章、デザイン、HTMLコードを一度に作成し、メール配信システムに貼り付けるまでの流れを紹介します。HTMLの知識がない方でも使えるプロンプト例や、配信前に確認したいポイントもまとめています。

具体的な操作例にはClaudeを使用しますが、基本的な考え方やプロンプトは、ほかの生成AIを使用する場合にも応用できます。

AIを使うとメルマガ作成はどこまでできる？

AIは、メルマガ作成の一部を補助するだけでなく、企画からデザインの作成まで幅広い工程に活用できます。

メルマガの作成には、ChatGPT、Claude、Geminiなどの生成AIを活用できます。
今回は、文章に加えてデザインとHTMLコードまで一度に作成しやすく、プレビューを見ながら微調整が可能なClaudeを使用しますが、他のAIツールでも同様に作成できます。

また、本記事では③〜⑤のメルマガ全体の本文からデザイン作成までをご紹介しますが、AIを使ったメルマガのネタ企画・件名作成などについては、関連記事「ChatGPTを使ってメルマガを作成する方法とプロンプト例」も併せてご覧ください。

AIでメルマガを作成する前に決めておくこと

AIに「メルマガを作ってください」とだけ依頼しても、自社の目的に合った内容にはなりません。プロンプトを入力する前に、次のような項目を整理しておきましょう。

・メルマガを配信する目的
・読者層
・読者に取ってほしい行動
・紹介する商品や情報　など

たとえば、同じセミナー案内でも、既存顧客に新しい活用方法を紹介する場合と、まだ自社を知らない人に参加を促す場合では、必要な説明や適切なCTAが異なります。まずは配信目的や読者層を明確にしておくことが大切です。

ClaudeでメルマガのデザインとHTMLを作成する手順

実際にClaudeを使って、メルマガの文章・デザイン・HTMLコードを作成する手順を紹介します。

1. AIへ入力する情報を整理する

前章で明確になった配信目的や読者に加え、具体的な掲載内容をClaudeへ入力できる形にまとめます。
CTAの文言やリンク先、使用する画像のURL、ブランドカラーをあらかじめ用意しておくと、後から修正する手間を減らせます。

画像のURLをまだ用意していない場合は、コード内に「画像URLを入力」などの目印を入れてもらい、後から差し替えることもできます。

過去に配信したメルマガがある場合は、その文章やデザインの特徴を伝える方法もあります。
ただし、顧客の氏名やメールアドレス、未公開情報などは入力せず、利用するAIサービスの規約や社内ルールも確認してください。

2. プロンプトをClaudeに入力してデザインを作成する

整理した情報をもとに、AIに伝えるプロンプトを完成させます。

ここで重要なのは、Webページではなく「メール配信用のHTML」と明記することです。
Webサイトでは問題なく表示されるコードでも、GmailやOutlookなどのメールソフトでは一部のCSSや機能が使えず、表示が崩れることがあります。そのため、テーブルレイアウトやインラインCSSなど、HTMLメールを想定した条件もプロンプトに含めます。

プロンプト例　※赤文字の部分は自社に合った内容を入力してください。

 

※Benchmark Emailでは、配信停止リンクや会社住所などの情報がフッターに自動で挿入されます。そのため、AIには追加はしないように依頼をしてください。Benchmark Email以外のメール配信システムを使う場合は、フッターが自動で挿入されない場合もあるため、事前に確認しておきましょう。

このプロンプトは、配信内容に合わせて書き換えて使用してください。日時、価格、商品仕様などの重要な情報は、AIに推測させず、確定している内容を入力します。

実際に上記のプロンプトを使って入力した画面：

上記のように、画面の右側でプレビューを確認しながらチャットを継続することが可能です。

※Claudeでは画像のプレビューは確認できませんが、画像以外のデザインの確認や修正が行えます。画像のプレビューまで確認したい場合は、Benchmark Emailなどのメール配信システムをご利用ください。

3. 完成したデザインを確認して修正する

Claudeが生成した内容は、チャット画面の横にプレビューとしても表示されます。プレビューを確認しながら、会話形式で修正を依頼できます。

たとえば、次のように伝えてみましょう。

「CTAボタンをもう少し目立たせてください」
「見出しと本文の間の余白を広げてください」
「ブランドカラーの紫を使いすぎず、CTAを中心に使用してください」
「ファーストビューにメイン画像が表示されるよう、冒頭の文章を短くして」

最初のプロンプトで完成に近い形まで作り、気になる部分だけを追加で修正するのが効率的です。修正を依頼するときは、「もう少し見やすくしてください」だけでなく、変更したい場所と内容を具体的に伝えましょう。

うまく作成できない場合は、構成と本文、デザイン、HTMLコードの順に依頼を分ける方法もあります。情報量が多いメルマガや、細かなデザイン調整が必要な場合は、工程を分けた方が確認しやすくなります。

4. HTMLコードをコピーしてBenchmark Emailに貼り付ける

デザインが完成したら、Claudeが出力したHTMLコードをコピーします。Benchmark Emailなど、HTMLコードエディタのあるメール配信サービスでメールを新規作成し、HTMLコードを貼り付けると、作成したデザインをメールとして利用できます。

基本的な流れは次のとおりです。

1. Claudeが生成したHTMLコードをコピーする
   
   
2. Benchmark Emailなどのメール配信サービスでメールを新規作成する
3. HTMLコードを入力できる編集画面を開き、コードを貼り付ける
4. プレビューでデザインを確認する
   
5. 件名、差出人名、配信先などを設定する

HTMLを1から書く必要がないため、コーディングに慣れていない方でも、AIとのやり取りを通じて希望するデザインに近づけられます。

5. テストメールを送信し、最終チェックを行う

HTMLコードを貼り付けたら、実際の配信前に、プレビュー画面での確認だけでなくテストメールを送信してチェックをします。Claude上では正しく表示されていても、メールソフトや端末によってはレイアウトが崩れることがあるためです。

テストメールでは、次の項目を確認しましょう。

✅ パソコンとスマートフォンで読みやすいか
✅ GmailやOutlookなどで大きな表示崩れがないか
✅ 画像が表示されるか
✅ ボタンやテキストリンクが正しいページにつながるか
✅ 日時や価格に間違いはないか
✅ フッターが正しく表示されているか

ボタンやテキストリンクは実際にクリックし、正しいページが開くことを確認してください。また、価格、日時、商品仕様、キャンペーン条件なども誤りがないかチェックしましょう。

なお、Benchmark Emailでは、配信停止リンクや会社住所などの情報がフッターに自動で挿入されます。そのため、HTMLコードへ手作業で追加したり、AIに作成させる必要はありません。アカウントに登録している会社情報が正しいことだけ、事前に確認しておきましょう。

AIで作成したHTMLメールの確認ポイント

HTMLコードを貼り付けたら、そのまま配信せず、内容と表示を確認しましょう。ここでは確認する際のポイントをご紹介します。

✔️ パソコンとスマートフォンで確認する

パソコンではデザインが整って見えても、スマートフォンでは文章が読みにくかったり、画像やボタンが画面からはみ出したりすることがあります。文字サイズ、左右の余白、画像幅、ボタンの押しやすさを確認してください。

✔️ GmailやOutlookなどでテストする

HTMLメールの表示は、受信するメールソフトや端末によって異なります。読者が多く利用しているGmailやOutlookなどの環境を中心にテストメールを開き、レイアウトが大きく崩れていないか確認しましょう。

✔️ 画像を表示しなくても内容が伝わるようにする

受信環境によっては、初期状態で画像が表示されない場合があります。大切な情報を画像だけに入れず、本文にも記載しましょう。画像のalt属性には、画像が表示されないときに内容を補える言葉を設定します。

✔️ リンクとCTAを確認する

ボタンやテキストリンクを実際にクリックし、正しいページが開くか確認します。テスト用URLやClaudeへの指示で使用した仮のURLが残っていないかもチェックしてください。

✔️ 差出人情報と配信停止方法を確認する

会社名、住所、問い合わせ先、配信停止のためのリンクなど、配信に必要な情報を確認します。Benchmark Emailでは、配信停止リンクや会社住所は自動でフッターに表示されるため安心です。

✔️ テキストや数値を確認する

AIは自然な文章を作れますが、存在しない情報や誤った数値を出力することがあります。価格、日時、商品仕様、キャンペーン条件、リンク先などは、必ず元の資料と照合してください。

AIをメルマガ作成に活用するメリット

ClaudeなどのAIを使ってメルマガ作成をするメリットをご紹介します。

作成時間を短縮しやすい

企画案、本文のたたき台、デザイン、HTMLコードをゼロから作る負担を減らせます。担当者は、読者に伝える内容の判断や配信後の分析に時間を使いやすくなります。

HTMLの知識がなくても形にしやすい

HTMLを自分で書けなくても、「ボタンを大きくしたい」「画像を上に配置したい」と日本語で伝えながら修正できます。コードの知識はほとんど不要なため、制作を始めるハードルを下げられます。

複数の案を比較しやすい

件名や本文に加えて、CTAの文言や配色、情報の順番なども複数案として出してもらえます。どの案を採用するかは、読者や配信目的に照らして判断できます。

デザインの修正を言葉で依頼できる

完成イメージを見ながら、「余白を増やす」「色を抑える」などの修正を会話形式で依頼できます。自分でコードの該当箇所を探すよりも、デザイン作成がスムーズに進めやすい場合もあります。

AIでメルマガを作成するときの注意点

AIの出力を最初からそのまま配信しない

AIが作成した文章やコードは、最初はそのまま配信せず、修正や確認を重ねて完成させましょう。誤情報、不自然な文章、リンクの間違い、表示崩れが含まれる可能性があります。最終的な内容と配信可否は人が判断します。

個人情報や機密情報を入力しない

顧客情報、社外秘の企画、公開前の商品情報などを安易に入力しないようにします。所属企業のAI利用ルールと、利用するサービスのデータの取り扱いを事前に確認してください。

著作権や他社との類似を確認する

AIが作った文章やデザインが、意図せず既存のコンテンツと似る可能性があります。特定企業のメルマガをそのまま再現する指示は避け、自社のブランドに合わせて編集しましょう。使用する画像についても、利用条件を確認する必要があります。

メールで使えるHTMLには制限がある

HTMLメールはWebページと同じようには表示されません。JavaScriptやフォームなどは利用できず、CSSの対応状況もメールソフトによって異なります。AIにHTMLメール用の条件を指定し、生成後も複数の環境でテストしてください。

自社らしい内容に整える

AIに任せる範囲が広いほど、一般的でどこかで見たような文章やデザインになることがあります。また、Claudeが作成したデザインであることを見抜ける読者も増えていくでしょう。

AIに対する印象は人それぞれですので、読者との関係性、自社ならではの情報、担当者の視点を加えて、オリジナル性を出すといいでしょう。

AIで作成したHTMLメールをBenchmark Emailから配信しよう

ClaudeなどのAIツールを使って作成したHTMLコードは、Benchmark Emailの編集画面に貼り付けるだけで配信に利用できます。

さらにBenchmark Emailでは、メールの作成と配信に加えて、配信後の開封率やクリック率も確認できます。AIで作成することをゴールにせず、読者の反応を見ながら、内容やデザインを改善していきましょう。

Benchmark Emaiは、無料トライアル（期間無制限）でも月2,500通までメールを送信できます。
まずはメールエディタをお試しください。

よくある質問

Q. AIでメルマガを作成できますか？

作成できます。AIは、メルマガの企画、件名、本文、校正、デザイン案、HTMLコードの作成に活用できます。ただし、事実確認や表示確認を行い、最終的な内容は人が判断する必要があります。

Q. ClaudeでHTMLメールを作成できますか？

作成できます。Claudeにメールの内容とデザイン、HTMLメール用の実装条件を伝えることで、HTMLコードを作成できます。Webページ用ではなくメール配信用であることや、テーブルレイアウトとインラインCSSを使うことなどを明記しましょう。

Q. AIで作成したHTMLをそのままメール配信に使えますか？

Benchmark Emailなどのメール配信システムに、HTMLコードを貼り付けて利用できます。ただし、AIが生成したコードはメールソフトによって表示が崩れる可能性があるため、プレビューとテストメールによる確認が必要です。

Q. HTMLの知識がなくてもAIでメルマガを作れますか？

作成できます。日本語で内容やデザインを指示できるため、HTMLを一から書けなくても作成しやすくなります。ただし、画像URLやリンクの差し替え、表示確認など、最低限の調整は必要です。

Q. ChatGPTとClaudeのどちらがメルマガ作成に向いていますか？

どちらも企画や文章、HTMLコードの作成に活用できます。使い慣れたサービスや必要な機能に合わせて選びましょう。本記事では、生成したデザインを確認しながらHTMLを調整する方法としてClaudeを使用しています。

Q. AIで作ったメルマガだと読者に分かりますか？

一般的で抽象的な表現が多いと、読者に違和感を与える可能性があります。AIが作成した文章をそのまま使わず、自社独自の情報、具体的な経験、読者との関係に合った言葉を加えてください。

まとめ

AIは、メルマガのテーマや件名や本文だけでなく、デザインやHTMLコードの作成にも活用できます。Claudeに配信目的や読者、デザインの条件を伝えて会話をするだけで、HTMLメールのデザインを作れます。

また、AIで作成したコードをBenchmark Emailに貼り付ければ、そのままメルマガの配信に利用できます。

まずは実際のメルマガを1通作り、AIにどのような条件を伝えると自社らしい文章とデザインになるか試してみてください。