PWA (プログレッシブウェブアプリ) が、スマートフォン業界に革命を起こそうとしています。2015年にGoogleからリリースされ、徐々に注目を集めるようになってきましたが、既存のネイティブアプリやモバイルブラウザとどのような違いがあるのでしょうか。

PWAとは

PWAはweb経由で配信されるネイティブアプリのようなものです。そのため、ユーザーに対してアプリのようなUXを提供できます。PWAはweb上で構築されているため、デスクトップやモバイル、タブレットなど、あらゆるデバイスで同一のUXを実現できるのも特徴です。

また、PWAを構築するService Workerは、ネットワークの状態に左右されることなく瞬時にページを読み込んで表示させることができます。あらかじめデータをキャッシュして情報を最新に保っておくため、ユーザーは起動直後から最新のコンテンツを閲覧できるのです。また、ネイティブアプリと同じようにホーム画面にアイコンを配置できるので、ユーザーにわざわざDLをしてもらう必要もありません。

PWA vsネイティブアプリ

PWAとネイティブアプリの違いとして一番に挙げられるのは「アプリストア」有無でしょう。PWAにはこのような「仲介者」が存在しないため、iOSやAndroidのルールやガイドラインに縛られることなく開発が進められます。審査に通す必要もないので、準備ができたらすぐにでもアプリをリリースできるのです。

ユーザーはアプリストアから探し出す手間もなく、URLからアプリが起動できるため素早く利用を開始できますし、ソーシャルメディアやメール、テキストメッセージ、オンライン広告、QRコードなど共有する手段も豊富です。

下の図が示すように、ネイティブアプリをDLするフローにおいて、1ステップごとに20%のユーザーが脱落していきます。PWAはステップ数を短縮できるため、離脱を防いでアプリの利用率を高めることができるのです。 実際、私たちはモバイルアプリの4倍の時間をwebサイトの閲覧に利用しています。こうした事実からも、PWAが大きなポテンシャルを秘めていることがわかるでしょう。

開発者にとって最大のメリットは、アプリをプラットフォームごとに開発する必要がないこと。PWAはwebの技術を基にしたクロスプラットフォームであるため、ほとんどのブラウザ環境で作動します。 PWAを1つ構築するだけで、ユーザーがデバイスを変えても一貫性のあるUXを提供できるのです。

さらに、PWAはwebサイトと同じように検索エンジンが情報を認識して検索結果に表示するため、ユーザーが見つけやすくなっています。アプリタイトルだけでなく、アプリ内コンテンツもインデックスされるので効果的なSEOも行えるでしょう。 現在web検索の60%はモバイルデバイスから行われていますが、今後もさらなる増加が予想されているため、PWAの仕組みをうまく活用して行くべきかもしれません。

例えば、誰かが近くの美容院を探しているとしましょう。その人は「Google」で近くの美容院を検索します。もしあなたが美容院の経営者でPWAを作成している場合、検索結果には「Yelp」や美容院のサイトと並んであなたのPWAが表示されます。 このファーストタッチがユーザーを顧客へと変えるチャンスになります。ユーザーはアプリのような操作性と自分のスマートフォンに最適化されたUIから、スムーズに予約を取ることができます。つまり、PWAではwebの検索からアプリ内で予約を完了させるという、シームレスなプロセスが実現できるのです。

PWA vsモバイルブラウザ

PWAはネイティブアプリとモバイルブラウザのハイブリッドですが、レスポンシブwebデザインとは、どのように違うのでしょうか? ページの読み込みに3秒以上かかると、ユーザーの53%が離脱してしまいますが、PWAはネットワークの品質に関係なく、一瞬で読み込み素早く反応するため、ユーザーにストレスを与えることがありません。モバイルブラウザと違い、ネットワークの品質に依存することがないので、高速かつ信頼性の高いUXを保証できるのです。また、バックグラウンドでアップデートをするため、ユーザーに再読み込みしてもらう必要もありません。

そして、従来のモバイルブラウザが主に静的な情報を扱っていたのに比べ、PWAは動的な機能を提供できます。例えば、ユーザーが没入しやすいフルスクリーンで体験を向上させ、出前の注文や会員プログラムの参加、ビジネスでの連絡をスムーズに促すこともできるでしょう。また、ネイティブアプリのようにweb経由でプッシュ通知を配信し、ユーザーをアプリに呼び戻すこともできるのです。

成功事例

化粧品ブランドの「Lancôme」は、トラフィックとリエンゲージメントを促進させるためにPWAを立ち上げ、ユーザーにネイティブアプリのようなUXを提供しています。

同社は2016年、モバイルブラウザがデスクトップブラウザのトラフィックを上回りましたが、予想に反して高いコンバージョン率は見込めませんでした。デスクトップブラウザでは商品がカートに入ったら38%が注文まで進むのに、モバイルブラウザはたった15%。これら結果から、ユーザーがスマートフォンで商品を購入するフローがボトルネックになっていることがわかりました。

「Lancôme」は最初、解決策としてネイティブアプリを検討していたそうです。しかし、モバイルブラウザ経由の購入者はいちいちネイティブアプリを立ち上げたりしないため、アプリは定期的に購入するユーザーにしか効果がないと気づき、手を止めます。

彼らが目指していたのは、全てのデバイスで優れたUXを構築すること。 Googleによると、「同社はネイティブアプリのように読み込みが速く優れたUXの提供を必要としているが、同時にユーザーが見つけしやすく、どのデバイスからもアクセスできるものでなくてはならないという課題も抱えていた」と言っています。

そこで、これらの課題を解決するために「Lancôme」はPWAを採用しました。その結果は、驚異的なものでした。

  • ページの読み込み時間が84%減少
  • コンバージョン率が17%増加
  • iOSでのセッションが53%増加
  • プッシュ通知の開封率が18%に改善
  • プッシュ通知からアクセスしたユーザーの8%が商品を購入

最後に

「Lancôme」のように、PWAがうまく活用できれば、大きな成果を得られるかもしれません。 PWAがネイティブアプリに取って代わることはありませんが、優れたUXを実現したいビジネスにとって、最適なソリューションの提供ができるでしょう。

この記事は、Biznessapps社のブログ”Progressive Web Apps: The Next Mobile Experience?“を著者の了解を得て日本語に抄訳し掲載するものです。Repro published the Japanese translation of this original article on Biznessapps in English under the permission from the author.


モバイルアプリの成長支援パートナー「Repro」

「Growth Hack Journal」を運営している「Repro」は、アプリ解析・マーケティングツールの提供からユーザ獲得やユーザ定着のためのマーケティング支援等のソリューションまでワンストップで提供、アプリの成長を支援しています。

提供サービスについて詳細はこちら


【毎月5社 限定】ASO無料診断実施中!

ユーザーがアプリ見つけやすいよう、アプリストア内のコンテンツを最適化することは重要です。ASOの改善余地について、無料で診断します。

お問い合わせはこちら

プッシュ通知許諾率無料診断実施中!

自社アプリのプッシュ通知の許諾率の解析、および許諾率を改善した場合に増加するユーザーの再訪数やコンバージョン数を無料でシミュレーションします。

お問い合わせはこちら