PWA(プログレッシブウェブアプリ)とは？機能やメリット、注意点を解説！うまく実装してパフォーマンス向上

ネイティブアプリのように高速なWebサイトを作成できる、PWA(プログレッシブウェブアプリ)。Webサイトとネイティブアプリの良い部分を掛け合わせられるツールとして、最近は注目が集まっています。

PWAを実装すると様々なメリットがあり、ビジネス成果にもインパクトしてきます。今回はそんなPWAについての概要から、導入のメリット、事例まで詳しく紹介します。

PWAとは

PWA(プログレッシブウェブアプリ)とは、Progressive Web Appsの略で、モバイル向けのWebサイトをアプリのように使える仕組みのことを指します。

PWAは通常のWebページとネイティブアプリ※1それぞれの良い部分を合わせもっており、Webページのように大きなリーチを得ることが出来ながら、プッシュ通知やホーム画面へのアイコン追加などネイティブアプリのような高機能を搭載することが出来ます。

PWAが注目されている理由

PWAはさまざまな理由で注目されています。

まず、PWAはインストールが不要で利用できるため、ユーザーにとっては非常に利便性の高いサービスとなっています。つまり、アプリストアの承認期間を短縮することが可能です。

また、PWAは検索エンジンからも発見されるため、広告やキーワードなどを用いたマーケティング費用をかける必要がありません。さらに、PWAはオフラインでも動作するため、ネットワーク接続が不安定な環境でも利用できます。これにより、ユーザーが常にサービスにアクセスできるようになります。

また、PWAは、Web技術を用いてネイティブアプリのような快適なユーザー体験を提供することができます。例えば、PWAは、通常のアプリと同様に、カメラ、GPS、Bluetooth、通知などにアクセスすることができます。

さらに、PWAは、Web技術を用いており、開発が容易であるため、開発コストを削減することができます。一度の開発で、複数のプラットフォームに対応することができるため、開発の効率性が向上します。また、Web技術を使用するため、PWAの開発に必要なスキルや知識は、既に多くのWeb開発者にとって身についているものであるため、開発者を集めることも容易です。

以上の理由から、PWAは、近年ますます注目されており、多くの企業が導入しています。特に、小規模な企業や新興企業にとっては、アプリストアでの承認待ちの期間や、マーケティング費用の削減など、多くのメリットがあるため、PWAの導入が有効な手段となるでしょう。

PWAの機能

PWAはHTML,CSS,JavaScriptを用いて作られますが、実装することで利用出来る機能例をご紹介します。

アプリのダウンロードが不要

PWAを実装すると、ネイティブアプリと同様にホーム画面へのアイコン追加が出来るようになります。

従来のネイティブアプリの場合、App StoreやGooglePlayからアプリをダウンロードする必要がありました。
しかしPWAを実装するとその必要がなくなるため、ユーザーも容量を気にせずホーム画面に追加することができるようになります。

またApp StoreやGooglePlayでは、アプリ登録の際に審査が必要ですが、PWAの場合はそのような審査も必要ありません。

一部限定されたブラウザではあるものの、ウェブサイト内でホーム画面への追加を促すバナーを表示させることが出来るので、PWA対応の認知にも役立ちます。

プッシュ通知の配信などアプリのような機能の実装

プッシュ通知の配信など従来ネイティブアプリでしか出来なかった機能がWebブラウザでも実装可能になります。

またPWAを実装することで、UIをネイティブアプリのように設計することができます。
具体的にはブラウザ上のメニューバーを消す、ホーム画面のアイコン設定などが可能です。

キャッシュの利用による高速化およびオフライン対応

PWAを実装することで、ウェブサイトのコンテンツがキャッシュされ、表示速度が高速化されるようになります。

PWAを実装する際に使用するservice worker,jsによって、ウェブサイトのコンテンツがキャッシュされます。
そのキャッシュを利用することで、通常のウェブサイトのページ読み込みが短縮され、ページを高速表示させる仕組みができるのです。

またPWAを実装することで行えるキャッシュの利用は高速化だけでなく、オフラインでのサイト利用を可能にします。

カスタムオフラインページを事前にキャッシュしておくことで、ネット環境が不安定で回線が繋がり辛い状況でもコンテンツが閲覧できるようになります。
必ずしもネット環境が必要ではないような機能はオフラインでも使えるようにすることで、よりユーザーが利用しやすい環境を作ることができます。

