HTMLメール作成・配信

基本設定の確認

HTMLメールの幅、背景色、フォントなど、メール全体の基本設定を確認します。自社Webサイトやブランドに準じた設定を選びましょう。

メール幅の設定をする

メールの幅とは、コンポーネントで調整できる範囲を指します。幅の設定プルダウンメニューで、550px〜800pxのサイズを選択できます。メール内の画像は、幅に応じて自動で縮小・拡大されます。利用する画像の解像度に最適な幅値を選びましょう。

背景色の設定をする

背景色は、画面全体の背景色と、コンテンツ部分の背景色の２つの設定が可能です。背景色の設定は、カラーパレットから色を選択するか、RGBカラーコードを直接入力して設定することができます。

フォントのデフォルト設定をする

1.フォントは、「明朝」か「ゴシック」のいづれかを選択できます。

2.デフォルトのフォントサイズを、10px〜28pxの中から選択できます。

3.デフォルトのフォントカラーを、カラーパレットもしくはRGBカラーコードで指定できます。

4.行間を1〜2まで0.1行単位で指定できます。プレビューを見ながら最適な行間を設定してください。

レイアウト作成

HTMLメールのレイアウトは、コンポーネントを組み合わせて作成します。ドラック＆ドロップ等の簡単なマウス操作で、思い通りのレイアウトを作成することができます。

コンポーネントを組み合わせて作成したHTMLメールの図解

コンポーネントの位置を上下移動させる方法

HTMLエディタ上で作成したコンポーネントにカーソルを合わせると、編集用の赤枠が表示されます。赤枠の右端をつまんでドラッグすると、コンポーネントを上下に移動させることができます。

コンポーネントのコピーをする方法

コピーしたいコンポーネントにカーソルを合わせて、右下のコピーアイコンをクリックすると、直下にコンポーネントのコピーが作成されます。

横並びのレイアウトを作成する方法

分割したいコンポーネントにカーソルを合わせて、[+]アイコンをクリックするとコンポーネントが分割されます。最大で4分割のレイアウト作成が可能です。

[<] [>]アイコンをクリックすると、分割したコンポーネントの左右の移動が簡単に行えます。

余白、ボーダー（罫線）を設定する方法

編集したいコンポーネントにカーソルを合わせて、テーブルアイコンをクリックすると、コンポーネントのテーブルプロパティ設定が開きます。

コンポーネント内の余白や、ボーダーの設定が可能です。適度な余白を設けることで、見栄えが良くなりコンテンツも見やすくなります。

・セルパディング：内側の余白
・セルスペース：外側の余白
・テーブル背景色：コンポーネント内の背景色
・ボーダー幅、スタイル、ボーダーカラー：罫線の設定

テキスト編集

HTMLメール内のテキスト編集画面は、WYSIWYGエディタ（テキスト編集ツール）を使って行います。ブログのような感覚でテキスト編集が可能です。

WYSIWYGエディタの使い方

まずは、テキストコンポーネントをドラッグして、編集画面にドロップします。デフォルトのテキストが表示されますので、文章を自由に入力しましょう。「Enter(return)キー」で改行が可能です。文章ができあがったら、WYSIWYGエディタで好みのスタイルに調整することができます。

各アイコンの機能説明

リンクの挿入方法

リンクを挿入したい文字を選択し、リンクアイコンをクリックすると、リンクプロパティが表示されます。

リンク先URL欄に、遷移させたいURLを入力すればリンクの設定は完了です。入力したURLは、メール受信時にWiLL MailのリダイレクトURLに変換されます。これにより、クリック数を取得することができます。

メールアドレスをリンク挿入する方法

リンク先URLに、「mailto:」と入力しその直後にメールアドレスを入力します。読者がこのリンクをクリックすると、入力したアドレスを宛先とした状態でメールソフトを起動させることができます。

リンク先URLにタグを挿入する方法

リンク先URLの右横にある「タグを挿入」をクリックすると、「ダウンロードリンク」「配信停止リンク」「スマートリンク」など特別な機能を持ったリンクを簡単に挿入することができます。

パーソナライズタグの挿入方法

WiLL Mailは、データベース項目を用いて、メールをパーソナライズさせることができます。名前や会社名などを差し込むことで、One to Oneで配信しているようなメールコンテンツを作成することができます。

パーソナライズアイコンをクリックすると、データベースの項目がプルダウンで選択できるようになります。タグを挿入すると、以下の図のように@{名前}というタグが挿入されます。

パーソナライズタグを挿入したメールを実際に受け取ると、以下の図のように項目に準じた値に変換されて表示されます。

