メールをモバイル向けに最適化する方法

公開: 2018-08-28

2010年、GoogleのCEOであるEric Sc​​hmidtは、それ以降の目標は「…モバイルをほぼすべての答えにする」ことであると主張しました。 この声明は予言以上のものになっています。 今日、視聴者に近づき、可能な限り最高のエクスペリエンスを提供するには、まずモバイルに焦点を当てる必要があります。 この記事では、モバイル向けにメールを最適化する方法を理解するための便利なハックをたくさん用意しましたので、読み進めてください。

モバイルに焦点を当てるべき理由

2017年、モバイルデジタルの分数は61.9%に達しました。これは、デスクトップが29.3%、タブレットが8.8%であるのに対し、印象的です。 下のグラフからわかるように、2018年のモバイル消費数は依然として最高です。

desktop vs mobile

さらに、モバイルユーザーはオンラインで過ごす時間が長くなる傾向があり、特にデスクトップユーザーの2倍の時間がかかります。 半数以上のユーザーは、毎朝スマートフォンを手にした状態で開始し、Express Pigeonによると、これらのユーザーの91%が少なくとも1日に1回メールをチェックしています。 より多くのユーザーにリーチするには、モバイルデバイス向けにメールを最適化するためのヒントをいくつか見てください。

コンテンツ
  1. モバイルフレンドリーなサインアップフォームを統合する
  2. 件名を短くする
  3. プリヘッダーテキストを最適化する
  4. フォントを十分に大きくする
  5. 召喚状に取り組む
  6. 視覚要素のサイズに注意してください
  7. レスポンシブデザインを最大限に活用する
  8. まとめる

モバイルフレンドリーなサインアップフォームを統合する

Eメールマーケティングはあなたのウェブサイトを訪問する人々から始まります。 この段階での目標は、訪問者の焦点をオプトインフォームに移し、関心を高め、購読するように動機付けることです。

モバイル対応のサブスクリプションフォームを作成する最良の方法は、フィールドの数を減らし、十分な大きさのフォントを使用し、フォーム自体を表示可能な場所に配置することです。 input type =” email”を使用して、“ @”や“。”などの文字で特別なキーボードを作成することもできます。 または、ユーザーのメールアドレスがモバイルデバイスに自動的にポップアップ表示されます。

GAPのサブスクリプションフォームのモバイルビューを確認してください。 それは短く、目に見え、そしてブランドの全体的なデザインと一致しています。 さらに、ブランドが新規加入者に特別なウェルカムオファーを約束するため、価値がもたらされます。

mobile-friendly sign-up form

件名を短くする

さまざまな電子メールクライアントによって件名に表示される文字数は異なりますが、経験則では、25〜30文字程度に抑えることです。

以下に、件名が電子メールの内容を要約し、モバイル画面で完全に表示できる、電子メールのいくつかの良い例を示します。

email subject line

プリヘッダーテキストを最適化する

24%の人が、メールを開くかどうかを決定する際にプレビューテキストを確認します。 そのため、プリヘッダーの作成にいくらかの努力を払う必要があります。 件名と同様に、プレビューテキストは、電子メールクライアントに応じて表示される文字数に制限があります。

email preheader text for mobile

これはすべての電子メールクライアントによってすべてのデバイスに表示される部分であるため、常にプリヘッダーの最初の単語に焦点を合わせます。

プレビューテキストを使用して、電子メールの内容に関する詳細を提供します。 たとえば、プロモーションメールでは、配信について詳しく説明したり、プロモーションの条件を指定したりできます。

email preview for mobile

フォントを十分に大きくする

あなたのテキストはどんなデバイスでも読めるはずです。 そのためには、タイトルのフォントサイズとテキストのバランスをとってください。 たとえば、タイトルに22〜24ポイント、テキストに14〜16ポイントを選択しますが、14ポイントより低くしないでください。 フォントの種類については、すべての電子メールクライアントがサポートしているため、Webセーフフォント(Arial、Tahoma、Times New Roman、Courier New)を使用することをお勧めします。

