PWAとは?なぜいま注目されているのか、メリットと成功事例で分かりやす解説!

※この記事には一部PRが含まれます。

「PWAを導入しようと考えているけど、そもそもどういったシステムなのかいまいち理解できていない」

「CVをあげたいけど、どういった施策を練ればいいのか分からない・・・」

このような悩みを抱えている方に、この記事を読んでいただけると幸いです。

ネイティブアプリの運用をしているけれど、Webサイト上の使用感・ユーザーに対するサービスにこだわりたいと考えている方もいるのではないでしょうか?

そのような方には、「PWA」の導入をおすすめします。PWAを導入すればネイティブアプリのような使用感でWebサイト上のCVを獲得できます。

できるだけアプリをインストールしたくないと考えているユーザーにとっては最高の施策と言えます。

PWAの導入に悩んでいる方は、ぜひ参考にしてみてください。

PWAってなに?

Progressive Web Apps」を略した言葉を、「PWA」といいます。

PWAとは、スマートフォンやタブレット向けのWEBサイトを

ネイティブアプリ(スマートフォン・タブレットにストアを経由してインストールできるアプリのこと)のように

モバイルサイト内で体験できる技術のことを指します。

 

アプリをインストールしなくても、サイト上でアプリと同じような操作感で使えるのが特徴です。

「操作感だけで、プッシュ通知やアイコン追加はできないでしょ?」とお考えの方、ちょっと待ってください!

PWAは、アプリをインストールせずともプッシュ通知・ホーム画面のアイコン追加ができます。

さらにPWAは、オフラインで閲覧可能。アプリ版では体験できないベネフィットもありますよ。

導入する前に、PWAの基本構成を知ろう!

PWAの基本構成は、ネイティブアプリと同じようにホーム画面にアイコンがでてきます。

そのアイコンをタップするとPWAが起動します。

表示する画面は、Webアプリにでてくるメニューバーが表示されないようになっています。

そのため、ネイティブアプリのような感覚で操作できます。

PWAでできる5つのこと

PWAでできることは、大きく分けて5つあります。1つずつ見てみましょう。

  1. アイコンをホーム画面に追加できる
  2. ネイティブアプリの感覚で使える
  3. プッシュ通知ができる
  4. オフラインで閲覧できる
  5. 表示スピードが速い

1.アイコンをホーム画面に追加できる

PWAができること1つめは「アイコンをホーム画面に追加できる」点です。

Google playやApp Store(Apple)のようなストアでインストールするアプリはインストールすると同時に、ホーム画面にアイコンが出現します。

PWAはアプリをインストールせずとも、アイコンをホーム画面に追加することが可能です。

ホーム画面からワンタップ、一つの動作でアクセス可能なので、使用感はネイティブアプリとほぼ同じです。

肝心の追加方法は、サイトを開いている状態でポップアップから許可・メニューから追加する2つのやり方がありますよ。

2.ネイティブアプリの感覚で使える!

PWAができること2つめは、「ネイティブアプリの感覚で使える」点です。

本来、ネイティブアプリはインストールをする必要があります。

PWAはアプリではないので、インストールの手間がかかることなく使用可能です。

API(Application Programming Interface)を連携させれば、さらに使いやすくなるでしょう。

3.プッシュ通知ができる

PWAができること3つめは、「プッシュ通知ができる」点です。

そもそも「プッシュ通知」とは何かご存知ですか?プッシュ通知とは、新規のメールやニュース速報などをアプリが地頭でお知らせする昨日のことを指します。

ロック画面・ホーム画面にSNSの新着メッセージ・お知らせが表示されますよね。あれがプッシュ通知ですね。

アプリではなくPWAも、このプッシュ通知が可能です。

ただプッシュ通知を送るためには、1つ必要な作業があります。

ユーザーの許諾を得るために、画面をポップアップにした状態で「通知を送信しようとしています」と表示されます。

