メールのデザイン方法

電子メールは、顧客とつながり、顧客の関心を維持するための優れた方法です。適切にデザインされたメールは注目を集めるだけでなく、メッセージを明確で理解しやすくします。この記事では、顧客に気に入るプロフェッショナルで魅力的なメールを作成し、より強力な関係を構築し、コミュニケーションを改善するのに役立つ電子メール エディターの使用方法を説明します。

---

必要条件

• アクティブなClickFunnelsアカウント

• The Email app added to your workspace

• ドラフト Broadcast

---

メールデザインエディターにアクセスする

ブロードキャストメールのコンテンツとレイアウトをカスタマイズするには、まずメールデザインエディターにアクセスする必要があります。このセクションでは、エディターを開く方法と、その過程で何が予想されるかを示します。

1. 左側のメニューを使用して メール アプリに移動します。

2. [ブロードキャスト] ダッシュボードで、デザインするブロードキャストの名前をクリックします。これにより、[ブロードキャストの詳細] ページが開きます。

3. 詳細ページで、上部の [ブロードキャストを編集 ] をクリックします。
   

4. [ メール] セクションで、[ メールのデザイン ] ボタンをクリックします。

5. テンプレートがまだ選択されていない場合は、テンプレートを選択するように求められます。

   • ClickFunnels テンプレートコレクションからテンプレートを選択するか、

   • [ 空白から開始 ] をクリックして、最初からやり直します。
     

6. テンプレートを選択すると、メール デザイン エディターに直接表示され、メールの作成を開始できます。

---

メールエディタの使用

ClickFunnels 電子メール エディターはユーザーフレンドリーになるように設計されており、魅力的な電子メール キャンペーンを簡単に作成できます。メールエディタでキャンペーンの作成を開始するには、コンテンツブロック、行、設定と呼ばれるものを使用します。これらのデザインツールは、メインサイドメニューの3つの分割されたメニュー部分にあります。

• コンテンツ ブロック: テキスト、画像、ボタン、ビデオなどの要素を電子メールにドラッグ アンド ドロップします。各ブロックをブランドに合わせてカスタマイズします。

• 行: コンテンツブロックを整理します。行は、さまざまな列設定を使用して、魅力的な方法でメールをレイアウトするのに役立ちます。

• 設定: メールの全体的な外観を調整します。背景色、パディング、境界線などをブランドに合わせて変更します。
  

---

コンテンツブロックの追加

コンテンツブロックは、メールレイアウトの構成単位です。各ブロックは、見出し、段落、画像、ボタンなどのコンテンツの種類を表します。ブロックを [ コンテンツ ] タブからメール キャンバスにドラッグし、レイアウト内の任意の場所に配置できます。

必要に応じて、ブロックを再配置、複製、または削除することもできます。エディターは柔軟に設計されており、ブランドやキャンペーンの目標に合ったレイアウトを作成できます。

コンテンツブロックを追加および管理するには:

1. 必要なコンテンツブロックをメールレイアウトにドラッグ&ドロップします。

2. ブロック を並べ替 えるには、移動したいブロックをクリックし、 4方向カーソルでドラッグし、好きな場所に配置します。
   

3. ブロックの内容とスタイルをカスタマイズするには、ブロックを選択し、右側の [プロパティ] パネルを使用します。オプションはブロックの種類(タイトル、画像、ボタンなど)によって異なる場合があります。

4. 完了したら、右上隅にある [公開して終了 ] をクリックして変更を保存します。

---

行の追加

行は、コンテンツをセクションに整理することで、電子メールの構造を定義します。行を追加、複製、移動、カスタマイズして、必要なレイアウトを作成できます。

[行] タブでできること:

• 行を追加する: レイアウトを「 行」 タブからキャンバスにドラッグします。

• コンテンツブロックを追加する: 行が配置されたら、ブロック (テキスト、画像、ボタンなど) を行にドラッグします。

• 行を並べ替える: 行をドラッグして、レイアウト内で並べ替えます。

• 設定の編集: 行をクリックして設定パネルを開き、カスタマイズします。

行の設定には、次のものが含まれます。

背景

• 行の背景色: カラーパレットを使用して単色を選択します。

• コンテンツ領域の背景色: 行内のコンテンツコンテナーに別の色を適用します。

• 行の背景画像:

  • [ 行の背景画像] をオンに切り替えます。

  • [ 画像の選択 ] をクリックするか、画像 の URL を入力します。

  • [ 画像を適用] オプションを使用して、 背景をコンテンツ領域 または 行全体に適用します。

  • オプション設定:

    • 背景に合わせる: 画像を引き伸ばしてスペースを埋めます。

    • 繰り返す: 画像を水平方向または垂直方向に繰り返します。

    • 中央: 背景領域内の画像を中央に配置します。
      

国境