メールで対照的な色を使用して、日光の下や明るさを下げた画面で表示できるようにすることを検討してください。

Tentreeの例を見てください。白いフォントと緑の背景のコントラスト、および類似した緑の色合いの組み合わせを確認できます。 送料無料の限定オファーは青色で強調表示されています。 mobile optimized email

もう1つのアイデアは、バナナ共和国からのメールのように、明るい色と白黒を組み合わせることです。

mobile email

召喚状に取り組む

75%の人は、親指だけを使って画面に触れています。 片手で携帯電話を持っているのは50%未満、ユーザーの36%は携帯電話を抱きしめ、10%の人は片手で携帯電話を持ってもう一方の手の指でタップします。 召喚状(CTA)ボタンの場所を選択する際は、このデータを考慮してください。

ways people touch mobile phones

複数のCTAがある場合は、それらの優先順位を定義し、「メインCTAはますます大きくなる」という原則に従って配置します。 ボタンのサイズは少なくとも44×44pxで、周囲に十分な空き容量がある必要があります。これにより、読者は1本の親指で簡単にボタンをクリックできます。 クリックするのが不快に見える可能性があるため、コピー内のハイパーテキストリンクが多すぎないようにしてください。

上記のTentreeからの電子メールには、クリックしやすいCTAボタンが表示され、周囲に十分な空白があります。

email cta

視覚要素のサイズに注意してください

モバイルデバイスは、デスクトップよりもはるかに遅い画像や写真の読み込みを行います。 ビジュアルは常にメールの読み込みを難しくするため、サイズは599pxを超えないようにする必要があります。 品質について覚えておいてください—読者はぼやけたピクセル化された画像をほとんど好まないでしょう。 考えられるすべての電子メールクライアントでGIFを使用して電子メールをテストし、正しく表示され、電子メールがスパムフォルダに入れられないことを確認します。

以下にMarkの例を示します。彼らのメールにはGIFや画像が豊富に含まれていますが、読み込みにそれほど時間はかかりません。

email mobile view

さらに、一部の電子メールクライアントは自動的に画像をブロックする可能性があるため、すべてのビジュアルにALTテキストを追加することを忘れないでください。

ビデオコンテンツについては、サムネイルとして再生ボタンを備えたGIFまたは単純な画像を使用して、ユーザーをこのビデオを視聴できるWebページに誘導できます。 Litmusの例を参照してください。再生ボタンが付いたビデオの概要を再開するGIFを使用しています。

email mobile view

レスポンシブデザインを最大限に活用する

メールマーケティング担当者は、最初に足を踏み入れて、完璧なメールを作成するためのレスポンシブメールデザインを作成する必要があります。 レスポンシブとは、デバイスの画面サイズとブラウザに応じてレイアウトの幅と構造がリアルタイムで変化するため、モバイルデバイス、タブレット、デスクトップでメールが正しく表示されることを意味します。

SendPulseの既製のテンプレートは、ユーザーのナビゲーションを簡素化し、マーケターが最適化された電子メールを簡単に作成できるようにします。 テンプレートを選択し、好きなように変更して、メーリングリストに送信するだけです。 デスクトップ、モバイル、タブレットの画面に自動的に調整されます。 快適ですね。

SendPulseテンプレートの1つがデスクトップでどのように表示されるかを確認してください。画像は大きく、すべてのボタンは簡単に見つけてクリックでき、フォントは読みやすくなっています。

responsive email template on desktop

各要素はモバイル向けに最適化されています。モバイル版では、メインテキストは十分に大きく、ボタンは親指でクリックするのに適切なサイズです。

responsive email template on mobile

まとめる

モバイルユーザー向けにメールを最適化するために使用できるヒントを再開しましょう。

  • モバイルフレンドリーなサインアップフォームから始めましょう。
  • 短くて有益な件名とプレビューをご覧ください。
  • 読み取り可能な安全なWebフォントを使用します。
  • CTAボタンを大きく明確に保ちます。
  • すべての視覚要素がモバイルで見栄えがするかどうかを確認します。
  • レスポンシブレイアウトを使用します。