これをユーザーが「許可」を押せばプッシュ通知が可能です。

4.オフラインで閲覧できる

PWAができること4つめは「オフラインで閲覧できる」点です。

ページの情報を既に読み込んでいるので、オフライン環境でもサイトの閲覧が可能です。

5.表示するスピードが速い!

PWAができること5つめは「表示するスピードが速い」点です。

PWAはプリキャッシュ機能がついています。

ユーザーが現在のページを読み込んでいる間に、次に続くページを既に読み込んでいます。

その影響があり、ページの表示スピードが早くなります。

PWAを導入する5つのメリット

  1. コンバージョン率が上がる
  2. ユーザー数が増える
  3. 直帰率が減る
  4. リピーターが増える
  5. アプリの審査が不要

1.コンバージョン率が上がる

PWAを導入するメリットの1つめは、「コンバージョン率が上がる」ことです。

なぜPWAを導入することでコンバージョン率が上がるのでしょうか?一見、関連性がないように見えますが重要な役割を果たしています。

PWAはプッシュ通知ができるので、コンバージョン率が上ります。とある会社ではプッシュ通知の影響で350%コンバージョン率を上げた実績がありますよ。

2.ユーザー数が増える

PWAを導入するメリットの2つめは、「ユーザー数が増える」ことです。

PWAを導入することで、アプリのインストールから解放され、検索から発見されるようになります。

ユーザーが検索画面からサービスを発見されるということは、検索エンジンに認識されているということです。これだけでユーザーが増える可能性がありますよ。

できるだけアプリをインストールしたくない!」と考えているユーザーはPWAを求めています。

そのため、いちサービスとしてネイティブアプリだけを展開するのではなく、PWAを導入することがユーザーの増加が見込めますよ。

3.直帰率が減る

PWAを導入するメリットの3つめは、「直帰率が減る」ことです。

PWAは、表示するスピードが速くなります。無駄な待ち時間がないうえに、オフラインでの閲覧も可能なので直帰率が減る可能性が大いにあります。

4.リピーターが増える

PWAを導入するメリットの4つめは、「リピーターが増える」ことです。

PWAはホーム画面にアイコンを追加できたり、プッシュ通知を受けたりできます。通常のサイトではできない機能があるので、再訪問しやすくなります。

5.アプリの審査が不要

PWAを導入するメリットの5つめは、「アプリの審査が不要」という点です。

PWAはGoogle Play・App Sroreのようなアプリストアからリリースすることはないので、ストアの審査が必要ありません。

さらにAndroid・iOS別々に対応したアプリを制作する必要がないので、コストも削減できます。

PWAを導入したら成果はでるの?導入事例を紹介!

ここまでPWAについて解説しましたが、PWAを導入すれば実際に成果はでるのでしょうか?

日本に馴染みのあるサービスで成果があった導入事例を3つ紹介します。

SUUMO

引用元:SUUMO公式

物件検索サイト「SUUMO」はPWAを導入しています。

アプリ版「SUUMO」もありますが、Webサイトはアプリ版に近いレイアウトで使用感も変わらず使うことができます。

多種多様な物件を検索できるSUUMOは、絞り込み検索・表示スピードを重視しています。PWAを導入することで、表示スピードも短縮されユーザーが使いやすいサイトになりました。

具体的な成果
  • プッシュ通知の効果があり、開封率31%
  • 読み込み時間が75%減少したため、表示スピードが速くなった

日経電子版

引用元:日本経済新聞

「日経電子版」は、ページ速度を改善したくPWAを導入しました。

ニュースサイトは表示スピードが遅いとユーザーが離脱してしまいます。

文章・画像をもとに情報を得るのですから、遅いと使用感が悪くなってしまうからです。

PWAを導入した結果、表示スピードが速くなり、モバイルと比べてパフォーマンスが2倍に改善できました。

具体的な成果
  • PC版と比べて、Speed Index・Start Renderが3分の1ほど短くなった
  • モバイルと比べて、パフォーマンスが2倍に改善

