メールサイズ:テンプレートの理想的なサイズ[2022]

公開: 2021-09-27

ニュースレターテンプレートの理想的なメールサイズは何か疑問に思ったことはありませんか? それらに特定の幅と高さを選択する必要がありますか?

まあ、簡単な答えはイエスです。 長い答えはもう少し複雑です。 ただし、心配する必要はありません。理想的なサイズと、正しくレンダリングするために必要なピクセル数(px)について知っておく必要のあるすべてのことを調査します。

あなたにアイデアを与えるために、今日は以下を含む本質的なサイズを見ていきます:

  • テンプレートの幅と高さ
  • キャンペーンのファイルサイズ
  • メールヘッダー
  • コンテンツブロックとフッター

それ以上の苦労なしに、それらを見てみましょう!

メールテンプレートのサイズ:概要

ニュースレターに最適なサイズを急いで見つけたい場合は、以下の表を確認してください。

理想的なサイズ最大サイズ
テンプレートの幅600ピクセル700ピクセル
テンプレートの高さ1500ピクセル3000ピクセル
メールのファイルサイズ75 KB 102 KB
ヘッダー(高さ) 70ピクセル200ピクセル
コンテンツブロック(全高) 800ピクセル1200ピクセル
フッターサイズ(高さ) 100ピクセル300ピクセル
メールバナー600×730ピクセル700×1730ピクセル
CTAボタンキャンペーンによって異なりますキャンペーンによって異なります
画像600×650ピクセル(依存) キャンペーンによって異なります

それでは、それらをさらに詳しく見てみましょう。

メールサイズ–要素の構造

メールマガジンの例と、これから検討する要素は次のとおりです。

email sizes

このキャンペーンの幅は664ピクセル、高さは2549ピクセルです。 メールのデザインは、GmailとOutlookの両方の受信トレイに適切に表示され、モバイルデバイスで正しく表示されます。 ファイルサイズに関しては、57.8 KBであり、理想的なサイズ制限内です。

先に進む前に、サブスクライバーの画面解像度とサイズによって、デザインの表示が異なる場合があることに注意してください。 何を調べるかがわかったので、これらの「理想的な」サイズを1つずつ調べていきましょう。

最適なメールサイズ:幅、身長、体重

重要なHTMLメールテンプレートのサイズから始めて、Gmail、Outlook.com、Yahooメールなどの一般的なメールクライアントの問題を回避するために必要な最適な幅、高さ、および「重量」を見つけましょう。

メールの幅

ほとんどのマーケティングのヒントは、理想的な幅は600ピクセルであるべきだと強調しています。 では、これはどういう意味ですか? 効率を上げるには、すべてのテンプレートがそれ以上である必要はありませんか?

うーん、ダメ。 600ピクセルが標準のメールテンプレートの幅ですが、より広いテンプレートを使用できます。 この理由は、今日の電子メールクライアントが以前よりもはるかに進んでいるためです。 したがって、より幅の広いテンプレートを表示することは、もはやそれほど問題ではありません。

それでも、幅を試すことはできますが、 Gmailが640ピクセルを超えるデザインの背景色を表示しない場合があることを知っておく必要があります。 これはキャンペーンにとって厄介な問題になる可能性があるため、これを回避する最も簡単な方法は、最大幅640ピクセルのレイアウトを使用することです。

以下に、幅736ピクセルのAppleによる電子メールメッセージを示します。

apple campaign example

より幅の広いテンプレートを使用する場合は、さまざまな電子メールプレビューツールを活用して、選択した幅で問題が発生しないようにしてください。

また、MoosendやMailchimpなどのほとんどのメールテンプレートビルダーは、デフォルトで幅600ピクセルのデザインを提供しているため、メールテンプレートのサイズについて心配する必要はありません。

メールの高さ

次に、メールテンプレートの高さについて説明します。 ここでは、提示したいコンテンツに応じて、 1500ピクセル以上の高さにすることができます。

