PWA（Progressive Web Apps）とは？ネイティブアプリとの違いや具体事例を紹介

Googleが2015年にリリースし新たなアプリの形として、今注目を集めているPWA（プログレッシブ web アプリ）。日本でもポータルサイトを中心にPWAを採用する企業が出始めています。
本記事では、PWAとは何か、また、PWAアプリとネイティブアプリとの違いや、メリットとデメリットをご紹介していきます。

▷▷【無料ダウンロード】「アプリ機能の図鑑：決定版」後でゆっくり確認したい方はこちらアプリの機能にいて解説しています。

PWAとは何か

PWAは「Progressive Web Apps」の略で、スマートフォン上でアプリのように動かせるwebサイトで、HTML、CSS、Javascriptを使って実現されます。
開発コストを押さえて運用できるため、近年注目されています。
サイトがPWAであるかどうかについて、Googleがチェックリスト（Progressive Web App Checklist）を用意しています。3つの特徴の具体的な内容は以下のようなものです。

信頼性

ネットワークの状態が悪くても即座に起動するか、という点です。事前に情報をキャッシュすることによって対応するのが一般的です。

高速性

ユーザーの要求に即座に反応するか、という点です。動作がスムーズでスクロール時にギクシャクしないことが求められます。

アプリのような動作

オフラインでも動作するか、という点です。プッシュ通知が使える、全画面表示できる、デバイスのハードウェアにアクセスできる、ホーム画面にインストールできる、アプリのストア（App Store、Google Play）からダウンロードする必要はないといった条件が求められます。

pwaの機能

pwaの機能の中でも特徴的な機能については以下の３つが挙げられます。

ホーム画面へのインストール機能

ユーザーにホーム画面へアイコンを追加してもらうことで、ネイティブアプリのような起動が可能になります。
これにより、ワンタップでwebサイトにアクセス可能になるため、企業やブランドを身近に感じてもらいやすくなります。

キャッシュを使用し表示速度を改善

pwaは一度読んだページについてはキャッシュを使用できるため、通信環境が悪い状態での表示や表示に容量がかかるコンテンツの表示について素早い表示を可能にします。

プッシュ通知の配信を可能に

ネイティブアプリのように「プッシュ通知」を活用したメッセージ配信が可能になります。
通知を許諾したユーザーに対して、メッセージ表示させることで、サイトへの訪問を促し、購入、問い合わせ、キャンペーン情報の閲覧などのアクションを促すことが可能になります。
ただし、2022年10月現在は、まだプッシュ通知の対応ブラウザには制限がある（例えばiOSは対応対象外）ので、随時状況を確認してください。

PWAを導入するメリット

PWAを導入するメリットについて、企業とユーザーそれぞれの立場から見ていきます。

企業にとってのメリット

PWAの高速性とアプリのように使える自由度により、企業はユーザーのモバイル体験の質を高めることができます。モバイル体験の質の向上により、多くのユーザーを惹きつけることができます。

PWAサイトを1つ作ればすべてのデバイスで使える

ネイティブアプリの場合、iOS用のアプリはiOSでのみ動作し、Android用のアプリはAndroidでしか動作しません。ネイティブアプリをスクラッチ開発し、両OSに対応させる場合、コーディングのコストが2倍になります。PWAの場合、一度サイトを作ってしまえば、iOSとAndroid、両方のデバイスで使うことができます。

アプリよりも多くのユーザーに使ってもらえる

PWAサイトは、アプリに比べてインストールのハードルが低いと言えます。アプリを使うとき、ユーザーはApp StoreやGoogle Playからアプリをインストールしなければなりません。日本人が持っているアプリは平均で80個、使っているのは25個であることを考えると、これは非常に高いハードルです。PWAなら、ブラウザで見ているページをホーム画面に登録するだけでアプリのように使えます。

参考：App Ape Lab.「アプリ市場トレンドレポート2018」

ユーザーの直帰率が下がる

ページの読み込み時間が3秒を超えるとユーザーはサイトの閲覧を諦める、というデータがあります。あるニュースサイトでは、ページの読み込み時間が1秒増すごとにユーザーが10％減少しました。

しかし、PWAサイトはページの読み込みが速く、オフラインでも使えることから、PWAはユーザーにっとって非常に使いやすいWebサイトです。PWAの高速性は、ユーザーの直帰率を下げる切り札になります。

参考：Google Web Fundamentals「パフォーマンスが重要なのはなぜか」

プッシュ通知が使える