Twitter

引用元:Twitter

世界各国で人気のSNS「Twitter」は、PWAを導入しています。

サイト上もアプリも使用感はほぼ同じ。サイトを開き、メニューからアイコンをホーム画面に追加できます。

できるだけアプリをインストールしたくない場合、サイトだけでサービスを利用したい方にとってPWAは必要と言えます。

具体的な成果
  • アプリユーザーと比べて離脱率が20%減り、ツイート数も75%増えた
  • 1セッションあたりでページビュー65%増加

Alibaba

引用元:アリババ

Alibabaは中国の大型EC企業です。

アプリ運用ではなく、Webページを好んで利用しているユーザーに対してPWA仕様に変更。

プッシュ機能等を追加することで、新規のユーザー・リピーターが増加。その結果、アクティブユーザーを増やすことに成功しました。

具体的な成果
  • アクティブユーザーが約44%(iOS14%、Android30%)増加
  • Webページのユーザーが約76%増加

PWAを導入する際の注意点

PWAの注意点は下記の通りです。

  1. iOSは一部の機能を制限される
  2. アプリストア経由では、新規ユーザーを獲得できない
  3. AndroidとiOSでは機能が異なる

PWAの導入を考えている方には知って欲しい注意点です。一つずつみてみましょう。

1.iOSは一部の機能を制限される

PWAを導入する際の注意点1つめは「iOSは一部の機能を制限される」点です。

そもそもPWAは様々なOSに対応しています。しかし、OSによって機能が異なるので注意が必要です。

「Androidではできたけど、iPhoneではこの機能ができない!」といったケースも多々あります。

環境的に「この機能がないと厳しい」という場合は、バージョンアップを待つしかありません。

2.アプリストア経由では、新規ユーザーを獲得できない

PWAを導入する際の注意点2つめは「アプリストア経由では、新規ユーザーを獲得できない」点です。

PWAはネイティブアプリのようにアプリストア経由でインストールができません。

そのため、ユーザーの目に入る機会はあまりないというのが現状。新規ユーザーの獲得は厳しいです。

3.PWAとネイティブアプリ両方を運用する場合は、コストが重複してしまう

PWAを導入する際の注意点3つめは「PWAとネイティブアプリ両方を運用する場合は、コストが重複してしまう」点です。

ネイティブアプリを運用しているなら、PWAも同時進行で運用しなければいけません。両方を運用する必要があるので、その分コストが重複してしまいます。

とはいうものの、「ネイティブアプリから今後PWAへ移行したい!」という場合は今後のコスト削減につながる可能性があると言えます。同時進行の運用はバランスを図りながら実施していく必要があります。

PWAに関するよくある質問

1.PC上のWebサイトは、PWAを導入できるか?

今日では、PC上のWebサイトでもPWAを利用するケースが増えてきています。

モバイルサイト上での導入として注目されがちなPWAですが、PC上のWebサイトでも試す価値はあると言えます。

2.そもそもPWAはどのブラウザにも対応しているの?

PWAはブラウザによって一部機能が対応していないこともしばしばあります。

例えば、iPhoneに導入されているiOSはプッシュ通知・バナー通知の機能が対応していません・・・。

3.PWAを導入する場合、アプリをリリースしない方がいいって本当?

代表例として、Twitter・InstagramのようにPWAサイトとネイティブアプリを運用しているケースもあるので一概には言えません。

まとめ

Web上からコンバージョンを増やすために、PWAを導入している企業も増えています。

ユーザーの使用感を高めるためにも、PWAを導入するべきケースも多いと思われます。

しかし、PWAは新しい技術なので導入方法や成果など確立されていないのが現状です。

「それでも他者と差をつけるためにも導入したい!」「早めに導入して施策を練りたい!」

そういった方はPWAの導入を本格的に検討してみてはいかがでしょうか?

おすすめの記事