Email

Eメールテンプレートの作成と編集

更新日時 November 12, 2018

対象製品

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basic

デザインマネージャーのツールを活用して、ドラッグ&ドロップ方式の新しいEメールテンプレートを作成することができます。Eメールテンプレートを作成するにあたっては、事前にコンテンツのプランを策定して、必要なモジュールを追加できるようにすることが重要です。デザインのヒントをお探しの場合は、ハブスポットのマーケティングブログに掲載されているサンプル集を参照してください。

HubSpotで新しいEメールテンプレートを作成

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • 画面左上の[File(ファイル)][New file(新規ファイル)]をクリックします。

HubSpotのヘルプ記事のスクリーンショット

  • ダイアログボックスで[Drag and drop(ドラッグ&ドロップ)]を選択します。
  • [Template type(テンプレートのタイプ)]をクリックしてドロップダウンメニューを開き、[Email(Eメール)]を選択します。
  • ファイル名を入力して、ファイルの保存場所を確認します。新しいテンプレートを別の場所に保存するには、[Change(変更)]をクリックします。
  • [Create(作成)]をクリックします。

HubSpotのヘルプ記事のスクリーンショット

作成されるドラッグ&ドロップのEメールテンプレートには、次のモジュールが既定で含まれています。

  1. [View As Web Page(ウェブページとして表示)]:このEメールのウェブページ版へのリンクを生成します。
  2. [Logo(ロゴ)]:コンテンツ設定で決められたロゴを取得します。
  3. [Main Email Body(Eメール本文)]:Eメールのメインとなるコンテンツを作成するリッチテキストモジュールです。
  4. [Office Location Information(オフィス所在地情報)]:コンテンツ設定で決められたEメールのフッター情報(会社の所在地、登録用リンク)を挿入します。Eメールテンプレートを保存するには、このモジュールが含まれていることが必須条件です。

HubSpotのヘルプ記事のスクリーンショット

テンプレートのカスタマイズ

テンプレートには、画面右側のインスペクターを使って他のモジュールを追加することができます。インスペクターの[+Add(+追加)]をクリックして、追加したいモジュールを検索し、ドラッグ&ドロップのテンプレートレイアウトに追加します。

Eメールの書式設定は、インスペクターを利用してカスタマイズすることができます。CSS(カスケーディング スタイル シート)やJavascriptファイルをEメールに添付することはできませんが、カスタムHTMLマークアップ、bodyクラス、インラインスタイルをテンプレートに追加することは可能です。

特定のモジュールを選択しない場合、インスペークターでテンプレートのHeadに直接スタイルを追加することができます。モジュールまたはグループをクリックすると、そのコンポーネントに固有のスタイルオプションにアクセスできます。

HubSpotのヘルプ記事のスクリーンショット

テンプレートのプレビュー

  • 画面右上の[Preview(プレビュー)]をクリックすると、送信するEメールがコンタクトにどのように見えるかを確認することができます。
    • [Live preview with display options(表示オプションを使用したライブプレビュー)]を選択すると、他のさまざまなデバイスでの表示を確認することができます。
    • 矢印ボタンを使うと、画面のサイズをカスタマイズすることができます。また、右上のオプションで画面の拡大率と向きを変えることができます。

HubSpotのヘルプ記事のスクリーンショット