PWAとは？機能やメリット・導入方法などを解説｜自社サイトがアプリのように動作する！

こんにちは。「AIアナリスト」ライターチームです。

PWAとは、モバイル向けのWebサイトを、スマートフォン上でアプリのように使える仕組みのことです。企業のマーケティング担当者やデジタルマーケティングに興味がある人の中には、PWAに関心がある人もいるのではないでしょうか。この記事ではPWAの仕組みやメリット、注意点について詳しく紹介します。導入方法なども解説するので、ぜひ参考にしてください。

目次

• PWA（Progressive Web Apps）とは
  • Webアプリとは
  • ネイティブアプリとは
• PWAの3つの機能とできること
  • ユーザーの端末へインストールできる
  • キャッシュを利用した高速表示やオフラインでの動作
  • プッシュ通知によるユーザーへのアクション
  • GPS（位置情報）の利用
• PWAの5つのメリット
  1. アプリの審査が要らない
  2. ユーザーとの接触シーンが増やせる
  3. ユーザーのサイト直帰率を下げられる
  4. アクセス数やCV数の向上が期待できる
  5. Webサイトのアクセス解析が利用できる
• PWAの3つのデメリットと注意点
  1. iOSとAndroidで機能の違いがある
  2. ネイティブアプリを運用している場合はコストが重複する
  3. アプリストアでユーザーに見つけてもらえない
• PWAの導入方法
  • Webサイトをhttpsに対応させる
  • マニュフェストファイルを作成する
  • ServiceWorkerを設定する
• PWAの導入事例
  • 表示速度などを改善して会員数が増加：日経電子版
  • ユーザーの直帰率が20％減少：Twitter
  • プッシュ通知の開封率が31%増加：SUUMO（スーモ）
  • コンバージョンが76％増加：Alibaba
• まとめ

PWA（Progressive Web Apps）とは

PWAとは、Progressive Web Appsの略で、モバイルサイトをアプリのように使える仕組みのことです。PWA自体には特殊な技術がある訳ではなく、HTML・CSS・Javascriptを用いることで実現します。通常のモバイルサイトはブラウザを使って操作・閲覧しますが、PWAはホーム画面に設置したアイコンから操作・閲覧ができます。

Webアプリとは

Webアプリとは、ブラウザ上で使えるアプリケーションのことです。端末にアプリをインストールせずに機能を使えます。「アカウントがあれば、多数の端末で使える」「常に最新情報を表示できる」などのメリットがありますが、インターネットに繋がっていない環境では使えません。代表的なアプリは、フリーメールやインターネット通話サービスなどです。

ネイティブアプリとは

ネイティブアプリとは、スマートフォンやパソコンにインストールして使うアプリケーションのことです。インターネットに繋がっていなくても動作するのが特徴です。App StoreやGoogle Playといったアプリストアから入手するもののため、リリースやアップデートの際は審査があります。ExcelやWord、Photoshopなどが代表的です。

Webアプリとネイティブアプリ、双方の良い部分を持っているのがPWAになります。

PWAの3つの機能とできること

自社サイトにPWAを導入したら、何ができるようになるのでしょう。ここではPWAの特徴について解説します。

ユーザーの端末へインストールできる

PWAは、インストールしたらユーザーの端末のホーム画面にアイコンが設置されます。ユーザーはホーム画面のアイコンをタッチするだけでWebサイトを閲覧できます。

従来のWebサイトもホーム画面へアイコンを設置し、ショートカット機能として使うことは可能でした。しかし、あくまでもショートカットするだけの機能です。PWAはインストールすることで、Webサイトへのアクセスだけでなくプッシュ通知やキャッシュなどが使えるようになります。

キャッシュを利用した高速表示やオフラインでの動作

PWAを導入すると、Service Workerの機能により、Webサイトのコンテンツがキャッシュされます。キャッシュは、オフラインでもWebサイトへアクセスできるだけでなく、ページの高速表示を可能にします。ページが早く表示されれば、それだけストレスも減り、ユーザーがWebサイト内のページを移動して読み込む確率が高まります。

