Benchmark Email サポートセンター

AIサポートチャット(β版)をお試しください。

AIに質問する

サポートページ aero-right 自分でデザインしたHTMLメールを送れますか?

自分でデザインしたHTMLメールを送れますか?

メール配信機能 更新日 4月 17, 2023

動画
動画:メールエディタの選び方

はい、送れます。Benchmark Emailではドラッグ&ドロップ、テキスト版、HTMLコードの3種類のエディターをご用意しております。メールを作成する際にHTMLコードエディターを選択することで、ご自身でデザインされたHTMLコードを簡単に挿入することができます。

以下の手順は、すでにご自身のHTMLメールテンプレートを作成されていることを前提としております。使用したすべての画像がURLとして参照されることをご確認ください。

自分でデザインしたHTMLメールを作成する方法

1. アカウントにログインし、左のダッシュボードメニューよりメールメールを選択します。

2. 右上の「メール作成」ボタンをクリックし、通常メール配信を選択し、「次へ」ボタンをクリックします。

3. エディター選択ページでHTMLコードを選択し、「次へ」ボタンをクリックします。

4. メール名を入力します。こちらは管理用で購読者には表示されません。

5. メール名を入力後はメール編集画面に遷移します。すぐHTMLコードのエディターでメールを作成することができます。

6. 画面左に表示される Email Content と記載された箇所に、作成したコードを入力します。HTMLコードにすでにボディやHTMLタグを使用している場合は、エディターからタグを削除してください。

7. 右側の画面でリアルタイムにデザインを確認することが可能です。

8. HTMLコードの編集が全て完了しましたら、画面右下の「保存」または「保存&次へ」ボタンをクリックします。

  • 保存」ボタンをクリックすると、メールが保存され、後で編集をすることができます。
  • 保存&次へ」ボタンをクリックすると、メールチェックリストのページに遷移します。各項目を入力する際は、次の項目に移動する前に必ず「保存」をクリックしてください。
  • メール名を入力後はすぐにメール編集画面に遷移します。チェックリストの画面から再度編集ページに移動するには、チェックリストの本文&デザインから「メール編集」ボタンをクリックしてください。

HTMLコードのツールバーについて

  1. テーマスタイル:一番左のドロップダウンメニューよりコードエディターのテーマスタイルを変更することができます。
  2. 挿入機能:グリーティング(挨拶文)やパーソナライズタグを挿入することができます。コンタクト詳細タグを使用する前に、必ずコンタクトリストにフィールド項目が追加されているかご確認ください。
  3. テキストメール:HTMLメール内の全てのテキストが表示されます。ここで“X”と表示されている場合は、テキスト版とHTML版が同期化されていないことを意味します。同期化していないとメールの配信または配信予定の設定を行うことはできません。同期化するには以下の手順に従ってください。
    1. テキストメール」ボタンをクリック
    2. HTML版とテキスト版の内容を同期」ボタンをクリック
    3. ポップアップ画面で変更内容を確認し、「次へ」ボタンをクリック
    4. 左の「HTMLメール」ボタンをクリック
    5. これでメールの配信設定および配信をすることができます。
  4. 画像ギャラリー: 既存の画像を挿入または新しい画像をアップロードします。画像を選択した際、URLがメールのコードに挿入されます。必ず適切な画像タグ(例:<img>)を追加してください。
  5. コード閲覧:初期設定では、左にコード編集、右にHTMLメールの表示と分割表示になっています。コードを編集しながらどのようにメールで表示されるかを確認することができます。分割表示を解除しコード編集画面のみ表示させたい場合に、こちらのアイコンをクリックしてください。

設定オプションについて

画面左下にある「設定」ボタンをクリックします。フッタータブをクリックし、使用したい実際の事業所・オフィス所在地を変更したり、購読リンクを選択することができます。

コンテンツタブでは、パーミッションリマインダーやウェブページ表示のリンクを追加・削除することが可能です。(パーミッションリマインダーを追加するとGDPRに遵守したメールとなります。)

その他のオプションについて

右下に表示されるプレビューオプションをクリックすると、配信する前にメールがどのように表示されるかご確認いただけます。

また、テストのドロップダウンメニューは「テストメールの送信」「スパムチェック」「印刷プレビュー」「コンタクトを指定して表示」などがあり、「受信テスター」ではさまざまな受信箱でメールがどのように表示されるかをテストすることができます。

メールを配信する前に、受信者側でメールがどのように見えるかを確認する方法やテストメールの送り方に関しては、以下のFAQをご参照ください。

FAQ:送信前にメールを確認したいのですが、どのような方法がありますか?

FAQ:テストメールの送り方について

また、配信予定のメールが各メーラー(メールサービス)の受信箱でどのように表示されるかを確認したい場合は、受信テスター(有料)をご利用ください。詳しくは以下のFAQをご覧ください。

FAQ:受信テスターの目的と作成方法について

重要:コード編集画面内でコードを検索したい場合は、ショートカットキーをご利用ください。(Windows: Cmdキー+ F / Mac: Ctrlキー+F)

注意点:

画像やリンクなどを指定する時は、絶対パスを使用してください。

・絶対パスとは、URLでページを指定して、目的地(情報)がどこにあるのかを伝えます。リンク先のURLをhttp://〜省略することなく全て記述する方法です。以下のような絶対パスの指定方法であることを確認してください。

<a href=”http://www.mysite.com/myfolder/index.htm”>Click here for more info</a>

・相対パスとは、今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを伝えます。リンク先のURLを現在地から目的の位置までの道筋にある要素を順に並べて記述する方法です。画像やリンクなどを指定する際は、相対パスは使用しないでください。

<a href=”myfolder/index.htm”>Click here for more info</a>

Div/Layerを用いての位置調整は、ほとんどのメーラーで非対応となっているためBenchmark Emailでは推奨しておりません。

以下のようなコーディングは無効になりますので、ご注意ください。

<div style=”position:absolute; left:10px; top:10px; float:left;”> Hello </div>

画像や文字の配置を調整するにはテーブルタグをご利用ください。

トップに戻る


ご不明な点がございましたら、サポートまでお知らせください。

>>「メール作成:編集操作」のまとめページに戻る

Benchmarkから業界トレンド&最新情報をお届けします

ご登録頂きありがとうございます!

登録を完了させるには、認証メールのご確認をお願いします。