Email Template Builder：HTMLメール作成
無料、登録不要。ブロックエディターでメールテンプレートを作成。ヘッダー、ボタン、画像、2カラムレイアウトのレスポンシブHTMLメール。HTMLエクスポート対応。
Email Template Builderとは？
Email Template Builderは、ブラウザ上でレスポンシブHTMLメールテンプレートを作成できるビジュアルなブロックベースエディターです。ヘッダー、テキスト段落、ボタン、画像、区切り線、2カラムレイアウト、フッターなどのコンテンツブロックを追加し、上下のコントロールで並べ替え、プロパティパネルで各ブロックを編集します。作成中はライブiframeプレビューがリアルタイムで更新されます。完成すると、インラインCSSを含むテーブルベースのHTMLメールが生成され、Gmail、Outlook、Apple Mailと互換性があります。デザインソフトもコーディングもアカウントも不要です。
主な機能
- ビジュアルなブロックベースメールエディター — コンテンツブロックの追加と並べ替えでメールを構築します。7種類のブロックタイプ：ヘッダー、テキスト、ボタン、画像、区切り線、2カラム、フッター。
- ヘッダー・テキスト・ボタン・画像・区切り線・フッターブロック — 各ブロックに独自のプロパティパネルがあります。ヘッダーブロックには背景色とテキスト色のピッカーがあります。テキストブロックではフォントサイズ（12px〜24px）と配置（左・中央・右）を選択できます。ボタンブロックではラベル、URL、カラーペアを指定します。画像ブロックでは URL、代替テキスト、幅を設定します。
- モバイル/デスクトップ切り替え付きライブプレビュー — エディターパネルにリアルタイムのiframeプレビューが表示されます。エディタータブを離れることなく、デスクトップ（全幅）とモバイル（375px）を切り替えられます。
- 色・フォント・間隔のカスタマイズ — グローバルメール設定でボディ背景（デフォルト
#f4f4f4）、コンテンツ背景（#ffffff）、プライマリカラー、最大幅（480px、600px、640px）、フォントファミリー（Arial、Georgia、Helvetica、Verdana）を制御します。 - クリーンなレスポンシブHTMLのエクスポート — HTMLタブに生成されたソースコードが表示されます：インラインCSS付きの標準準拠テーブルベースレイアウト、プリヘッダーテキスト、Outlook向けMSO VMLボタンフォールバック、600px未満の画面で全幅に縮小するレスポンシブメディアクエリ。
- HTMLをクリップボードにコピー — 「HTMLをコピー」ボタンで生成されたHTML文字列全体をワンクリックでコピーできます。「コピーしました！」の確認状態も表示されます。
- プリビルトテンプレートスターター — 3つのスターターテンプレートが即時ロードできます：ウェルカム、ニュースレター、プロモーション。それぞれの目的に合わせて事前設定されたブロックが含まれます。ウェルカムとニュースレターは現在のプライマリカラーを使用し、プロモーションは独自の赤いアクセントを使用します。
- 100%クライアントサイド — メールの内容はサーバーに送信されません。ページロード後は完全にオフラインで動作します。
Email Template Builderの使い方
ステップ1：グローバル設定を構成する
近日公開: Email Template Builderを開き、左パネルの「メール設定」カードを見つけます。以下を入力します：
- 件名 — エクスポートされたHTMLの
<title>タグになります（一部のメールクライアントで表示され、アクセシビリティにも使用されます）。 - プリヘッダーテキスト — 受信トレイのプレビューで件名の後に表示される非表示のプレビュー行です。デフォルトは
"受信トレイに表示されるプレビューテキスト..."です。魅力的な1行の要約に設定してください。 - ボディ背景 / コンテンツ背景 — カラーピッカーで16進数値を入力するかネイティブカラーピッカーを使用できます。デフォルトのライトグレーボディ（
#f4f4f4）と白いコンテンツ（#ffffff）は、主要ブランドの多くが使用するビジュアルパターンに一致します。 - プライマリカラー — 新しいヘッダーブロックとボタンブロックのデフォルト背景として自動的に使用されます。
- 最大幅 — 480px（コンパクト）、600px（標準、デフォルト）、640px（広め）から選択します。
- フォントファミリー — Arial（デフォルト）、Georgia、Helvetica、Verdana。
ステップ2：テンプレートをロードするかブロックを追加する
オプションA：テンプレートスターターをロード。「テンプレートスターター」カードの「ウェルカム」「ニュースレター」「プロモーション」をクリックします。エディターがそのユースケース向けに事前設定されたブロックセット全体をロードします。ウェルカムテンプレートにはヘッダー、挨拶テキストブロック、「はじめる」CTAボタン、区切り線、フッターが含まれます。プロモーションテンプレートはハードコードされた赤（#e53e3e）のヘッダーとボタンカラーを使用し、画像プレースホルダーが含まれます。ウェルカムとニュースレタースターターは現在のプライマリカラー設定を使用し、プロモーションテンプレートは独自の赤いカラースキームを使用します。
オプションB：ゼロから構築。「ブロックを追加」カードのいずれかのブロックタイプをクリックします。利用可能なブロック：ヘッダー、テキスト、ボタン、画像、区切り線、2カラム、フッター。新しいブロックはブロックリストの最後に表示され、自動的に編集パネルが開きます。
ステップ3：各ブロックを編集する
「ブロック」リストのブロックをクリックしてエディターを開きます。変更はライブプレビューにすぐに反映されます。
- ヘッダーブロック： 見出しとサブ見出しのテキストフィールド、背景色とテキスト色のピッカー。
- テキストブロック： コンテンツ用テキストエリア（改行で個別の
<p>タグが作成されます）、フォントサイズドロップダウン（12pxから24px）、左/中央/右の配置。 - ボタンブロック： ラベルテキスト、リンク先URL、ボタン背景色、ボタンテキスト色。生成されたHTMLにはMSO VMLマークアップが含まれており、Outlookでシンプルなリンクではなくリアルなボタンがレンダリングされます。
- 画像ブロック： 画像URL（またはローカルファイルをアップロード）、代替テキスト、幅（例：
100%または400px）。アップロードされた画像はBase64データURIとして埋め込まれます。 - 区切り線ブロック： カラーピッカーと太さの入力（1〜10px）。
- カラムブロック： 左右のカラムコンテンツ用の2つの個別テキストエリア。
- フッターブロック： フッターテキスト用テキストエリア（改行で個別の段落になります）、リンクラベルとリンクURLのフィールドペア（例：購読解除リンクの追加）、背景色とテキスト色のピッカー。
ブロックを並べ替えるには上下矢印ボタンを使用します。ブロックを削除するにはゴミ箱アイコンを使用します。
ステップ4：プレビューとエクスポート
プレビュータブに切り替えてメールの全ページビューを確認します。デスクトップ/モバイルトグルを使用して375pxでのレスポンシブレイアウトを確認します。
HTMLコードタブに切り替えて生成されたソースコードを表示します。テキストエリアをクリックして全テキストを選択するか、「HTMLをコピー」をクリックしてクリップボードにコピーします。コードはMailchimp、SendGrid、HubSpotなどのESP（メールサービスプロバイダー）に貼り付けてすぐに使用できます。
実用的な例
例1：製品ローンチのお知らせ
「プロモーション」テンプレートスターターから始めます。ヘッダーテキストを製品名とローンチキャッチコピーに置き換えます。カラーピッカーを使って#e53e3eのヘッダー背景をブランドカラーに更新します。プレースホルダー画像URLを製品スクリーンショットに変更します。テキストブロックを編集して主要なメリットを1〜2文で説明します。ボタンラベル（「今すぐ予約」）とURLを更新します。プリヘッダーテキストを"[製品]のご紹介 — 本日より提供開始。"に設定します。HTMLをエクスポートしてESPに貼り付けます。
例2：週刊ニュースレター
「ニュースレター」テンプレートをロードします。件名を"週刊ダイジェスト — 2026年3月3日の週"に設定します。メインの特集記事のテキストブロックを編集します。その下に2つ目の「2カラム」ブロックを追加して、2つの短い記事を横並びにします。ウェブサイトへのリンク付きで「全アーカイブを読む」ボタンブロックを追加します。フッターテキストを調整してCAN-SPAMの規定に従い購読解除リンクと郵便住所を含めます。
例3：ウェルカムメールシーケンス
「ウェルカム」テンプレートを使用します。ヘッダーのサブ見出しを"アカウントの準備ができました。"に変更します。本文テキストを3つの短い段落に編集します：ユーザーができること、ヘルプの場所、サポートへの連絡方法。「はじめる」ボタンのURLを実際のオンボーディングURLに置き換えます。プレビュータブに切り替えてモバイルビューに切り替え、375pxですべてのテキストが読みやすいことを確認します。エクスポートしてESPのオートメーションワークフローにアップロードします。
ヒントとベストプラクティス
テンプレートをロードする前にプライマリカラーを設定してください。 テンプレートスターターは現在のプライマリカラーを新しいヘッダーブロックとボタンブロックに適用します。テンプレートロード後にプライマリカラーを変更しても既存のブロックは遡及的に更新されません — 各ブロックのカラーピッカーは独立して編集可能です。
プリヘッダーフィールドを活用してください。 多くのビルダーはこれを無視していますが、プリヘッダーテキストは開封率に直接影響します。生成されたHTMLはdisplay:none; ... max-height:0px; overflow:hiddenで非表示にします — メールに視覚的には表示されませんが、受信トレイのプレビューには表示されます。
14px未満のフォントサイズはモバイルで見づらくなります。 テキストブロックのフォントサイズドロップダウンは12pxまで下げられます。実際には本文テキストには14px以上を使用してください。12pxは法的免責事項やフッターの注意書きにのみ使用してください。
600pxの最大幅をテストしてください。 標準的な600pxの最大幅はすべての主要クライアントで問題なく動作します。480pxオプションは狭いレイアウトデザインに適しています。640pxは独自の幅制限を適用しないクライアントにのみ適切です。
OutlookのVMLボタンに追加の手順は不要です。 生成されたHTMLには各ボタンのMSO VML条件付きコメントブロックがすでに含まれています。ESPに貼り付ける場合は、ESPがHTMLコメントを削除しないことを確認してください。VMLマークアップはコメントに依存しています。
よくある問題とトラブルシューティング
ライブプレビューが空白の白い領域を表示する。 ブロックを追加する前に発生します。少なくとも1つのブロックを追加するか、テンプレートスターターをロードすると、iframeがすぐに表示されます。
画像ブロックが壊れた画像を表示する。 ツールは画像URLを直接<img>タグで表示します。URLが公開アクセス可能（認証の背後でない）でHTTPSを使用していることを確認してください。入力した代替テキストはアクセシビリティのためにエクスポートされたHTMLに含まれます。
コピーしたHTMLがOutlookで壊れたレイアウトを表示する。 フォントファミリー設定がウェブセーフなスタック（例：Arial, Helvetica, sans-serif）を使用していることを確認してください。ウェブフォント（Google Fonts、カスタムフォント）はOutlookではレンダリングされません。ツールの4つのフォントオプションはすべてウェブセーフなスタックです。
2カラムブロックがモバイルで1カラムに縮小する。 これはMSO条件付きコメントとインラインブロックレイアウトの想定された動作です。600px未満の画面では、メディアクエリが.email-containerをwidth: 100%に設定し、48%幅のインラインブロックカラムが自然に折り返します。モバイルで横並びカラムを強制するオプションはありません。
テンプレートスターターがブランドカラーを使用しない。 テンプレートスターターボタンをクリックする前に、メール設定カードのプライマリカラー設定を確認してください。テンプレートはロード時にプライマリカラーを読み込みます — ロード後に変更するには各ブロックのカラーピッカーを手動で更新する必要があります。
プライバシーとセキュリティ
Email Template Builderはメールのためのすべての処理をブラウザ内で完結させます。テンプレートのコンテンツ、件名、画像URLはサーバーに送信されません。ライブプレビューはsandbox="allow-same-origin"付きのiframeを使用します — プレビュー内ではスクリプトは実行されません。ページがロードされれば完全にオフラインで動作するため、機密性の高いマーケティングコンテンツやクライアント素材にも安全に使用できます。
よくある質問
Email Template Builderは無料ですか？ はい。完全なブロックエディター、7種類すべてのブロックタイプ、3つのテンプレートスターター、ライブプレビュー、HTMLエクスポートはすべてアカウント不要で完全に無料です。ツールは近日公開: /web/social/email-template-builderでご利用いただけます。
Email Template Builderはオフラインで動作しますか？ はい、ページがロードされれば動作します。すべてのHTML生成はデバイス上のJavaScriptで行われます。ライブプレビューは画像URLをソースからロードします（接続が必要）が、エディター、ブロック管理、HTMLエクスポートはすべてオフラインで動作します。
Email Template Builderでデータは安全ですか？ メールのコンテンツ、件名、デザインの選択はブラウザから外に出ることはありません。ツールはHTMLをローカルで生成し、データを使用したサーバーリクエストは一切行いません。機密性の高いクライアントメールや独自のキャンペーンコンテンツを作成する場合でも安全です。
生成されたHTMLはどのメールクライアントに対応していますか？ ツールはインラインCSSを使用したテーブルベースHTMLを生成します。これはメールクライアントとの互換性が最も広いレイアウト方式です。Outlookのボタンレンダリング用のMSO VML条件と、モバイルクライアント用のレスポンシブメディアクエリが含まれています。Gmail、Outlook（2016〜2024）、Apple Mail、Yahoo Mailに対応しています。
7種類以上のブロックタイプを追加できますか？ 現在のエディターはヘッダー、テキスト、ボタン、画像、区切り線、カラム、フッターの7種類のブロックタイプをサポートしています。同じブロックタイプを複数回追加して複雑なレイアウトを構築できます — 例えば、テキストと画像のブロックを交互に配置したり、複数のボタンブロックを配置したりすることができます。
購読解除リンクはどのように追加しますか？ フッターブロックを追加します。フッターエディターには専用のリンクラベルフィールドとリンクURLフィールドがあります。リンクテキスト（例：「購読解除」）と宛先URLを入力します。生成されたHTMLではフッターテキストの下にクリック可能な<a>タグとしてレンダリングされます。エクスポート後にESPの購読解除マージタグでURLを置き換えることもできます。
プリヘッダーテキストフィールドとは何ですか？ プリヘッダーテキストは短い文字列（通常40〜130文字）で、メールクライアントが受信トレイリストで件名の後に表示します。CSSを使用してレンダリングされたメールでは非表示になります。ツールはdisplay:noneとmax-height:0pxを持つ<div>内の生成されたHTMLにこれを含めます。
作成したテンプレートを保存できますか？ はい。Glyph WidgetsのサポーターはPresetsPanelを使用して、すべてのブロック、設定、コンテンツを含む完全なエディター状態を、ブラウザローカルのIndexedDBに保存された名前付きプリセットとして保存・再ロードできます。
どの最大幅を使用すればよいですか？ 600pxは業界標準であり、すべての主要クライアントで正しく機能します。より狭く集中したレイアウトを希望する場合は480pxを使用してください。640pxは、対象のESPとクライアントが正しく処理できることを確認した場合にのみ使用してください — 一部の古いOutlookバージョンは独自の幅制限を適用します。
このツールはカスタムフォントをサポートしていますか？ いいえ。フォントドロップダウンの4つのフォントファミリーはすべてウェブセーフなスタックです：Arial、Georgia、Helvetica、Verdana。ほとんどのメールクライアント（特にOutlook）は外部のフォントファイルをロードしないため、ウェブフォントはサポートされていません。
関連ツール
- 近日公開: Email Extractor — あらゆるテキストからメールアドレスを抽出・検証し、ここで作成したテンプレートに活用できます。
- 近日公開: Social Meta Tags — キャンペーンのランディングページをSNSでシェアした際の見た目を最適化するOpen GraphとTwitter Cardタグを生成します。
- 近日公開: Hashtag Generator — メール登録フォームへのトラフィックを促進するSNS投稿用の関連ハッシュタグを生成します。
今すぐEmail Template Builderを試す：近日公開: Glyph Widgets Email Template Builder