-
5-1.デザインテンプレートを使ってHTMLメールを作成する
WiLL Mailでは、あらかじめ用意されたデザインテンプレートを使ってHTMLメールを作成できます。用途に合ったテンプレートを選択し、テキストや画像、ボタンなどを編集することで、HTMLの知識がなくてもメールの内容やデザインを変更できます。
ここでは、ECサイト向けのデザインテンプレートを例に、以下のようなHTMLメールを完成させる流れを説明します。
INDEX
1. デザインテンプレートを選択する
1-1. HTMLメール編集画面を開く
メールの［基本設定］画面で、［コンテンツ編集］をクリックし、表示されたメニューから［HTML］を選択します。
HTMLメール編集画面が表示されます。1-2. デザインテンプレートの選択画面を開く
HTMLメール編集画面右上の［その他の操作］をクリックし、［デザインテンプレート選択］を選択します。
デザインテンプレートの一覧が表示されます。1-3. 使用するテンプレートを選択する
用途に合ったデザインテンプレートにマウスカーソルを合わせると、［選択］と［プレビュー］が表示されます。
使用するテンプレートが決まったら、［選択］をクリックします。
ここでは、［ECサイト（多数商品掲載）］のテンプレートを選択します。テンプレートを選択すると、HTMLメール編集画面にテンプレートの内容が反映されます。
2. ヘッダーを編集する
選択したデザインテンプレートは、テキストや画像などをメールの内容に合わせて変更できます。
ここでは、メール上部のテキストとロゴを編集します。2-1. テキストコンポーネントを分割する
ヘッダー上部に配置されているテキストコンポーネントにマウスカーソルを合わせます。
コンポーネントが赤枠で表示されたら、［＋］をクリックします。
1つだったテキストコンポーネントが左右2つのブロックに分割されます。2-2. テキストを編集する
左側のテキストをクリックすると、文字の配置やサイズなどを変更できるWYSIWYGの編集メニューが表示されます。
文字の配置を［左寄せ］に変更し、既存のテキストを書き換えます。
ここでは、以下の内容を入力します。ウィルショップ・ニュースレター
2026.10.15(木)
必要に応じて、WYSIWYGの編集メニューからフォントサイズなどの書式も変更できます。2-3. ロゴ画像を変更する
テンプレート内のLOGO と記載されたダミー画像を選択すると、［イメージプロパティ］画面が表示されます。一番左の鉛筆アイコンをクリックします。
［画像選択］をクリックします。右上の[ファイル選択]をクリックして、HTMLメールに用いたい画像をアップロードします。アップロード済みの画像の一覧から使用するロゴ画像を選択します。
画像を選択して［選択する］をクリックすると、［イメージプロパティ］画面に選択した画像が設定されます。
必要に応じて画像の表示サイズを変更します。
ここでは、［幅］を「400px」に変更し、［決定］をクリックします。ロゴ画像が選択した画像に差し替わります。
2-4. 不要なコンポーネントを削除する
テンプレート内で使用しないコンポーネントは削除できます。
ここでは、「リンク1」～「リンク4」が配置されているテキストコンポーネントにマウスカーソルを合わせ、赤い枠のゴミ箱アイコンをクリックします。確認画面で［OK］をクリックすると、コンポーネントが削除されます。同様に、リンクの下に配置されている[ 罫線 ]コンポーネントも削除します。2-5. ロゴ周辺の余白を調整する
ロゴが配置されているコンポーネントにマウスカーソルを合わせます。赤枠の内側をクリックします。
WYSIWYGの編集メニューが表示されたら、右から3番目のパディング設定用のアイコンをクリックします。［パディングの設定］画面が表示され、選択したコンポーネントの上下左右の余白を調整できます。
ここでは、ロゴ周辺の上下の余白をなくすため、上と下のパディングをそれぞれ「0px」に変更します。設定が完了したら、［決定］をクリックします。
3. メイン画像・本文・ボタンを編集する
3-1. 不要なテキストコンポーネントを削除する
テンプレート内の「キャッチコピーを入力」と表示されているテキストコンポーネントにマウスカーソルを合わせます。コンポーネントが赤枠で表示されたら、ゴミ箱アイコンをクリックします。確認画面で［OK］をクリックすると、コンポーネントが削除されます。
3-2. メイン画像を変更する
続いて直下にある[ 画像コンポーネント]を編集します。「730×150」と表示されている画像部分をクリックし左上のアイコンをクリックし［イメージプロパティ］を表示させます。［画像選択］をクリックし、登録されている画像の一覧から使用する画像を選択します。画像を選択して［選択する］をクリックし、［イメージプロパティ］画面で［決定］をクリックします。選択した画像がメール内に反映されます。選択した画像がメール内に反映されます。3-3. 本文テキストを編集する
メイン画像の下にあるテキストコンポーネントをクリックすると、WYSIWYGの編集メニューが表示されます。
既存のテキストを選択し、メールの内容に合わせて書き換えます。ここでは、以下の内容に変更します。日々の暮らしをもっと快適に、もっと素敵に。厳選したおすすめの生活雑貨をこの機会にぜひお買い求めください。期間：2026年10月15日（木）～10月31日（土）まで本文の余白を調整する
テキストコンポーネントを選択した状態で、WYSIWYGの編集メニューからパディングの設定を開きます。
ここでは、本文下部の余白を小さくするため、下のパディングを「30px」から「10px」に変更し、［決定］をクリックします。文字サイズと期間を設定する
本文を選択し、フォントサイズを「14px」から「16px」に変更します。
3-4. ボタンの位置を変更する
テンプレート内のコンポーネントは、ドラッグして表示位置を変更できます。
ここでは、商品欄の下に配置されているボタンのコンポーネントを、中見出しの上へ移動します。
移動するコンポーネントにマウスカーソルを合わせ、コンポーネント右側の移動ハンドルをドラッグします。移動先に「コンポーネントを移動」と表示されたら、その位置までドラッグして移動します。3-5. ボタンを編集する
移動したボタンをクリックすると、ボタン用のWYSIWYG編集メニューが表示されます。
ボタン内のテキストを選択し、表示する文言に変更します。
ここでは、
「詳しくはこちらから >>」
に変更します。
また、ボタンの［幅］を「550px」から「400px」に変更します。3-7. ボタンにリンクを設定する
ボタンを選択し、WYSIWYGの編集メニューからリンク設定のアイコンをクリックします。
［リンクプロパティ］画面が表示されたら、［リンク先URL］にリンク先を入力します。
デフォルト値として「https://example.com」が挿入されていますので、この値を自社のURLに設定します。URLを入力したら、［決定］をクリックします。
4. おすすめ商品を編集する
テンプレートの商品紹介部分では、掲載する商品の数や画像、商品名、価格などを編集できます。
ここでは、2商品が配置されているテンプレートを3商品に変更し、それぞれの商品情報を設定します。4-1. 見出しを編集する
「中見出しテキストを入力」と表示されているテキストをクリックします。
WYSIWYGの編集メニューが表示されたら、既存のテキストを「おすすめ商品」に変更します。
入力したテキストを選択し、フォントサイズを「20px」から「28px」に変更します。4-2. 商品を3列に分割する
「358×150」と書かれた画像と商品情報が2列配置されている［画像＋テキスト］コンポーネントにマウスカーソルを合わせます。コンポーネントを選択し、表示された［＋］をクリックします。コンポーネントが分割され、商品を3列で配置できるようになります。
4-3. 商品画像を設定する
234×150と書かれたダミー画像の左上のアイコンをクリックすると、［イメージプロパティ］画面が表示されます。［画像選択］をクリックし、登録されている画像から使用する商品画像を選択します。
ここでは、3つの商品にそれぞれ以下の画像を設定します。- 1つ目：コーヒーカップ
- 2つ目：グラス
- 3つ目：タンブラー
画像を選択したら、画像の左上のアイコンをクリックして［イメージプロパティ］画面を表示し［リンク］に、画像をクリックした際のリンク先URLを入力します。
同様の操作を繰り返し、3つすべての商品画像とリンク先を設定します。4-4. 商品名と価格を編集する
商品画像の下にあるテキストをクリックすると、WYSIWYGの編集メニューが表示されます。テンプレートにあらかじめ入力されている商品名と価格を、それぞれの商品情報に変更します。
ここでは、以下の内容に変更します。
1つ目の商品
商品名：コーヒーカップ
価格：1,290円（税込）
2つ目の商品
商品名：グラス
価格：250円（税込）
3つ目の商品
商品名：タンブラー
価格：990円（税込）4-5. 罫線の位置を変更する
商品一覧の下に配置されている罫線コンポーネントにマウスカーソルを合わせます。罫線コンポーネントを選択し、上方向へドラッグします。「コンポーネントを移動」と表示される移動先までドラッグし、「おすすめ商品」の見出しより上の位置へ移動します。
5. メール下部とフッターを編集する
デザインテンプレートには、商品紹介やボタン、SNSなど、用途に応じて利用できるコンポーネントがあらかじめ配置されています。
使用しないコンポーネントは削除し、メール下部には送信者情報や必要なリンクを設定します。5-1. 使用しないコンポーネントを削除する
テンプレート内で使用しないコンポーネントにマウスカーソルを合わせます。
コンポーネントが赤枠で表示されたら、ゴミ箱アイコンをクリックします。
確認画面で［OK］をクリックすると、選択したコンポーネントが削除されます。
ここでは、商品一覧より下に配置されている以下の不要なコンポーネントを順番に削除します。- キャッチコピーのテキスト
- 「730×150」と表示された画像
- 3列の商品紹介
- 4列の商品紹介
- ボタン
- 罫線
- 「公式SNSアカウント」のテキスト
- SNS用のアイコン
- SNS欄の下にある罫線
- メルマガやサービスに関する説明用のテキスト
必要なコンポーネントだけを残すことで、メール下部を用途に合わせて整理できます。
5-2. 送信者情報を編集する
メール下部に配置されている送信者情報のテキストをクリックします。
WYSIWYGの編集メニューが表示されたら、あらかじめ入力されているテキストを選択し、実際の送信者情報に書き換えます。ここでは、以下の内容を入力します。本メールはサービスをご利用いただいている皆様にご案内しております。
株式会社サパナ WiLL Cloud運営事務局
〒140-0004
東京都品川区南品川2-4-1 品川YMDビル 9F
コーポレートサイト5-3. コーポレートサイトへのリンクを設定する
入力した「コーポレートサイト」の文字を選択します。
WYSIWYGの編集メニューからリンク設定のアイコンをクリックします。［リンクプロパティ］画面が表示されたら、［リンク先URL］に 自社サイトなどのURLを入力します。［決定］をクリックします。「コーポレートサイト」の文字にリンクが設定されます。5-4. 不要なフッターリンクを削除する
フッターにあらかじめ配置されている「リンク1」「リンク2」「リンク3」「リンク4」のテキストコンポーネントにマウスカーソルを合わせます。
ゴミ箱アイコンをクリックし、確認画面で［OK］をクリックします。
続けて、その下に配置されている罫線も同様に削除します。5-5. 著作権表記を編集する
フッター下部の著作権表記をクリックすると、WYSIWYGの編集メニューが表示されます。あらかじめ入力されている企業名部分を、実際の企業名に変更します。
6. 編集内容を保存する
編集が完了したら、画面右上の［保存］をクリックします。
「コンテンツを保存しました。」と表示されたら、編集内容の保存は完了です。
編集途中でも、必要に応じて［保存］をクリックし、こまめに編集内容を保存してください。7. プレビューとテストメールを確認する
メールの編集が完了したら、配信前にスマートフォンでの表示や、実際に届くメールの内容を確認します。
7-1. スマートフォンでの表示を確認する
WiLL MailのHTMLメールは、レスポンシブデザインに対応しています。レスポンシブデザインとは、パソコンやスマートフォンなど、閲覧する端末の画面幅に合わせてメールのレイアウトを自動的に調整する仕組みです。
レスポンシブデザインはデフォルトで［使用する］に設定されています。設定を変更する場合は、HTMLメール編集画面左側の［基本設定］にある［レスポンシブデザイン］から、［使用する］または［使用しない］を選択します。※レスポンシブデザインの設定変更を反映するには、［保存］をクリックしてください。ライブプレビューで表示を確認する
HTMLメール編集画面左上の［ライブプレビュー］をクリックします。画面左側にスマートフォンのプレビューが表示され、作成したメールがスマートフォンでどのように表示されるか確認できます。
プレビュー画面をスクロールして、画像やテキスト、ボタン、商品情報などの表示を確認します。レスポンシブデザインを使用している場合は、画面サイズに合わせてレイアウトが自動的に調整されます。
ここでは、パソコンでは横並びになっている3つの商品が、スマートフォンでは縦並びで表示されることを確認できます。7-2. テストメールを送信する
実際のメールソフトや端末で表示を確認する場合は、テストメールを送信します。
画面右上の［その他の操作］をクリックし、［テストメール送信］を選択すると［テストメール送信］画面が表示されます。メールアドレスを直接入力して送信する
［メールアドレス（オプション）］に、テストメールを送信するメールアドレスを入力します。入力後、［決定］をクリックすると、指定したメールアドレスにテストメールが送信されます。
よく使用するメールアドレスを登録する
毎回テストメールを送信するメールアドレスは、あらかじめ登録しておくこともできます。
同画面の［新しいメールアドレスを追加する］をクリックすると［メール管理・テストメール宛先の編集］画面が表示されます。［名前］と［メールアドレス］を入力し、［追加］をクリックします。
「登録しました。」と表示されたら、登録は完了です。画面を閉じて［テストメール送信］画面に戻ると、登録したメールアドレスが［メールアドレス選択］に表示されます。テストメールを送信するメールアドレスにチェックを入れ、［決定］をクリックします。これで、登録したメールアドレスにテストメールが送信されます。
8. HTMLメール編集でできるその他の操作
ここまでに紹介した操作のほかにも、HTMLメール編集ではレイアウトを細かく調整できます。
8-1. コンポーネント内のブロックの並び順を変更する
複数の商品などを横並びに配置しているコンポーネントでは、ブロックごとに表示順を変更できます。
移動したいブロックにマウスカーソルを合わせると、操作アイコンが表示されます。
［＜］または［＞］をクリックすると、選択したブロックを左右に移動できます。
たとえば、「コーヒーカップ」「グラス」「タンブラー」の各商品を左右へ移動し、並び順を変更できます。8-2. コンポーネント内のブロックを追加する
複数のブロックで構成されているコンポーネントでは、ブロックを追加できます。ブロックにマウスカーソルを合わせ、表示された［＋］をクリックします。選択したブロックと同じ内容のブロックが追加されます。
たとえば、3つの商品が並んだ［画像＋テキスト］コンポーネントにブロックを1つ追加すると、3分割のレイアウトを4分割に変更できます。追加したブロックの画像やテキストは、他のブロックと同様に編集できます。
8-3. コンポーネント内のブロックを削除する
削除するブロックにマウスカーソルを合わせ、表示されたゴミ箱アイコンをクリックします。
「このブロックを削除します。よろしいですか？」と表示されたら、［OK］をクリックします。
選択したブロックだけが削除されます。ブロックを削除したあとの幅を調整する
ブロックを削除しても、残ったブロックの幅は自動的には変更されません。
たとえば、4分割の状態から1つのブロックを削除すると、残った3つのブロックは4分割時の幅のままとなり、コンポーネント内に余白が生じます。
残ったブロックにマウスカーソルを合わせ、表示された操作アイコンのうち、右端の幅調整アイコンをクリックします。
同様に残りのブロックについても幅を調整すると、3つのブロックをコンポーネントの横幅いっぱいに配置できます。※コンポーネント全体を削除する操作とは異なり、ここではコンポーネント内の1つのブロックだけを追加・削除しています。
8-4. メールの横幅を変更する
HTMLメール全体の横幅も変更できます。
画面左側の［基本設定］にある［幅］から、メールの横幅を選択します。
たとえば、
「750px」から「650px」に変更すると、メール全体の表示幅が設定したサイズに合わせて変更されます。幅を大きくする場合
メールの横幅は、あとから大きくすることもできます。 たとえば、［幅］を「650px」から「750px」に戻すと、メール全体の横幅が750pxに広がります。
ただし、すでに配置している画像は、メールの横幅を広げても自動では拡大されません。そのため、画像の横に余白ができる場合があります。メール幅に合わせて画像を広げたい場合は、対象の画像にマウスカーソルを合わせ、表示される拡大アイコンをクリックして、画像の幅を調整してください。
メールの横幅を大きくした場合は、配置済みの画像サイズもあわせて確認することをおすすめします。8-5. メールの背景色を変更する
画面左側の［基本設定］にある［背景色］から、メールの外側に表示される背景色を変更できます。
［背景色］の設定欄をクリックすると、カラーパレットが表示されます。カラーパレットから色を選択するほか、カラーコードを指定して色を設定することもできます。[背景色（コンテンツ）]では、メール本文のコンテンツの背景色の変更が行えます。
ご質問はこちら
マニュアルで解決できなかったお客様は、お問い合わせフォームよりお問い合わせください。
※お問い合わせいただいたご質問内容は、担当者が確認の上、メールまたはお電話にてご返答させていただきます。ご質問内容や多数お問い合わせをいただいている場合は、返答にお時間をいただく場合がございます。
※お問い合わせいただいたご質問内容は、マニュアルコンテンツとしてWEBサイト上に掲載させていただく場合がございます。予めご了承ください。