レスポンシブ デザインによってメールの表示を画面の大きさに合わせて最適化する

（Google Apps デベロッパー ブログ (英語)に同じ内容が投稿されています）

投稿者: Pierce Vollucci（アソシエイト プロダクト マネージャー、Gmail） と Steve Bazyl（デベロッパー プログラム エンジニア、Google Apps）

皆さんが送信したメールは、パソコンで読まれる可能性もありますし、タブレットやスマートフォンで読まれる可能性もあります。むしろ、これらの端末すべて読まれると考えて良いでしょう。しかし、利用する端末によってメールのレイアウトなどの見た目が異なる場合があります。そこで役立つのが今月中に Gmail と Inbox by Gmail で利用可能となる CSS メディアクエリです。CSS メディアクエリを利用すれば、パソコンでの表示、スマートフォンでの縦向き表示、タブレットでの横向き表示のいずれでも、メール送信時のレイアウトが保持されるようになります。またあらゆる端末でのメールのレイアウト表示を最適化するために、幅、回転、解像度に合わせてスタイルを変更できるようになります。

レスポンシブ デザインの適用前と適用後のメール表示の例

サポートされる CSS ルールは、メール設計担当者と話し合いのもと、レスポンシブ デザインに対応するための最適なメディアクエリとして割り出されました。現在 Gmail での CSS サポートを拡大し、メール設計担当者がメールの表示方法をもっと自由に調整できるようにすることを目指して取り組んでいますが、今回のアップデートはその一部分です。以下の CSS ルールのサンプルでは、画面の幅が 500px を超えると赤が適用されます。

@media screen and (min-width: 500px) {
  .colored {
    color:red;
  }
}

サポートされる CSS ルールがすべて記載されたリストは、デベロッパー向け ドキュメント (英語) でご覧いただけます。ユーザーにとって機能豊富でレスポンシブな メールサービスを実現するための助けになれば幸いです。ぜひご覧ください。

本ブログの原文（英語）は、こちらをご覧ください。

-

リリースの詳細
リリース方式:
即時リリースと計画的リリースの両方が対象（2016 年 9 月 28 日以降）

展開ペース:
段階的に展開（機能が表示されるまでに 4 日以上かかる可能性があります）

対象:
Google+ を使用しているドメインのすべてのユーザー

対応:
チェンジ マネジメントを推奨

より詳しく

デベロッパー向けドキュメント (英語)

Gmail 公式ブログ（エンドユーザー向け）(英語)