こんにちは！
みなさん、いかがおすごしでしょうか。
さて、最近は、メールマガジンと言えばHTMLと言えるほど、HTMLメルマガが一般的になってきました。HTMLメルマガというのは文字や画像の自由度が高いのですが、それだけに効果を高めるうえでデザインの重要性がより大きいと言えます。では、どうすれば多くの人に読んでもらえるのか。
今回はこの点を解説していきたいと思います。
はじめに
HTMLメルマガを作るときに押さえておくべきデザインのコツをお伝えします。なお、先述の通り、「HTMLやCSSの知識がある程度ある」ことを前提としてのお話となりますので、ご了承くださいね。
しかし、HTMLやCSSは初心者には難しく感じるかもしれませんが、ある程度ブログ、ホームページ、とくにワードプレスなどを使用してブログやホームページを構築している人で、「オリジナリティのあるページを作りたい」と思っている人は、ある程度は自然に身に付いていくかと思います。
なぜならば、オリジナリティを出そうといろいろ行なおうと思えば思うほど、HTMLたCSSを使わなければ、なかなかそのようなページが思うように出来ないからです。
勿論、今はプラグインも発達していきているので、ある程度はカバーできますが、やはり、なるべくストレートに思っているページを作ろうと思えばHTMLやCSSを使用する必要性が出てくるでしょう。
それは、さておき、今回は、HTMLを使用したメールマガジンについて「多くの人に読んでもらうために気を付けておく点」を中心に解説していこうと思いますので、以下、参照をしてみて下さい。
メールマガジンの「読まれるデザイン」には、各々ポイントがある
HTMLメールマガジンデザインにおけるマルチデバイス対応の重要性はコレ！
HTMLを利用したメールマガジンのデザイン作成にはいくつかポイントがあります。全部を扱うと長くなるので、今回はそのうちのひとつ、マルチデバイス対応に注目してみましょう。近年はパソコンだけでなく、スマートフォンの画面からメルマガを見る人がどんどん増えています。
デザインにおいても、デバイスを問わず使用できること、つまりマルチデバイス対応にすることは、かなり重要なポイントになります。そのために非常に有用なのが、レスポンシブデザインです。
レスポンシブデザインというのは、1つのHTMLを設定するだけで、どんなデバイス端末からでも見やすく、使いやすいレイアウトにできる技術です。
これをHTMLメールに応用したレスポンシブメールであれば、開封時に自動的にメルマガを授受した端末を判別し、スマートフォンであればスマートフォン用、PCならPC用という具合に最適なHTMLを表示してくれます。
同じ内容のメルマガなのにわざわざ別々のHTMLを作るのはかなりの二度手間になりますから、これはかなりありがたいですよね。
このレスポンシブデザインには、主に3種類のレイアウトがあります。
メールマガジンのデザインは、以下の3つの方法で対処しよう！
まず、一つ目は「レスポンシブレイアウト」です。デバイスの画面幅に応じてCSSを切り替えることでコンテンツの配置や表示の有無を変えることができます。デザインを切り替える位置をCSSで指定し、ユーザーの使用端末に合わせて表示する仕組みです。
二つ目は、「リキッドレイアウト」です。ユーザーがメルマガを見るときの画面サイズに応じてメルマガ全体の幅を自動的に変更し、画面幅にフィットさせます。れぞれのHTML要素について単位を%で指示する仕組みになっていて、できることは幅を変えることだけです。
そのため、CSSを活用するレスポンシブレイアウトに比べるとデザインの自由度は下がります。しかし、どの端末からでも全体をしっかり表示させることができますし、比較的制作コストが安く済み、さらにレイアウト崩れのリスクも少ないといったメリットがあります。
三つ目は「フレキシブルレイアウト」です。各HTML要素の単位をパーセンテージで指定するのは前述の「リキッドレイアウト」と同じですが、こちらは同時に最小幅と最大幅も指定できるという違いがあります。たとえばユーザーの画面サイズが大きい場合があります。
その場合は、リキッドレイアウトでは画面の幅に合わせてどこまででもメルマガが拡大されます。一方のフレキシブルレイアウトでは、メルマガの幅が指定した最大値以上に広がることはなく、画面には最大値を超えた分だけ余白が広がっていくことになります。
HTMLメールマガジンにおけるレスポンシブメールのデメリット
もちろん、レスポンシブメールにはデメリットもあります。1つのHTMLで済むがために、その1つを正確に記述しなければ、見栄えが悪くなってしまいます。メールマガジンを開封した時に文章の大きさが不恰好だったり画像が崩れたりとデバイスによって問題は様々です。
デザインを固めるためには、PCやスマフォなどのそれぞれの端末から何回も表示を見直し、手直ししなければなりません。ですから、このようなレスポンシブメールを制作するには、HTMLやCSSに関する専門知識が不可欠なのです。
おわりに
いかがだったでしょうか。
最近ではスマートフォンの使用が優勢になりつつあるので、スマフォで開いたときに読みやすいデザインを重視する傾向があります。1つのデザインパターンを使用して、デバイスに関係なく見せる技術を「スケーラブルデザイン」といいます。
しかし、こちらの場合、わざわざマルチデバイスでの見え方を考慮する必要がありません。デバイスによっては画像やテキストなどがサイズが元のサイズから小さくなるというデメリットはありますが、コードの記述という観点からすると、レスポンシブデザインよりよっぽど簡単です。
スピードを重視したい場合、そもそも知識に自信がない場合には、こちらを利用するのも一つの手です。 メルマガの目的やご自身の技術と知識に合わせて、最適なデザインを選ぶのが良いでしょう。
参考URL:https://www.webcas.jp/email/knowhow/mailmag-design/
コメント