最適なメールテンプレート幅の参照
このページで学べること
メール テンプレートのデフォルト幅が 600px である理由、それが現在のマーケティング メールの業界標準である理由、そしてデバイス間でメールの表示を一貫させる方法を学びましょう。
メールテンプレートの幅
Klaviyoのドラッグ＆ドロップ式メールエディターのデフォルトの幅は600pxです。幅を調整するには：
- メールエディターで[スタイルを編集]を選択します。
- 幅フィールドにピクセル単位の値を入力してください。
- 変更を保存するには、スタイルを編集パネルを閉じてください。
より高度なレイアウトのために必要な場合を除き、Klaviyoではテンプレートの幅を広げることはおすすめしていません。幅を600px以上に調整する場合は、異なるメールクライアントとデバイスでメールがどのように表示されるかをテストすることもおすすめします。
メール幅を理解する
Klaviyo でメールをデザインする際、テンプレートの幅の既定値がメールコンテンツの枠を作ります。テンプレートに追加するコンテンツはすべて、この枠内に収まる必要があります。
600 px のメール幅は、これまで一般的なすべてのデスクトップ メール クライアントにおけるビューポートの平均サイズが 500～600 px だったという歴史的背景から、メールマーケティング業界の標準になっています。ビューポートとは、受信者がメールを読むディスプレイ画面上の枠で囲まれた領域です。メールの幅を 600 px に設定すると、平均的なビューポート サイズにおいて、受信者がコンテンツ全体を表示するために左右に大きくスクロールする必要がなくなります。
幅600pxのメールの標準は定着しており、モバイルなどのさまざまなデバイスでの最適化がますます重要になる中でも、現在も一般的です。Klaviyoでは、デスクトップ用のメールクライアントでは幅600pxでメールをデザインすることを推奨しています。ドラッグ＆ドロップのメールエディタで、Edit styles > Mobile optimizationの下にあるOptimize for mobileをオンにして、画面が小さいデバイス向けのレスポンシブ調整を適用します。その後、パネルを閉じて変更を保存してください。メールクライアントによってモバイル最適化への対応状況が異なるため、複数のメールクライアントとデバイスでメールをテストしてください。
ただし、幅を 600px にしておくと、Klaviyo で作成したメールをモバイルで表示する際の最適化に役立ちます。はるかに幅広く設計されたメールは、慎重に設計して最適化されていない限り、モバイルデバイスで縮小表示した際に表示が崩れる可能性が高くなります。そのため、複数のクライアント/デバイスでレイアウトを最適化するためのデザイナーやその他の専任リソースがない限り、テンプレートの幅を 600px を超えて増やさないことを推奨しています。
モバイル最適化に関する Klaviyo のオプションについての詳細はこちら。
テンプレートのコンテンツとメール幅を設定する
テンプレートの設定幅が、メールコンテンツのフレームを作成します。パディングとボーダーによって、そのフレーム内でコンテンツに使用できるスペースが減ります。
Klaviyoでは、画像ブロック内の画像が利用可能なスペースに収まるように自動的に縮小され、アスペクト比は維持されます。表ブロックでは、列に利用可能な幅が使用されます。これらの設定は、レイアウトをテンプレートのメール幅内に収めるのに役立ちますが、カスタムHTMLが収まることを保証するものではありません。
テンプレートブロックにカスタムコードを追加する場合は、レイアウトで使用可能なスペース内に収まる幅にしてください。テンプレートの幅設定を、スタイルを編集で確認してください。使用可能なスペースより大きい固定幅のカスタムHTMLは、はみ出したり、メールクライアントによって表示が異なったりする場合があります。送信前に、デスクトップとモバイルでカスタムコンテンツをテストしてください。