メルマガ(HTMLメール作成)
メルマガ作成の手順(HTMLメール)
ここでは既にプランが作成されている状態からの説明になります。プラン作成後のプラン管理画面からメルマガの作成を行います。プラン新規作成について詳しくはプラン新規作成をご覧ください。
1. メール作成画面の選択
作成したメルマガプラン内の以下の箇所に、メルマガ・ステップメール・リマインドメール
それぞれの[HTMLメール]作成項目がありますので、ご希望の項目をクリックしてください。
①メルマガを[HTMLメール]で作成する場合
②ステップメールを[HTMLメール]で作成する場合
③リマインドメールを[HTMLメール]で作成する場合
2. テンプレートの選択
テンプレート画面が表示されますので、テンプレートからご希望に合うものを選択してください。
白紙:このテンプレートでは、初期設定がなく、真っ白な状態からメールを作成できます。
リッチテキスト:シンプルなテキストベースのメールを作成できます。
用途別テンプレート:商品画像や価格などが配置しやすいレイアウトが初期設定されています。
バックナンバーから作成:過去に配信したHTMLメールから同じレイアウトを使って作成できます。
3. メール作成画面の表示
メール作成画面が表示されますので、タイトル・本文を作成し、配信日時を指定してください。
プラン新規作成時に設定した以下の項目は自動的に表示となります。
発行者名(必須):配信時に使用するお名前です。
発行者メールアドレス(必須):配信時に使用するメールアドレスです。
※発行者メールアドレスには独自ドメインのメールアドレスをご設定ください。
GmailやYahooのようなフリーメールアドレスでの配信はせっかくのメルマガが迷惑メールに振り分けされてしまいます。独自ドメインのメールアドレスの設定をお願いしています。
件名:メールの件名となります。
レイアウト設定に戻る:テンプレートの一覧に戻ります。
レイアウトのリセット:レイアウトを元のテンプレートにリセットします。
フルスクリーン:全画面の表示ができます。
ブラウザやオレンジメールのメニューやツールバーが非表示になるため、利用可能な画面スペースが増えます。
プレビュー:内容や仕上がりを事前に確認することができます。
ブロックの表示:ブロック枠線の表示・非表示ができます。
※各ブロックの操作方法についてはこちら
全体のスタイル:HTMLメールの全体のスタイルの「背景色」「上下左右の余白」の設定ができます。
配信日時:メルマガ予約配信日時を設定できます。3年後まで予約が可能です。
※メルマガ作成~予約した配信日時までの期間に読者の新規登録や登録解除があった場合も、配信先のリストに反映されます。実際に配信されるのは、配信日時時点での最新の読者リスト宛となります。
絞り込み条件:メルマガを配信する読者を絞り込むことができます。特に絞り込む必要がない、プラン内の全ての読者に配信する場合には絞り込み条件なしを選択してください。
置換可能な文字列の一覧:メルマガ作成画面の右側の置換文字挿入時の置換文字可能な文字列の一覧です。
【オプショナル機能】
プラン移動URL:メールで特定のURLをクリックした読者を別のプランへ移動やコピーをするプラン移動用URLを作成できます。
プラン移動URLについて詳しくはプラン移動URL作成 – メルマガ配信中に他のメルマガも読んで欲しいをご覧ください。
4. メルマガ作成の確認画面
メールが完成後、画面下部の[次へ]をクリックします。メルマガ作成の確認画面が表示されます。内容を確認します。
【ご注意】配信解除URLについて
【警告】登録解除リンクが挿入されていませんが、そのまま送信してよろしいですか?
※表示する義務について
発行者の氏名・名称、住所、配信解除URL等の発行者の情報は、特定電子メール法により、広告宣伝のために送信するメールに必ず記載するよう定められています。詳しくは表示義務のページをご参照ください。
配信解除リンク等が入っている場合には、以下のようにメルマガ作成画面が表示となります。
戻るボタン:内容を訂正したい時になど、編集画面に戻ることができます。
クリック解析:本文中にURLがある場合には、クリック解析を有効にして、クリック傾向やポイントをつけることができます。
詳しくは、メルマガ・ステップメール別クリック解析や読者がURLをクリックした時にポイントをつけるには?をご覧ください。
置換文字の部分は実際の配信の際には、例えば、「読者の姓様」は「◯◯様」と読者登録データと置き換わります。
5. 配信方法の選択
内容が正しければ、配信を行います。配信方法を選択してクリックしてください。
【選べる3つの配信方法 】
- 配信を予約する:メルマガ作成時に指定した配信日時にメルマガを配信します。
- すぐに配信する:5分後にメルマガを配信します。クリックすると確認メッセージ「5分後に配信セットされます。」が表示されます。配信してよろしければ[OK]をクリックしてください。
- テスト配信する:任意のメールアドレス宛にテスト配信します。このテスト配信は読者データベースにアクセスをしないため、主にレイアウトの確認にご利用ください。置換文字は変換されません。実際どのように置換文字が変換されるのかを確認したい場合には、ご自身のメールアドレスを読者登録し、そのメールアドレスに絞り込んでからすぐに配信する(即時配信)で配信テストを行ってください。詳しいテスト配信と即時配信の違いについてはテスト配信で置き換え文字を確認するには?をご覧ください。
まだ、配信を行いたくない場合には、[下書き保存]をクリックして保存し、後で編集することができます。
6. メルマガ一覧の表示、メルマガ配信完了通知
配信方法の選択後メルマガ一覧が表示されます。配信後に、メルマガ配信完了通知が届きます。
配信予約する、すぐに配信するを選択した場合には、メルマガ一覧が表示となり、配信の予約リストが表示されます。
メルマガが配信されると、配信の予約リストから消え、メルマガ配信ログに移動します。
また、メルマガが配信されると、発行者メールアドレス宛に件名:「【オレンジメール】メルマガ配信完了通知」が届きます。配信が完了した旨、配信件数・時間・メルマガの内容が送信されます。
なお、この通知はOFFにはできませんことをご了承ください。
ブロックとは?
HTMLメールでは、文字や画像などをきれいに並べて配置するために「ブロック」という単位を使います。ブロックは、メールを作るときの基本的なパーツで、カラム(横に分けた枠)の中に置く、一つひとつの要素を指します。
このブロックを組み合わせることで、メール全体の見た目を整えていきます。
ブロックは、挿入したいところに「ドラッグ&ドロップ」で配置ができます。
ブロックを設置する
カラムブロックを設置する
カラムブロックはレイアウトの分割を行うことができます。
1.ブロックの中からカラムを「ドラッグ&ドロップ」で配置します。
2.右側に[カラム設定]が表示されるので、「背景色」の変更や「カラムレイアウト」の選択をします。
3.背景色の変更やレイアウトの分割を確認します。
4.レイアウトが決まったら、カラムの中にテキストブロックや画像ブロックを「ドラッグ&ドロップ」で配置ができます。
背景やレイアウトを変更したい場合は、ブロック枠線をクリックすることで、
右側に[カラム設定]が表示されますので、そこから変更することができます。
テキストブロックを配置する
1.テキストを配置したいカラムの中にテキストブロックを「ドラッグ&ドロップ」で配置します。
2.配置後ダブルクリックすることで、テキストの入力や編集ができ、ツールバーからテキストの装飾ができます。
また、左側のテキスト設定より、「背景色」「上下左右の余白」の設定ができます。
※実際のテキストの装飾方法やリンクの設定については「文字色を変更する」や「テキストにリンクを設定する」をご覧ください。
ツールバーの説明はこちら
画像ブロックを配置する
1.画像を配置したいカラムの中に画像ブロックを「ドラッグ&ドロップ」で配置します。
2.配置後ダブルクリックすることで、画像の選択をすることができます。
また、左側の画像設定より、「画像のリンク」「上下左右の余白」「幅」「位置」の設定ができます。
※実際の画像の挿入やリンクの設定については、「画像を挿入する」「画像ににリンクを設定する」をご覧ください。
ボタンブロックを配置する
1.ボタンを配置したいカラムの中にボタンブロックを「ドラッグ&ドロップ」で配置します。
2.配置後文字列をダブルクリックで選択し、ツールバーからリンクを設定することができます。
また、左側のボタン設定より、「ボタンの色」「背景色」「角丸」「上下左右の余白」「位置」の設定ができます。
ツールバーの説明はこちら
区切り線ブロックを配置する
1.区切り線を配置したいカラムの中に区切り線ブロックを「ドラッグ&ドロップ」で配置します。
2.区切り線が配置されたら、左側の区切り線設定より、「区切り線の色」「背景色」「上下左右の余白」「線の太さ」の設定ができます。
HTMLメールで本文を装飾しよう
文字色を変更する
2. [テキストの色]のアイコンをクリックし、好みの色を選択します。
※色選択画面の右下にある「カスタム」をクリックすると、カラー選択ツールが表示され、カラーコードの指定も可能です。
テキストにリンクを設定する
2.ツールバーの[リンク]ボタンをクリックします。
3.リンク設定の画面が表示されますので、URLを入力または「リンクタイプ」から選択し「OK」ボタンをクリックします。
この画面では、リンクを設定するテキストも編集が可能です。
直接入力:横の欄に直接URLを入力してください。
バックナンバーページのURL:バックナンバーページをリンク先として設定できます。
登録専用ページURL:メルマガ登録専用ページをリンク先として設定できます。
解除専用ページURL:読者解除専用ページをリンク先として設定できます。
変更専用ページURL:メールアドレス変更専用ページをリンク先として設定できます。
4.プレビューを開き、リンクの確認をします。
<ツールバーの説明>
記号 | 説明 |
![]() |
置換したい項目を選択し、置換文字を挿入できます。 |
![]() |
テキストのサイズを変更します。 テキストのサイズは以下の種類から指定できます。 ・特小
・小
・中
・大
・特大
・極大
|
![]() |
テキストの字体を変更できます。 |
![]() |
テキストのスタイル(太字、斜体、下線、取り消し線)を変更できます。 |
![]() |
|
![]() |
|
![]() |
|
![]() |
テキストの色を指定します。 |
![]() |
テキストの背景色を指定します。 |
![]() |
リンクを設定します。 |
![]() |
リンクの設定を解除します。 |
![]() |
番号付き箇条書きに変更します。 |
![]() |
箇条書きに変更します。 |
![]() |
左揃え(コンテンツをブロックの左余白に合わせます) |
![]() |
中央揃え(コンテンツをブロックの中央に合わせます) |
![]() |
右揃え(コンテンツをブロックの右余白の内側に合わせます) |
![]() |
両端揃え(コンテンツの両端がブロックの左右の余白に揃うように合わせます) |
画像を挿入する
1.画像ブロックをダブルクリックします。
※用途別テンプレートの場合は、「サンプル画像」をダブルクリックします。
※画像ブロックの配置についてはこちら
2.[画像の選択]が表示されます。
3.[アップロード][画像一覧][URLから取得]より画像を選択します。
アップロード:パソコン内に保存している画像を画像一覧に追加します。

