Gmailで「AMP for Email」を表示する方法

AMP for Email

2019年3月に AMP for Email がリリースされました。

早速、Gmailに「AMP for Email」を表示したい方も多いと思いますが、Gmailのデフォルト設定では「AMP for Email」は表示できません。

現時点で、Gmailに送信された「AMP for Email」を表示するには、Gmailの設定が必要です。

Gmailで「AMP for Email」を表示する方法を紹介します。

Gmailの設定さえしてしまえば、「AMP for Email Playground」からテストメールを送信すると、お使いのGmailで「AMP for Email」を表示できます。

スポンサーリンク
レクダンクル(大)

Gmailで「AMP for Email」の設定をする手順

Gmailで「AMP for Email」の設定の手順です。

  1. Gmailの設定にアクセス
  2. メッセージ内の画像
  3. 動的メール
  4. 送信元のメールアドレスを登録する

1. Gmailの設定にアクセス

Gmailの設定にアクセスします。

Gmailの設定にアクセス

2. メッセージ内の画像

設定→全般タブを下にスクロールすると、「メッセージ内の画像」の項目があるので、「外部画像を常に表示する」にチェックを入れます。デフォルトでチェックが入っていますが、チェックが入っていなければ、チェックを入れてください。

「外部画像を常に表示する」にチェックを入れる

3. 動的メール

「動的メールを有効する」のチェックを入れます。こちらもデフォルトでチェックが入っていると思います。チェックが入っていなければ、チェックを入れて有効にします。
有効にすることで、「AMP for Email」を受信した際に、「AMP for Email」の形式でメールが表示されます。

「動的メールを有効する」のチェックを入れる

4. 送信元のメールアドレスを登録する

現時点で「AMP for Email」はテスト版なので、送信元のメールアドレスを登録する必要があります。

ホワイトリストとして、送信元のメールアドレスを登録しなければ、「AMP for Email」形式のメールを受信しても、以下のようなエラーが出て表示できません。

AMP for Email はホワイトリストに入れないとGmailで受信できない

今回は以下のメールアドレスをホワイトリストとして登録してください。このメールアドレスを登録すると、「Gmail AMP for Email Playground」からテスト版「AMP for Email」を表示できます。

  • amp@gmail.dev

ホワイトリストに追加する

以下を設定して、送信先のメールアドレスをホワイトリストに追加してください。

①動的メールの作成

②送信者のメールアドレス

AMP for Email ホワイトリストに追加する

「Gmail AMP for Email Playground」から「AMP for Email」を送信する

Gmailで「AMP for Email」の設定が完了したら、「Gmail AMP for Email Playground」から「AMP for Email」を送信します。

以下手順です。

  1. 「Gmail AMP for Email Playground」にアクセス
  2. 右上のExamplesからデモを選択
  3. 「SEND」をクリックして「AMP for Email」を送信

1. 「Gmail AMP for Email Playground」にアクセス

Gmail AMP for Email Playground」にアクセスします。

2. 右上のExamplesからデモを選択

右上のExamplesからデモを選択します。
デフォルトの「Hello, AMP4EMAIL world.」だと、テキストのメールしか送信されませんので、<amp-list>、<amp-form>、<amp-carousel>などを選択してください。

AMP for Email、Examplesからデモを選択

3. 「SEND」をクリックして「AMP for Email」を送信

画面下の「SEND」をクリックして「AMP for Email」を送信します。
Gmailの受信トレイに「AMP for Email」のデモが届きます。

Gmailで「AMP for Email」のデモを見てみる

Gmailで「AMP for Email」のデモを見てみましょう。

Documentationを選択すれば、複数のデモを見ることができます。

<amp-list>

AppleやOrangeなどのフルーツのリストが表示されます。

<amp-list> デモ

<amp-form>

<amp-form>を表示したユーザーは、Gmail上でフォームに記入して送信することが可能です。

<amp-form> デモ

<amp-carousel>

<amp-carousel>を受信すると、カルーセル形式の画像が読み込めます。

<amp-carousel> デモ

<amp-accordion>

アコーディオン形式のメールが送信されます。

<amp-accordion> デモ

<amp-anim>

GIF画像が送信されます。

<amp-anim> デモ

<amp-bind>

<amp-bind>を表示したユーザーは、Gmail上でユーザーが選択したものを表示できるようになります。

<amp-bind> デモ

<amp-fit-text>

指定したサイズのdiv boxにテキストを表示できます。

<amp-fit-text> デモ

<amp-timeago>

日付を xxx時間前 (例、3時間前) とフォーマットすることで、ファジータイムスタンプが表示されます。

<amp-timeago> デモ

さいごに

以上、Gmailで「AMP for Email」を表示する方法を紹介しました。

「AMP for Email」のデモをご覧いただくと、インタラクティブなメールが表示されていることが分かります。
ぜひ、Gmailで「AMP for Email」を表示してみてください。

G Suiteで「AMP for Email」を有効にする方法を紹介します。 無料のGoogleアカウントの場合、Gmailの...
スポンサーリンク
レクダンクル(大)
レクダンクル(大)

フォローする

Instagram

この記事をお届けした
iSchoolの最新情報を、
いいねしてチェックしよう!
スポンサーリンク