モバイルデバイス向けにマーケティングEメールを最適化する

マーケティングEメールを作成する際に、デスクトップまたはモバイルのEメールクライアントで特定のセクションを非表示にすることができます。列の構成や全体的なレイアウトを変更して、小型デバイスで受信者がEメールを読みやすくすることもできます。

Eメールをさまざまなデバイスに対応させることで、エンゲージメントを高め、Eメール全体のユーザー体験を向上させることができます。

制限事項と考慮事項を理解する

• デスクトップとモバイルで個別のモジュールとスタイル設定を設定できる場合は、ドラッグ&ドロップエディターでしか実行できません。デザインマネージャーのテンプレートを使用してEメールを作成する場合、開発者は手動でデバイスのカスタマイズを追加する必要があります。 
• 次のEメールクライアントでは、モバイル用に最適化されたEメールはサポートされていません:Yahoo!Androidのメール、AndroidのAOL Mail、GmailのIMAP、および一部のバージョンのSamsungMail。これらのクライアントでは、非表示のモジュールが表示され、モバイル専用設定は無視されます。
• フォントサイズやパディングなどのモジュール設定をモバイルとパソコンで異なる値に設定することはできません。これらの設定に異なる値を使用するには、同じコンテンツのモバイル専用モジュールとデスクトップ専用モジュールを別々に作成することをお勧めします。

デスクトップまたはモバイルでモジュールやセクションを非表示にする

デスクトップまたはモバイルの受信者に表示されるモジュールまたはセクションをカスタマイズする：

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書き作成したEメールの名前をクリックするか、[Eメールを作成]をクリックします。
3. Eメールエディターの上部にある desktop デスクトップアイコン またはmobileモバイルアイコンをクリックして 、各デバイスタイプの設定を行います。

4. モジュールまたはセクションにマウスポインターを合わせ、 hide 非表示アイコン をクリックすると、編集しているメールのバージョンでそのモジュールが非表示になります。

5. 編集中のバージョンのすべての非表示モジュールを表示するには、エディターの上部にある[ 表示オプション]ドロップダウンメニューをクリックし、[ 非表示]をオンに切り替えます。 
6. そのバージョンの電子メールで非表示のモジュールを表示に戻すには、非表示のアイコンが表示 view されているビューアイコンをクリックします。 

モバイルデバイスでのモジュールスタッキングのカスタマイズ

モバイルデバイスで表示されたときにセクション内のモジュールがどのように積み重ねられるかをカスタマイズできます。 

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書き作成したEメールの名前をクリックするか、[Eメールを作成]をクリックします。
3. Eメールエディターで、セクションをクリックします。 
4. 左のサイドバーエディターの[スタック]セクションでオプションを選択します 。 
   • 同じ列を維持:モバイルでもパソコンでも同じ数の列がEメールに表示されます。 
   • 左上(右上):セクションの左側のモジュールが最初にモバイルに表示されます。 
   • Right on top of left(左上):セクションの右側にあるモジュールが最初にモバイルに表示されます。 

デスクトップまたはモバイルでのスタイル設定のカスタマイズ

セクションごとまたはマーケティングEメール全体に対して、デスクトップとモバイルのスタイル設定を分けることができます。 

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書き作成したEメールの名前をクリックするか、[Eメールを作成]をクリックします。
3. Eメールエディターで、セクション をクリックしてそのスタイルを編集するか、左側の styles テンプレートデザインアイコンをクリックしてEメール全体のスタイルを編集します。 
4. 左のサイドバーエディターで、セクションの横にある[すべてのデバイス]スイッチをオフに切り替えると、デスクトップとモバイルで個別の設定を表示できます。 

5. デスクトップとモバイルのスタイル設定を編集 します。 

Eメールの共有範囲とレイアウトの設定の編集が完了したら、さまざまなEメールクライアントで Eメールがどのように表示されるかをプレビュー できます。

モバイルデバイス向けにEメールを最適化する

モバイルデバイスでマーケティングEメールの表示を改善するために、次のベストプラクティスに従うことをお勧めします。 

• レスポンシブEメールテンプレートを使用:レスポンシブコンテンツは表示する画面に合わせて調整されます。HubSpotのドラッグ&ドロップテンプレートは既定でレスポンシブですが、コードテンプレートを作成する開発者は レスポンシブEメールテンプレートマークアップを使用する必要があります。
• 画像ファイルサイズを小さくする:画像ファイルが小さくなるほど、Eメールサイズが小さくなり、読み込み時間が短くなります。HubSpotは 設定された幅で画像のサイズを自動的に変更してファイルサイズを縮小しますが、 FastStone Photo Resizerなどのサービスを利用することもできます。
• 読み取り可能なリンクとボタンを作成する:テキストリンクとテキストボタンは、幅と高さが57ピクセル以上である必要があります。 
• テストEメールのプレビューテキスト:マーケティングEメールの先頭に配置されている画像の代替テキストをEメールのプレビューテキストに取り込むことができます。画像の代替テキストを削除すれば、この問題が解決されます。プレビューテキストが想定通りに表示されることを確認するために 、テストEメールを送信 することをお勧めします。 
• JavaScriptとiframe要素を避ける:ほとんどのEメールクライアントでは、埋め込みJavaScriptとiframe要素はレンダリングされません。これらをコードテンプレートに追加しないことをお勧めします。 
• クリッピングを避けるためにEメールのサイズを小さくしてください。102KBを超えるEメールは、Gmailの「メッセージ全体を表示」リンクでコンテンツを隠すことができます。Eメールのサイズを計算して小さくする方法について詳細をご確認ください。