PWAのメリットと注意点

PWAの特徴については理解できたかと思います。
ここからはその結果どのようなビジネスインパクトがあるのか、導入によるメリットについて解説していきます。

PWAのメリット

PWAを実装する上でのメリットは以下の通りです。

ユーザーが増加する

ネイティブアプリだけを展開しているサービスの場合、PWAを導入することで以下の二つの理由からユーザー数の向上が見込めます。

1.  検索から発見されることができる
2. アプリインストールから解放される

PWAを実装することで検索画面からサービスを発見することができるようになります。ネイティブアプリではコンテンツを拡充しても検索結果には表示されなかったため、PWAで検索エンジンに認識されるようになればユーザー数の向上が見込めます。
Webサイトトラフィックの半分以上がオーガニック検索からというデータからも重要度がわかるかと思います。

またアプリインストールというハードルから解放されます。ユーザーの50％はアプリをダウンロードしたくないと考えており、場合によってはアプリダウンロードが必要なためリーチできていないユーザーもいると考えられます。

上記理由よりPWAを実装することでユーザーの増加を見込むことができるようになります。

直帰率が低下する

PWAを実装し、表示速度の改善とオフラインでの使用が可能になることで直帰率が低下することが見込めます。

実際ページの読み込み速度が1秒から10秒になった場合、直帰率が123％増加するという調査もあります。

コンバージョン率が向上する

プッシュ通知など従来のサイトでは出来なかったことができるようになり、コンバージョン率の向上も見込めるといわれております。

実際にCarrefourではプッシュ通知によりコンバージョン率を350％向上させたという事例があります。

リピーターが増加する

Webサイトしか持っていないサービスでは、ホーム画面にアイコンを追加できたり、プッシュ通知を送信できたりと、PWAを実装することで従来よりも再訪問を促しやすくなります。

開発にかかるコストが削減できる

PWAは、1つ作るだけで様々なデバイスで動作するため、開発期間やコストを削減できることが魅力の1つです。ネイティブアプリと比較すると、PWAはアプリのインストールやアップデートが不要であり、オフラインでも動作することができます。

これにより、開発者はアプリストアの審査や手数料の支払いなど、ネイティブアプリ開発に必要な手続きを省略できます。また、PWAはWeb技術を使用して制作するため、Web開発のスキルを持っている開発者であれば比較的容易に開発が可能です。

プッシュ通知機能が使える

PWAには、ネイティブアプリにも採用されているプッシュ通知機能が利用可能です。この機能により、ユーザーはブラウザを閉じた状態でも、サイトやアプリからの通知を受け取ることができます。

プッシュ通知は、セールや新商品情報、イベントのお知らせなど、ユーザーにとって役立つ情報を提供することができます。また、プッシュ通知はユーザーの復帰率を高める効果があり、リピート購入やコンバージョン率の向上につながることもあります。

ちなみに、PWAのプッシュ通知は、ネイティブアプリのようにユーザーの許可を得てから送信されるため、セキュリティ上の問題も軽減することが可能です。

データ容量が少ない

ネイティブアプリに比べてデータ容量が少ないこともPWAのメリットです。PWAは、アプリの核となるコードをWebページ上に保管するため、ユーザーがアプリを使用するために必要なデータ容量が非常に少なくなります。

また、PWAはオフラインで動作することができるため、ユーザーがアプリを使用する際に常にインターネットに接続する必要がありません。これにより、データ通信量の削減とともに、ユーザーがアプリを使用する際に必要な待ち時間が減少します。

以上のように、データ容量が少なく、オフラインで動作するPWAは、ユーザーにとって便利であり、また開発者にとってもコスト削減のメリットがあります。

このようにPWAを実装することでビジネスにインパクトする見込みがあることがわかっていただけたかと思います。
ここからはPWAを導入する上で注意しておくべき点についてご説明します。

PWA導入の注意点

PWAを導入する上で注意すべき点は以下の通りです。

ブラウザによって動作環境が異なる

1つのソースで複数のOSに対応出来るPWAですが、一部のOSで若干動作環境が異なる点がデメリットでもあります。

例えばAndroidでは「ホーム画面への追加」を促すバナーの表示が可能ですが、iOSでは出来ません。
加えてiOSではプッシュ通知の機能も利用不可です。
iOSによるPWAの利便性は少しずつ改善されているものの、やはりAndroidユーザーに対する機能と比べると劣ってしまう印象です。

