今回もワイメール公式コラムをご覧いただきありがとうございます。
HTMLメールを作成するうえで、よく耳にするのが「レスポンシブ対応」という言葉。これは一般的に、HTMLコンテンツを閲覧するデバイスの画面幅などに合わせて、コンテンツが見やすくなるように、画像やタイトル等の位置を変更したり、サイズを調整したりすることを指します。
しかしこの調整が意外と面倒だったり、細かいところまで考慮しないと、予想外の表示の崩れが発生したりします。
そこで今回は、レスポンシブ対応不要でも綺麗に見える5つのポイントをご紹介します。
目次
レスポンシブ対応は意外と面倒
レスポンシブ対応を行うためには、専用のCSSを記述する必要があります。例えば、画面幅480px以下で見た場合は、ここの画像は縦配置（ブロック要素）にする、などといった記述を、改めてCSSに追記する必要があります。
しかし慣れていないと、この調整が意外に時間を要します。1つの要素を動かしたことにより、全体的なバランスが崩れたり、隣の要素に近づきすぎたり離れすぎたり、PCとスマホでは綺麗に見えるがタブレットだと見づらかったり、、などなど。
このような時に役立つのが、すでにレスポンシブ対応がなされているテンプレートを使うことですが、各要素をオリジナルの画像や文章に差し替えると、最初のイメージと結構変わってしまうことが多々あります。
特に英語圏で配布されているテンプレートは、文章を日本語に修正すると、全体のバランスがおかしくなったり、余白が不自然になってしまったりすることはよくあります。
無理にレスポンシブ対応しなくても大丈夫
シンプルでよいので、もっと手軽にある程度見栄えのよい、オリジナルのHTMLメールを作りたい！と思う方もいるかもしれません。
以下では、レスポンシブ対応不要で、すべてのデバイスでHTMLメールがある程度綺麗に見えるポイントを5つご紹介します。
なお、以降ではHTML・CSSの記述例が出てきますが、簡単なHTML・CSSを書いたことのある方であれば、問題なくご理解いただけるかと思います。
viewport（ビューポート）を適切に指定する
これは、閲覧する画面に応じて、表示領域を自動で調整してくださいね、というHTML上の宣言です。headタグ内のmetaタグで指定します。
これが無いと、コンテンツが画面の外にはみ出してしまったり、文字が小さすぎて読めない、といった不具合が発生する場合があります。
配布されているテンプレートなどではすでに記載済みのものがほとんどかと思いますが、フルスクラッチの場合（自分で一から作る場合）などは、忘れずに記載しましょう。
|
1 2 3 4 5 6 7 8 |
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> （コンテンツエリア） </body> </html> |
CSSに「word-break: break-all;」を指定する
これは、右端で文字列を折り返す際は、一文字一文字区切って折り返しなさいというCSS上の宣言です。
この指定がないと、英字部分は単語間のスペースで折り返されるため、日本語と英語が混じったメールなどでは、バランスが崩れてしまうことがあります。
|
1 2 3 4 5 |
: <body style="word-break: break-all;"> 日本語の文章 ＆ Sentences in English </body> : |
|
1 2 3 4 5 6 7 8 9 10 |
: <body> 日本語の文章 ＆ Sentences in English <style> body{ word-break: break-all; } </style> </body> : |
外枠の最大幅を固定し画像の最大幅を100％にする
画面幅が広い環境で見たときに、コンテンツが横に広がりすぎないように、コンテンツの外枠の最大幅（max-width）を固定します。メールの場合、おすすめは600px～700pxです。
最近はdivタグでHTMLを組んでも崩れないメーラが多くなってきましたが、基本的にはtableタグで組むことをお勧めします。
max-widthを指定しておけば、画面幅が狭くなっていったときに、基本的に外枠ははそのまま縮小されていき、広くなっていったときは、逆に広がっていきますが、指定した幅で広がりはストップし、自然な見た目になります。
また、画像のmax-widthを100％に指定しておけば、外枠や外側のセルより大きいサイズの画像を指定した場合や、幅の狭い画面で見た場合でも、はみ出さずに枠内に収めることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
: <body> <!-- 外枠のtable --> <table style="border:none;max-width: 600px;"> <tr> <td> <!-- 画像 --> <img src="https://example.jp/gazou.png" style="max-width:100%;"> </td> </tr> </table> </body> : |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
: <body> <!-- 外枠のtable --> <table class="outer_frame"> <tr> <td> <!-- 画像 --> <img src="https://example.jp/gazou.png"> </td> </tr> </table> <style> table.outer_frame{ border:none; max-width: 600px; } img{ max-width:100%; } </style> </body> : |
画像を横に並べるときは2つまでにする
閲覧する最小のデバイスは、iPhone10程度の画面サイズであることを想定した場合、画像を並べるのは2枚までにしておくことをお勧めします。
3枚以上並べると、モバイル端末で見た時に画像が縮小されて見づらくなってしまうのと、見やすくするために縦並びにしようとするとレスポンシブ対応用のCSSが必要になるからです。
画像の隣に文章を配置したい場合には、画像1つ＋文章ブロック1つまでの組み合わせがおすすめです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
: <body> <!-- 外枠のtable --> <table style="border:none;max-width: 600px;"> <tr> <td> <!-- 外枠のtableの内側にもう一つtableを作ると編集が楽です --> <table> <tr> <td> <!-- 画像1 --> <img src="https://example.jp/gazou1.png" style="max-width:100%;"> </td> <td> <!-- 画像2 --> <img src="https://example.jp/gazou2.png" style="max-width:100%;"> </td> </tr> </table> </td> </tr> </table> </body> : |
画像、ボタン、文章の混同した横並びを避ける
これは賛否両論あるかと思いますが、横方向は同一タイプの要素のみで統一する、と決めておいた方が、想定外の表示トラブルを減らせるでしょう。
というのも、タイプの異なる要素を並べた時、幅の狭い画面で見た時、画面幅に収まらない部分が下側に回り込むことで、おかしな表示になってしまうことがあるからです。
横方向は同一タイプの要素だけで構成した例（上：PC向け、下：スマホ向け）
以上5点にだけ最低限気をつけていただければ、どのような画面幅で見た場合でも、レスポンシブ対応不要で、自然に見えるHTMLメールを作成することができます。ぜひ参考にしてみてください。
HTMLメールの作り方については、以下の記事などでもご紹介しておりますので、お時間がありましたらぜひご参照ください。
最後に
今回は、フルスクラッチや汎用テンプレートを用いてHTMLメールを作成する際に、レスポンシブ対応不要でかつ見た目の良いHTMLメールを手軽に作成するポイントをご紹介しました。
Webページの作成を行った経験のある方であれば、特に困ることなく、これらのポイントを取り入れていただけると思います。
なお、HTML・CSSをまったく触れたことのない方は、ワイメールや、DD Editorなど、専門知識不要で、自然なレイアウトの作成・編集が行えるサービスを利用することも一つの方法です。
余白の大きさなど、細かい設定なども、マウス操作だけで簡単に行うことができます。ぜひ、効率的なメールコンテンツの作成にお役立てください。