AMP×PWA＝PWAMP：両方のテクノロジーを組み合わせて、最高のUXを

テクノロジーの進歩につれて、モバイルのユーザーは多くを求めるようになってきています。レスポンシブで安定したブラウザや、素早く返ってくる検索結果など、リッチなUXを期待しているのです。

モダンなアプリは、モバイルやデスクトップ、iOSやAndroid、Facebookのインスタントアーティクルまで、幅広いエコシステムに対応しなければなりません。ユーザーに、より早く、より信頼されるモバイル体験を提供するために、開発者はモバイル技術を駆使して開発する必要があります。

ここで登場するのが、AMPとPWAです。このふたつの言葉は、最近フロントエンド界隈でバズワードとなりました。

• AMPとPWAとは一体何なの？
• AMPとPWAのベネフィットは？
• AMPとPWAの両方を組み込む方法は？（PWAMP）

この記事ではAMPとPWAのそれぞれの機能のご紹介します。AMPとWPAをサイトにどのように組み込めるか、考えていきましょう。

AMP（Accelerated Mobile Pages）とは？

モバイルデバイスで検索エンジンを使ったことがある人なら、おそらくAMPに出会っているでしょう。

AMPはGoogleとTwitterが推奨しているオープンソースのフレームワークで、Webサイトを遅くするさまざまな要素を取り除いたものです。全てのモバイルデバイスでのサイトスピードやUXを強化します。つまり、AMPは静的コンテンツのWebページを作るというアプローチのひとつです。

AMPは当初、信頼の高い出版社のニュース記事やブログポストのために作られました。この技術はFacebookのインスタントアーティクルや、その他の似たようなフレームワークへのアンサーとして開始されましたが、現在はそれにとどまらず、検索結果を高速で返す効果的なプラットフォームとして普及しました。しかもGoogleは、AMPページだけをホストした個別のニュースカルーセルを作成したこともあります。

では、AMPはどのように動作するのでしょうか？ このフレームワークは、主に以下の3要素で構成されています。

• AMP HTML
• AMP JS
• AMP CDN

AMP HTMLは、開発者たちがAMPページを構築するために編み出されました。しかしながらAMP HTMLには、いくつかの厳格なルールもあります。例えばページロードを早くするために、formなど特定要素の利用を禁止しています。

また、AMPのエレメントには最新のCSSを使わなければいけません。

PWA（Progressive Web Apps）とは？

PWAの定義はさまざまに言われています。

Ionicは、PWAを「モダンなWeb技術を用いて、アプリのようなUXを提供するWebアプリケーション」と定義しています。

Googleは、PWAを「Webとアプリの良いところを組み合わせたUX」と定義しています。

Mozillaは、PWAを「特定の技術と共通パターンを活用しているもの」と技術的に定義しています。PWAはWebとネイティブアプリ、両方の特徴を活かしているということです。

しかし、PWAが何なのか真に言い表しているような別の定義もあります。

「PWAはモバイルデバイスで動く、通常のネイティブアプリのように見える、一般的なWebページやWebサイトのような形をしているWebアプリケーション」

PWAは、モダンなブラウザの特徴とモバイルのUXをひとつのテクノロジーにまとめたものなのです。

PWAは以下の特徴を持っています。

• 信頼できる
• 速い
• エンゲージメントしやすい

PWAは、ネットワークの状況が悪いところでも瞬時にロードできる必要があります。ユーザーの行動に素早く反応し、リッチなUXを提供できなければならないのです。

またPWAと判定されるために必要な、いくつかの基準があります。

• PWAは安全なソースでなければならない（TLSで保護されている必要がある）
• PWAはユーザーのネット環境がないときにも立ち上がらなければならない
• PWAはWebアプリのマニフェストを参照しなければならない

AMPとPWA、それぞれのベネフィットは？

それぞれ独立したフレームワークとして、AMPとPWAはさまざまなアドバンテージがあります。

AMPには以下のようなベネフィットがあります。

• フレームワーク自体がすごく速い
• あらゆるモバイルデバイスに対応している
• AMPで書かれたページは、Googleのモバイル検索の結果で上位表示されやすい
• ユーザーはAMPサイトに長く滞在し、商品購入につながりやすい傾向にある

PWAには以下のようなベネフィットがあります。

• コンテンツキャッシュを通して、インストール後のローディング時間を短縮できる
• アプリをアップデートした際、中のコンテンツも単独アップデートできる能力がある
• 統一された見た目で、ネイティブのモバイルプラットフォームを補完する
• システム通知とプッシュメッセージが可能で、ユーザーのエンゲージメントを高められる

AMPとPWAを一緒に組み込む方法（PWAMP）

AMPとPWAをともにサイトに組み込む（PWAMPとも呼ばれる）には、以下のようなメソッドが考えられます。

• AMP as PWA
• AMP to PWA
• AMP in PWA

1. AMP as PWA

静的コンテンツのページでユーザーインタラクションが少ないならば、AMPをPWAとして使う方法（AMP as PWA）があります。

ユーザーが特定の要素をクリックした際、AMPキャッシュから取得した特定の場所に移動します。つまり、あなたのサイトはService Workerを持っている必要がありますが、それによりJavaScriptで可能になる特徴やカスタムサイト要素などの追加機能をユーザーに提供できます。

またPWAを使うために、Webアプリケーションマニフェストをサイトに追加する必要があります。

2. AMP to PWA

AMP to PWAは、WebサイトのエントリーポイントとしてAMPがあり、続いてPWAに切り替わるという使い方です。

これにより、ユーザーはページを素早く読み込めます。Service Workerはユーザーがウェブサイトに行くときに一回だけインストールされます。

3. AMP in PWA

AMP in PWAメソッドは、AMPページを使うことでPWAをデータソースとして強化します。

シャドーDOMをPWAに組み込み、XML HTTPリクエストをAMPドキュメントに送り、AMPページがロードされたらHTMLを返すだけです。

以上3つの、どのメソッドを使うにせよ、AMPはたくさんのPWAの特徴を活用できます（これらは、以前はHTTPSで利用できていた特徴です）。

AMPとPWAを一緒に組み込むメリット

AMPとPWAはそれぞれ弱点もあります。しかし組み合わせることで欠点を補い、より良いUXを生み出せます。たとえばAMPはサイトにおける優先的なページをキャッシュする一方で、PWAはAMPでないコンテンツのソースをキャッシュします。

さらにいえば、AMPとPWA両方の技術をEコマースのサイトで統合すれば、サイトの訪問者や、ユーザーのエンゲージメント、モバイルショッパーからの問い合わせも増加できるでしょう。

まとめると、PWA＋AMP＝PWAMPのコンビネーションを使うことで、ユーザーは速くページにたどり着き、長くページに留まることができ、そしてあなたのサービスにエンゲージし続けてくれるのです。

（原文：Rashmi Inglekh　翻訳：Yui Shimizu）