HTMLメールテンプレートジェネレーター

開発者文章

[iotools_html_email_template_generator]

ガイド

HTMLメールテンプレートジェネレーター

レスポンシブでインラインCSSを使用したメールHTMLを、ヘッダー、ヒーロー、画像、本文、ボタン、ディバイダー、フッターなどのモジュールブロックを組み合わせて構成できます。リアルタイムでデスクトップとモバイルのプレビューを確認できます。出力はテーブルベースのレイアウトとMSO条件分離を使用しており、Outlook、Gmail、Apple Mailなどのメールクライアントで一貫して表示されます。

使用方法

件名、プレヘッダー、フォントファミリー、ブランド、背景色およびテキスト色をフォームの上部で設定できます。
使用するブロックを切り替え、各ブロックのコンテンツを入力します。ロゴとキャッチコピー、ヒーローのタイトルとサブタイトル、画像URL、本文パラグラフ、呼びかけボタン、ディバイダー、フッターです。
右側のリアルタイムプレビューが更新されるのを確認してください。デスクトップとモバイルの幅を切り替えて、両方のレイアウトを確認できます。
クリック HTMLをコピー インラインCSS HTMLを取得するか、 .htmlをダウンロード ESP、トランザクション送信者、キャンペーンツールに貼り付ける準備ができたファイルとして保存できます。

機能

モジュールブロック – ヘッダー、ヒーロー、画像、本文、ボタン、ディバイダー、フッターを個別にオン・オフ切り替えできます。
インラインCSS出力 – すべてのスタイルがインラインでテーブルベースになっており、外部スタイルシートが不要で、OutlookやGmailでの破損表示もありません。
MSO条件分離 – Windows Outlookでの幅とスペースを正確に維持するために、Outlook専用のマーカーが含まれています。
ライブプレビュー – デスクトップ（600px）およびモバイル（360px）のプレビューは、サンドボックスされたiframeでレンダリングされます。
ブランドカスタマイズ – ブランドアクセント、背景、テキストの色選択器と4つのフォントスタックプレセットが用意されています。
ワンクリックでエクスポート – HTMLをクリップボードにコピーするか、すぐに送信できる準備ができたものをダウンロードできます .html ファイル。
ブラウザで実行 – 何らかのデータがアップロードまたは保存されません。生成はすべてクライアントサイドで行われます。

 よくある質問

HTMLメールは、現代のflexboxまたはグリッドレイアウトを使用する代わりに、テーブルを使用する理由は何ですか？

多くのメールクライアント、特にWindows用のMicrosoft Outlookは、メッセージをWordエンジンでレンダリングしており、CSSのサポートが非常に限定的で、flexbox、グリッド、および多くの配置ルールを無視します。ネストされたHTMLテーブルが、Gmail、Outlook、Apple Mail、Yahoo、モバイルウェブメールなど、すべてのクライアントで予測可能なレイアウトを維持する唯一のレイアウトシステムです。そのため、生産用のメールHTMLは2003年のウェブマーケティングに似ており、すべてのレンダリングエンジンを通過するための最低共通分母です。
MSO条件分離とは何ですか？メールにそれが必要な理由は何ですか？

MSO条件分離は、Microsoft Outlook（Wordエンジン）のみがパースするHTMLコメントです。それらは  のように見え、Outlookにのみ対応したマーカーまたはスタイルを送信できるようにし、他のクライアントに影響を与えません。よく使われるのは、固定幅のコンテナを設定するための仮想テーブル、ボタンや背景のVMLを修正し、Outlookが誤ってレンダリングする機能を無効にするなどです。それらがないと、Outlookではレイアウトが崩れたり、伸びたりして、他の場所では完璧に見える場合があります。
メールCSSはスタイルタグに宣言するのではなく、インラインにする必要があるのはなぜですか？

いくつかの主要なメールクライアント、特に歴史的にGmailは、 <style> ブロックを削除したり、不正確に適用したりすることがあります。特にモバイルや転送メッセージでは問題が生じます。インラインは、各ルールをターゲット要素に style 属性に直接移動させることで、すべてのクライアントがそれを尊重します。その代償は、冗長性と保守の難しさであり、そのためツール（このジェネレータを含む）が、より高レベルのテンプレートからインラインスタイルを自動的に生成するように設計されています。
プレヘッダーとは何ですか？メールの開封率にどのように影響しますか？

プレヘッダーは、多くのインボックスプレビューで件名の後に表示される短いテキストです。デフォルトでは、メール本文の最初の表示されるテキストから取得され、それはしばしば挨拶や標準文書であり、そのスペースを無駄にしています。HTMLの最初部に隠されたプレヘッダー要素を含めることで、正確に表示される内容を制御できます。よく書かれたプレヘッダーは、件名と補完され、主要なESPが実施するA/Bテストで高い開封率を示します。