この電子メールサイズで「ワイルド」になることができますが、サブスクライバーは、ポイントに到達するために無限にスクロールしなくてもメッセージをダイジェストできる必要があることを忘れないでください。

理想的には、テンプレートは1500〜3000ピクセルである必要があります。 3000ピクセルはそれほど多くないと思われる場合は、TheCitizenryによる実際の例を見てみましょう。

the citizenry height example

上記の例の高さは2230ピクセルで、サブスクライバーは数回のスクロールでチェックインできます。

もちろん、多くの電子メールマーケターは、キャンペーンにもっと高い高さを選択します。 あなたが提供しなければならないすべてをあなたの聴衆に見せながら、私たちの注意のスパンは非常に短く、過去15年以内に大幅に減少したことを忘れないでください!

したがって、2000〜25000ピクセルの高さは、受信者が無限のテンプレートをスクロールしてCTAに到達するよりも優れています。

メールの重み

キャンペーンの幅と高さがわかったところで、テンプレートに最適なファイルサイズについて説明しましょう。

通常、問題なくサブスクライバーの受信トレイに届くメッセージを作成する必要があります。 スパムの件名は通常、スパムフィルターをトリガーする原因です。 しかし、電子メールのファイルサイズも電子メールの配信可能性の低下の原因になる可能性があることをご存知ですか?

それを避けるために、あなたはあなたの電子メールの「重さ」をかなり軽く保つべきです。 これは、本文が20〜102KBの電子メールキャンペーンが必要であることを意味します。

レンダリングの問題を回避するための3つの簡単な方法は次のとおりです。

  • 最大102KBの電子メールファイルサイズを目指します
  • 視覚要素(GIF、画像)を賢く使用する
  • 大きな添付ファイルを省く

受信トレイのクリッピング

しかし、メールが102 KBを超えるとどうなりますか? それをGmailアドレスに送信すると、メールクライアントがメッセージをクリップします

キャンペーンが最大ファイルサイズ制限を超えると、電子メールのクリッピングが発生します。 その結果、Gmailはキャンペーンを非表示または「クリップ」し、サブスクライバーは「メッセージ全体を表示」オプションを選択してキャンペーンをチェックアウトする必要があります。

Gmailは最終的にメッセージを表示しますが、キャンペーンをクリップすることはユーザーエクスペリエンスにとって理想的ではありません。 プロセスにステップを追加すると、連絡先がイライラし、クリック率とエンゲージメント率が低下する可能性があります。

解決策は簡単です。メールを102KB未満に抑えてください(75 KBが最適です)。

メールキャンペーン要素のディメンション

知っておく必要のある重要なメールサイズについて説明したので、メールのプリヘッダーから始めて、メールコンポーネントの適切なサイズを見つけましょう。

メールプリヘッダー

まず第一に、あなたの電子メールのプリヘッダーはあなたの件名の後に続くコピーの余分な行です。 受信トレイを見れば、すぐに確認できます。 通常、次のようになります。

gmail email preheaders

ただし、プレヘッダーテキストは、メールマガジンの上部に短いメッセージとして表示されます。 これらのコピー行は、読者に貴重な情報を提供し、ブラウザで電子メールを表示することもできます。

SigmaBeautyの例を次に示します。

email sizes preheader example sigma beauty

では、メールのプリヘッダーはどのくらいの大きさにする必要がありますか?

幅に関しては、プリヘッダーはキャンペーンの他の部分と同じ幅になります。 ただし、高さに関しては、20ピクセルから60ピクセルの間のどこかにあるはずです。

メールヘッダー

キャンペーンの最も重要な要素の1つであるメールヘッダーに移りましょう。 お気づきかもしれませんが、キャンペーンのメールヘッダーのサイズはさまざまです。 いくつかの例を見てみましょう。

これがウェンデルオーガストフォージによるものです:

wendell august forge email header

(600×98ピクセル)

そして、The Blonde Abroadによるもの:

the blonde abroad email header size

(600×255ピクセル)

両方のヘッダーの幅は同じ600ピクセルです。 ただし、高さに関しては、2番目の高さは255ピクセルです。