プッシュ通知はネイティブアプリのさまざまな機能の中でも、特に重要なマーケティング・集客手段です。プッシュ通知を適切に使うことでユーザーとのつながりを深め、サイト訪問や購買に結びつけることができますが、PWAもアプリと同じようにプッシュ通知を使うことができます。

ユーザーにとってのメリット

PWAはユーザーから見ると、ショップでダウンロードすることなく使えるアプリのようなものです。

ホーム画面にインストールしてアプリのように使える

ユーザーがPWAサイトを開くと、まるでアプリのように使えることに驚くはずです。通常画面の下部に位置する、「サイトをホーム画面に追加」というボタンを押すだけでアイコンが作成され、スマートフォンのアプリのように使うことができます。PWAは、ユーザーにとって、気軽に使えるアプリのようなものです。

表示が速いので閲覧時のストレスがない

PWAはキャッシュ機能により、バックグラウンドでページを読み込んでくれます。読み込みのために待つ時間が少ないので、ユーザーはストレスなくサイトを閲覧できます。オフライン環境でも動作するので、ユーザーのストレスはさらに軽減されます。

PWA導入のデメリット

PWAがOS別の開発が不要とはいえ、ブラウザ環境に依存します。SafariもPWAに対応しているが、SafariとChromeでは動作などにはやや違いがあるのも事実。こうした背景もあり、ネイティブアプリの機能を全てPWAで実現するのはなかなか難しい背景があります。

またインストールの手間がないPWAは、ユーザーとのエンゲージメント強化につながりにくいという見方もできます。ネイティブアプリはユーザー自身がストアからダウンロードするため、ある程度ロイヤリティの高いユーザーが多く、だからこそアプリのプッシュ通知などにも抵抗が少ないとも考えられるでしょう。

効果測定においても注意点があります。PWAではダウンロード数やアンインストール数が把握できないため、利用者数などの指標をチェックする方法を考えなければなりません。

無料eBookプレゼント「アプリ導入&運用のCOST guidebook」 | 自社アプリ開発・運用・分析プラットフォーム Yappli（ヤプリ）
Yappli（ヤプリ）はアプリ開発・運用・分析をノーコード（プログラミング不要）で提供するアプリプラットフォームです。
 

PWA導入事例を９つご紹介

具体的なPWAを導入しているアプリの事例をご紹介します。

