MAmag.は、MAでマーケティングを身近にする情報を提供するマガジンです。

スマホ対応のHTMLメルマガを配信するときのポイント

モバイル端末の普及が進むにつれて、メルマガもスマートフォン（以下スマホ）で読むというかたが増えています。

当然PCで読むのと、スマホで読むのとでは見え方が異なります。

従来はPCでの見やすさだけを考慮していればよかったのですが、スマホが普及している今ではスマホ対応させることも考慮しなければいけません。

この記事では、メルマガ配信をする際のスマホ対応のポイントについてご説明します。

メルマガ配信におけるトレンド

メルマガは、スマホ対応したHTML形式で送ることが必要不可欠とまで言われるようになりました。それはなぜでしょうか。

スマホ対応が欠かせない

iPhoneが2007年に米国で発売されてから10年以上が経過しました。
以下のグラフによると、個人のスマホの所有率は2011年に14.6％であったものが、2016年には56.8％と5年間で4倍に上昇しています。

スマホやタブレット端末の普及により、取引先や職場との連絡をはじめ、インターネットでの情報収集なども移動中の電車の中や外出先で対応できるようになりました。
オフィスのPCで読んでいたメルマガも、通勤途中や移動中のスキマ時間に読むことも多くなったでしょう。

個人の利用する端末の変化に合わせて、スマホ対応のスマホでも読みやすいメルマガ配信が必要となってきました。

HTML形式で配信することが主流に

