(公開日2023年08月04日)
「HTMLメールのデザイン性の幅を広げたい」
「Outlookを使ったHTMLメールをカスタマイズする方法を知りたい」
そういった方のために記事を書いています。
企業の営業・マーケティング担当者、フリーランスの個人事業主の方は、Outlookを使ったHTMLメールを作る際に、デザイン性の幅をもっと広げたいと思うはずです。この記事では、Outlookを使ってHTMLメールを作る場合のカスタマイズの仕方を解説します。
これを読めばデザイン性の高いHTMLメールを作れるようになり、そしてお客様の視覚に訴えて内容を伝えやすくなり、メールを読んでもらえる確率が高くなるでしょう。営業・マーケティングを効率よく行う際に役立ててみてください。
2023年5月現在、最新バージョンのデスクトップ版Outlookを使ってHTMLメールを作成する方法を解説します。
方法1．既定の書式を変更する
方法2．新規メール作成ウインドウを開きメールを制作
方法3．送信する
まずOutlookのウインドウを開き、最上部にある「表示」タブを選んでください。次にその下にある「ビューの設定」をクリックすると、メールの設定画面が別ウィンドウで現れます。
レイアウト、作成と返信、スマート候補などを個別に設定してください。
メールの一覧のレイアウトを設定します。個別のメールのレイアウトではありません。
・テキストのサイズ：大・中・小から選べます
・メッセージの高さ
・送信者のプロフィール画像を表示するかどうか
・プレビューテキストを表示するかどうか
個別メールのメッセージ形式を設定します。選択肢はHTML、プレーンテキストの２種類であり、以前のバージョンで設定されていたリッチテキストはなくなっています。HTMLメール作成時はHTMLを選んでください。
フォントのスタイルと大きさを選べます。いろいろなスタイルがありますが、多くのメールクライアントが対応できるように、一般的なスタイルを選びましょう。大きさは10〜12くらいにしてください。
楽しいアニメーションは、Happy Birthdayのような言葉が含まれると、自動的にアニメーションを表示する機能です。Outlookで受信すると、Happy Birthdayの場合は紙吹雪が舞います。ただしGmilで受信すると何も起こりません。対応できるメールクライアントは限られているようです。
メッセージの中に含まれるキーワードが自動的に強調され、おすすめ情報が表示される機能です。楽しいアニメーションと同様に、受信するメールクライアントは限定されると思われます。
書式を変更したら、HTMLメールを作成します。最上部にある「ホーム」タブを選び、その下にある「新規メール」をクリックしてください。別ウィンドウでメール作成画面が現れます。
初期設定ではメニューがシンプルなリボンになっていますが、右上部にあるリボン表示オプションをクリックすると、もっと詳しいクラシックリボンに変わります。基本機能は、以下のように一般的なエディターと同じ内容です。
テキストの太さ、斜体、下線、取り消し線、ハイライトカラー、重要度、フォントの色、箇条書き、段落番号、インデント、整列、引用、下付き文字、上付き文字
添付ファイル、リンク、署名、ピクチャー、絵文字、表を挿入できます。
添付ファイルは、以前のバージョンではメッセージ内にテキスト表示で挿入できたようですが、最新バージョンは対応していません。
マイテンプレートは、よく使う文章表現をストックしておき文章中に挿入するひな形機能です。以前のバージョンでは「テーマ」が選べたようですが、最新バージョンは対応していません。
参考サイト：「メールメッセージにひな形、背景、またはテーマを適用する｜Microsoft」
メッセージタブに含まれる内容と同じです。
エディターは、記述の誤り、簡潔な表現、正式な用法、表記の基準、表記の揺れをチェックしてくれます。他にスケジュール送信、重要度、暗号化、テキスト形式の切り替えなどができます。
実例として以下の画像のようなHTMLメールを作りました。
宛先にメールアドレスを記入して、送信ボタンをクリックします。指定したメールアドレス宛にHTMLメールが送信されました。以下の画像はGmailで受信した事例です。
Outlookで作成したHTMLメールと同じものが受信されています。ただし編集機能に限りがあり、あまり満足できるメールではありません。もっとデザイン性の高いHTMLメールにしたいですね。次の段落でカスタマイズする方法を解説します。
デザイン性の高いHTMLメールを作成するには、自分でコーディングするのが一番よい方法です。ただしOutlookは外付けのカスタマイズに対応しておらず、直接HTMLを記述できません。以下の方法でHTMLメールを制作・送信してください。
方法1．自分でコーディングしてHTMLメールを制作する
方法2．ブラウザで表示させる
方法3．Outlookにコピーして送信する
エディターを用いてHTMLを作成してください。基本的なやり方は以下のとおりです。ただしウェブサイトのコーディングとはやり方が異なり、多くの方は戸惑うと思います。
最新のHTMLを用いると、大抵のメールクライアントは対応できません。文字化けしたり、レイアウトがくずれたりするために不適切です。
HTMLメールはtable要素を用いてレイアウトを構築します。テーブルレイアウトは、最近のウェブデザインにはあまり用いられませんが、昔のウェブデザインで用いられていた手法です。
外部CSSを使用すると、メールクライアントは対応できません。埋め込み型あるいはインラインCSSを用いてください。埋め込み型CSSは、<head>にCSSを記述する形式です。またインラインCSSはHTMLタグの中にCSSスタイルを記述します。
見出しタグはメールクライアントの間に標準のサポートがないため、例えば「h1」と記述しても反映されません。見出しにはインライン形式でCSSを反映させてください。
Outlookはマージンタグをサポートしていないため、他のメールクライアントと比べると、Outlookで受信した場合は行間が広くなります。ですからマージンタグを用いてコーディングしても意味がありません。この点は割り切ってメール作成するしかないでしょう。
大抵のメールクライアントは、フォントの一括プロパティーをサポートしていません。ですから「style=”font:12px/18px Arial、sans-serif ”」などは使わないようにしましょう。代わりに特定のフォントへインラインCSSスタイルを設定してください。
メールクライアントは、容量が大きなメールを表示できません。例えばGmailは102kb以上のメールをクリッピングしてしまいます。動画などの容量が大きな要素は不向きです。代わりにGIFアニメーションを使用するとよいでしょう。
独自にHTMLを作成して、ブラウザで表示させてみました。
トップ画像はGIFアニメーション、しかもレスポンシブデザインであり、一般的なウェブデザインと見た目は同じです。これならば視覚に訴えて見栄えもよく、訴求性の高いメールと言えましょう。
ブラウザの画面を丸ごとコピーして、OutlookのHTML画面にペーストします。
みごとに画面が再現されました。宛先にメールアドレスを記入して送信ボタンをクリックします。この事例ではgmailで受信しました。
ちゃんとHTMLメールが受信されています。見た目はブラウザで表示した時と同じで、GIFも見られます。しかもレスポンシブデザインになっており、表示の崩れもありません。HTMLメールの作成・送信が成功しました。
➀HTMLメール自体が受信されない場合の対策
②HTMLメールが表示されない場合の対策
③HTMLメールの画像が表示されない場合の対策
④HTMLメールが崩れる場合の対策
⑤返信メールのテキスト形式が変更できない場合の対策
迷惑メール対策のフィルターがかけられていると思われます。例えば受信するメールクライアントがOutlookならば、次のように確認してください。
Outlook の設定メニュー＞メール＞迷惑メールをクリックし、フィルターの設定でを確認
「信頼できる差出人とドメインのリストと受信許可メーリングリストにあるアドレスからのメールだけを信頼する」にチェックが入っていないか？
チェックが入っていれば外すことで受信できますが強要はできません。受信許可メーリングリストにアドレスを登録してもらうのが最善です。
メールは受信されるのに、メールの内容が表示されない場合、受信するメールクライアントの書式がプレーンテキストモードになっていることが考えられます。HTMLモードに変えてもらえれば受信できますが強要はできません。
またスマートフォンのキャリアメール・MMSで受信している場合も考えられます。この場合もHTMLメールを受信できないことがあり、それを解決するのは不可能です。代わりにマルチパート配信をして、HTMLメールが見られない環境では、テキストメールを表示させるとよいでしょう。
迷惑メール対策のフィルターがかけられており、画像が表示されないのが原因と思われます。例えばOutlookなら以下のように確認できます。
Outlook の設定メニュー＞メール＞迷惑メールをクリックし、フィルターの設定を確認
「信頼できる差出人とドメインのリストにない送信者からの添付ファイル、画像、リンクを拒否する」にチェックが入っていないか？
チェックを外すと受信できますが、強要はできません。この場合もマルチパート配信をして、テキストメールを表示させるとよいでしょう。またHTMLメールと同じ内容のウェブサイトを用意しリンク誘導するのが効果的です。
HTMLメールを受信するデバイスとメールクライアントの組み合わせによっては、レイアウトが崩れてしまいます。せっかく構築したHTMLメールも正しく表示されません。
オリジナルのHTMLメールを作成する際、Tableレイアウト、インライン形式でコーディングするとよいでしょう。具体的には、Tableの幅を「max-width」で指定すると、レスポンシブのように表示できます。
ただしOutlookで受信すると崩れることがあります。その対策としては、Outlookで受信するケースに備えてTableのwidthを固定するしかないでしょう。この場合は、[if mso]、[end if] といった if 文を用いますが、慣れていないと難しいですね。
プレーンテキスト形式で送られてきたメールに、HTML形式で返信してもプレーンテキスト形式になってしまうケースがあります。これをHTML形式に変更できないかと考える人がいるようです。
このケースでは、相手がHTML形式をプレーンテキスト形式に変換するように設定していると思われます。ですからHTML形式で返信すること自体が無理です。プレーンテキスト形式で送って来たメールには、プレーンテキスト形式で返信するのが常識でしょう。
興味がある方は以下のリンクページをご覧ください。
関連記事：HTMLメールの作り方・作成手順のコツをプロが徹底解説
OutlookでHTMLメールを作成すると、編集機能に限りがあり、あまり満足できるメールではありません。もっとデザイン性の高いHTMLメールを作成するには、カスタマイズが必要です。HTMLメールを独自にコーディングして、OutlookのHTML画面にコピーして送信するのがよいでしょう。GIFアニメーションなどを使った、レスポンシブ対応のHTMLメールを制作できます。
ただしHTMLメールのコーディングは、テーブルレイアウト、インラインCSSといった特殊な手法が必要です。ウェブサイトのコーディングとは全く別物であり、慣れていないとHTMLメールが崩れてしまいます。本業の合間にコーディングするのは難しいと思われますので、専門家に依頼してHTMLメールを制作してもらうことをおすすめします。
興味がある方は以下のリンクページをご覧ください。
