マーケティングEメールのコンテンツとデザインの編集

マーケティングEメールを追加するには、ドラッグ&ドロップ操作であらかじめ用意されているモジュールを追加して 、マーケティングEメール を作成できます。コードテンプレートを使用する場合は、 クラシックエディターを使用することをお勧めします。

この記事では、マーケティングEメールのコンテンツとデザインを編集する方法を説明します。マーケティングEメールの作成と送信の詳細をご覧ください。 

ドラッグ&ドロップエディターでEメールを編集する

ドラッグ&ドロップエディターでは、あらかじめ用意されているモジュールを追加して再配置することで、マーケティングEメールを作成できます。 

モジュールの管理

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きを作成したEメールの名前をクリックします。 
3. Eメールに新しいモジュールを追加するには、サイドバーエディターから モジュール をクリックしてEメール内の位置にドラッグします。 
4. Eメール内のモジュールを再配置するには、次の手順に従います。
   • モジュールの上にマウスポインターを置き、 クリックして別の位置にドラッグします。
   • 既存のモジュールの右または左にモジュールをドラッグして、Eメールのそのセクションに新しい列を作成できます。 

5. モジュールのコンテンツを編集するには、Eメールレイアウトで モジュール をクリックします。テキスト モジュールなど、レイアウト内で編集できるモジュールもあれば、サイドバーエディター上で完全にカスタマイズできるモジュールもあります。 
6. モジュールを複製するには、モジュールの上にマウスポインターを置き、 duplicate clone複製 アイコンをクリックします。
7. モジュールを削除するには、モジュールの上にマウスポインターを置き、deletet delete アイコンをクリックします。
8. 特定のデバイスタイプで表示するときにモジュールを非表示にするには:
   • 上部で、モジュールを非表示にするデバイスタイプ を選択します。
   • Eメールプレビューで、要素の上にマウスポインターを置き、 hide 非表示アイコンをクリックします。モジュールの非表示について詳細をご確認ください。 

Eメールのデザインを編集

Eメール全体のデザインだけでなく、個々のモジュールのスタイル設定オプションも編集できます。 

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きを作成したEメールの名前をクリックします。 
3. Eメールエディターで、左側のサイドバーにある テンプレートデザインアイコンをクリックします。
4. Eメールの形式を選択します。 
   • 既定:最もカスタマイズ可能な形式。既定の形式では、カスタム列とパディングを設定できます。 
   • ボックス:全てのコンテンツが枠線で囲まれた1つの領域内に収まる、合理化されたフォーマット。
   • シンプル:列やパディングのない簡略化されたレイアウト。プレーンテキストEメールは、主に1対1のコミュニケーションに推奨されます。 

5. [ テンプレート ]セクションで、Eメールの一般的なスタイル設定のガイドラインを設定します。
   • 本文の色:Eメール本文の背景色を設定します。16進数コードを入力するか、 カラーパレットをクリックして 色を選択します。 
   • 境界線の幅: ボックス 形式を使用している場合は、境界線の幅をピクセル単位で設定します。
   • 色: ボックス 形式を使用している場合は、境界線の色を設定します。16進数コード を入力するか、 カラーパレット をクリックして 色を選択します。
   • 背景タイプ:背景を単色またはパターンとして設定します。
   • 背景色/パターン:背景色またはパターンを選択します。背景パターンを設定するときに、Eメールクライアントで背景画像が表示されない場合にレンダリングする背景色を設定することもできます。 
6. [テキストスタイル]セクションで、Eメールテキストのスタイル設定ガイドラインを設定します。段落、h1、h2 テキストのフォントサイズや色だけでなく、特定のフォントも設定できます。また、すべてのリンクに色とスタイルを設定することもできます。 
7. [ボタン]セクションで、Eメールボタンのスタイル設定ガイドラインを設定します。ボタンの半径と色を設定できます。ボタンテキストについては、フォントに加えて、フォントの色、サイズ、スタイルを設定できます。 
8. [仕切り]セクションで、Eメールの仕切りのスタイル設定のガイドラインを設定します。仕切りの高さと色、およびそのスタイル(実線、破線、または点線)を設定できます。 
9. [間隔]セクションで、Eメールのパディングのスタイルガイドラインを設定します。
   • 全ての辺に同じパディングを適用するには、[ 全ての辺に適用 ]チェックボックスをオンにします。
   • Eメールの上部と下部に個別のパディングを適用するには、各フィールドにピクセル値を入力します。
   • 全てのモバイルデバイスでパディングを削除するには、[ モバイルデバイスのパディングを削除 ]チェックボックスを選択します。 

ドラッグ&ドロップEメールエディターで保存済みセクションを使用する