• コンテンツ領域の境界線: ドロップダウンを使用して、境界線 のスタイル、 サイズ、 色を調整します。

  • [ すべての側面 ]オプションを使用して、変更を均一に適用します。

  • [ その他のオプション] を切り替えて、各面を個別にスタイル設定します。

• コンテンツ領域の角の丸み: 角の半径を設定して、レイアウトを柔らかくします。

  • [ すべてのコーナー] を使用して同じ値を適用するか、[ その他のオプション ] を使用して各コーナーを個別に構成します。
  

レイアウト

• モバイルでのスタック: オンまたはオフを切り替えて、行の内容をモバイルデバイスで垂直にスタックするかどうかを制御します。

• モバイルでのスタック順序: モバイル表示のデフォルトまたは逆のスタックを選択します。

• 非表示にする: [オフ]、[デスクトップ]、または [モバイル] を選択して、特定のデバイスで行を表示または非表示にします。

  

動的コンテンツ

動的コンテンツを使用すると、特定の条件に基づいて受信者にさまざまな情報を表示できます。特定のコンテンツに動的コンテンツを追加すると、設定した条件を満たす受信者にのみ表示されます。ClickFunnels 電子メール エディターで動的コンテンツを使用する方法は次のとおりです。

• 条件の追加: 表示ルールを定義するパネルを開きます。
  

• フィールド:

  • 名前 と 説明: ルールを識別します。

  • 前 と 後: カスタム条件構文を定義します。

• 条件を編集または削除するには、行をクリックしてパネルの設定を調整します。

  手記

  現在、これらの条件を設定するには、連絡先 merge tags のみを使用できます。つまり、動的コンテンツを表示する条件は、受信者の名前、電子メール、連絡先の詳細に関連付けられたその他のカスタム フィールドなど、連絡先の差し込みタグで利用可能な情報のみに基づいて設定できます。

列構造

レイアウトの密度と列間の間隔を制御します。

• 新規追加: [+ 新規追加 ] をクリックして列を挿入します。
  

• 幅を調整する: 列の側面をドラッグしてサイズを変更します。

• 個々の列をカスタマイズします。

  列を直接クリックして、その設定パネルを開きます。そこから、次のことができます。

  • 背景色: 列ごとに色を設定します。

  • パディング: [すべての側面 ] で均一なパディングを適用するか、[ その他] オプションで微調整します。

  • 罫線: [ すべての辺 ] またはカスタム辺の [その他] オプション を使用して、罫線のスタイル、サイズ、色を設定します。

    

---

一般設定の管理

[ 設定 ] タブを使用して、メールのグローバル表示オプションを構成します。これらの変更はデザイン領域全体に適用され、一貫した表示スタイルを維持するのに役立ちます。

• コンテンツ領域の幅: スライダーを使用して、電子メール コンテンツの全体的な幅を調整します。

• コンテンツ領域の配置: 左または中央から選択して、デフォルトのコンテンツ配置を設定します。

• 背景色: メールレイアウト全体の背景色を選択します。

• コンテンツ領域の背景色: コンテンツ領域内に表示されるフォールバックの背景色を選択します。これは、背景画像を使用している場合や、コントラストを設定したい場合に便利です。

• デフォルトフォント: 新しいコンテンツブロックに適用するフォントを選択します。

• リンクの色: 電子メール内のすべてのハイパーリンクのデフォルトの色を選択します。

---

エディタツールバーの使用

メールをデザインしたら、上部のツールバーを使用して作業を完了または管理します。次のアクションを使用できます。

テンプレートとして保存

[ テンプレート] > [テンプレートとして保存 ] をクリックして、現在のデザインを今後のブロードキャストで再利用します。
新しいタブが開き、次のように求められます。

• テンプレート名を入力します

• オプションで 件名 を追加します (タグの差し込みをサポート)

保存したテンプレートは、[ **マイテンプレート]**で使用できます。電子メールテンプレートについて詳しくは、 How to Create and Manage Email Templatesを参照してください。

プレビュー

[ プレビュー] アイコンをクリックして、受信者の受信トレイにメールがどのように表示されるかを確認します。
次のことを選択できます。

• 現在の下書きを表示する

• 公開されたバージョンを表示する (利用可能な場合)

テストの送信

[テストを送信] をクリックして、メールをプレビューします。

テストは、自分自身または最大 5 人の受信者に送信できます。モーダルが表示され、次のことができます。

• テストの タイトル を入力します

• 送信元アドレスを選択します

• [送信先] でメール アドレスを追加する

これにより、公開前にデザイン、書式設定、コンテンツを確認できます。

ドラフトを破棄して終了

[ 下書きを破棄して終了 ] をクリックして、保存せずにエディターを終了します。
保存されていない変更はすべて失われます。

パブリッシュと終了

[公開して終了] をクリックして作業内容を保存し、ブロードキャスト設定ページに戻ります。
これは、ブロードキャストを送信またはスケジュールする前に変更を完了するために必要です。