以前はテキスト形式で配信することが多かったメルマガですが、HTML形式であれば以下のようなメリットがあることから、最近ではHTML形式を採用することが多くなっています。

  • HTMLの配信側のメリット

    • ・開封の計測ができる
    ・表現の自由度が高いので、高い開封率やクリック率が期待できる

  • HTMLの読者側のメリット

    • ・読みやすい（ただしレイアウトや文字の大きさによる）

    ただしHTMLメールを配信する際には、読者がHTML形式を受信できない場合もあることを覚えておきましょう。

    読者がHTMLメールを受信できない場合には、自動的にテキスト形式のメールを表示させるマルチパートメールが役立ちます。HTMLメールを配信する場合には、マルチパートメールにしておくと良いでしょう。

    スマホ対応のHTMLメルマガでよく使われるレイアウト

    スマホでの閲覧が増えた今、スマホ向けに最適化したメルマガによく使われるレイアウトを３つご紹介します。。

    レスポンシブデザイン

    レスポンシブデザインでは、閲覧する画面のサイズに合わせてレイアウトなどを変更します。

    以下の図のように、画像が３列に並んでいるようなメルマガをPCでみると特に問題がありませんが、スマホで見ると画像が小さく表示されてしまって、非常に見づらくなってしまいます。

    スマホの画面サイズで見る場合には、１列に画像を並べるように変更するなどして、スマホの画面サイズでも見やすくするのがレスポンシブデザインです。

    リキッドレイアウト

    リキッドレイアウトは、要素の単位を％で指定してウインドウの幅によって可変します。

    以下の図のように、PCの画面サイズで見ても幅いっぱいに表示されるようなレイアウトとなります。

    フレキシブルレイアウト

    フレキシブルレイアウトは、リキッドレイアウトがベースとなっていて、ウインドウ幅の最大値と最小値を固定させたレイアウトです。

    多くのメルマガがフレキシブルレイアウトを採用していると考えられます。
    画面サイズがどれだけ大きくなっても、最大値に設定したウインドウ幅を超えると、それ以上は広がらないというレイアウトです。

    デザインに関する注意点

    1. メールの横幅や画像サイズ

      2. 300pxのスマホ画面で見る事を前提に、横幅は600pxで作るのが良いでしょう。スマホでの閲覧時にはちょうど良いサイズとなります。

      横スクロールが必要となってしまうと、読者にとって大きなストレスになってしまいます。ただし、600pxで作成した場合、PCだと少しインパクトに欠けるので、背景色をつけることでバランスを補うと良いでしょう。

    2. 文字サイズや文字数

      3. 横幅600pxの場合、日本語では15pt以上の文字を使用するのがおすすめです。
      目立たせたいコンテンツがある場合は、画像もしくはサイズを24pt以上にしましょう。
      なお、横幅600pxで、文字サイズ15ptの場合、1行あたり最大45文字程度になります。

      あまりに長いコンテンツだと何度もスクロールしなくてはならないため、読者にとってもストレスになりかねません。トピックを絞り、文字数も意識すると良いでしょう。

    3. CTA（コールトゥアクション）ボタンへの配慮

      4. 何をして欲しいメルマガなのかが分かるよう、できるだけ上部にボタンを設置することも効果的です。

      もしもメールが長くなってしまう場合は、わざわざスクロールして戻るという行動が不要となるよう、適切な位置でボタンを繰り返し、クリックへと誘導するのが良いでしょう。また、設置するボタンは大きくクリックしやすいものにしましょう。

      操作性・利便性に関する注意点

      1. 欲しい情報へすぐ飛べる工夫

        2. 自分の欲しい情報が一目で分かり、瞬時にその情報へ移動できることがスマホでメルマガを読む上では重要となります。
        スマホ読者が移動中などのスキマ時間にメルマガを読むことが多いからです。

        ファーストビューの部分にインデックスを入れることで、読者は自分の知りたい情報をクリックして移動し、好きな内容だけ読むことができます。

      2. リンク先のスマホ対応

        3. せっかくメルマガを読んでCTA（コールトゥアクション）となるボタンをクリックしても、リンク先のサイトがスマホに対応していないと、見づらさを感じそこで離脱してしまう可能性があります。

        リンク先にはスマホ対応されたサイトやランディングページを設定しましょう。

      3. アプリとの連携

        4. メール内に地図を掲載する場合など、Google Mapアプリへのリンクを設置すれば、直接アプリが起動しスムーズに地図を確認することができます。

        このように、アプリと連携させることで、メールだけでは提供できない情報を届けられたり、アプリならではである利便性を実現したりすることが可能となります。

      簡単にスマホ対応のレスポンシブメルマガを配信する方法

      スマホ対応のレスポンシブのメルマガを簡単に配信する方法はないのでしょうか。
      以下2つ方法をご紹介していきます。

      テンプレートを利用する

      スマホ対応のHTMLメルマガを作ろうと思っても、テキストメールほど簡単に作成できません。
      スマホ対応のHTMLメルマガを作成するためには、Webを作るのと同様にHTMLやCSSの知識や経験が必要だからです。

      HTMLメールのテンプレートを使えば、その問題が解決します。そして多くのHTMLメールのテンプレートはレスポンシブ対応しているものがほとんどです。
      画像やテキストを変更するだけで、簡単にレスポンシブメールを送ることが可能です。

      無料のテンプレートもたくさん出ているので、活用してみてはいかがでしょうか。ただし、中にはメーラーによってはバグや崩れが発生するということもあるようですので注意が必要です。

      HTMLの無料テンプレート
      便利なHTMLの無料テンプレートについてまとめました。
      詳しくは「メルマガ担当者が知っておきたいHTMLメールの無料テンプレート7選」をご覧ください。

      メール配信システムを利用する

      メール配信システムを使えば、スマホ対応のレスポンシブなメルマガを配信することができます。
      テキストメールだけでなくHTMLメールも簡単に編集することができ、マルチパートメールにも対応しているものも多いです。

      メール配信システムには、配信結果のレポートやステップメールなど、メール配信に関わる様々な機能が搭載されていますので、単なるレスポンシブメールの配信だけではない活用ができるでしょう。

      また、マーケティングオートメーションを使うとツールの中に無料のテンプレートが付いていることもあり、メール配信から配信結果の確認まで非常に便利に実行できます。

      メール配信システムとは
      メール配信システムの機能や選び方についてまとめました。
      詳しくは「メール配信システムの選び方〜メール配信システムを比較・検討する際に気をつけたいこと」をご覧ください。

      さいごに

      スマホ対応されたメルマガを配信するポイントについてご紹介しました。
      あらゆるデバイスから閲覧されていることを念頭において、 ユーザーが読みやすいメルマガ作成を心がけましょう。