メールマーケティングと自動化モバイルおよびタブレットマーケティング

受信トレイの配置とエンゲージメントを最大化する 16 のモバイル フレンドリーな HTML メールのベスト プラクティス

2023 年には、モバイルが電子メールを開くための主要なデバイスとしてデスクトップを超える可能性があります。 実際、HubSpot は次のことを発見しました。 46パーセント 全メール開封の割合がモバイルで発生しています。 モバイル向けのメールをデザインしていないのであれば、多くのエンゲージメントとお金をテーブルに残していることになります。

  1. 電子メール認証: あなたの確保 メールが認証される 送信ドメインに IP アドレスは、受信トレイに到達するために重要であり、ジャンク フォルダーまたはスパム フォルダーにルーティングされません。 もちろん、購読解除リンクを組み込んだプラットフォームを使用して、電子メールをオプトアウトする手段を提供することも不可欠です.
  2. レスポンシブデザイン:   HTML 電子メールは レスポンシブになるように設計されています、つまり、表示されているデバイスの画面サイズに合わせて調整できます。 これにより、デスクトップとモバイル デバイスの両方でメールが適切に表示されます。
  3. 明確で簡潔な件名: メールのプレビュー ペインに件名の最初の数語しか表示されない場合があるため、モバイル ユーザーにとって明確で簡潔な件名は重要です。 簡潔で、電子メールの内容を正確に反映する必要があります。 メールの件名の最適な文字数は、メールの内容、対象者、使用しているメール クライアントなど、さまざまな要因によって異なります。 ただし、ほとんどの専門家は、電子メールの件名を短く簡潔にすることを推奨しています。通常は 41 ~ 50 文字または 6 ~ 8 語です。 モバイル デバイスでは、50 文字を超える件名が途中で切れたり、場合によっては件名の最初の数語しか表示されないことがあります。 これにより、受信者が電子メールの主なメッセージを理解することが難しくなり、電子メールが開かれる可能性が低くなる可能性があります。
  4. プリヘッダー: 電子メールのプリヘッダーは、電子メール クライアントの受信トレイの件名の横または下に表示される、電子メールの内容の短い要約です。 これは、最適化するとメールの開封率に影響を与える重要な要素です。 ほとんどのクライアントは、HTML と CSS を組み込んで、プリヘッダー テキストが適切に設定されるようにします。
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        /* desktop styles here */
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        /* mobile styles here */
      }
    </style>
  </head>
  <body>
    <!-- Intro text for preview -->
    <div style="display:none; max-height:0px; overflow:hidden;">
      This is the intro text that will appear in the email preview, but won't be visible in the email itself.
    </div>
    
    <!-- Main email content -->
    <div style="max-width:600px; margin:0 auto;">
      <!-- Content goes here -->
    </div>
  </body>
</html>
  1. XNUMX 列のレイアウト: XNUMX 列のレイアウトで設計された電子メールは、モバイル デバイスで読みやすくなります。 コンテンツは論理的な順序で編成され、シンプルで読みやすい形式で提示される必要があります。 複数の列がある場合、CSS を使用すると、単一列のレイアウトで列を適切に整理できます。

