PWAとAMP：どちらが優れているか、そしてそれらは互いにどのように異なっているか？

公開: 2018-06-06

最初のiPhoneが登場してから約10年後、モバイルWebはついにユーザーのライフスタイルに追いついています。ピンチとズームはレスポンシブページによって一掃されました。 AMPとネイティブアプリは遅い読み込み時間と戦います…

しかし、モバイルWebにはまだ大きな問題領域があります。それはエンゲージメントです。上位1,000のモバイルウェブサイトは、上位1,000のネイティブアプリの4倍のユーザーにリーチしています。ただし、これらのWebサイトは、モバイルアプリよりも平均して20分の1の時間でユーザーを引き付けます。

モバイルウェブサイトは訪問者を引き付けることができるようですが、訪問者を維持することはできません。この問題を解決する新しいテクノロジーの1つは、プログレッシブWebアプリです。

プログレッシブウェブアプリとは何ですか？

プログレッシブウェブアプリは、ネイティブモバイルアプリと同じように表示、操作、動作するように設計されたモバイルウェブサイトエクスペリエンスです。ユーザーは、他のモバイルWebサイトと同じように、ブラウザーでそれらに遭遇します。そのサイトを利用した後、ユーザーは自分のデバイスにWebアプリをインストールするように求められます。インストールを選択した場合、アプリはネイティブアプリと同じ方法でデバイスにダウンロードされます。

「プログレッシブウェブアプリ」という用語は、2015年にGoogleによって造られました。同社によれば、プログレッシブウェブアプリは次の3つの基準を満たしています。

信頼性–ネットワークの状態が不確実な場合でも、即座にロードし、ダウンサウルスを表示することはありません。

高速–滑らかで滑らかなアニメーションを使用し、ぎくしゃくしたスクロールを行わずに、ユーザーの操作にすばやく応答します。

魅力的–没入型のユーザーエクスペリエンスを備えた、デバイス上の自然なアプリのように感じます。

これらの要件を満たすと、モバイルWebアプリをユーザーにダウンロード可能として提供できます。プログレッシブウェブアプリについて詳しく説明する前に、簡単に表面に戻って、ネイティブアプリと、モバイルウェブを高速化する別のテクノロジーであるAccelerated Mobile Pages（AMP）を定義しましょう。

ネイティブアプリとは何ですか？

ネイティブアプリは、AppStoreやGooglePlayなどのマーケットプレイスを介してインストールされ、デバイスのホーム画面にアイコンとして表示されます。これらは特定のデバイス用に特別に設計されており、GPS、カメラ、連絡先リストなど、そのすべての機能を使用できます。これらは、Googleマップ、Gmail、Instagramなど、現在デバイス上にある可能性が高いアプリです。

AMPとは何ですか？

オープンソースのAcceleratedMobile Pagesプロジェクト（略してAMP）を使用すると、開発者は、独自のコーディング言語でほぼ瞬時に読み込まれるWebページを構築できます。その言語は、JavaScriptの使用を制限するHTMLとCSSの簡略版です。これらのページはCDNでホストされ、ユーザーがアクセスしたときにキャッシュされたバージョンのページを配信します。

プログレッシブウェブアプリとネイティブアプリ

ネイティブアプリは、瞬時にシームレスなユーザーエクスペリエンスを提供し、AppStoreやGooglePlayなどの大規模なマーケットプレイスでサポートされているのに、なぜ従来のネイティブバージョンよりもプログレッシブウェブアプリを選ぶのでしょうか。フォーブスの記事で、AndrewGazdeckiは高レベルの説明を提供しています。

モバイルWebサイトはすばやく簡単にアクセスできますが、ユーザーエクスペリエンスに関してはあまり快適ではない傾向があります。 ネイティブアプリは最高のユーザーエクスペリエンスを提供しますが、特定のデバイスに限定されており、採用に対する障壁が高くなっています。 ネイティブアプリにはダウンロードが必要です。つまり、最初に消費者からかなりの賛同を得て、衝動的な行動のメリットを失うことになります。 これらのオプションの間に位置するのが、最新のモバイルソリューションであるPWAです。

より洗練された説明のために、ネイティブアプリとプログレッシブウェブアプリの最大の違いのいくつかを見てみましょう。

機能の使用法：現在、Webアプリはデバイスの機能を利用できますが、ネイティブアプリはそれ以上の機能を利用できます。 GPS、プッシュ通知、ジェスチャーなどは、ネイティブアプリでより簡単に利用できます。

コンテンツの制限：アプリがGooglePlayまたはAppStoreで競争する機会を与えるには、マーケットプレイスのルールに従わなければなりません。コンテンツの制限と料金により、一部のWebサイトでは成功するネイティブアプリを作成することが困難になっています。ただし、Webアプリの場合、コンテンツの制限や料金は課せられないため、コンテンツの種類に関係なく、誰でも簡単にアプリを作成できます。

オフライン接続：ここでは、HTML5で構築されたプログレッシブウェブアプリよりも完全なキャッシュを提供するネイティブアプリが重要です。アプリをオフラインで動作させる必要がある場合は、現在、ネイティブを選択することをお勧めします。