テキストの上下左右に余白を設定する方法

メルマガを読みやすく綺麗に仕上げるコツは、適度な余白を設けることです。パディング設定アイコンをクリックすると、テキストコンポーネントの上下左右のパディング（内側の余白）を指定できます。

以下の図ように、テキストの上下左右に20pxのパディングが設定されます。

画像の挿入と編集

画像の挿入もコンポーネントを使って簡単に行うことができます。HTMLメールに挿入する画像は、WiLL Mailの画像ストレージにアップロードして利用することができます。

画像の挿入方法

画像コンポーネントをドラックして編集画面にドロップします。

画像の縦横サイズが入ったダミー画像が挿入されます。

画像にカーソルを合わせて２回クリックすると、左上に画像編集用のアイコンが表示されます。

フォルダアイコンをクリックすると、画像ストレージが表示されます。[ファイル選択]または、[外部URLから取得]ボタンをクリックして、利用したい画像をストレージにアップロードしましょう。

挿入したい画像をクリックして選択すると、エディタに画像が挿入されます。

画像の編集方法

編集したい画像の編集アイコンをアイコンをクリックすると、イメージプロパティが開きます。

イメージプロパティでは、画像の差し替え、サイズ指定、リンク挿入などが行えます。画像パスには、画像ストレージのパスを指定できる他、貴社ウェブサイトなどで使用している外部の画像URLを直接入力して、画像を読み込ませることもできます。

プレビュー確認・テストメール送信

作成したHTMLメールは、本配信前にプレビュー画面で表示確認を行いましょう。また、テストメール送信を行い実際に端末での見え方も確認しましょう。

プレビュー画面

プレビュー画面では、以下の端末サイズ毎に表示を切り替えてHTMLメールやテキストメールの表示を確認することができます。

テストメールの送信方法

プレビュー画面の[テストメール送信]ボタンをクリックします。

テストメール送信画面が開きますので、テストメールを送りたいメールアドレスを選択して、[決定]ボタンをクリックします。

指定したメールアドレス宛に、テストメールが送信されます。

配信スケジュール設定

メールの配信スケジュール設定は、カレンダー表示画面を利用して行います。カレンダーには過去の配信履歴も表示されます。配信間隔や配信曜日が適切かどうかを確認しながらスケジュールの設定が可能です。

夜間自動配信停止機能

迷惑メール対策として、夜間の配信停止時間を設定することができます。設定した配信停止時間になると自動的に配信を一時停止し、配信停止時間を過ぎるとメール配信が再開されます。

スマホでも見やすいHTMLメールを作るコツ

HTMLエディタには、スマートフォンでの表示プレビューを確認しながら編集が行えるライブプレビュー機能が搭載されています。スマホでの見栄えが重要な場合には、PCとスマホの見え方も見比べながら制作を進めることで、効率良く美しいHTMLメールを作成することができます。

HTMLメール配信時の問題点とは？！

近年、HTMLメールの配信を行う企業が増えている一方で、ユーザー側のデバイス環境も多様化しています。そのため、配信したHTMLメールがユーザー側でうまく表示されないという問題が多く起きています。WiLL Mailは、HTMLメールを正しく表示するための３つの機能を提供しています。

1. スマートフォン表示対応レスポンシブデザイン

レスポンシブデザインとは、画面サイズに応じて最適なレイアウトでページを表示する技術です。PCやスマートフォン・タブレットなど、ユーザーがどのデバイスでHTMLメールを閲覧しても、それぞれのデバイスに最適化されたメールを自動的に表示してくれます。

2. スマートリンク機能

携帯キャリアのメールアドレスは、HTMLメールを表示できないスマホ端末も多数存在します。こういった端末で閲覧した読者にも確実にコンテンツを届ける方法として、スマートリンク機能を用意しています。エディタで作成したHTMLメールは、複製がWebサーバー上にも自動生成されます。HTMLメールがうまく表示されない場合は、スマートリンクを通じて、ブラウザ版のHTMLコンテンツへ誘導することができます。

また、スマートリンクは読者ごとにユニークなURLとなるため、クリック数や開封数の取得できる他、メール内に差し込んだデータベースの項目名もWebブラウザに引き継いで表示することができます。

スマートフォンでレイアウトが崩れる主な環境

3. マルチパート配信

HTMLメールの表示可否には、携帯キャリア、端末、OS、ブラウザ等の複雑な要素が関係しています。HTMLメールが受信できないユーザーには、代替えのテキストメールを送信するマルチパート配信が可能です。HTMLメールとテキストメールの両方を準備する必要がありますが、ユーザーに正しい情報を確実に届けることができます。