PWA(Progressive Web Apps)とは?事例を交えながらメリットをご紹介します

デジタルマーケティング

2010年、モバイルからインターネットに接続するユーザー数が、初めてパソコンからインターネットを利用するユーザー数を上回った年です。それから10年以上の年が過ぎ、現在ではスマートフォンからのインターネット接続が当たり前となっています。そこで重要となるのが、モバイルで自社サイトにアクセスをされた際、いかに快適な体験をユーザーに与えられるかです。今回は、モバイル上でネイティブアプリと同様のユーザー体験を提供する技術である。PWA(Progressive Web Apps)について、その概要や注目を集める理由。そして、実際に導入した際のメリット・デメリットについて、事例を交えつつお伝えします。

PWAとは?

PWAとは、Progressive Web Appsの頭文字を取った略称です、モバイルのブラウザで表示されるものの、ネイティブアプリのような軽快な動きや快適な体験をユーザーに提供するWeb技術をさします。

PWAが注目を集める理由

近年、PWAは多くの企業から注目を集めている技術ですが、その理由としては次のような点が挙げられます。

スマートフォンからのWebサイト閲覧需要が高まっている

冒頭でも触れたように2010年以降、インターネットを利用する際にもっとも多く使われているデバイスは、モバイルです。そのため、スマートフォンでのWebサイト閲覧を快適なものにすれば、リピーターになってもらえる可能性が高まります。

ネイティブアプリのような使い勝手を実現しつつ、検索エンジンからの流入も見込める

ネイティブアプリはブラウザで表示されるWebサイトに比べ、軽快な動きであったり、プッシュ通知ができたりといったメリットがあるものの、検索エンジンからの流入は基本的に見込めません。しかし、PWAは、ネイティブアプリのような使い勝手を実現しつつも、ブラウザのようにURLを扱うため検索エンジンからの流入が見込めます。

このようにPWAは、アプリとブラウザの中間にあるような技術であり、双方のメリットを享受できる技術であることから、多くの企業から大きな注目を集めています。

PWAのメリットとデメリット

ここまでもPWAのメリットを紹介してきましたが、それ以外にも多くのメリットを有しています、また、使い方のよってはいくつかのデメリットも存在します。ここでは、PWAのメリットとデメリットを見ていきましょう。

PWAのメリット

ページの読み込み速度が速くなる

PWAにはキャッシュを利用できる機能があり、あらかじめ先のページを読み込めるため、全体的にページの表示速度が速くなります。Googleの調査では、ページの読み込み速度が1秒から3秒に増えると、直帰率は32%も増加するという結果が出ています。つまり、ページの読み込み速度を速くするだけでも、直帰率を下げる効果があるのです。

また、Webサイトの表示速度は。検索エンジンでの指標の一つであるため。通常のWebサイトからPWAに移行させれば、検索エンジンでの表示順位が高くなる可能性もあるでしょう。

さらに、キャッシュにはもう一つのメリットがあります。それはオフラインでの閲覧も可能になる点です。事前にページを先読みするため、外出先で急にネットワーク環境が悪くなっても、そこで離脱されてしまうリスクが低減します。

インストールの手間をかけずにホーム画面に表示させられる

PWAは、ネイティブアプリのようでありながらも、ブラウザで表示させるWebサイトのため、わざわざアプリストアからダウンロードし、スマートフォンにインストールさせる手間がかかりません。つまり、企業はユーザーに対して、より手軽に快適な体験を提供できるようになります。

また、インストールの手間はかからないものの、「ホーム画面でのアイコン表示」「ページ内容をフルスクリーンモードで表示」などが可能なため、ユーザーに快適な体験を提供しつつ、企業側はリピートしてもらえる機会が増えるというメリットが発生するのです。

OSやデバイスへの依存度が低い

ネイティブアプリの場合、AndroidとiOSでは別々に開発する必要があります。また、スマートフォンとタブレット、パソコンなどデバイスによって開発し直さなければならない場合もあるでしょう。しかし、PWAはWebサイトの技術のため、OSやデバイスへの依存度は低く、それぞれで別々に開発する必要はありません。

プッシュ通知が可能なため、最新の情報に気づいてもらいやすくなる