また、オフラインでもページが動作するのも、キャッシュの機能の1つです。ユーザーはオフラインでもデータを入力・編集でき、オンラインになったらデータを送信することが可能です。

プッシュ通知によるユーザーへのアクション

従来のWebサイトでは利用できないプッシュ通知が可能になるのも、PWAの機能の1つです。これにより、ネイティブアプリと同様に、ユーザーに対して最新情報やお知らせが通知できます。

GPS（位置情報）の利用

PWAの機能にはGPS（位置情報）の利用もあります。企業はGPS（位置情報）を利用して、各地でのサービスをリアルタイムに提供することが可能です。

PWAの5つのメリット

PWAを導入するとユーザーへのアプローチやCV数、直帰率といった数値などに効果が得られます。ここでは、PWAで得られるメリットについて5つ解説します。

1.アプリの審査が要らない

PWAは、アプリストアからダウンロードせずに利用できます。そのため、ネイティブアプリのリリースのように、App StoreやGoogle Playなどのアプリストアの審査を受ける必要はありません。また、iOS用とAndroid用の2タイプのアプリを用意せずに済むため、アプリを開発するためのリソースやコストなどが軽減されるというメリットがあります。

2.ユーザーとの接触シーンが増やせる

PWAを導入すると、ユーザーとの接触（エンゲージメント）する機会が増やせます。ユーザーの端末のホーム画面にアイコンをインストールできるため、通常のWebサイトよりアクセスしやすいのがメリットです。また、プッシュ通知を利用して、企業から積極的にアプローチすることが可能です。

3.ユーザーのサイト直帰率を下げられる

直帰率とは、Webサイト内で最初の1ページのみ閲覧して、別のページは閲覧しなかったユーザー行動に対する確率のことです。読み込みが遅いページやアクセスしづらいページでは、ユーザーは離脱してしまいます。

PWAは、Webサイトの表示速度を向上し、オフラインでのアクセスを可能にします。これによりユーザーのストレスが軽減され、快適な利用環境を提供できます。

4.アクセス数やCV数の向上が期待できる

PWAは、端末へのインストールが簡単で、表示の高速化など多くのメリットがあります。企業はアプローチしやすく、ユーザーは使いやすい仕組みであることから、アクセス数やCV数の向上が期待できるでしょう。SEO対策も有効に働くので、コンテンツが検索上位に表示されるとユーザーの目につきやすくなり、コンテンツマーケティングの施策も実施できます。

5.Webサイトのアクセス解析が利用できる

PWAは、アプリのように使えるWebサイトです。そのため、Webサイトに実施したSEO対策は有効に働きます。Googleアナリティクスなどのアクセス解析を利用して、通常のWebサイトと同じように分析や改善も行えます。PWAを導入する前と後のサイト状況を比較して、サイト改善に活かせるのもメリットです。

PWAの3つのデメリットと注意点

PWAには注意しておきたい点もあります。ここでは、3つのデメリットについて解説します。

1.iOSとAndroidで機能の違いがある

PWAは複数のOSに対応しますが、OSによって機能に違いがあります。Androidでは可能でも、iOSでは「データ量が制限される」「インストールを促すバナーが設置できない」など、機能の一部が異なります。ただし、iOSも日々バージョンアップしているため、今後の改善が期待できます。

2.ネイティブアプリを運用している場合はコストが重複する

既にネイティブアプリを運用している場合、平行してPWAを導入すると、両方の運用コストがかかります。ただし、長期的な計画でネイティブアプリからPWAへ移行する場合は、将来的にコストの削減に繋がる可能性があります。コストやリソースなど、双方の運用バランスなどを見極めながら導入するとよいでしょう。

3.アプリストアでユーザーに見つけてもらえない

PWAはアプリではないため、アプリストアには登録されていません。ネイティブアプリのように、アプリストアのおすすめに掲載されたり、ユーザーが検索してダウンロードするといった機会がありません。近年は別途登録をすることで、PWAもアプリストアに公開できるようになってきています。