4. 画像が挿入されたことを確認します。
※画像の大きさは[画像設定]の[幅]で調整ができます。
画像ににリンクを設定する
2.URLを入力または選択します。
直接入力:下の欄に直接URLを入力してください。
バックナンバーページのURL:バックナンバーページをリンク先として設定できます。
登録専用ページURL:メルマガ登録専用ページをリンク先として設定できます。
解除専用ページURL:読者解除専用ページをリンク先として設定できます。
変更専用ページURL:メールアドレス変更専用ページをリンク先として設定できます。
3.プレビューを開き、リンクが設定されたことを確認します。
メルマガ配信ログ
配信済メルマガのログが確認できます。
[配信形式]で、配信したメルマガがテキスト形式かHTML形式かを区別できます。
※旧HTMLメールの場合は、「リッチテキストメール」と表示されます。
その他、配信ログの確認方法はこちらをご覧ください。
メルマガ別クリック解析
配信済メルマガにクリック解析を適用していた場合の解析結果の確認画面です。
[配信形式]で、配信したメルマガがテキスト形式かHTML形式かを区別できます。
※旧HTMLメールの場合は、「リッチテキストメール」と表示されます。
その他、クリック解析の確認方法はこちらをご覧ください。
よくある質問(FAQ)
添付できる画像の最大サイズを教えてください。
HTMLソースを直接編集することはできますか?
HTMLソースの直接編集はできません。
オレンジメールのHTMLメールは、初心者の方でも直観的に操作が可能なように設計されており、
管理画面上でカスタマイズ可能な範囲のみ編集いただけます。
HTMLメールでスプリットテストは使用できますか?
画像はコピー&ペーストできますか?
装飾文字や画像のコピー&ペーストできませんが、画像一覧から同じ画像を選択することができます。
動画を挿入することはできますか?
テキストメールで使用できるテンプレート編集機能はHTMLメールでも使えますか?
テンプレート編集機能はテキストメールのみご利用が可能です。
なお、HTMLメールでも以下の方法を活用することで、
テンプレートのように繰り返しご利用いただくことが可能です。
- ヘッダーやフッターなどの共通部分を記載したHTMLメールを下書き保存し、
「メルマガ一覧画面」に表示される下書きを、「コピーして作成」機能で作成する。
<参考>下書き
- 「メルマガ配信ログ」から過去に配信したHTMLメールをコピーして作成する。
<参考>配信済みのメルマガ原稿をコピーする
- 「バックナンバーから作成」から同じレイアウトを使って作成する。
関連ページ
・【小規模事業者応援メルマガ バックナンバー】印象アップ!シンプルな装飾で差をつける文章作成の秘訣
・【サポートサイト】 プラン新規作成
・【サポートサイト】 基本的なメルマガの作成・配信方法
・【サポートサイト】 メルマガ配信ログ
・【サポートサイト】 メルマガ・ステップメール別クリック解析
お問い合わせは、お問い合わせフォームよりお願いいたします。