お役立ちコラムメルマガ配信・一斉メール配信サービスの【配配メール】お役立ちコラムメルマガのデザインを極める!HTMLメールの見やすい設定とデザインのコツメルマガのデザインを極める!HTMLメールの見やすい設定とデザインのコツHTMLメールTweetHTMLメールはデザイン性に優れ、テキストメールより多くの情報を伝えられます。配信したメールの効果が伸び悩んでいるなら、設定やデザインを見直してはいかがでしょうか。他社のHTMLメールの事例を参考に、自社のユーザーに好まれるメールを考えてみましょう。HTMLメールの特徴HTMLメールはHTMLとCSSで構成されるため、テキストメールよりも豊富な表現が可能です。効果測定も容易なため、多くの企業のメルマガに利用されています。幅広い表現力が魅力HTMLはテキストと画像を使いメッセージをユーザーに伝えられるため、工夫次第でよりわかりやすく、印象に残りやすいメールを作成できます。昔の携帯電話と違い、スマートフォンは画面サイズも大きいため、アイキャッチ画像をひとつ入れるだけでも、ユーザーの目を引きやすくなります。アパレルや家電販売などのECサイトは、注目商品の画像を表示することで訴求力も高まります。効果測定でユーザーの特性を把握HTMLメールに画像やリンクのURLを埋め込むことで、クリックされたときにデータ読み出しのリクエストがサーバーに送られます。このリクエストを元に、開封率・クリック率・開封といったユーザーの特性を確認することが可能です。した情報から、ユーザーの傾向を把握して仮説を立てることが、メルマガ配信の効果を高めるために必要となります。リンクの位置、文量、画像の枚数を定期的に変更することにより、最も効果が出やすい設定が自社のユーザーにあったデザインになります。ここでは、「情報を集め、仮説を立て、改善案を試す」そしてまた、改善案の効果がでたのか情報を集めるといったサイクルを繰り返し、HTMLメールをより良いものにしていきましょう。作成の注意点HTMLメールをすべてのユーザーに同じように表示させるためには、設定が必要です。設定によっては表示が崩れ、自分が思ったデザインになっていないケースもあります。どのような部分に注意するべきか確認しておきましょう。レスポンシブデザインパソコンで確認したときはキレイに見えていたのに、スマートフォンやタブレットで確認してみると、レイアウトが崩れているケースがあります。この問題は、レスポンシブデザイン対応のメールであれば解消されます。レスポンシブデザインは、画面サイズに合わせてメールのレイアウトが変化することで、どの端末でも見やすくなるというものです。以前は実装難易度が高いデメリットがありましたが、現在ではレスポンシブデザインに対応したHTMLメールテンプレートを利用できるメール配信ソフト・サービスも登場して、作成の手間を軽減できるようになっています。マルチパートメール画像と文字装飾でユーザーの目を引くデザインを作りやすいHTMLメールですが、すべてのユーザーが閲覧できるとは限りません。HTMLメールに対応していないメールソフトの場合、開封されても本文が表示されずにソースコートがそのまま表示されてしまいます。マルチパート配信では、HTMLとテキストの両方をひとつのメールとして送ることができます。HTMLメールに対応していないユーザーへは、画像の部分をテキストで置き換えて表示してくれるため、デザインが大きく崩れることはありません。画像はサーバーにアップして『http://』から始まる絶対パスで記述してください。画像を非表示に設定しているユーザーもいるため、alt属性にわかりやすい文章を入れておきましょう。その他では、「アニメーションGIFや背景画像に頼ったデザインはデバイスによって表示されないことを考慮する」「画像で容量が重くなるとスパム認定される可能性があるため軽くする」といった点で注意が必要です。サイズ設定HTMLメールの横幅は600pxか850pxで設定できます。主な違いは、表示されるデバイスでの見やすさ・インパクトの違いです。600pxはスマホでは読みやすくなりますが、パソコンでの表示は少しインパクトに欠けてしまいます。横幅だけでなくフォントサイズも大切なところであり、スマートフォンで拡大せずに読めるサイズは15pt以上です。主なユーザーのデバイスがパソコンなのかスマートフォンなのか、文字サイズは読みやすくなっているかを意識してHTMLメールを作成しましょう。HTMLメールの『サイズ』に関しては、こちらの記事でも詳しく紹介しています。関連記事はこちら知らないと恥ずかしい!?HTMLメールを作る時に知っておくべきサイズHTMLメールに必要なスキル一般的な内容であれば、HTMLとCSSを理解していれば、対応可能です。一人で作成する場合には、構成を考えたり、テキストを校正したりと作業は多岐に渡りますので、可能ならチームを作って分業するのがおすすめです。HTMLメール作成のコツHTMLメールは上記のような機能的な部分を理解した上で、ユーザーの心を掴めるようなポイントを意識して作成していく必要があります。どのような手順で構成を考えるのか、以下の項目を参考にしてみてください。ターゲットや目的を具体的に考える「どのような相手に」「どんな内容を」「ゴールはどこに設定するのか」など、デザインを考える前にメルマガの概要を設定しておく必要があります。デザインはあくまで目的達成のための手段なので、この軸を明確にしておくことがメルマガの配信において非常に重要です。相手の受信環境を考えるHTMLメールは受け取る側の端末やソフトなどの環境によって表示のされ方に差が生じてしまいます。全ての状況を網羅することは難しいですが、主要な端末での動作確認や表示確認などは事前に行うようにしましょう。デザインも表示されなければ意味がありません。UI/UXを考慮しようスマホでの閲覧が圧倒的に多数を占める状況です。スマホユーザーの目線の位置や指の位置に考慮したデザインで、スムーズにコンバージョンさせていくような戦略を練ると良いでしょう。UI/UXについては、複数の関係者の意見を取り入れながら、運用と並行して改善を行なっていく必要もあります。スマホに対応したランディングページを用意しておくメルマガからの遷移先が整っていないとコンバージョンが期待できません。スマホ専用のランディングページを作成する必要はありませんが、レスポンシブ対応デザインのWEBページにするなど、必ず、スマホで問題無く表示ができるランディングページを用意しておきましょう。メルマガ解除の導線を明示するメルマガの解除と登録は表裏一体です。解除の導線がわかりにくい設計のデザインだと、安心して受信できません。確実に見つけられる場所に解約の導線を用意しておくことで、より信頼のおける関係性を構築しましょう。HTMLメールのデザインを学ぶ「メールのデザインをより良くしたい」、「もっと目を引く効果的なデザインにしたい」と考えているのなら、他社のメルマガを参考にしてみるのも効果的です。HTMLメールを見てみると、サムネイル画像は大きめ、ただしゴチャゴチャしていると読みづらくなるので、シンプルに作られているものを多く見かけます。メールからWebサイトまでの動線のわかりやすさ、文章量での見やすさなども参考にできるはずです。実際に参考にするためにメルマガを見てみようと考えたときに、気になる企業すべてのメルマガ登録をして確認するのは大変です。そこで、おしゃれなHTMLメールを紹介しているサイトをご紹介します。Gallery海外の事例のみになりますが、種類が多く画像配置やリンク設置などのパターンを参考にできます。大手企業のメルマガも紹介されているので、ぜひ目を通してみてください。Galleryこちらも先ほど紹介したサイトと同じく、海外の事例を紹介しています。奇抜なデザインのメールも紹介されているので、他社とは違ったデザインのメールを作る際に参考になるかもしれません。InspirationCodeCampusプログラミング講習やテクノロジーの情報を発信するCodeCampusでも、ファッションや通販業界を中心にHTMLメールの事例が紹介されました。アパレル系ではメール全体の印象や頻度、件名に人気商品を入れることで、開封率を高める工夫なども紹介されています。CodeCampusASCII.jpこちらはWebデザインからマーケティングまでさまざまな情報を紹介しているサイトになります。その中で、ファッションや小売業、旅行といったさまざまな業種のHTMLメールが紹介されました。商品ページへのリンク設定の位置やコンテンツのまとめ方を業種ごとに閲覧できるため、サイト自体も見やすい構成になっています。ASCII.jp:絶対見ておきたい国内有名企業のHTMLメール事例まとめツールを使って早く魅力的に作るHTMLメールを使った集客の経験があまりなく、まだデザインに悩んでいる方もいらっしゃると思います。いった方は、テンプレートやツールの力に頼ってみてはいかがでしょうか。テンプレートの利用テンプレートを活用することで、ひとりでは思いつかないようなデザインを取り入れながら、工数を削減することが可能です。無料でテンプレートをダウンロードできるサイトもありますし、中には用意されたテンプレートを元に、自社に合わせてカスタマイズできるサイトもあります。普段送るメールはもちろん、キャンペーン情報などの使用回数が限られているメールは、いつもとは違うテンプレートを使うことで簡単にデザインの変更が可能です。無料テンプレートを紹介しているサイトは、サイトによってシンプルなデザインや高級感のあるものなど特徴が違います。何種類か確認して、相性の良さそうなものを選びましょう。おすすめのサイトを5つ紹介するので参考にしてください。ZURBZURBはカリフォルニアのデザインカンパニー、Foundationが公開しているオープンソースで、メールだけでなくサイトとアプリ用のデザインテンプレートも提供しています。無料テンプレートの定番となっており、ベーシックなデザインからシーンを選べずに利用できるのが人気の理由です。HTMLの初心者にはおすすめのテンプレートといえるでしょう。CakeMailメール配信システムのCakeMailはHTMLメールのテンプレートを無料で提供しています。テンプレートの数は50以上にものぼり、人気の高いものは4万回以上もダウンロードされています。無料とはいえ、海外サービスならではのハイセンスなデザインが人気の理由となっています。CakeMailAntwortレスポンシブデザインの無料テンプレートをダウンロードできます。デザインがシンプルなため、HTMLメール初心者でもとっつきやすいです。幅広いメールクライアント(Gmail、Yahoo!Mail、Hotmail、Outlookなど)に対応しており、使い勝手がいいのが特徴です。AntwortBeeFree8つあるベースのデザインから選んで、ブラウザ上でカスタマイズできるテンプレートです。ベースのデザインの品質が高い上に、自分でもカスタマイズできる希望通りのHTMLメールを作れます。HTMLメールに慣れてきて、少し凝ったデザインを作りたい方におすすめです。Iシンプルながらも精密に計算されたデザインで、HTMLメール初心者から玄人まで納得できるサイトです。SNSでも多くのシェアを集めたこともあり、幅広い層に人気があります。2013年に提供を開始した、比較的新しい無料テンプレート配布サイトです。Iメール配信サービスの導入メール配信サービスを利用すると、簡単にHTMLメールの作成・効果測定が行えます。装飾に必要なHTMLタグの知識がなくても使いやすいように制作されているため、初心者の方でも安心です。もの実績を持つ配配メールでは、HTMLメールをより簡単に作成するために『HTMLエディタ』をオプションでご用意しています。この機能ではドラッグ&ドロップの直感的な操作で、画像、テキスト、リンクボタンなどのコンテンツを配置可能です。配配メールではミスなく効果的に配信する、効果を測定して改善するといったマーケティングに重要な機能も用意されています。手軽に効果的なHTMLメールを作成したい方は、ぜひ、ご確認ください。自社の顧客に合わせたデザインを探すユーザーの閲覧しているデバイス、業種、年齢層によって、必要なレイアウト設定・求められるデザインは異なります。どのデバイスでも見やすい設定にした後は、メールの開封率やクリック率といった情報を確認して、ユーザーの好みに合ったデザインを模索します。した測定・分析・改善を繰り返すことで、今以上にHTMLメールの効果を高められるはずです。今回紹介した配配メールにもHTMLエディタのほか、作成したメールをテンプレートとして登録する機能が備わっています。ユーザーの反応の良かったメールをテンプレート化して、自社の顧客に合わせたデザインに近づけていきましょう。本番環境そのままのサービスをぜひお気軽にお試しください。※無料トライアルで登録可能なアドレスは100件迄となります。お申込みはこちら資料請求・お問い合わせ機能やプランの詳細から運用のご相談内容まで、営業担当がお答えします。お問い合わせはこちらガイドブックダウンロードこれからメールマーケティングを始める方に最適な、実践的なガイドブックを無料でダウンロードできます。配配メールの最新情報をお届けするほか、メール配信にまつわる実践に役立つ情報をお届けします。メールアドレス※ご登録いただいた方は、「個人情報の取り扱いについて」に同意したものとみなします。レンタルサーバーサービス22,826社、のべ59,426社のご契約を頂いております。