レスポンシブデザインによってメールの表示を画面の大きさに合わせて最適化する｜Google Workspace（旧G Suite）アップデート情報

Google Workspace（旧G Suite） > Google Workspace（旧G Suite）最新アップデート情報 > レスポンシブデザインによってメールの表示を画面の大きさに合わせて最適化する

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

2016年9月27日火曜日

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

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

皆さんが送信したメールは、パソコンで読まれる可能性もありますし、タブレットやスマートフォンで読まれる可能性もあります。むしろ、これらの端末すべて読まれると考えて良いでしょう。しかし、利用する端末によってメールのレイアウトなどの見た目が異なる場合があります。そこで役立つのが今月中に 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 公式ブログ（エンドユーザー向け）(英語)

Google Workspace（旧G Suite）の機能を
メール・カレンダー・ドキュメントだけだと思っていませんか?

Google Workspace（旧G Suite）はメール・カレンダー・ドキュメントといった機能以外にも、
顧客管理・社内ポータルなど、様々な機能拡張が可能です。

拡張機能例

社内ポータル

掲示板

電話メモ

勤怠管理

ワークフロー

タイムカード

顧客管理

営業日報

セキュリティ

経費精算

アプリ開発

こんな方にオススメ

✓ Google Workspace（旧G Suite）を社内で導入しているが、
メールとカレンダー・ドキュメントしか使えていない。
✓ Google Workspace（旧G Suite）を活用し、業務改善を行いたい。
✓ Google Workspace（旧G Suite）を最大限に活用したい。

Google Workspace（旧G Suite）連携サービスを活用し、低コスト・スピーディーに Google Workspace（旧G Suite）の機能拡張を実現します。
Google Workspace（旧G Suite）をより便利に使えるよう、システムクレイスが全面的にサポートします。
導入後も、研修・運用サポートなど、万全のサポート体制をご用意しております。

Google Workspaceの
活用例はこちら