> ## Documentation Index > Fetch the complete documentation index at: https://moengage.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # メール本文で守るべきベストプラクティス（HTML ガイドライン） > 画像の最適化、テキストと画像の比率、レスポンシブなテンプレートデザインのガイドラインなど、メール本文のコンテンツに関する HTML のベストプラクティスに従います。 メールキャンペーンを作成する際、メール本文内で特定の HTML ガイドラインに従うことで、到達率、エンゲージメント、ユーザーエクスペリエンスを大幅に向上させることができます。このドキュメントでは、メールキャンペーンを送信する前に従うべき主なベストプラクティスについて説明します。 ## 画像の最適化と使用方法 * **1 枚の大きな画像ではなく、複数の小さな画像を使用する**: スパマーは 1 枚の大きな画像を使用することが多いため、特に追加のテキストコンテンツがない場合、メールがスパムとして判定される可能性があります。また、複数の小さな画像を使用すると、構造や代替テキストもわかりやすくなります。 * **画像を圧縮する**: 画像のファイルサイズを小さくすることで、メール全体のサイズを抑えることができます。 * **背景画像にリンクを埋め込まない**: スクロール中に意図しないクリックが発生し、ユーザーエクスペリエンスの低下につながる可能性があります。 * **`` ではなく `` タグを使用する**: Gmail や Yahoo などの受信トレイサービスプロバイダーは `` タグをブロックする場合があるため、画像が正しくレンダリングされるよう `` を使用してください。また、SVG に意味のある情報が含まれている場合は、すべてのユーザーがアクセスできるようにしてください。 * **画像の数を減らす**: 画像が多すぎるとメールのサイズが大きくなり、クリッピングが発生して到達率に影響する可能性があります。 ## メールリンクの最適化 ラップされたリンクが過度に長くなるのを防ぎ、メールのパフォーマンスを最適化するために、以下のベストプラクティスに従ってください。 * **短いキャンペーン命名規則を使用する:** キャンペーン名を大幅に短くして、URL の繰り返しやラッピングによる影響を最小限に抑えます。 * **パラメータの冗長性を排除する**: URL 構造内のデータの冗長性を避けるため、*c* と *utm\_campaign* の手動挿入を削除します。 * **URL パラメータをサニタイズする**: * 必須ではないパラメータ、特に *is\_retargetting* と *pid* を削除します。 * 特定のリンクで必要ない場合は、*\$deep\_link=True* を削除します。 * 取得する必要がある残りのデータについては、変数名を短くします。 ## コンテンツとレイアウト コンテンツの配置と種類は、メールの効果において重要な役割を果たします。 * 必要に応じて、テキスト、画像、ボタン、箇条書きを組み合わせて使用します。 * **テキストと画像の比率を 60:40 に保つ**: 視覚的な魅力とテキストコンテンツのバランスを取るのに役立ち、到達率にとって重要です。 * **Call-to-Action（CTA）を戦略的に配置する**: ヘッダー/フッター以外のリンクは 3～5 個に制限し、明確な CTA を優先します。 * **リンクは目的を持って使用する**: 画像に過剰にリンクを設定すると、メールのサイズが肥大化し、クリッピングが増加し、ユーザーエクスペリエンスと到達率の両方に悪影響を及ぼすため、避けてください。すべての画像にリンクが必要なわけではありません。 * **CSS flexbox ではなく `` タグを使用する**: これにより、すべての受信トレイプロバイダーで表が正しくレンダリングされます。Gmail でサポートされている CSS プロパティの詳細については、[CSS Support.](https://developers.google.com/gmail/design/css) を参照してください。 * **複数の行を追加するのではなく、同じ行により多くの要素を追加する**: よりコンパクトな HTML 構造にすることができます。 * **モバイル専用とデスクトップ専用のコンテンツに別々の行を追加しない**: デバイスごとに別々の行を用意しなくてもレスポンシブになるようにメールをデザインしてください。これにより、メール本文の HTML サイズを 102 KB 未満に保ち、メールのクリッピングを減らすことができます。 * **空の要素を避ける**: 空の行やコンテンツセクションを削除して、HTML をクリーンかつ効率的に保ちます。これにより、メール本文の HTML サイズを 102 KB 未満に保ち、メールのクリッピングを減らすことができます。 ## HTML サイズとクリッピングの防止 * Gmail などのメールクライアントでのクリッピングを防ぐには、メールの HTML サイズを管理することが不可欠です。 * **メール本文の HTML サイズを 102 KB 未満にする**: この上限を超えるメールは、Gmail でクリッピングされる場合があります。ドラッグ＆ドロップエディターでクリッピングを回避するには、次のようにします。 * デフォルトのフォントを使用する * 区切り行の代わりにパディングを使用する * 画像を圧縮する * 複数の行を追加するのではなく、同じ行により多くの要素を追加する * モバイルとデスクトップのレンダリング用に異なる行を追加する * 画像を追加しすぎない * 空の行を追加しない * **リンクの数を減らす**: リンクを減らすことで、メール全体のサイズを小さくできます。メール内のハイパーリンクの数を制限してください。必須のヘッダーリンクとフッターリンクに加えて、主要な Call-to-Action（CTA）リンクは最大 3～4 個にすることをお勧めします。 * フッター内のリンクについては、クリックトラッキングを選択的にオフにします。手動でクリックトラッキングをオフにするには、URL を次のように記述する必要があります: `https://www.google.com` * コンテンツブロックを使用してフッターを作成し、コンテンツブロックのクリックトラッキングをオフにします。 ## 到達率とスパムの防止 特定の手法を用いることで、メールが迷惑メールフォルダではなく受信トレイに届くようにすることができます。 * **リンク短縮サービスを使用しない（例: [*https://bitly.com/*](https://bitly.com/) *のリンク*）**: リンク短縮サービスのドメインのレピュテーションが、メールの到達率に影響する可能性があります。スパマーはリンク短縮サービスを頻繁に使用するため、同じサービスを使用するとメールに悪影響を及ぼす可能性があります。 * **大文字や感嘆符を多用しない**: スパムフィルターに疑わしいと判断される可能性があります。 ## ユーザーエクスペリエンスとレスポンシブ対応 すべてのユーザーにシームレスでアクセスしやすいエクスペリエンスを提供することが最も重要です。 * **スクロールしなくてもメールが見えるようにする**: 即時のエンゲージメントが向上します。 * **Web、モバイル、タブレットの各デバイスでシームレスなエクスペリエンスを提供するメールを作成する**: スマートフォンでメールを読む大多数のユーザーに対応するため、ダークモードでのレンダリングを最適化し、横スクロールを避けてください。これによりアクセシビリティが向上します。 * **明確でわかりやすい言葉を使用する**: すべての受信者にとってメールが読みやすく、理解しやすくなります。 * **CSS Support を参照する**: 詳細については、[Gmail でサポートされている CSS プロパティ](https://developers.google.com/gmail/design/css)を参照してください。 ## アクセシビリティ | 要素 | 推奨事項 | 禁止事項 | | - | - | - | | コンテンツと構造 | | | | 論理的な読み上げ順序と構造 |
` タグに *role="presentation"* 属性を追加します。この属性は、表を構造化されたデータテーブルではなく、視覚的なレイアウト要素としてのみ解釈するよう支援技術に明示的に指示します。その結果、支援技術はわかりにくい列数や行数を読み上げなくなり、スクリーンリーダーを利用するユーザーにとってのわかりやすさが大幅に向上します。
  • 表内のコンテンツが論理的な一貫性を保ち、線形化（セルごと、行ごとに読み上げ）された場合でも理解できるようにします。これにより、支援技術による効果的な解釈が可能になり、ユーザーエクスペリエンスが向上します。
  • HTML メールの基本的なレイアウト要件については、`
    • ` 要素よりもセマンティックな HTML 構造を優先します。インラインスタイルを使用した `
    ` 要素を用いて、明確で論理的なコンテンツの流れを維持しながら、目的の視覚的な結果を実現します。 | `
    ` 要素を過度にネストしないでください。過度なネストは、さまざまなクライアントでのメールのレンダリングを複雑にし、支援技術を混乱させ、コンテンツのアクセシビリティを妨げる可能性があります。 | | テキストコンテンツ | | | | 画像とメディア | | | | 画像の代替テキスト（Alt Text） | | 代替テキストを省略したり、"image" や "graphic" などの説明的でないプレースホルダーテキストを使用したりしないでください。 | | 画像の使用 | | 画像のみで構成されたメールを作成しないでください。このようなデザインでは、スクリーンリーダーでコンテンツにアクセスできず、画像を無効にしているユーザーにはコンテンツが表示されないため、ユーザーエクスペリエンスが大幅に低下します。 | | ビジュアルデザインと読みやすさ | | | | 色のコントラスト | テキストと背景の間に強い色のコントラストを維持してください。通常のテキストでは WCAG AA の最小比率 4.5:1、大きなテキスト（18pt または 14pt 太字）では 3:1 を目指してください。オンラインのコントラストチェッカーを使用して準拠を確認します。 | 重要な情報を伝えるために色のみに頼らないでください。たとえば、エラーを示す場合は、色付きのテキストに加えて（またはその代わりに）、必ずアイコンやテキストによるインジケーターを併記してください。 | | フォントとサイズ | | | | レイアウトと余白 | パディングと余白を効果的に使用して、読みやすさを向上させ、コンテンツブロックを視覚的に区切ります。Gmail でのメールのクリッピングを避けるため、区切り行の代わりにパディングを使用してください。 | | | インタラクティブ要素 | | | | リンク（CTA） | | 背景画像にリンクを追加しないでください。誤クリックやユーザーエクスペリエンスの低下につながる可能性があります。 | | ボタン | | | | HTML と CSS の手法 | | | | CSS | さまざまなメールクライアントで最大限の互換性を実現するため、インライン CSS を使用してください。 | メールクライアント間で幅広くサポートされていない CSS プロパティ（例: flexbox）は使用しないでください。代わりに、一貫性のある確実なレンダリングを確保するため、レイアウトには `
    ` タグを使用してください。 | | ダークモード | HTML がダークモードで想定どおりにレンダリングされることを確認してください。この最適化には通常、代替のスタイルルールを提供するために、メタタグと CSS メディアクエリ（特に prefers-color-scheme）を実装します。 | | | テスト | | | | メールクライアントとデバイスでのテスト | | | MoEngage でのアクセシブルなキャンペーンの詳細については、[こちら](/docs/ja/user-guide/campaigns-and-channels/getting-started/campaign-content/accessible-campaigns-in-moengage)を参照してください。 ## フッターに必須の情報 一貫性のある包括的なフッターは信頼を築き、必要な情報を提供します。 * **ブランドの詳細を含む一貫したフッターを必ず追加する**: エンド受信者との信頼関係の向上に役立ちます。フッターには以下の詳細を含めてください。 * ブランド名 * 会社の郵便住所 * 連絡先のメールアドレスまたは電話番号 * ブランドの簡単な説明 * プライバシーポリシーへのリンク * 会社概要またはお問い合わせへのリンク * 機能する配信停止リンク * ソーシャルメディアのリンク/アイコン ## テストとエンゲージメント 継続的なテストと関連性の高いコンテンツにより、メールキャンペーンのパフォーマンスが向上します。 * **A/B テストで実験する**: 特定の HTML フォーマットや要素などに関するユーザーの好みを確認するのに役立ちます。 * **テーマベースのコンテンツを導入する**: 特に e コマースや OTT プラットフォームに関連しますが、人気の番組、映画、祝日などに基づいたテーマは、受信者の関心を大幅に高めることができます。 This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.