インストール：ネイティブアプリのインストールには、ユーザーに代わって重要なアクションが必要です。マーケットプレイスを開いてアプリを検索し、ダウンロードする必要があります。真剣な意図がなければなりません。プログレッシブウェブアプリのインストールでは、摩擦がはるかに少なくなります。デバイスにブックマークを追加することは、ホーム画面にブックマークを作成するようなものです。プログレッシブウェブアプリをインストールする方が簡単ですが、プロセスはあまり馴染みがなく、早期の採用を妨げる可能性があります。

速度：現在、プログレッシブWebアプリはネイティブアプリケーションに遅れをとっています。しかし、彼らは絶えずギャップを埋めています。これは、次の比較を検討するときに特に当てはまります。

プログレッシブウェブアプリとAMP

Gazdeckiのような人々は、プログレッシブWebアプリが最終的にネイティブアプリケーションに取って代わると信じていますが、AMPについてはどうでしょうか。 Accelerated Mobile Pagesはどこにありますか？両方の場所はありますか？これら2つの主な違いは次のとおりです。

発見可能性： AMPがこの戦いに勝ちます。 AMPは、Google検索結果でカルーセルの助けを借ります。プログレッシブウェブアプリでは、検索エンジンの発見可能性を高めることはできません。

エンゲージメント：プログレッシブウェブアプリはAMP HTMLまたはCSSの使用に制限されていないため、AMPよりもはるかに魅力的なコンテンツを含めることができます。 JavaScriptを必要とするインタラクティブなものは、AMPフレームワークを使用して作成することはできません。 AMPの場合、動的コンテンツはテーブルから外れています。

スピード：プログレッシブウェブアプリがエンゲージメントを獲得するのと同じ理由で、ここでの優位性はAMPにあります。 AMPは軽量コンテンツのみをサポートできますが、これにより読み込み時間が短縮されます。

Smashing Magazineで、Paul Bakausは、2つの形式間のトレードオフをうまくまとめています。

エクスペリエンスを確実に高速化するには、AMPページを実装するときにいくつかの制約に耐える必要があります。 AMPは、プッシュ通知やWeb支払いなどの非常に動的な機能が必要な場合、または追加のJavaScriptが必要な場合には役立ちません。
また、AMPページは通常AMPキャッシュから提供されるため、独自のService Workerを実行できないため、最初のクリックで最大のプログレッシブWebアプリのメリットを享受することはできません。一方、プログレッシブWebアプリは、最初のクリックでAMPほど高速になることはありません。これは、プラットフォームがAMPページを安全かつ安価に事前レンダリングできるためです。これにより、埋め込みが簡単になります（インラインビューアーなど）。

しかし、結局、私たちは本当にどちらかを選択する必要がありますか？

競争をめぐる協力

AMPを使用して、高速でシンプルなエクスペリエンスを作成することもできます。プログレッシブウェブアプリを利用して、動的でありながら遅いユーザーエクスペリエンスを作成できます。または、両方をWebデザインに組み込むことで、すばやく開始して高速を維持することもできます。

今日、AMPをプログレッシブウェブアプリと一緒に使用することが一般的になりつつあり、開発者は3つの方法で両方を活用しています。

1.プログレッシブウェブアプリとしてのAMP

コンテンツが主に静的であり、AMPの限られた機能に満足できる場合、このオプションを使用すると、プログレッシブWebアプリとして超高速のエクスペリエンスを作成できます。例として、AMPは次のように構築されています—プログレッシブウェブアプリは完全にAMP課金されています。オフラインアクセスを許可するServiceWorkerと、「ホーム画面に追加」バナーを表示するマニフェストがあります。

2.プログレッシブウェブアプリへのAMP

AMPとプログレッシブウェブアプリを一緒に使用するもう1つの方法は、AMPページをウェブサイトへのフックと考えることです。瞬間的な負荷でユーザーを捕らえ、プログレッシブWebアプリケーションに巻き込みます。これにより、クイックロードAMPページを最初のオプションよりも動的なPWAと組み合わせることができます。

3.プログレッシブウェブアプリのAMP

AMPとPWAの場合のように、すべてまたはまったくである必要はありません。 AMPを使用してすべてのページを作成する必要はありません。また、AMPとPWAをフックとロッドとして分離する必要もありません。これで、実際には1ページの小さなサブセクションのみをAMPできるため、動的機能を完全にトレードオフすることなく、サイズを縮小し、読み込み時間を短縮できます。

これには、「シャドウAMP」と呼ばれる別の形式のAMPを使用することが含まれます。これにより、AMPをWebページの領域内にネストできます。結果は、プログレッシブWebアプリケーションのシェル内のAMPです。実際の動作を確認するには、Googleが作成したShadowReaderというデモをご覧ください。

独自のプログレッシブウェブアプリを作成する準備はできましたか？

ここから、ウェブの発見可能性を備えたネイティブアプリのような高速なエクスペリエンスの作成を開始します。ここでは、GoogleのPWAの基準を満たすためにチェックする必要のあるすべてのボックスを学習できます。 AMPとPWAを一緒に使用する方法の詳細については、以下を確認してください。

ベン・モースからのこの話
エリックリンドリーからのこの話

準備ができたら、InstapageでAMPポストクリックランディングページビルダーの使用を開始して、これまでで最速のユーザーエクスペリエンスを提供します。