Email Ready：Figmaや画像からHTMLメールを作成

デザインをHTMLメールにするのは、Webページにするより難しい作業です。受信箱はブラウザではないからです。Email ReadyはそのためにつくられたMarkupGenの出力モードで、方法は2つあります。Figmaデザインからメール用HTMLコードを生成する方法と、デザインをスライスしてクリックできるリンクを付け、画像からメールを作成する方法です。この記事では、両方の仕組み、使い分け、そしてツールが代わりに処理してくれることをすべて紹介します。

Email Readyとは

MarkupGenのプロジェクトにはそれぞれ出力形式があります。Responsive HTMLはWebサイトやランディングページ向けです。Email Ready（日本語UIでは「メール対応」）はニュースレターやマーケティングメール向けで、flexboxやgridの代わりに、インラインCSSを使ったテーブルレイアウトのHTMLを出力します。Gmail、Outlook、Apple Mailが表示できる形式です。

プロジェクトのレイアウト設定で選んで生成すると、Webページではなく、完結したメール用ドキュメントが得られます。

方法1：メール用HTMLコードを生成する

これが標準の方法で、メールの中身が主にテキスト、ボタン、シンプルな画像である場合に適しています。

• インラインCSSのテーブルレイアウト。 flexboxもgridも、メールクライアントに削除される外部スタイルシートもありません。
• 本物のテキスト。 見出しや段落はテキストのまま残るので、選択でき、スクリーンリーダーで読み上げられ、画像がブロックされても表示されます。
• メールで再現できない効果は画像に変換。 メールで安全に表現できない部分は、欠落したり崩れたりする代わりにラスタライズされます。
• 有効なXHTML 1.0 Transitionalドキュメント。 Outlook、Gmail、Apple Mailで最も安定して扱われる宣言であるため、エクスポート時にdoctype、名前空間、属性が正規化されます。
• その場で編集可能。 エクスポート前に、エディター上で文言の変更や画像の差し替えができます。
• サイズメーター。 「メール出力」カードに現在のHTMLサイズと上限が表示され、購読者より先に問題に気づけます。

102KB問題：Gmailがメールを省略する理由

Gmailは、HTMLがおよそ102KBを超えるメッセージを省略します。受信者にはメールの冒頭と「メッセージ全体を表示」リンクだけが見え、その下にあったもの——多くの場合CTAや配信停止リンク——は隠れてしまいます。

セクションの多いリッチなデザインは、コードにするとこの上限を超えることがあります。MarkupGenは100KBの時点で、レイアウトパネルとテスト送信ダイアログの両方で警告し、2つ目の方法を案内します。

方法2：画像からメールを作成する

「画像からメールを作成」は逆の発想です。デザインをコードで記述するのではなく、デザイン画像そのものをスライスし、軽量なテーブルで組み直します。HTMLに含まれるのはテーブルと画像の参照だけなので、デザインがどれほど複雑でも、通常は数KBに収まります。

手順：

1. 画像から始める。 プロジェクトのデザイン画像が自動で読み込まれます。Figmaのアートボード、バナー、ポスターなど別の画像をアップロードすることもできます。
2. クリック領域を描く。 画像上をドラッグして、ボタン・バナー・商品ごとに枠を描きます。移動、辺や角からのリサイズ、矢印キーによる1px単位の微調整、座標の直接入力ができます。
3. リンクと代替テキストを追加。 各領域にリンク（http(s)://、mailto:、tel:）、名前、代替テキストを設定します。
4. メール幅を設定。 初期値は600px。テンプレートに合わせて変更できます。
5. 生成。 MarkupGenが画像をスライスし、テーブルを組み立てます。
6. プレビュー・テスト・エクスポート。 デスクトップとモバイル（375px）のプレビューを確認し、テストメールを送信してから、コードをプロジェクトに適用するか、別の場所へ持ち出します。

その過程でツールが処理してくれること：

