PWA（Progressive Web Apps）はWebサイトをアプリのようにつかうための仕組のことで、開発コストをおさえつつUXを向上させる手法として注目されています。
しかし、PWAについて正確に理解ができておらず、「自社でも始めるべきなの？」「自社サービスとの相性がわからない」といったことに悩んでしまい、導入判断がついてない企業も多いのではないでしょうか。
今回はまずおさらいとしてPWAの言葉の意味やメリットについて解説したうえで、PWAを開発・導入した事例を6つご紹介しています。そのうえで、PWAを導入すべきサイトの特徴を解説しています。
この記事を読めば、PWAを導入すべきかの判断ができるようになります。PWAについての解像度を高めたい方は必見です。
PWAとは、Webサイトをスマホアプリのように使うための仕組のこと
PWAは「Progressive Web Apps」の略語で、WebサイトやWebアプリを、スマホアプリのように使うための仕組を意味します。
ユーザーのUX向上が主な目的で、PWAを実装することでアプリ同様にプッシュ通知の受信やホーム画面へのアイコン追加ができるようになります。
PWA導入で得られる主なメリット
PWAの導入は、サイト運営側に以下のようなメリットがあります。
1．表示速度が改善され、ユーザーの直帰率が下がる
2．プッシュ通知を使ってユーザーにアプローチできる
3．OSごとに個別の対応をする必要がない
PWAは表示速度が改善されるのでユーザービリティが上がり、サイトの直帰率にも好影響を与えます。プッシュ通知などでエンゲージメントを高めにいく施策を打つことも可能です。
またOS別にアプリの開発する手間がないということもあり、開発コストをおさえることができます。
参考：
PWA（Progressive Web Apps）とは？PWAの機能と導入するメリットを解説
1．表示速度が改善され、ユーザーの直帰率が下がる
PWAではキャッシュの利用が可能なため、ページの読み込み・表示速度が改善されます。
ページがすぐに表示されるようになるので、ユーザー側としても画閲覧時のストレスが軽減されます。
ページの表示速度が遅いと「閲覧することを諦めてしまう」ユーザーも一定数いるので、PWAの導入は直帰率の改善にも効果的です。
2．プッシュ通知を使ってユーザーにアプローチできる
ユーザーはホーム画面にアイコンを設置できるので、今までよりも手間なくアクセスできるようになります。また、PWAはネイティブアプリと同様にプッシュ通知の利用が可能なので、ユーザーの再訪を促したり、キャンペーンの通知を行うことが可能です。
3．OSごとに個別の対応をする必要がない
PWAの場合、iOS・Androidなどの縛りがなく、どのOSでも利用できます。
ネイティブアプリの場合、iOS・Androidで分けて開発しなければなりません。そのため、どちらかのアプリの開発を諦めるか、それぞれのアプリを用意する必要があります。
また、アプリのリリースにおいて「Googleplay」「App Store」それぞれの審査をパスしなければならず、ユーザーの手元に届くまで時間がかかります。
PWAであればOSによる規制を受けないので工期・コストを圧縮することができます。
PWA導入事例6選
ページ読み込み速度を7割削減してユーザーの利便性を大きく向上した不動産サイトの事例
不動産・住宅を扱う「SUUMO」では、PWAを導入したことによってページの読み込みにかかる時間を75%削減しました。またプッシュ通知の開封率も31%と高い数値を記録しています。
SUUMOはWebサイトから閲覧しているユーザーが多くいますが、当時のサイトではアプリのような高速での閲覧が難しく、ユーザーの定着率が低いと感じていました。ネイティブアプリのインストールを推奨していたものの、再度エンゲージメントさせるのは容易ではなく、かつコストもかかりました。
同社ではPWAを利用して、サイトの高速化に成功しています。ユーザー側も探している物件にたどり着きやすくなり、結果としてLPの読み込み時間が75%短くなっています。
また、プッシュ通知を通じて、アプリを使っていないユーザーに対してもアプローチできるようになりました。ユーザー側としても手軽に物件情報にアクセスできるため、開封率も31%と高いです。
PWA導入でデータ消費量の削減に成功し利用ユーザーの直帰率を20%の減少に成功したSNSサービスの事例
世界中で利用されているSNSの「Twitter」では、従来よりもデータの消費量を削減できる「Twitter Lite」をリリースしました。PWAの導入により、インターネット上でツイッターを開いた際でも、プッシュ通知の受信やオフラインでの使用が可能です。
Twitterは数百万というユーザーをリーチしていますが、再訪問ユーザーを獲得することが困難であり、課題でした。
そこでPWAを導入した「Twitter Lite」をリリースし、ネイティブアプリと同じようにユーザーがブラウザを閉じていてもプッシュ通知の配信が可能になりました。それにより、Twitterにアクセスするユーザーの増加に成功したのです。
また、データ消費量の削減も行い、3Gネットワークでも数秒でTwitterが表示されるようになり、表示遅延によるユーザーの直帰率を20%削減することに成功しました。
参考：
Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
PWAの導入により読み込み速度が75%改善され、オーガニック流入を2倍以上に増加させた新聞会社の事例
日本経済新聞はネイティブアプリの他にPWAを導入したWebページを立ち上げました。これにより、サイトの読み込み速度が75%以上改善され、従来の2.3倍のオーガニック流入増加に成功しています。
日本経済新聞では、Webページの表示速度や読み込み速度に問題を抱えていました。全てのコンテンツが表示されるのに20秒、読み込みに3秒以上かかっており、表示速度の遅延がユーザーの離脱に大きく影響していたのです。
そこでPWAを導入することにより、Webページの表示速度や読み込み速度の改善だけでなく、オフラインサポートや「ホーム画面に追加」などの機能を使うことによりオーガニック流入が2倍以上に向上しました。
参考：
Nikkei achieves a new level of quality and performance with their multi-page PWA
PWA導入によりコンバージョン率を17%増加させることに成功した化粧品会社の事例
世界的にも有名な化粧品ブランドの「LANCOME（ランコム）」はWebページにPWAを導入し、モバイルページのコンバージョン率を17%増加させることに成功しました。
LANCOMEでは、デスクトップアクセスよりもモバイルアクセスの方が多かったものの、コンバージョン率はデスクトップが38%であるのに対し、モバイルは15%と低迷していました。
そこでPWAを導入し、まずはモバイルページの表示速度の改善を行い、以前と比べて85%以上の速度短縮を実現し、モバイルセッションが51%増加しました。
さらに、プッシュ通知を送ることにより再訪問ユーザーを増やすことができ、購買行動を促すことに成功しました。その効果は大きく、プッシュ通知をタップした顧客の8%は商品を購入し、全体のコンバージョン率を17%増加させることに成功したのです。
PWA導入の結果として、今では18,000人を超えるユーザーがプッシュ通知に登録をしており、大成功を納めました。
参考：
Lancôme rebuilds their mobile website as a PWA, increases conversions 17%
モバイル体験を改善することでサイトからのコンバージョンが76%増加したEコマース企業の事例
中国の大型Eコマース企業の「Alibaba.com」は、従来のサイトをPWA仕様のサイトに更新することで、Webページのコンバージョンを76%増加させることに成功しました。
Alibaba.comではネイティブアプリも開発しており、Webページはネイティブアプリに誘導する導線と考えていました。しかし、ユーザーはWebページを好み、ネイティブアプリの利用には繋がりませんでした。
そこでPWAを導入し、モバイルのWebページの表示速度やプッシュ通知、ホーム画面に追加する機能を追加。新規訪問と再訪問のユーザーに分けたコンテンツを配信するなど、ユーザーファーストを徹底的に追及したのです。
それにより、Webページからのコンバージョンは76%まで向上し、月間アクティブユーザーはiOSで14%増加、Androidで30%増加させることに成功しました。
参考：
Alibaba
海底地形マップPWAを開発し、工期・予算を圧縮した空間情報コンサルタントの事例
空間情報の取得から解析、コンサルを請け負うアジア航測株式会社は、釣り人向けのメディアPWA「釣りドコ」を開発しました。
同社ではALB（航空レーザー測深システム）を活用し水中地形データの測量を行い、地形図作成・河川管理・インフラ点検などを提供していました。
このALBを使った新たなビジネスモデルの創出を目指していて、新規事業として「海底地形図の閲覧・超過記録アプリ」の開発に着手。釣りドコは屋外での利用がメインとなるため、表示速度が速いPWAでの開発を選択しました。
PWAを選択したことで、限られた予算のなかで品質を保ったままでの開発に成功し、期日通りにサービスをリリースすることができています。
参考：
海底地形マップを活用した釣り人向けPWA「釣りドコ」 | 株式会社モンスター・ラボ
既存の価値を活用して新たなビジネスモデルを立ち上げる（アジア航測株式会社） | モンスター・ラボ DXブログ
事例からわかる「PWAを導入すべきサイト」の特徴
1．表示速度が遅く、ユーザーの離脱が起こっているサイト
読み込み・表示速度の改善はユーザービリティを向上させることに直結します。
表示速度の遅さがユーザーの離脱につながっているサイトは、すぐにでもPWAを導入することをおすすめします。
2．大量のデータから情報を抽出するのが目的のサイト
多くの情報から欲しい情報を引き出すのが目的のサイトはPWAを導入すべきです。情報の検索が主な目的である場合、とにかく「欲しい情報がすぐに引き出せるか」が重要です。そのため、サイトの高速化がより大切になります。
3．オフラインが活きるニュース・読み物サイト
ニュースサイトをはじめとした読み物系のサイトは、オフライン時でも閲覧できると良いでしょう。PWAであれば操作性を損なわずにオフラインでも閲覧ができます。
まとめ
PWAはネイティブアプリのようにサイトを閲覧するための仕組のことで、UXの向上が主な目的です。
PWAを導入することで「アプリ同様にプッシュ通知が使える」「サイトが高速化され、直帰率が下がる」「OSごとに対応する必要がない」などのメリットが挙げられます。
実際に事例を見てわかる通り、「表示速度が遅く、離脱が生じているサイト」「情報を抽出してもらうのが目的のサイト」「ニュースなどの読み物系のサイト」などはPWAの導入をおすすめします。
