AMPとPWA:両方のテクノロジーを組み合わせて(PWAMP)、最高のUXを

ENGINEER

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

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

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

  • 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)

PWA

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)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