HTML メールのベスト プラクティス: 画像のみのメールはマーケティングに悪影響を及ぼしますか?
公開: 2022-11-24成功している企業は、ブランド基準の強化に高い優先順位を置いていますが、それは当然のことです。 これは、顧客との関係を視覚的に表したものであり、常に同じフォント、色、ロゴ、画像スタイルを使用することで、その関係を維持しています。
そのため、クライアント向けの電子メール マーケティング戦略を作成し始めたときに、Web セーフ フォントに制限されていること、画像に単語を簡単に重ねることができないこと、テキストの正確な外観を制御できないことに気付くと、非常に耳障りになることがあります。パディングまたはマージンは受信トレイによって異なるためです。
このため、画像のみのテンプレートを作成して、メールが常に思い通りに見えるようにしたくなるかもしれません. 残念ながら、これは近視眼的な戦略であり、解決するよりも多くの問題を引き起こす可能性があります。 読み続けて、その理由 (および代わりに何をすべきか) を学びましょう。
画像のみのメールを避けるべき理由
残念ながら、画像のみのメールのメリットはデメリットを上回るものではありません。 以下は、それらを避けるべき理由のほんの一部です。
到達性の問題を引き起こす可能性があります
メール キャンペーンを作成する場合、最優先事項は常に到達率です。 画像のみの電子メールは、攻撃的または欺瞞的な言葉遣いを検出するために配置されたテキスト フィルターを回避するために詐欺師が使用する戦術である可能性があるため、スパム フォルダーに直接送信されることがよくあります。
メールの全体的なファイル サイズも配信率に影響します。これは、acid の記事に関するこのメールに示されているとおりです。画像のみのメールは、HTML メールよりもはるかにサイズが大きくなります。
読み込みが遅い、またはまったく表示されない
一部の電子メール クライアントでは、セキュリティ上の理由から、または潜在的に攻撃的なコンテンツやマルウェアからユーザーを保護するために、デフォルトで画像がオフになっている場合があります。 画像のみのメールを作成した場合、画像のブロックに関するこのリトマス記事に示されている例のように、壊れた画像アイコンの壁しか表示されない場合があります。
また、画像が多いメールは、メールの読み込みにかかる時間が大幅に長くなり、ユーザー エンゲージメントに悪影響を与える可能性があります。 人々は、個々のメールを読むのに平均 10 ～ 13 秒を費やします。 これは、画像の読み込み中に遅延時間が発生した場合、メッセージを伝えるために必要なすでに狭い機会がさらに縮小することを意味します.
アクセシビリティを損なう
視覚障害者は、画面読み取りデバイスを使用して画像のみの電子メールを解釈するのがはるかに困難になります。 メールの画像には、メールの内容に関連する説明的な代替テキストが常に含まれている必要がありますが、メールのテキストを完全に置き換えることを意図したものではありません。
モバイル向けに最適化されていない
デスクトップ用に画像のみのメールをデザインすると、顧客はモバイル デバイスでそれを見るために目を細めます。 一方、携帯電話で読みやすいようにデザインすると、コンピューターの画面では漫画のように大きく見えます。
HTMLメールほど検索しにくい
クーポンや今後のイベントなど、連絡先が後で参照したい情報を含むメールを送信する場合、すべてのテキストが画像ベースであると、メッセージを受信トレイで検索するのが難しくなります。
画像のみのメールを作成してはいけない理由をすべて理解したところで、美しく効果的な HTML メールを作成する際に留意すべきベスト プラクティスをいくつか紹介します。
HTML メール作成のベスト プラクティス
これは、メールに画像を含めないようにする必要があるということですか? 全くない！ ほとんどのリソースでは、配信率と最適なユーザー エクスペリエンスのバランスを最適化するために、テキストと画像の比率を 60/40 にすることを提案しています。 画像が表示されているかどうかに関係なく、影響を与えるメールを作成するためのこれらの戦略を試してください。
画像のサイズを可能な限り小さくする
メールに画像を含めることはできますが、メール テンプレートに追加する前にファイル サイズを最小限に抑える必要があります。
Photoshop から電子メール用に画像をエクスポートするには、[ファイル] > [エクスポート] > [Web 用に保存] を選択します。 写真のような不透明な画像の場合、JPEG ファイル形式を使用すると、PNG よりもファイル サイズを小さくすることができます。 透過性が必要なロゴなどのイラスト画像には、PNG が理想的なオプションです。
Photoshop にアクセスできない場合は、tinypng などの無料のオンライン画像圧縮ツールを使用すると、画像サイズを最小限に抑えることができます。
Live Text を使用する
ほとんどの場合、電子メールの文言はすべて、カーソルで選択してスクリーン リーダー デバイスで読み取ることができる HTML テキストにする必要があります。 Web セーフ フォントの元のリストが最も安全な選択ですが、一部の受信トレイにはそのフォントが表示される場合があります (たとえば、Gmail には Google フォントが表示されます)。
フォールバックとして、最初にブランド フォントを Web セーフ フォントと共に使用することをいつでも選択できます。 CSS でカンマを使用することにより、受信トレイに、可能であれば最初のフォントを使用し、次に可能であれば 2 番目のフォントを使用し、他の 2 つのフォントが使用できない場合は最後に他のサンセリフ フォントを使用するように指示します。
<style=”font-family: 'KoHo', Arial, sans-serif”>防弾ボタンの作成
防弾ボタンは、画像の代わりに HTML を使用して作成された電子メール ボタンです。 これらは、パディング、ボーダー、Vector Markup Language (VML) など、いくつかの方法を使用して作成できます。
この防弾メール ボタン クリエーターは、Outlook を含むほとんどの受信トレイで美しく表示される様式化されたボタンを簡単に作成するのに役立ちます。
最大限の効果を得るために画像を GIF に交換
アニメーション gif のファイル サイズは、写真よりもさらに小さいことを知って驚くかもしれません。 それはすべて、画像の複雑さと、フレーム間で変化するピクセル数に帰着します。
この記事では、メール用に適切なサイズの GIF を作成するための詳細な戦略をいくつか紹介します。 これらのヒントには次のようなものがあります。
- トランジションのフェードではなくカット
- 写真の代わりにイラスト付きのベクター要素を使用する
- オーバーレイを使用してカラー パレットを制限する
メールの上部に「ブラウザで表示」リンクを含める
一部のユーザーは、デフォルトで画像をオフにすることを好むか、組み込みのセキュリティ機能を備えた職場の受信トレイを持っているため、この機能を制御できない場合があります.
このため、メールの上部に「ブラウザーで表示」リンクを含めることを常にお勧めします。これにより、連絡先はメールを元のデザインどおりに表示できます。
画像アイコンの代わりにテキスト要素を使用する
可能であれば、画像の代わりにテキストベース/CSS 要素を試してください。 たとえば、矢印のイメージを作成する代わりに、矢印を含む Web セーフ フォントがあるかどうかを確認します。 「ASCII」または「Unicode」の後にキーワードを付けてググって確認できます。 このチャートは、Arial フォント ファミリーの一部であるとは知らなかったかもしれないすべての記号を示しています。
画像をオプションのアクセント要素にする
私たちが気づいた最近の傾向は、画像を使用して単色の背景にシームレスに溶け込む電子メールです。 これにより、デスクトップとモバイル向けの HTML テキストとレスポンシブ デザインを維持しながら、画像のみの電子メールのように見せることができます。
理想的なフォントとレイアウトのオプションがない場合でも、適切に設計された HTML メールは依然として非常に効果的なマーケティング ツールであり、人口統計学的グループや身体的能力に関係なく、すべてのパトロンにリーチするために使用できます。