スマートフォンは機種にもよるものの、通常のWebサイトであっても、「ホーム画面に追加」といった機能を活用すれば、ほかのネイティブアプリと同様にホーム画面に表示させられます。

ただし、これはブックマーク機能の一つであり、ネイティブアプリとは大きく異なる点があります。それは、プッシュ通知ができない点です。しかし、PWAはWebサイトでありながら、プッシュ通知が可能なため、ユーザーとの接触機会が増加する可能性が高まります。

ユーザーへ公開するまでの時間を短縮できる

ネイティブアプリは、Androidであれば、「Googleplay」。iOSであれば、「App Store」の審査を受け合格してからでないと、ユーザーに公開できません。また、内容の更新、改善をした場合は、ユーザーのほうでアップデートしてもらう必要があります。

しかし、PWAは審査を受ける必要もなく、アップデートをユーザーに委ねる必要もありません。そのため、常に最新の情報をリアルタイムで更新、通知が可能です。また、それぞれのOSの規制を受けずに自由な開発ができるのもPWAのメリットといえるでしょう。

 

PWAのデメリット

初心者には開発が難しい

PWAはWordPressでつくられたWebサイトであっても導入は可能です。ただし、JavaScriptやプラグインにかんする知識がないと実装は簡単ではありません。そのため、そうした技術を持った社員がいないとすぐに導入というわけにはいかないでしょう。

ブラウザへの依存度が高い

PWAは、OSやデバイスへの依存度は高くないとしましたが、Webサイトのため、ブラウザへの依存度は高くなってしまいます。ブラウザによっては、上手く動作しない場合もあるのは、PWAのデメリットといえるでしょう。

 

PWAの導入事例

では、実際にPWAを導入しているWebサイトの事例を紹介します。

PWAの導入で75%の読み込み速度改善、49%のアクティブユーザー数増(1日当たり)を実現

日本経済新聞社では、「巨大なJavaScriptを読み込んでしまっていること」「集計や広告などをさまざまなケースでサードパーティーからのリソース読み込みの必要があること」などの理由から、表示速度が遅く、モバイル向けに最適化されていないという課題を抱えてしました。

そこで、いくつかの施策の一つとしてPWAを導入。その結果、75%の読み込み速度改善、1日当たりのアクティブユーザー数49%増加のほか、58%のコンバージョン増(会員登録)などを実現しています。

PWAの導入により、読み込み速度が80%向上、50万人以上のプッシュ通知からの訪問を達成

178か国で天気予報サービスの提供を行っている、The Weather Channelでは、アプリを使った情報提供を行っていたものの、利用者はWebサイトを利用するユーザーの半分にしか過ぎないといった課題を抱えてきました。そこで、アプリの比べコストを抑えられるWebサイトからのユーザー数増加を目的とし、PWAの導入を進めました。

その結果、Webサイトの読み込み速度は80%向上。さらにほぼ100万人がプッシュ通知を受け入れ、そのうち52%、50万人以上がプッシュ通知からWebサイトに訪問という成果を達成しました。

プッシュ通知でのお知らせやモバイル向けWebページの高速表示をPWAで可能に

実名グルメサービス「Retty」を運営するRetty株式会社が提供するニュースメディア、「Rettyグルメニュース」は。ユーザーのストレス軽減、ユーザーの関心・嗜好に合わせた記事のレコメンドを目的にPWA導入を実行。これにより、これまで以上にユーザーに対するリッチな体験提供を可能にしています。

 

ネイティブアプリとPWAの使い分けがポイント

PWAは企業側、ユーザー側双方にさまざまなメリットをもたらします。そのため、企業のWebサイト担当者からも大きな注目を集めている技術です。「読み込み速度の向上」「プッシュ通知」など、ユーザーとの接点を増やし、リピーターになってもらえる可能性も高まるため、モバイル環境での成果を上げたい場合は、導入の検討をおすすめします。

ただし、あくまでもWebサイトであることは頭に入れておく必要があります。ネイティブアプリとすべて同じ機能を実現するわけではありません。状況によってはPWAに固執し過ぎず、ネイティブアプリとの併用も考えつつ、自社にとって最適な活用方法を選択するようにしましょう。