【事例①】Retty(https://retty.news/)

日本最大級の実名グルメサービスの「Retty（レッティ）」は、ニュースメディア「Rettyグルメニュース」にPWAを導入しました。PWAによる主な改善点は以下の2つです。

• Webページの高速表示
• プッシュ通知で新着記事をお知らせ

コンテンツをあらかじめキャッシュに入れておくことで、初めて訪れるときでも素早く表示されます。アプリをダウンロードしたユーザーだけでなく、ブラウザを使って閲覧しているユーザーに対しても、新着やオススメ記事の情報を通知できます。

参考：PRTIMES「実名グルメサービスRetty、PWA対応により「Rettyグルメニュース」の表示速度を高速化」

【事例②】SUUMO(https://suumo.jp/)

2015年、リクルート住まいカンパニー様は、不動産・住宅サイト「SUUMO（スーモ）」のスマートフォン用Webサイトに、Webブラウザの最新技術「Service Worker」を利用したプッシュ通知機能を実装・公開しました。これによりアプリを使っていないユーザーでも、探す条件に合致した新着物件の情報をプッシュ通知で受け取り、より手軽に物件情報にアクセスできます。以下のような効果が確認されています。

• ページ読み込み時間が75％減
• プッシュ通知の開封率が31％に

参考：リクルート住まいカンパニー「プレスリリース」、Google PWA導入事例「SUUMO」

【事例③】Twitter

2017年、Twitterは軽量版「Twitter Lite」を発表しました。Twitter Liteの目的は、

• データ利用料を最小限にして読み込み速度を上げること
• デバイス上の容量を1MB以下に抑えること

でした。Twitter LiteにはPWAの技術が使われています。Google ChromeでTwitter Liteを使う場合、プッシュ通知を利用でき、オフラインで使うこともできます。Twitter Liteをデバイスのホーム画面に追加すれば、1タップでTwitterを起動できます。

参考：Twitter Japan「Twitter Liteのご紹介」

【事例④】日経電子版(https://r.nikkei.com/)

日本経済新聞は、通常のアプリのほかに、2017年からPWAも導入しています。

これにより、

• 表示速度を示すスコアが2倍になる
• アプリを操作可能になるまでの時間が14秒短縮される
• 読み込み速度が75％改善される

など、速度面での大幅な改善が見られました。

このようにしてユーザービリティを上げた結果、

• オーガニック流入が2.3倍になる
• 会員登録数が58％増加する

などの結果がもたらされました。

参考：Google PWA導入事例「日本経済新聞社」

【事例⑤】The Weather Channel(Weather.com)

The Weather ChannelはWebサイトWeather.comを通じて世界中の人々に天気予報の情報を提供しています。アプリも提供していますが、全体の半分程度はアプリ外からの利用だったため、モバイルWebサイトをPWAを使って最適化しました。

これにより、サイトの読み込み速度が80％改善し、接続環境がよくなかったりスマートフォンが最新でなかったりする場合でもサイトを利用しやすくなりました。また、50万人のユーザーがプッシュ通知を取り入れました。

参考：Google PWA導入事例「The Weather Channel」

【事例⑥】Alibaba(https://japanese.alibaba.com/)

Alibabaは世界最大のB2Bプラットフォームです。Alibabaは、モバイルWebサイトをアプリに誘導するための入口と考えてきましたが、多くのユーザーはWebサイトを使い続けました。そこで、サイトをPWA仕様に更新し、サイト利用者のモバイル体験を改善。PWAへの仕様変更により、以下のような結果がもたらされました。

• ブラウザ利用者のコンバージョンが76％増加
• アクティブ利用者数がiOSでは14％、Android利用者では30％増加

参考：Google PWA導入事例「Alibaba」

【事例⑦】Wego(https://www.wegotravel.jp/)

旅行会社のWegoはPWAと、Googleなどによるモバイルサイト高速表示プロジェクトであるAMP(Accelerated Mobile Pages)を使ってユーザーのWeb体験を改善しました。スムーズにページを表示できるようになり、読み込み速度が12秒から1秒に短縮されました。その結果直帰率が20％下がりました。

AMPとPWAが提供するさまざまなテクノロジーを取り入れることで、アプリと同じように使うことができるWebサイトの構築に成功しています。

参考：Google PWA導入事例「Wego」

【事例⑧】Pinterest(https://www.pinterest.jp/)

Pinterestの世界戦略の中で、モバイルサイトの改善に注力することになりました。これまでのWebサイトでは、非認証ユーザーの1％しかサインインしたりアプリをインストールしたりしていませんでした。PWAを採用してからは、サイトを使えるようになるまでの時間が23秒から5.6秒に改善されたことなどにより、

• 滞在時間が40％増加
• ユーザーからの利益が44％増加
• コアエンゲージメントが60％増加

などの効果が見られます。

参考：Medium「Pinterest PWAのパフォーマンス改善事例」

【事例⑨】The Washington Post(https://www.washingtonpost.com/)

The Washington Postのデータトラフィックの55％はモバイルデバイスによるものです。同紙は1日に1,000件の記事を発行しています。

2015年、同紙はAMP技術を使ってモバイルサイトをPWA化する出版社のグループに加入しました。ページ読み込み時間が400ミリ秒となり、以前のWebサイトに比べてパフォーマンスが88％改善されました。また、モバイル検索でThe Washington Postに来たユーザーの1週間以内に再訪率は51％から63％に改善されました。

参考：Google PWA導入事例「The Washington Post」

PWAはネイティブアプリの替わりになるのか？

PWAにはさまざまなメリットがあり、「今後はPWAが主流になる？」という声も出てきていていますがmネイティブアプリの替わりになるかと言うと、紹介したような課題がある現状では難しい部分もあります。

現在、日本国内でPWAを提供しているニュースサイトや住宅情報ポータルを見ると、ネイティブアプリからの移行というよりもページ読み込み速度の向上を目的にしているようです。実際にPWAを導入していても、ほとんどのサイトはネイティブアプリのインストールをバナーなどでPRしています。

つまり現状ではPWAはWebサイト開発の一環と捉え、アプリはネイティブアプリを前提に考えたほうが現実的です。

ただしPWAの動向は、チェックしておきたいところ。PWAに限らず、アプリ関連技術の進歩はスピードが速まっています。この状況で莫大な初期費用をかけてネイティブアプリを開発するやり方は、リスクが高いので要注意。開発ツールやサービスを活用して、フレキシブルな開発環境を整えておくほうがトレンドやニーズに対応しやすいのではないでしょうか。