PWA〈Progressive Web Apps〉とは？PWAの機能と導入するメリットを解説

更新日：2023年05月15日

SEO内部対策・テクニカルSEO

PWA〈Progressive Web Apps〉とは？PWAの機能と導入するメリットを解説

PWA（Progressive Web Apps）とは、モバイル向けWebサイトをスマートフォンアプリのように使えるようにするための仕組みのことです。

ここでは、PWAの概要や機能、導入するメリット、注意点、日本国内での導入事例について紹介します。

この記事のポイント

PWAは、モバイル向けサイトをスマホアプリのように使えるようにするための仕組み
ユーザーエンゲージメント向上やUX改善の効果に期待できる
アプリストア経由で新規ユーザーに接触できない点に注意

「PWAの機能を導入するか迷う」「SEOに影響が出ないか気になる」など気になる点がございましたら、こちらの無料相談フォームよりお気軽にご質問ください。

PWAとは

PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。
PWAはそれ自体が何か特殊な一つの技術、というわけではありません。レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。

PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。

PWAの機能

PWAはアプリ的な側面とWebサイト的な側面を併せ持っています。特徴的な機能は以下の通りです。

①ユーザーの手元の端末にインストール可能

モバイル端末のホーム画面にアイコンを設置できるため、ユーザーはアイコンをタッチするだけでWebサイトを閲覧することができます。

似た機能に「ウェブページのショートカットアイコンをモバイル端末のホーム画面に追加する」という既存機能があげられますが、PWAは単にショートカットをホーム画面に設置した場合と異なり、後に紹介するプッシュ通知やキャッシュの利用などの機能が備わっています。また見かけ上でも、PWAのアイコンから起動したWebサイトはURLバーもなくフルスクリーンで表示出来ますし、起動時のスプラッシュスクリーンも設定できます。

ネイティブアプリのインストールではなくPWA対応したサイトをインストールできることは、サイト運営者にとってもサイトユーザーにとってもメリットがあります。

【サイト運営者側のメリット】
・アプリサイトを経由しないため、アプリサイトの審査不要

ネイティブアプリの場合、GooglePlayやApp Storeなどでアプリを登録する際には審査が必要なため、アプリが配信できるようになるには時間がかかります。PWAはストアを経由しないため、PWAを実装したサイトをリリースすればすぐにアイコン設置が可能です。

・OSごとの個別対応が不要

ネイティブアプリの実装はOSに依存するため、インストールする端末がAndroidなのかiOSなのかによってアプリをそれぞれ用意する必要があります。一方、PWA対応サイトはあくまでもWebサイトであり、OSには依存しません。AndroidにもiOSにも個別対応する必要がないのです。

【サイトユーザー側のメリット】

・通信量、データ容量を食わない
通常のアプリに比べ、PWAではダウンロードするデータ量が少なく、通信量やデータ容量が少なくすみます。

②キャッシュの利用

PWAでService Workerの機能を利用すると、キャッシュの利用が可能になります。これにより、以下のようなメリットが生まれます。

・ページ表示速度の高速化
キャッシュによってページを先んじて読み込めるため、ページの表示速度が早くなりユーザーがページを移動しやすくなります。

・オフライン対応
インターネットに接続していなくてもキャッシュを利用してページを表示するため、オフラインでもサイトを閲覧できます。オフラインの間に入力されたデータをオンラインになったら送信するといったこともできます。

③プッシュ通知

Service Workerの機能により、従来のWebサイトでは出来なかったプッシュ通知が可能になります。アプリ同様の積極的な通知・呼びかけがWebサイトからも出来るようになります。

参考：Service Worker の紹介 | Web | Google Developer

④検索結果やURLから、通常のサイトと同じようにアクセスすることができる

アプリ的な機能が取り上げられがちですが、もともとはWebサイトなので、通常のWebサイトと同じようにアクセスすることが出来ます。知人とページをシェアするときはアプリとは違いURLを送ればページを共有出来ますし、検索エンジンからのPWA対応のサイトを見つけることも出来ます。

＼サイトリニューアルで成果に繋げるなら要チェック！／

PWAをサイトに導入するメリット

これらの機能を備えるPWAですが、実装することで得られるメリットは以下の2点にまとめられます。

①ユーザーエンゲージメントの向上

サイトへのアイコンがユーザーのモバイル端末のホーム画面に設置できるため、ユーザーはより手軽にサイトにアクセスできます。

またサイト側もプッシュ通知を活用することで、一定期間来訪がないユーザーへのアプローチやキャンペーンの通知などを積極的に行うことが出来ます。
これらの取り組みにより、サイトに対するユーザーエンゲージメントを高める事が可能だと考えられます。

②ユーザー体験の改善

PWAによりサイト読み込み速度が飛躍的に早くなり、またオフラインでもサイトを利用する事ができるようになります。データサイズやインターネット環境などの要因でユーザーの閲覧が阻害されないため、ユーザーがより快適にサイトを利用できるようになります。

0.1秒表示が遅れるごとに売上が1%減ると言われるほど、Webサイトにおいて快適なユーザー体験は重要な要素です。ユーザー体験の改善によって、間接的にサイト上でのユーザー指標が改善すると考えられます。
参考：　[ブログ記事] モバイルサイト表示速度の重要性と高速化の方法 - Google 広告ヘルプ

導入事例（日本国内で馴染みあるサービスに限る）

日本国内に限っても、PWAを導入し成果があったサイトがいくつか存在します。ぜひアクセスしてPWAを体験してみてはいかがでしょうか。

TwitterLite

https://lite.twitter.com/
日本でも馴染み深いSNS「Twitter」もPWAに対応しています。3億人を超えるアクティブユーザー(/月)を持ち、その80%がモバイルユーザーです。

【実装の成果】
・1セッションあたりのページビューが65％増加
・ツイートが75％増加
・離脱率が20％減少

参考：　Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage | Web | Google Developers

日経電子版

https://r.nikkei.com/
日本最大級の経済紙である日経の電子版サイトです。毎月900本の記事を配信し、無料会員も含めると300万人に閲覧されている日経電子版では、ページ速度の改善などを目的にPWAを導入しました。

【実装の成果】
・モバイルに比べパフォーマンスが2倍に改善
・PC版と比べるとSpeed IndexとStart Renderが3分の1に短縮

参考：日経電子版サイト高速化とPWA対応 / nikkei-high-performance-pwa // Speaker Deck

SUUMO

https://smp.suumo.jp/
日本の大手物件検索サイトもPWAに対応しました。毎月4000万人が物件を検索するサイトで、その多くがモバイルユーザーです。

【実装の成果】
・読み込み時間が75%減少
・プッシュ通知の開封率は31％

参考：　Suumo | Web | Google Developers

PWAの注意点

①アプリストア経由で新規ユーザーに接触出来ない

PWAは基本的に、Webサイトを訪問したユーザーに直接インストールしてもらいます。ネイティブアプリのように「アプリストアで偶然見つけてもらう」ということはありません。Webサイトとネイティブアプリを運用していれば、Webからもアプリストアからも新規ユーザーを獲得する機会がありますが、ネイティブアプリを持たずWebサイトにPWAを実装させた場合、アプリストアなどで新規ユーザーを獲得する機会は得られません。

ネイティブアプリも運用しながらPWAも導入することももちろん可能ですが、その場合はネイティブアプリとPWAの両方を維持・運用するためのコストも二重になります。ネイティブアプリとの兼ね合いについては検討が必要です。