よろしい。これで包括的で十分に引用された記事を作成するだけの十分なデータが揃いました。では記事を書きます。
Mailchimp メールマーケティング デザインガイド はここから始まります。良いデザインは飾りではありません。キャンペーンが成果に結びつくかどうか、それとも2スクロール目に削除されるかの違いです。
メールマーケティングキャンペーンの平均ROIは36倍です。つまり、企業は1ドル使うごとに36ドルの利益を得ています。ただし、その利益はメールが開かれ、読まれ、行動に移されるかどうかにすべてかかっています。Mailchimp 内で行うデザインの選択肢すべてが、これら3つを決定します。
このガイドは、Mailchimp メールマーケティング デザインガイドのすべての層をカバーしています。レイアウトの寸法とタイポグラフィから CTA ボタン、画像比率、モバイル最適化、Mailchimp の AI デザインツールまで。テンプレートから構築する場合でも、カスタム HTML をコーディングする場合でも、これらは指標を動かす決定です。
重要なポイント
- 2024年、メール開封の50から60パーセントはモバイルデバイスから発生しており、モバイルファーストデザインはオプションではなく必須要件です。
- Mailchimp テンプレートは、ほとんどのメールクライアントの表示機能に対応するため、600px 以下の幅に設計されています。
- 優れたメールデザインは視覚階層についてです。読者は数秒以内に何をすべきかを知るべきで、1つのプライマリヘッドライン、明確なスペース、読みやすいフォント、明らかな CTA の配置、モバイルフレンドリーなレイアウトが必要です。
- 60/40 ルール(テキスト60パーセント、画像40パーセント)は、最も一般的に受け入れられている画像とテキストのガイドラインです。SpamAssassin(最も一般的に使用されているスパム検出システムの1つ)はこれを一般的なしきい値として認識しています。
- Mailchimp の Brand Kit を使用すれば、ロゴ、フォント、色、ブランドパーソナリティを保存および更新でき、AI ツールがメールと自動化フローのためにブランドに沿ったグラフィックスとレイアウトを素早く生成できます。
1. すべてのデザインを明確な目標から始める
テンプレートを開いてデザインを始める前に、一歩引いて何を達成したいのかを定義してください。ブログ記事へのトラフィックを促進していますか。それとも受信者に最新コレクションの購入を促すのですか。イベントの宣伝ですか。あなたの目標は、メールヘッダーから最終的な行動喚起まで、あなたが行うすべてのデザイン決定に影響を与えるべきです。デザインが単一の焦点を絞った目的と一致すると、メールマーケティングメッセージはより明確で説得力が増します。
これは Mailchimp キャンペーンの大半が間違える場所です。1つのメールですべてを言おうとするのは、通常、クリック数を減らす最速の方法です。
何か構築する前に、3つの質問に答えてください。
- 読者に取ってもらいたい単一のアクションは何ですか。
- このメールを受け取るのは正確には誰ですか。
- この送信の成功とはどのような状況ですか。
レイアウト、画像、コピー長を含む、残りのデザイン決定はこれらの答えに奉仕すべきです。他には何もありません。
2. レイアウトの基礎:幅、構造、列の選択
HTML メールのレイアウトは、多くのメールクライアントが非常に広くないプレビューウィンドウを提供するため、600 から 800 ピクセルの幅にする必要があります。実際のところ、Mailchimp テンプレートは、ほとんどのメールクライアントの表示機能に対応するため、600px 以下の幅に設計されており、これは最大限のレンダリング互換性のための最も安全なデフォルトです。
レイアウトの選択により、メール全体の基盤が設定されます。単一列レイアウトはモバイルデバイスでの表示に適しており、デザインをシンプルに保ちます。一方、複数列デザインは複数の製品または機能を同時に紹介できます。
それらの間で選択する方法は次の通りです。
- 単一列: ニュースレター、お知らせ、オンボーディングメール、および読む順序が重要なコンテンツに最適です。すべての画面サイズで確実にレンダリングされます。
- 複数列: 製品グリッド、機能比較、またはキュレートされたコンテンツ ラウンドアップに適しています。複数列デザインは通常、モバイルデバイスの小さな画面で機能しなくなるため、モバイルでのテストが必要です。
情報階層は非常に重要です。イベント詳細と重要なコンテンツは常に上部で目立つサイズにする必要があります。存在する場合、行動喚起は明確に定義され、一目で識別できるようにする必要があります。
シンプルさが重要です。ウェブサイトのようにメールをデザインしないでください。一般的に、メールが短いほど、パフォーマンスが向上します。
3. タイポグラフィ:フォント、サイズ、読みやすさ
タイポグラフィは、メールデザインで最も見落とされるレバーの1つです。フォント選択の不適切は、読みやすさを低下させ、ブランドが作る必要がある専門的な印象を損なわせます。
タイポグラフィは重要です。フォントサイズとフォントファミリーは、読みやすさに大きな違いをもたらします。モバイルメールクライアントがメッセージ全体をダウンロードしない場合もあるため、メールの上部に「フック」を配置することが重要です。
モバイルで読みやすい本文については、最小フォントサイズ16px が推奨されます。Apple は 17 から 22px を推奨しており、Google は 18 から 22px を推奨しています。Mailchimp 独自のリファレンスガイドでは、16px Georgia が読みやすく効果的であることを発見しました。
Mailchimp メールの実践的なタイポグラフィ ルール:
- 本文に Web セーフフォント(Arial、Georgia、Helvetica、Verdana)を使用して、すべてのメールクライアント全体でのレンダリングを保証します。
- 最大2つのフォントファミリーに制限してください。見出し用に1つ、本文用に1つです。
- 行の高さをフォントサイズの 1.4 から 1.6 倍に設定して、快適な読み取りを実現します。
- 重要なテキストを画像内に埋め込まないでください。画像がブロックされると、そのテキストは完全に消えます。
クリアなサイズと太さの Web セーフフォントを使用して、CTA ボタンを読みやすく、目を引くものにします。
4. 画像:配信可能性を損なうことなく使用する方法
画像はメールを更に魅力的にしますが、意図を持って使用する必要があります。
画像はコンテンツをより魅力的で、魅力的で、プロフェッショナルに見せるための優れた方法です。ただし、画像を使用してメッセージを強化するのであって、メッセージを散らさないでください。
実践における 60/40 ルール
マーケティングまたはプロモーションメールの場合、推奨される比率はテキスト 60パーセント、画像 40パーセントです。このバランスは、説得力のあるコピーに対する強い製品ビジュアルを使用して、視覚的な魅力と配信可能性を保ちます。ニュースレターの場合、テキスト 70パーセント、画像 30パーセントの比率が推奨されます。ここで、プライマリバリューはテキストコンテンツから来ており、画像はテキストの補強と分割に役立ちます。
23 個の最も一般的なスパムフィルターに対するテストでは、メールに 500 文字以上含まれている場合、コンテンツと画像の比率は配信可能性に影響しないことが判明しました。それでも、健全なバランスを保つことは、特に B2B オーディエンスと Outlook ユーザーにとって依然としてスマートなプラクティスです。
Mailchimp の主な画像ルール:
- 常に説明的な代替テキストを追加してください。説明的な代替テキストを提供できないと、画像がブロックされた場合やスクリーンリーダーに依存しているユーザーに対して、メールはアクセスできなくなります。
- 画像を 200KB 以下に保ちます。大きな画像はロードに時間がかかり、貴重なデータを消費します。
- 画像のみのメールを避けてください。画像のみで構成されたメールは、テキストベースのフィルターをバイパスする懸念、およびアクセシビリティの課題と低いユーザーエクスペリエンスをもたらすため、依然として配信可能性にとって大きな赤旗です。
- ほとんどのメールクライアントはデフォルトで画像を表示するようになりました。Litmus は自動画像ダウンロードを広く テストし、すべてのモバイルメールクライアントがデフォルトで画像を許可していることを発見しました。
5. CTA ボタン:クリックを促すデザイン選択
コール・トゥ・アクション ボタンは、Mailchimp メールにおける最も重要な機能要素です。デザイン内の他のすべては、読者をそのクリックに導くために存在します。
効果的な行動喚起がなければ、顧客はメールを開いた後に何をすべきかわかりません。メールボタンは、購読者にアクションを取るよう促し、コンバージョンできるウェブサイトに戻すことができます。
目立ち、クリックを促す CTA を設計してください。購読者がクリックしたときに何が起こるかを明確に伝える、対比する色と説得力のあるアクションワードを使用します。CTA をシンプルでアクション指向にし、メール当たり1つのプライマリアクションに焦点を当てることで、オーディエンスの混乱を避け、メッセージを希釈しないようにします。
モバイルでは、ボタンのサイジングはほとんどのマーケターが実現するより重要です。行動喚起のタッチターゲット(ボタンなど)は、少なくとも 46px の正方形である必要があります。Apple は 44px の正方形を推奨しており、Google は 48px の正方形を推奨しています。
追加の CTA デザイン原則:
- HTML ボタンはロードが速く、画像がオフになっている場合でもすべてのクライアントに表示されるため、メールの有効性が向上します。ユーザーは CTA を見て、次に何をすべきかを知ることができるためです。
- CTA は、顧客に正確に何をすべきかを伝えるために、わずか数語であるべきです。
- プライマリ CTA をできるだけ折り込みの上に配置します。行動喚起ボタンはスクロールなしで表示されるべきです。
- モバイルでは、ボタンなどの重要な CTA をメールの全幅にスパンさせ、右利きと左利きの両方の読み手をカバーすることを検討してください。
まず人を CTA に導くサブジェクトラインの作成の詳細については、「開封率を 27パーセント 上げるメールサブジェクトラインのベストプラクティスガイド」をご覧ください。
6. Mailchimp でのモバイルファーストデザイン
モバイルクライアントはメール開封の 41.6パーセント を占め、その後 webmail 開封が 40.6パーセント、デスクトップ開封が 16.2パーセント です。デスクトップ優先でデザインしてからモバイルに対応させるのは、エンゲージメントの低下につながる後向きなアプローチです。
モバイルフレンドリーなメールデザインの重要性は、成功するメールマーケティングキャンペーンにとって最高です。ほとんどのメールがモバイルデバイスで開かれるようになったため、メールがモバイルで見栄え良くなることを確認することは単なる推奨ではなく、必須です。
企業は、モバイルレスポンシブなメールデザインを作成する際に、モバイルクリックが 15パーセント増加します。
Mailchimp キャンペーンのモバイルデザイン チェックリスト:
- 単一列レイアウトをデフォルト構造として使用します。
- 本文テキストの最小フォントサイズを 16px に設定します。
- モバイルでフルウィッドス CTA ボタンを使用して、どちらの手でもタップできるようにします。
- サブジェクトラインは 40 文字以下に保ちます。デスクトップはメールのサブジェクトラインの 60 文字を表示します。スマートフォンを使用している購読者は 25 から 30 文字を見ることができるため、最も重要な情報を最初に配置してください。
- メールに説得力のあるプリヘッダーを含めることで、読者がクリックする追加の理由が与えられ、コンテンツの導入にスムーズに導かれます。プリヘッダーを追加すると、開封率が 13.72パーセント 増加します。
Mailchimp を使用すれば、組み込みの Inbox Preview ツールを使用して送信前に、異なる Web およびモバイルメールクライアント全体でメールが見栄え良くなっていることを簡単に確認できます。
7. Mailchimp の Brand Kit と AI デザインツールの使用
Mailchimp は AI をデザインワークフローに統合しました。これはデディケートなデザイナーを持たないチームにとって本当に有用な方法です。
Mailchimp の Brand Kit を使用すれば、ロゴ、フォント、色、ブランドパーソナリティを保存および更新できます。AI とブランドキット内のアセットを使用して、メール、ソーシャルポスト、自動化フローなどのための洗練されたオンブランドのグラフィックスとレイアウトを素早く生成します。
この背後にある AI は実質的なものです。ユーザーは単に彼らのウェブサイト URL を Mailchimp の Content Studio に入力し、AI はすべての検出可能なブランド要素を自動的に検出、分析、分類します。サービスはロゴ、ブランドカラー、背景とテキストカラーのペアリング、フォントとフォントスタイル、ブランド画像、およびボタンスタイル、ナビゲーションパターン、背景処理を含む完全なウェブサイトスタイルガイドをキャプチャします。
コピーとデザインのフィードバックについては、ChatGPT に似たテクノロジーを搭載した Content Optimizer は、コピーとデザインを分析し、読みやすさ、トーン、行動喚起を改善するための提案を提供します。
AI がうまく処理する点の観点から:Creative Assistant はウェビナー招待メールを約 4 分で構築できます。これは一から構築するのに 25 分かかるのと比較してです。AI 生成レイアウトは通常 80パーセント 完成しており、ヘッダー画像と CTA ボタンの色の調整のみが必要です。複雑な複数列レイアウト、動的な製品グリッドを持つ e コマースメール、およびカスタム HTML または CSS が必要なものでの処理に苦労しています。
オーディエンスの受信トレイでブランドの一貫性を保つためには、キャンペーン用に使用するメールテンプレートを持つことが重要です。強力なブランドキットと再利用可能なテンプレートの小規模なセットの組み合わせにより、各キャンペーンをゼロから構築することから生じる矛盾が排除されます。
デザイン以上のパーソナライゼーションについての深い見方については、「コンバージョンを 47パーセント 向上させる 7 つのメールパーソナライゼーション技術ガイド」を参照してください。
8. テスト、プレビュー、自信を持って送信
デザイン作業は「保存」をクリックしたときに終了しません。Mailchimp でデザインするキャンペーンは、受信者の受信トレイで表示されると常に少し異なって見えます。異なるメールクライアントとデバイスは、個々のレンダリングエンジンに従って HTML メールを表示します。
メールを送信する前に、コンテンツをテストして、データが不足しているメールや壊れたリンクを送信しないようにしてください。Mailchimp のプレビューおよびテストツールは、画像が正しく読み込まれ、すべてのハイパーリンクとボタンが機能することを確認するのに役立ちます。テストメールを自分自身と少なくとも1つの別のデバイスに送信して、すべてが望む方法に見えることを確認します。
送信前のチェックリスト:
- Mailchimp の Inbox Preview を使用してデスクトップとモバイルでプレビューします。
- テストメールを自分自身と少なくとも1つの別のデバイスに送信します。
- すべてのリンク、特に CTA ボタンを確認します。
- 画像が正しく表示されており、代替テキストが存在することを確認します。
- サブジェクトラインとプリヘッダーテキストが両方のクライアントで正しく見えることを確認します。
- すべての大文字、多くの感嘆符、およびスパムフィルターが探すぎょっとした言葉やフレーズを避けたことを確認します。
リストセグメンテーションについて、これらのよくデザインされたメールが最初に適切な人々に見える場合は、「ROI を 760パーセント 向上させるメールリストセグメンテーション戦略ガイド」をお読みください。 
よくある質問
Mailchimp テンプレートの推奨メール幅は何ですか。
Mailchimp テンプレートは、ほとんどのメールクライアントの表示機能に対応するため、600px 以下の幅に設計されています。テンプレートをより広く拡張することはできますが、これは Gmail、Outlook、Apple Mail、およびモバイルクライアント全体で確実にレンダリングされる標準です。
Mailchimp で単一列または複数列レイアウトを使用する必要がありますか。
コンテンツのタイプによります。単一列レイアウトはモバイルデバイスでの表示に適しており、デザインをシンプルに保ちます。一方、複数列デザインは複数の製品または機能を同時に紹介できます。ほとんどの使用例では、単一列がより安全なデフォルトです。すべての画面サイズで予測可能にレンダリングされるためです。
Mailchimp メールのモバイル用にどのフォントサイズを使用する必要がありますか。
モバイルの最小フォントサイズ 16px が推奨されます。Apple は 17 から 22px を推奨しており、Google は 18 から 22px を推奨しています。16px より小さいものはユーザーにピンチズームが必要となり、エンゲージメントが大幅に低下します。
Mailchimp メールキャンペーン全体でブランドの一貫性を保つにはどうすればよいですか。
ロゴ、フォント、色、ブランドパーソナリティを Mailchimp の Brand Kit に保存します。プラットフォームは、メール、ソーシャルポスト、自動化フローのための洗練されたオンブランドのグラフィックスとレイアウトを素早く生成するために、AI とそれらのアセットを使用します。それを再利用可能なキャンペーンテンプレートの小規模なセットとペアにして、毎回ゼロから開始することなく、デザイン出力を一貫性のあるものに保ちます。
