プレビュー機能

メール作成中に、様々なデバイス(デスクトップ / スマートフォン)でのメール表示を確認する方法をご説明します。

プレビューを開く

メール作成画面でプレビューボタンをクリックすると、現在のメールがプレビューモードで表示されます。

プレビューを開くの画面

プレビューボタンの場所

  • メール作成画面の上部ツールバーにある「👁️ プレビュー」ボタン
💡 プレビューを表示したまま編集

プレビューパネルは画面の右側に表示されます。左側で編集しながら、右側でリアルタイムに変更内容を確認できます。

デスクトップ表示

デスクトップメールクライアント(Outlook、Thunderbirdなど)でのメール表示をプレビューします。

デスクトップ表示

デスクトップ表示の確認ポイント

  • ・レイアウト・余白が正しく表示されているか
  • ・フォントサイズが読みやすいか
  • ・画像がきちんと表示されているか
  • ・リンクのカラーが視認性をもっているか
  • ・テーブルレイアウトが適切に表示されているか

スマートフォン表示

スマートフォン・タブレット上でのメール表示をプレビューします。

スマートフォン表示

デバイス切り替え方法

1

プレビューパネルの上部を確認

デスクトップアイコン(🖥️)とスマートフォンアイコン(📱)が表示されています。

2

スマートフォンアイコンをクリック

スマートフォン表示に切り替わります。

3

モバイル表示を確認

スマートフォン(幅375px)での表示が確認できます。

スマートフォン表示で確認すべきポイント

  • ・テキストが狭い画面で読みやすいか
  • ・画像が正しくスケールされているか
  • ・ボタンが十分な大きさで配置されているか(最低44×44px推奨)
  • ・列数が多すぎないか(1列または2列レイアウト推奨)
  • ・折りたたみ可能な要素(アコーディオンなど)が正常に動作しているか

プレビューと実際の配信の違い

プレビューは参考値です。実際の配信時とプレビューで若干の違いが生じることがあります。

プレビューと実際の配信の違い
⚠️ メールクライアントでの表示差異

メールクライアント(Gmail、Outlook、Yahoo Mail等)によって、HTML・CSSの解釈に差があります。プレビューが完璧でも、実際には異なる表示になる可能性があります。テスト送信で実際のメールクライアント上での表示を確認することをお勧めします。

プレビューと実際の表示の違いの例

  • ・フォント:指定したフォントがクライアント側にない場合、代替フォントで表示される
  • ・CSS効果:メールクライアントがサポートしていないCSSは無視される
  • ・Webフォント:多くのメールクライアントでは、セキュリティ上の理由からWebフォントが読み込まれない
  • ・ダークモード:受信者がダークモード対応のメールクライアントを使用している場合、配色が自動調整される可能性がある
✓ テスト送信を活用しましょう

プレビューで確認した後、実際に複数のメールアドレスにテスト送信し、実際のメールクライアントでの表示を確認することを強く推奨します。