Wendell August Forgeのような小さなヘッダーは、デスクトップデバイスとモバイルデバイスの両方に理想的ですが、少し高いヘッダーを使用しても問題はありません(最初にテストする限り)。 原則として、メールキャンペーンのヘッダーの高さは約60〜70ピクセルである必要があります。 ただし、ロゴに追加の要素またはメニューが含まれている場合は、最大200ピクセルになる可能性があります。

繰り返しになりますが、GmailまたはOutlookのプレビューペインまたはメールマーケティングソフトウェアツールのプレビューモードを確認することを忘れないでください。 たとえば、Moosendにはデスクトップとモバイルの機能があり、キャンペーンをメーリングリストに送信する前にキャンペーンの外観を確認できます。 アカウントに簡単にサインアップして、無料でお試しいただけます。

メールコンテンツブロック

次に、コンテンツブロックのメールサイズを見てみましょう。 これらのブロックには、電子メールのコピーや画像からGIF、ビデオ、CTAまで、何でも含まれている可能性があります。

幅に関しては、コンテンツブロックは選択したメールテンプレートのサイズに従う必要があります。 ただし、高さに関しては、覚えておく必要のあることがいくつかあります。

まず、視聴者に最高のエクスペリエンスを提供するには、コンテンツブロックを価値のある短いものにする必要があります。 コンテンツブロックが長いと、電子メールが放棄され、電子メールの読み取り時間が短くなります。 そして、あなたはそれのどれも必要としません。

以下に、3つのコンテンツブロックを含むJulieBlannerによるEメールマーケティングキャンペーンを示します。

julie blanner content blocks

各ブロックの高さは344ピクセルで、画像、コピー、簡単な召喚状が含まれています。 視覚的には、各大陸のブロックは読みやすく、使いやすいです。 ミニマリストの電子メールデザインは、ブロガーの目的にも役立ちます。

ブロガーの署名ブロックを除いて、合計でJulieBlannerの電子メールコンテンツの高さは1032ピクセルです。 上記のすべてを考慮すると、コンテンツブロックは、サブスクライバーが数回のスクロールでチェックアウトできるように十分に短くする必要があると言っても過言ではありません。

したがって、次のように結論付けることができます。

  • 各コンテンツブロックの高さは約200〜300ピクセルである必要があります。
  • コンテンツブロックの合計の高さは800〜1200ピクセルである必要があります。

メールフッターサイズ

最後になりましたが、ソーシャルメディアや登録解除ボタン、ウェブサイトのリンクなどを見つけることができるメールキャンペーンフッターがあります。

ヘッダーと同様に、フッターの長さは目標に応じて異なります。 たとえば、Modclothのフッターサイズは幅600ピクセル、高さ361ピクセルです。

modcloth footer email size example

上記のフッターは、購読者が電子メールを閉じる前に確認する必要のあるすべての必要な情報を提供するため、電子メールの設計に適しています。 電子メールのフッターは、加入者の注意を煩わせることなく取り込むための賢い最後の手段である必要があることを考えると、高さに関しては時間がかかる可能性があります。

これを念頭に置いて、フッターの理想的なメールサイズは約100ピクセルにする必要があります。 ウェブサイトのリンクなど、より多くの要素を含める必要がある場合は、全長が300ピクセルを超えないようにしてください。

追加の電子メールコンポーネントサイズ

プリヘッダー、ヘッダー、コンテンツブロック、およびフッターとは別に、バナー、CTAボタン、および画像サイズを考慮する必要があります。 どれどれ!

メールバナー

バナーについて少し話しましょう。 まず、Eメールバナーは通常、Eメールマーケティングキャンペーンの上にあるコピーを注入した画像です。 優れたメールバナーデザインは、視聴者を興奮させ、メッセージに取り組む理由を増やすことができます。

たとえば、Velascaによるバナーの例を次に示します。

velasca email banner example

