メール作成中に、様々なデバイス(デスクトップ / スマートフォン)でのメール表示を確認する方法をご説明します。
プレビューを開く
メール作成画面でプレビューボタンをクリックすると、現在のメールがプレビューモードで表示されます。
プレビューボタンの場所
- メール作成画面の上部ツールバーにある「👁️ プレビュー」ボタン
💡 プレビューを表示したまま編集
プレビューパネルは画面の右側に表示されます。左側で編集しながら、右側でリアルタイムに変更内容を確認できます。
デスクトップ表示
デスクトップメールクライアント(Outlook、Thunderbirdなど)でのメール表示をプレビューします。
デスクトップ表示の確認ポイント
- ・レイアウト・余白が正しく表示されているか
- ・フォントサイズが読みやすいか
- ・画像がきちんと表示されているか
- ・リンクのカラーが視認性をもっているか
- ・テーブルレイアウトが適切に表示されているか
スマートフォン表示
スマートフォン・タブレット上でのメール表示をプレビューします。
デバイス切り替え方法
1
プレビューパネルの上部を確認
デスクトップアイコン(🖥️)とスマートフォンアイコン(📱)が表示されています。
2
スマートフォンアイコンをクリック
スマートフォン表示に切り替わります。
3
モバイル表示を確認
スマートフォン(幅375px)での表示が確認できます。
スマートフォン表示で確認すべきポイント
- ・テキストが狭い画面で読みやすいか
- ・画像が正しくスケールされているか
- ・ボタンが十分な大きさで配置されているか(最低44×44px推奨)
- ・列数が多すぎないか(1列または2列レイアウト推奨)
- ・折りたたみ可能な要素(アコーディオンなど)が正常に動作しているか
プレビューと実際の配信の違い
プレビューは参考値です。実際の配信時とプレビューで若干の違いが生じることがあります。
⚠️ メールクライアントでの表示差異
メールクライアント(Gmail、Outlook、Yahoo Mail等)によって、HTML・CSSの解釈に差があります。プレビューが完璧でも、実際には異なる表示になる可能性があります。テスト送信で実際のメールクライアント上での表示を確認することをお勧めします。
プレビューと実際の表示の違いの例
- ・フォント:指定したフォントがクライアント側にない場合、代替フォントで表示される
- ・CSS効果:メールクライアントがサポートしていないCSSは無視される
- ・Webフォント:多くのメールクライアントでは、セキュリティ上の理由からWebフォントが読み込まれない
- ・ダークモード:受信者がダークモード対応のメールクライアントを使用している場合、配色が自動調整される可能性がある
✓ テスト送信を活用しましょう
プレビューで確認した後、実際に複数のメールアドレスにテスト送信し、実際のメールクライアントでの表示を確認することを強く推奨します。