これが HTML メールのレイアウト これは、デスクトップでは 2 列で、モバイル画面では XNUMX 列に折りたたまれます。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.right {
          order: 2;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>

これが HTML メールのレイアウト これは、デスクトップでは 3 列で、モバイル画面では XNUMX 列に折りたたまれます。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. 明暗モード: ブリッジ メールクライアントはライトモードとダークモードをサポート CSS prefers-color-scheme ユーザーの好みに対応します。 背景が透明な画像タイプを必ず使用してください。 コード例を次に示します。
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Light mode styles */
      body {
        background-color: #ffffff;
        color: #333333;
      }
      .container {
        background-color: #f9f9f9;
      }
      .text {
        border: 1px solid #cccccc;
      }
      /* Dark mode styles */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #333333;
          color: #f9f9f9;
        }
        .container {
          background-color: #333333;
        }
        .text {
          border: 1px solid #f9f9f9;
        }
      }
      /* Common styles for both modes */
      .container {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
      }
      .col {
        flex: 1;
        margin: 10px;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col">
        <img src="image1.jpg" alt="Image 1">
        <div class="text">
          <h2>Heading 1</h2>
          <p>Text for column 1 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image2.jpg" alt="Image 2">
        <div class="text">
          <h2>Heading 2</h2>
          <p>Text for column 2 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image3.jpg" alt="Image 3">
        <div class="text">
          <h2>Heading 3</h2>
          <p>Text for column 3 goes here.</p>
        </div>
      </div>
    </div>
  </body>
</html>
  1. 大きくて読みやすいフォント: 小さな画面でもテキストが読みやすいように、フォントのサイズとスタイルを選択する必要があります。 少なくとも 14pt のフォント サイズを使用し、小さな画面で読みにくいフォントの使用は避けてください。 一般的に使用されるフォントは、さまざまな電子メール クライアントで一貫してレンダリングされる可能性が高いため、Arial、Helvetica、Times New Roman、Georgia、Verdana、Tahoma、および Trebuchet MS を使用すると、通常は安全なフォントになります。 カスタム フォントを使用する場合は、CSS で識別されたフォールバック フォントがあることを確認してください。
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Custom font */
      @font-face {
        font-family: 'My Custom Font';
        src: url('my-custom-font.woff2') format('woff2'),
             url('my-custom-font.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }
      /* Fallback font */
      body {
        font-family: 'My Custom Font', Arial, sans-serif;
      }
      /* Other styles */
      h1 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>My Custom Font Example</h1>
    <p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
  </body>
</html>
  1. 画像の最適な使用: 画像は読み込み時間が遅くなる可能性があり、一部のモバイル デバイスでは正しく表示されない場合があります。 画像は控えめに使用し、サイズとサイズが適切であることを確認してください。 圧縮された 携帯視聴用。 メール クライアントが画像をブロックする場合に備えて、画像の代替テキストを必ず入力してください。 すべての画像は、安全な Web サイトに保存して参照する必要があります (SSL)。 HTML メールのレスポンシブ画像のコード例を次に示します。
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
        .single-pane {
          width: 100%;
        }
        img {
          max-width: 100%;
          height: auto;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <!-- 3-column section with images -->
    <div class="container">
      <div class="col left">
        <img src="image1.jpg" alt="Image 1">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <img src="image2.jpg" alt="Image 2">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <img src="image3.jpg" alt="Image 3">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. 明確な行動を促すフレーズ (CTA): 明確で目立つ CTA はどのメールでも重要ですが、モバイル フレンドリーなメールでは特に重要です。 CTA が見つけやすく、モバイル デバイスでクリックできる大きさであることを確認してください。 ボタンを組み込む場合は、インライン スタイル タグを使用して CSS で記述することもできます。
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Desktop styles */
      .button {
        display: inline-block;
        background-color: #4CAF50;
        color: #ffffff;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      /* Mobile styles */
      @media only screen and (max-width: 600px) {
        .button {
          display: block;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h1>Sample Responsive Email</h1>
    <p>This is an example of a responsive email with a button.</p>
    <a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
  </body>
</html>
  1. 短く簡潔な内容: メールの内容は短く、要点を絞ってください。 HTML メールの文字数制限は、使用しているメール クライアントによって異なります。 ただし、ほとんどの電子メール クライアントでは、電子メールの最大サイズが制限されており、通常は 1024 ~ 2048 キロバイト (KB) には、HTML コードと画像または添付ファイルの両方が含まれます。 小見出し、箇条書き、その他の書式設定手法を使用して、小さな画面でスクロールしたり読んだりしているときにコンテンツを簡単にスキャンできるようにします。
  2. インタラクティブな要素: 組み込みます インタラクティブな要素 購読者の注意を引くことで、メールのエンゲージメント、理解、コンバージョン率が向上します。 アニメーションGIF、カウントダウン タイマー、ビデオ、およびその他の要素は、スマートフォンの電子メール クライアントの大部分でサポートされています。
  3. パーソナライゼーション: 特定のサブスクライバー向けに挨拶とコンテンツをパーソナライズすると、エンゲージメントが大幅に促進されます。 例えば。 名のフィールドにデータがない場合にフォールバックすることは重要です。
  4. 動的コンテンツ: コンテンツのセグメンテーションとカスタマイズにより、購読解除率を下げ、購読者のエンゲージメントを維持できます。
  5. キャンペーンの統合: 最新の電子メール サービス プロバイダーのほとんどは、自動的に追加する機能を備えています。 UTM キャンペーンのクエリ文字列 分析で電子メールをチャネルとして表示できるように、すべてのリンクに対して。
  6. プリファレンス センター: 電子メール マーケティングは、電子メールへのオプトインまたはオプトアウトのアプローチだけではあまりにも重要です。 サブスクライバーがメールを受信する頻度や重要なコンテンツを変更できる設定センターを組み込むことは、熱心なサブスクライバーとの強力なメール プログラムを維持するための素晴らしい方法です!
  7. テスト、テスト、テスト: 複数のデバイスでメールをテストするか、アプリケーションを利用してください。 複数のメール クライアントでメールをプレビューする 送信する前に、さまざまな画面サイズとオペレーティング システムで適切に表示され、適切に機能することを確認してください。 リトマス の報告によると、最も人気のあるモバイル オープン環境のトップ 3 は引き続き同じである: Apple iPhone (iOS メール)、Google Android、Apple iPad (iPadOS メール)。 また、件名とコンテンツのテスト バリエーションを組み込んで、開封率とクリック率を向上させます。 現在、多くの電子メール プラットフォームには、リストをサンプリングし、勝者のバリエーションを特定し、残りの購読者に最適な電子メールを送信する自動テストが組み込まれています。

あなたの会社が、エンゲージメントを促進するモバイル対応メールの設計、テスト、実装に苦労している場合は、遠慮なく私の会社に連絡してください。 DK New Media 事実上すべてのメール サービス プロバイダーの実装経験があります (ESP).

Douglas Karr

Douglas Karr のCMOです オープンインサイト の創設者であり、 Martech Zone。 ダグラスは、マーテックのスタートアップ企業数十社の成功を支援し、マーテックの買収と投資における 5 億ドルを超えるデューデリジェンスを支援し、企業の販売戦略とマーケティング戦略の実装と自動化を支援し続けています。 ダグラスは、国際的に認められたデジタル変革と MarTech の専門家兼講演者です。 ダグラスは、ダミーズ ガイドやビジネス リーダーシップに関する書籍の著者でもあります。

関連記事

先頭へ戻るボタンに
閉じる

Adblockが検出されました

Martech Zone は、広告収入、アフィリエイト リンク、スポンサーシップを通じてサイトを収益化しているため、このコンテンツを無料で提供できます。 当サイトをご覧になる際は、広告ブロッカーを削除していただければ幸いです。