PWAの導入方法

ここでは、PWAを導入するために必要な作業について解説します。具体的な手順や必要なものなど、参考にしてください。

Webサイトをhttpsに対応させる

PWAを導入するためには、まずWebサイトをhttpsに対応させましょう。PWAは、Service Workerというプログラムで動作しています。そのままでは第三者が情報を抜き取って読み取る恐れがあるため、httpsの設定は必須となっています。設定方法は、サーバーにより異なるので、導入前に確認しましょう。

マニュフェストファイルを作成する

アイコンをタップするだけでWebサイトを起動させるために、マニュフェストファイルを作成しましょう。マニュフェストファイルとは、アプリの画像や説明文、起動時の画面などの情報を設定していくファイルのことです。

ServiceWorkerを設定する

オンラインでの操作やプッシュ通知、ブラウザ内のキャッシュの作成を実現させるために、Service Workerを設定します。Service Workerは、PWAの基盤となる機能です。

PWAのために必要な設定には、プログラミングのスキルや人材が必要となることもあります。リソースやコストの状況によっては外注するのも1つの方法です。

PWAの導入事例

（画像：Pixabay）

PWAには具体的にどのような効果があるのでしょう。ここでは実際にPWAを導入して、成果を上げた4つの企業を紹介します。

表示速度などを改善して会員数が増加：日経電子版

「日経電子版」は、無料会員を含む会員数が400万人を超える日本経済新聞の電子サイトです。同サイトではページ速度の改善などを目的に、2017年からPWAを導入しました。キャッシュストレージでトップ記事を表示して、すぐに記事を読める状態にすることで、表示速度を示すスコアが2倍になり、会員登録数が約60％増えました。

※参考：PWAで表示速度が2倍に！スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット

ユーザーの直帰率が20％減少：Twitter

SNSのTwitterでも、2017年にPWAを導入して、軽量版「Twitter Lite」を発表しました。データ量を削減して1MB以下に抑えることで、1セッションあたりのページビューを65％増やすことに成功しています。また、ツイート数も75％上昇して、直帰率は20％減少しました。すでにネイティブアプリを運用している企業でも、PWAによる効果が得られた事例です。

※参考：Twitter Liteのご紹介

プッシュ通知の開封率が31%増加：SUUMO（スーモ）

住宅情報サイト「SUUMO（スーモ）」では、2015年に「Service Worker」を利用したプッシュ通知機能を導入しました。ネイティブアプリを使っていなくても、新着情報をプッシュ通知で受け取ることができ、物件情報にもアクセスできるため、ページを読み込む時間が75%減少しました。また、プッシュ通知は開封率31％に増えました。

※参考：RECRUIT Press Release

コンバージョンが76％増加：Alibaba

中国の大型EC企業「Alibaba」は、Webサイトを好むユーザーに向けて、WebサイトをPWA仕様にして、プッシュ通知などの機能を追加しました。また、ユーザーを新規訪問と再訪問に分けて、コンテンツを配信しました。これにより、Webページからの利用者は76％増加、アクティブユーザーがiOSでは14％、Android利用者では30％増加させることに成功しています。

※参考：Alibaba｜Web｜Google Developers

まとめ

PWAの導入にはいくつか注意点はありますが、「アクセス数やCV数の向上が期待できる」などのメリットがあり、すでに多くの企業で成果を挙げています。SEO対策やアクセス解析なども有効なため、現在実施している施策をそのまま活かせます。PWAの導入後は、引き続き自社サイトの分析と改善を実施し、さらなるパフォーマンスの向上を目指しましょう。

「AIアナリスト」は、Googleアナリティクスのデータをもとに、分析からWebサイトの改善施策の提案まで自動で行うツールです。そのため、最小限の作業量で効果を得られます。初回分析は無料で行っているので、Webサイトを改善したい方はぜひお試しください。

AIアナリスト」はこちら