WiLL Mail メール作成から配信まで

5-7.HTMLメール編集（プレビュー・その他）

HTMLメールの編集が完了したら、プレビューやテストメールを使って、実際の表示に問題がないか確認します。
パソコンとスマートフォンでは、メールの横幅や画像の大きさ、文章の折り返し方が異なります。配信前に、両方の表示を確認しましょう。

INDEX

• ライブプレビューで、スマホの見栄えを確認しましょう
• スマホのレイアウトについてよくあるご質問
  • セルスペースの設定方法
• 「その他の操作」について
  • 1．携帯プレビュー
  • 2．テストメール送信
  • 3．デザインテンプレート選択
  • 4．ソースエディタ編集

ライブプレビューで、スマホの見栄えを確認する

ライブプレビューでは、HTMLメールを編集しながら、スマートフォンでの表示イメージを確認できます。
文章や画像を変更するとプレビューにも反映されるため、次のような点を確認しながら編集を進められます。

• 文章が読みやすく改行されているか
• 画像が画面の横幅に収まっているか
• 文字やボタンが小さすぎないか
• 横並びのレイアウトが読みにくくなっていないか
• 左右の余白が狭すぎたり、広すぎたりしないか

---

スマホのレイアウトについてよくあるご質問

スマートフォンで表示したとき、メールの左右に余白を設けられますか？

コンポーネントの「テーブルプロパティ設定」から、セルスペースを指定することで余白を調整できます。

セルスペースの設定方法

手順1端にスペースを設けたいコンポーネントを選択し、テーブルアイコン（）で、「テーブルプロパティ設定」を表示させます。

手順2「セルスペース」に任意の数値を入力します。例えば、”10”と指定して決定をクリックした場合は、スマホ端末の左右に10ピクセル分のスペースが設けられます。

セルスペースとセルパディングの違い

項目	設定する余白
セルスペース	分割した枠やコンテンツ同士の間に設ける余白
セルパディング	枠の内側で、文章や画像の周囲に設ける余白

元の仕様上、今回のスマートフォン左右の余白調整では「セルスペース」を使用します。

---

「その他の操作」について

その他の操作では、スマホプレビューやテストメール送信が行えます。

主な機能は次のとおりです。

1. 携帯プレビュー
2. テストメール送信
3. デザインテンプレート選択
4. ソースエディタ編集

1．携帯プレビュー

「携帯プレビュー」では、携帯端末やスマートフォンで表示した場合のレイアウトを確認できます。
左上のデバイス回転ボタン（）をクリックすると横向きのレイアウトも確認出来ます。

確認するポイント

• 縦向きで文章や画像が収まっているか
• 横向きにしてもレイアウトが崩れないか
• 画像が大きすぎたり、小さすぎたりしないか
• 横並びのコンテンツが読みにくくなっていないか
• リンクやボタンが押しやすい大きさか

管理画面上の正式な機能名が「携帯プレビュー」である場合は、その名称を見出しに残しつつ、本文ではスマートフォンを含む表示確認機能であることを説明すると分かりやすくなります。

2．テストメール送信

編集中のメールを、登録されたアドレス宛にテスト配信できます。

管理画面上のプレビューだけではなく、実際のメールソフトや端末で表示を確認するために使用します。

[新しいメールアドレスを追加する]リンクをクリックすると、使う頻度の高いアドレスを登録できます。

テストメールで確認すること

• 送信元の表示名とメールアドレス
• 件名とプリヘッダーテキスト
• 文章の改行や文字サイズ
• 画像の表示と大きさ
• リンクやボタンの遷移先
• 配信停止リンク
• スマートリンク
• ダウンロードリンク
• PCとスマートフォンでのレイアウト

可能であれば、複数のメールソフトや端末で確認してください。受信環境によって、フォントや余白などの見え方が異なる場合があります。

パーソナライズタグの値はテストメールには反映されない

件名や本文にパーソナライズタグを挿入している場合、テストメール送信で送ったメールには、該当のDB項目の実際の値は反映されません。

• 関連ページ：5-2.HTMLメール編集（テキスト編集）

例えば、DBの”氏名”という項目を挿入していた場合、テストメール送信を用いて送られたメールには、実際の値ではなく”@{氏名}”という管理画面上の設定値が表示されます。これは、テストメールでは具体的に参照できる値が存在しないためです。

もし、パーソナライズタグの値を実際に反映したメールの確認・テストを行いたい場合は、ご自身のメールアドレスや社内のメールアドレスなど、確認・テスト用のメールアドレスをDBにインポートいただき、それらに対して実際に配信することでご確認いただきます。

3．デザインテンプレート選択

WiLL Mailに用意されているデザインテンプレートを利用できます。テンプレートは、テキストや画像などのコンポーネントを組み合わせて作られているため、選択後も文章、画像、色、レイアウトなどを編集できます。初めてHTMLメールを作成する場合や、メールの構成を短時間で準備したい場合に便利です。

4．ソースエディタ編集

ソースエディタでは、HTMLのソースコードを直接編集できます。
HTMLの知識があり、コンポーネントでは対応できない詳細な調整を行う場合に使用します。

重要
一度ソースエディタでの編集へ切り替えると、コンポーネントを組み合わせる通常の編集画面には戻れません。HTMLに不慣れな方は使用しないでください。

ソースエディタを使用する場合は、切り替える前に次の対応をおすすめします。

• 現在のメールを保存する
• 必要に応じてメールを複製する
• プレビューやテストメールで現在の表示を記録する
• HTML編集に詳しい担当者へ確認する

---

前の記事 5-6.HTMLメール編集（基本設定の確認） 次の記事 6.設定内容を確認する