メールHTMLテンプレート最適幅ガイド
メールクライアントによってHTMLレンダリングが異なりレイアウトが崩れる場合があります。すべてのクライアントで安全なコンテンツ最大幅は600pxです。左右20pxパディング適用時のコンテンツ幅は560pxになります。
OutlookはWordベースの古いレンダリングエンジンを使用しFlexbox・CSS Gridは使用不可です。テーブルベースのレイアウトが最も安全です。モバイル最適化のためメディアクエリで単一カラムレイアウトに変換することを推奨します。
ボタンは最低44pxの高さでタッチ操作に対応させましょう。画像にaltテキストを追加しHTMLファイルサイズを102KB以下に保つとGmailのクリッピングを防げます。
よくある質問
OutlookでFlexboxが使えない理由は？
OutlookはWordベースの古いレンダリングエンジンを使用しており、モダンCSSに非対応です。テーブルレイアウトを使用してください。
メールHTMLではインラインスタイルを使うべきですか？
多くのクライアントがheadのstyleタグを削除します。インラインスタイルかCSSインライナーツールで変換してください。
GmailのHTMLクリッピング基準は？
GmailはHTML 102KBを超えると自動クリッピングします。画像は外部URLを使用しコードを最適化してください。