保存済みセクションを使用すると、マーケティングEメールのセクションを保存して、他のマーケティングEメールで再利用できます。保存済みセクションは、ドラッグ&ドロップエディターで作成されたEメールでのみ使用できます。 

セクションを編集する

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きを作成したEメールの名前をクリックします。 
3. Eメールプレビューで 、セクションをクリックします。
4. サイドバーエディターの[共有範囲]で、さまざまなデバイスでのセクションの表示条件を設定します。 
   • セクションの表示を設定するには、[ 表示 ]または [非表示]をクリックします。 

• • モバイルとパソコンの共有範囲を別々に設定するには、[全てのデバイス] スイッチをオフに切り替えます。次に、[デスクトップ]セクションと[モバイル]セクションで[表示]または[非表示]をクリックします。 

5. [列]セクションで、 列の配置をクリックします。これにより、セクションの列の数とサイズが管理されます。 
6. [列の配置] セクションで、[上]、[中央]、または [下] を選択します。これにより、セクション内のモジュールの垂直方向の位置合わせを制御します。 
7. [改行]セクションで、柱の 改行 動作を選択します。これにより、モバイルデバイス上でのモジュールの表示を制御します。 
8. [背景]セクションで、Eメールの背景を設定できます。[すべてのデバイス]スイッチをオフに切り替えると、モバイルとデスクトップの背景が別々に設定されます。 
9. [間隔]セクションで、セクションの上部と下部のパディングを追加できます。[ すべてのデバイス]スイッチをオフに切り替えると、モバイルとパソコンのパディングが別々に設定されます。 

セクションを保存する

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きを作成したEメールの名前をクリックします。 
3. Eメールプレビューで、セクションの上にマウスポインターを置き、 saveEditableView 保存アイコンをクリックします。

4. ダイアログボックスで、セクションの名前 を入力し、[保存]をクリックします。 

保存済みセクションを使用

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きを作成したEメールの名前をクリックします。 
3. Eメールエディターで、サイドバーエディターの [セクション]タブをクリックします。 
4. 保存済みセクション をクリックし、Eメールにドラッグします。 

保存済みセクションを管理

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きを作成したEメールの名前をクリックします。 
3. Eメールエディターで、サイドバーエディターの [セクション]タブをクリックします。 
4. [保存済みセクション]で[管理]をクリックします。

1. 右側のパネルで、[表示]と[並べ替え]のドロップダウンメニューで保存済みセクションを絞り込むことができます。
2. 保存済みセクションの横にある[アクション]ドロップダウンメニューをクリックし、次のいずれかを選択します。 
   • お気に入りに追加:このセクションをお気に入りのセクションに追加します。
   • 非表示:サイドバーエディターからこのセクションを削除します。非表示のセクションを絞り込めば、セクションを管理するときに引き続きアクセスできます。 
   • 表示:このセクションを非表示にした場合、サイドバーエディターに戻します。 
   • 削除:このセクションを完全に削除します。ダイアログボックスで、[ セクションを削除 ]をクリックして確定します。この操作は元に戻すことができません。このセクションを使用している既存のEメールには影響はありません。 

クラシックエディターでEメールを編集する

クラシックエディターでは、デザインマネージャー内で作成したテンプレートを使用してEメールを作成できます。 

Eメールのデザインを編集

デザインマネージャーで作成されたテンプレートを使用してEメールのデザインを変更する場合は、デザインマネージャーでテンプレートを編集できます

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きを作成したEメールの名前をクリックします。 
3. Eメールエディターで、左側のサイドバーにある テンプレートデザインアイコンをクリックします。
4. デザインマネージャーでEメールのテンプレートを編集するには、次の手順に従います。
   • サイドバーエディターで、[ アクション]ドロップダウンメニューをクリックし、[ このテンプレートを編集]を選択します。 
   • ダイアログボックスで、[このテンプレートを編集]を選択して、掲載されたアセットに使用するテンプレートを編集するか、[複製 & 新規テンプレートを編集]を選択して、このEメールのみに使用される現在のテンプレートのコピーを編集します。 
5. デザインマネージャーでテンプレートを編集し、右上の[変更を公開]をクリックします。 

ドラッグ&ドロップテンプレートを使用するようにEメールを変換する

Eメールでカスタムコードテンプレートではなく 、レイアウトエディター またはデフォルトのコードテンプレートで作成されているテンプレートを使用している場合は、代わりにドラッグ&ドロップエディターを使用するようにEメールを変換できます。 

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きを作成したEメールの名前をクリックします。 
3. ダイアログボックスで、[変換されたEメールをプレビュー]をクリックして、変換されたEメールの外観をプレビューします。 
4. [ドラッグ&ドロップに変換]をクリックします。