• 必要な場所だけをカット。 画像は各領域の上端と下端に沿ってカットされます。リンクのない隣り合うスライスは結合されるため、画像数とリクエスト数が減ります。
• カットラインを可視化。 黄色のガイドがカット位置を正確に示すので、文字の行を横切らず、余白の背景に置けます。
• ピクセル単位で正確に再構成。 カット位置は表示サイズでの整数ピクセルにスナップされるため、スライスを合わせると元の画像と一致し、隙間や列ずれが生じません。
• 劣化なし、ホスティング済みのスライス。 スライスはPNGで保存され、絶対URLで自動アップロードされます。自分でホスティングする必要はありません。2xの画像は縮小されずメール幅で表示されるため、鮮明なままです。
• Outlook向けのマークアップ。 固定幅、WordベースのOutlookエンジン向けの条件付きコメント、スライス間に余計な隙間が出ないようにするリセットを含みます。
• 安全なリンクのみ。 http(s)、mailto、tel以外は受け付けず、有効なリンクのない領域は、壊れたリンクとして出力されるのではなく、警告付きでスキップされます。
• 領域はプロジェクトと一緒に保存。 後でツールを開き直し、すべてを描き直すことなくリンクの修正や領域の移動ができます。
• 余裕のある上限。 1通あたり最大200のリンク領域と400のスライス、幅4000pxまでの画像に対応します。

どちらを使うべきか？

実用的な目安：まず生成コードから始めます。サイズメーターが上限を超えたとき、またはデザインがメールクライアントで再現できないフォントや効果に依存しているときに、画像方式へ切り替えます。

生成結果でできること

どちらの方法も行き着く先は同じです。

• テストメールを送信。 エディターから直接、実際の受信箱へ送れます。デザイン内に未割り当てのテキストや画像が残っている場合、送信はブロックされます。
• プレビュー。 送信前にデスクトップとモバイルで確認できます。
• コードをコピー、.htmlファイルをダウンロード、またはホスティングされたメールのコピーへのリンクを共有。
• プロジェクトに適用して保存すれば、メールがプロジェクトの他の内容と一緒に管理されます。
• 自分の言語で作業。 インターフェースは10言語に対応しています。

テストについて詳しくは、メールマーケティングHTMLの生成とテスト送信をご覧ください。

トレードオフを率直に

画像ベースのメールには代償があります。中のテキストは選択もコピーも検索もできません。クライアントが既定で画像をブロックする場合、受信者が画像を許可するまで代替テキストしか見えません。そのため、ツールは領域ごとに代替テキストを求めます。レイアウトは固定幅なので、小さな画面ではリフローせず縮小表示されます。モバイルプレビューを確認してください。そしてブラウザのプレビューは決して証明にはなりません。必ず、読者が使っているクライアントでテストメールを開いてください。

よくある質問

なぜGmailは私のメールを省略するのですか？ GmailはHTMLがおよそ102KBを超えるメッセージを省略し、残りを「メッセージ全体を表示」リンクの後ろに隠します。MarkupGenは現在のサイズを表示し、100KBで警告します。

画像をクリックできるリンク付きのHTMLメールにできますか？ はい。「画像からメールを作成」は画像をスライスし、描いた各領域を個別のリンクで包み、メールクライアントが確実に表示できるテーブルとして画像を組み直します。

画像は自分でホスティングする必要がありますか？ いいえ。スライスは自動でアップロードされ、絶対URLで参照されるため、送信した時点でメールは機能します。

画像ベースのメールはOutlookで動きますか？ 出力はテーブルレイアウト、固定幅、Outlook向けの条件付きマークアップを使用します。それでも、キャンペーン前にOutlookの受信箱へテスト送信することをおすすめします。

生成後にリンクを編集できますか？ はい。領域はプロジェクトと一緒に保存されるので、ツールを開き直してリンクの変更や領域の移動を行い、再生成できます。

Figmaのデザインでしか使えませんか？ コード生成の方法はFigmaデザインから始まります。画像の方法は、Email Readyプロジェクト内でアップロードした任意の画像にも対応します。

メールキャンペーンがFigmaの中、あるいは1枚の画像の中で眠っているなら、無料で始めて数分で受信箱対応のHTMLを手に入れられます。マーケティングチーム向けの全体的なワークフローは、マーケティングチーム向けMarkupGenをご覧ください。