ブランドのバナーには、加入者の注意を引くために必要なすべての情報が含まれています。 ロゴ、クリアコピー、グラフィック、CTAボタンがあります。 また、サイズに関しては、上記の例は幅600ピクセル、高さ612ピクセルであり、次のデータに基づくと非常に理想的です。

具体的には、Swift Digitalによると、推奨されるバナーサイズは次のとおりです。

  • 幅600〜700ピクセル(モバイルデバイスの場合は320〜385ピクセル)
  • 高さ1730ピクセル

CTAボタン

eコマースの電子メールマーケターは通常、潜在的な顧客に行動を起こすように促すためにカラフルなCTAボタンを追加します。 一方、B2Bマーケターは、ハイパーリンクを追加して、サブスクライバーをWebサイトまたはランディングページに誘導する場合があります。

ボタンがメールのデザインと一致していることを確認するために、いくつかの興味深いCTAボタンのメールサイズデータを見てみましょう。

  • CTAの平均の高さは47.9ピクセルです
  • Appleは44ピクセルの高さを提案しています
  • 平均的なCTAは14文字です

ご覧のとおり、効率的なCTAを作成するには、メールボタンの高さが重要です。 しかし、幅はどうですか? ええと、Eメールマーケターは彼らの目標に基づいて異なるEメールボタンサイズを選びます。 次の例を検討してください。

キングスシアターには、122.4x41.51ピクセルの非常にシンプルなボタンがあります。

kings theatre cta button example

一方、Wizarding Worldは、幅300ピクセル、高さ60ピクセルのより目立つCTAを選択します。

wizarding world cta example

理想的には、CTAはビジュアルや電子メールのデザインと調和していて、過度に目立たないようにする必要があります。

また、標準の幅と高さはありませんが、上記のCTAボタンの結果を、より効果的に作成するためのガイドとして使用できます。

メールの画像サイズ

まず、電子メールブラウザで読み取られる最も一般的な画像ファイル形式には、古き良きJPG(またはJPEG)、PNG、およびGIFが含まれます。 しかし、寸法はどうですか? 幅に関しては、画像は設定したテンプレートサイズに従います。 したがって、幅が640ピクセルに設定されている場合、画像はそれに追従します。

ただし、長さに関しては、最初に画像の目的を検討する必要があります。 バナーとして使用する場合は、800〜1730ピクセルにする必要があります。 同様に、ニュースレターの画像として使用する場合は、1200ピクセルまで上げる必要があります。 それでも、従う必要のある標準のメール画像サイズはありません

品質に関しては、 72 dpiの解像度を使用して、ビジュアルの全体的なパフォーマンスを向上させる必要があります。 また、Retinaディスプレイ(iPhone、iPadなど)用に画像を最適化することを忘れないでください!

Moosendのような電子メールエディタは、Appleユーザーが最高のエクスペリエンスと画質を確実に得られるようにするための適切なオプションを提供します。

moosend email builder retina option

正しいサイズとは別に、画像が大きすぎないことを確認してください。 TinyJPGやImagesmallerなどのツールを使用してそれらを圧縮することにより、クリッピングを回避できます。 可能であれば、電子メールキャンペーンには理想的ではないため、PNG形式に固執するようにしてください。

最後になりましたが、ほとんどの電子メールクライアントは全幅オプションを利用しないことに注意してください。 したがって、プレビューとしてデスクトップバージョンのメッセージを作成するときは注意が必要です。また、サブスクライバーに表示される内容が異なる場合があります。

テンプレートを釘付けにするのに最適なメールサイズ

最適なメールテンプレートのサイズがわかったので、毎回正しく表示されるキャンペーンを作成できます。

上記のディメンションを参照として使用できますが、一連のテストツールを使用してそれらを試すことを躊躇しないでください。 また、モバイルファーストのユーザーとより応答性の高いメールの必要性にも注意してください。

それを念頭に置いて、あなたのビジネスに最適なサイズのメールマーケティングニュースレターを作成する時が来ました!

また、高度なツールが必要な場合は、Moosendを無料で試して、視聴者を驚かせるレスポンシブメールを作成してください。