ネイティブアプリも運用している場合、管理コストが2倍に

既にネイティブアプリを運用している場合は、新たにPWAを実装することで、単純に管理コストが２倍になる可能性があります。

ただし将来的にPWAへ全てを移行する選択肢もあるため、長期的に見ればPWAを導入した方が管理コストを削減できる場合もあるでしょう。

通常のモバイルサイトと比較してコストがかかる

PWAの実装には、通常のモバイルサイトの制作と比較して制作コストが高くなるデメリットがあります。

また注目度が高まるPWAですが、普及率はまだまだ低いため、導入についての事例やドキュメントが少ないというデメリットも存在します。

Webサイトやアプリとの違いについて

Webサイトとネイティブアプリの良い部分を併せ持つPWA。ここでより細かい項目について、Webサイト・アプリとの違いを比較していきましょう。

PWAの導入方法

PWAを開発するには、PWAを開発するにはいくつかのブラウザAPIを利用して、Googleの「ProgressiveWebAppChecklist（Google Developers）」に沿ってページを作成する必要があります。

ページ作成にはAppShellと呼ばれるPWA実装のためには、以下の項目が最小限必要です。

• HTML・CSS・JavaScriptの構築
• ページのSSL化など

これ以外にもチェックリスト項目は複数存在していますが、chromeの拡張機能「Lighthouse」を使用する事で、多くの項目の調査を簡単に行うことができます。

詳細な開発方法については専門的な内容になるため今回の記事では割愛しますが、導入を検討されている方は「はじめてのプログレッシブWebアプリ（Google Developers）」にサンプルコードを含めた詳細な内容が掲載されているので、そちらを参照して下さい。

また、Googleが提供している「WebStarterKit（Google Developers）」を利用する事で、PWAの実装に必要なファイルのテンプレートを利用する事ができます。

PWAを導入した成功事例

ここからはPWAを導入し、実際に成果が改善された事例をご紹介します。

日経新聞社

PWAの導入によって、日経新聞社のLighthouseのスコアは23点から82点に上昇し、アクセス数やコンバージョン率などに良い結果をもたらしています。

日本経済新聞社は複数ページのPWAで新しいレベルの品質とパフォーマンスを実現しています。

Twitter

TwitterではPWAを実装したことにより、エンゲージメントの向上に加え、データ量の削減を実現しています。

セッション毎のページ数が65％向上し、またツイート数も75％上昇しています。データ量の削減により、通信速度が遅い国や地域でも、不快に感じることなく利用出来る様になります。

ネイティブアプリで成功している企業でも、PWAの導入で更なるパフォーマンスの向上を図ることが可能です。

SUUMO

リクルート住まいカンパニーが運営するSUUMOは、日本の約11％もの人が利用する、国内でもトップクラスの不動産情報を発信するサイトです。

そんな抜群の知名度を誇るSUUMOは、2015年にスマートフォン向けWebサイトである「Service Worker」を導入しました。

「Service Worker」でプッシュ機能を実装したことで、ロード時間の75%減少や、 Webプッシュ通知による31％のオープン率を達成しました。

George

続いて紹介するのは海外企業におけるPWA導入事例です。

George社はイギリスを代表する衣料品メーカーであり、2018年2月にサイトをPWAにアップグレードさせました。

その結果、ページの平均読み込み時間が大幅に短縮されただけでなく、コンバージョン率を31%向上させ、一訪問あたりのページビューが20%増量する結果になりました。

George社の事例からもわかるように、PWAの導入はユーザーのモバイルエクスペリエンスを大きく高める効果が見込めるといえます。

ランコム

フランスの高級化粧品メーカーであるランコムは、2017年にモバイルサイトをPWAに実装しました。

かねてよりモバイルユーザーの多いランコムでしたが、デスクトップユーザーとコンバージョン率は高まらない問題を抱えていました。

そこでいち早くPWAを導入したランコムですが、結果的にコンバージョンが17％、モバイルセッションを51％増加させることに成功しました。

まとめ：PWAを実装してパフォーマンスを向上しよう

PWAを実装することで表面的なUIの改善だけでなく、ビジネスにインパクトするメリットが多数あることを理解していただけたかと思います。
ぜひ実装を検討してみてください！

PWAとよく勘違いされるものとしてAMPというものもありますので、整理のために以下の記事も是非ご覧ください。