PWA(Progressive Web Apps)とは?PWAの機能と導入するメリットを解説

更新日: 公開日:

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

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

この記事のポイント

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

 

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の両方を維持・運用するためのコストも二重になります。ネイティブアプリとの兼ね合いについては検討が必要です。

②iOSでは一部機能が制限される

iOSはiOS11.3からService Workerへのサポートを始めましたが、Androidに比べると一部の機能が制限されています。

【制限される機能の例】(2018年3月現在)
・オフラインのデータ容量が制限される
・プッシュ通知や、PWAのインストールを促すバナーが使えない

参考:iOSの11.3からのPWA対応でできるようになったこと

まとめ

WEBページでありながらアプリのような機能を持ったPWAにより、ユーザーへのアプローチができる、ユーザー体験を改善できるなど、Webサイトの可能性が広がりつつあります。

以前はiOSに対応しておらず国内ではなかなか広がらなかったPWAですが、Safari11.1がService-Workerに対応たことで、今後様々なサイトで実装が進むと考えられます。
※詳細な実装方法はこちらをご覧ください

 

こちらの記事も参考にご覧ください。

SEOについてさらに詳しく知りたい方はこちら

モバイルSEOについて知りたい方はこちら

モバイルフレンドリーについて知りたい方はこちら

 


◎「ビジネスの成果」につながったSEO事例

経営直下のプロジェクトでSEO改善、昨対比売上71%増を実現した事例《株式会社鎌倉新書》

コンテンツのリライトで検索流入を700%に改善した事例《freee株式会社》

BtoB向けサービスサイトへの自然検索流入を40倍にした事例《ちきゅう株式会社》

SEO事例一覧へ


Webサイトの運用・集客でお困りの際は、ぜひお気軽にご相談ください

お問い合わせはこちら