入門コンテンツ


PWAとは?実装できる機能や導入メリット、成功事例について徹底解説

Team Braze 作成者: Team Braze 2024/08/29

「PWA」は、プッシュ通知を送信するなど、自社サイトの自由度を拡張でき、ユーザーエンゲージメントの強化に貢献する技術です。

この記事では、PWAの特徴や実装できる機能、導入のメリット・デメリット、成功事例、マーケター向けの解決策などをご紹介します。

1. PWA(Progressive Web Apps)とは

    「PWA」(Progressive Web Apps:プログレッシブウェブアプリ)とは、Webサイト・Webアプリをネイティブアプリのように動かす技術のことです。その理解にはまず、ネイティブアプリとは何かを押さえておく必要があります。

    1.1. ネイティブアプリとの違い

    ネイティブアプリとは、アプリケーションストア(iOSの「App store」、Androidの「Google Play」など)からインストールするアプリのことです。iPhoneでApp storeを開いて検索し、気になるものを見つけて利用するような、私たちが想像するいわゆる「アプリ」に当たります。

      一方、PWAはブラウザのなかで稼働し、アプリケーションストアを経由せずにインストールや利用ができる技術です。異なるOSでも近い動作ができるため、OS別の開発が不要であるなど、以下のような違いが存在します。

      ネイティブアプリ

      • アプリストア(App Store、Google Play)からインストールするいわゆる「アプリ」

      • OSに合わせた開発が必要

      • アプリストアごとの審査も必要

      PWA(Progressive Web Apps:プログレッシブウェブアプリ)

      • ネイティブアプリのようにWebサイト・Webアプリを動かす技術

      • OS別の開発は基本的に不要

      • アプリストアの経由も不要


      1.2. PWAはなぜ注目されるようになったのか

        PWAが注目される理由には、ネイティブアプリのように機能面で優れていながら、ネイティブアプリより開発の負担は少ないことが挙げられます。

        ネイティブアプリには、動作の早さやデバイス機能の活用のしやすさといった長所があります。しかし、OSやストアごとに仕様を合わせて作成しなければならないことから、開発コストがかさみやすいのが欠点です。

        これに対してPWAは、OSを分けて開発を進める必要がなく、アプリストアの審査も不要です。それでいてプッシュ通知が利用できるなど、通常のWebサイトよりもネイティブアプリに近い動作を実現しており、コストパフォーマンスに優れた解決策として注目されています。

        2. PWAを導入することで実装できる機能

          では、PWAの導入により実装できる具体的な機能を見ていきましょう。

          2.1. ホーム画面にアイコンを追加できるようになる

            PWAでは、端末のホーム画面に任意のアイコンを追加できます。Webサイトのブックマークを開く際の「ブラウザ起動→ブックマークタブを選択→サイトを開く」といった手順は不要で、アイコンをワンタップするだけで起動できます。

            2.2. キャッシュを利用して表示速度の向上が図れる

            PWAを利用すると、「キャッシュ(表示や動作に必要なデータをローカルに保管しておく仕組み)」により高速な表示が期待できます。起動するたびにすべてのデータをゼロからダウンロードする必要がありません。

            3. オフラインでも利用できる

            ホーム画面へのアイコン追加やキャッシュの働きにより、PWAはオフライン状態でも利用できます。原則として常時インターネット接続が必要なWebアプリとの大きな違いです。

            3.1. プッシュ通知が利用できる

            ネイティブアプリに近い動作が可能なPWAでは、プッシュ通知が送信できます。デバイスのロック画面にもメッセージを表示できるため、顧客へのアプローチ手段として活躍します。

              プッシュ通知の仕組みやマーケター視点で押さえておきたいポイントは以下の記事にてご確認ください。

              プッシュ通知の仕組みや種類にはどんなものがある?メリットや通知ポイントを紹介

              3.2. PWAを導入するメリット

                続いて、PWAを導入するメリットをご紹介します。

                3.1. インストールの手間が省ける

                PWAはネイティブアプリと異なり、アプリストアを経由しなくてもWebサイトから直接インストールできるのが特徴です。「アプリストアのリンクに飛ぶ→詳細を確認してインストールボタンを押す」という手間が不要なため、ユーザーがインストール前に離脱してしまうリスクを減らせます。

                3.2. ユーザーエンゲージメントの向上に繋がる

                  動作が素早くインストールの手間も最小限なPWAは、ユーザー視点での快適さに優れています。オフラインでも利用ができるなど自由度が高く、魅力的な顧客体験を提供できます。結果としてユーザーエンゲージメント(顧客と自社の結びつきの深さ・強さ)の向上にも結びつきます。

                  3.3. OSを分けて対応する必要がない

                    ネイティブアプリはAndroid・iOSそれぞれの仕様に合わせて開発を進める必要がありますが、PWAではこのような対応は不要です。一部の制限こそありますが、OSを問わず機能します。

                    3.4. 開発コストの削減に繋がる

                      OS別の対応が不要なため、ネイティブアプリと比較して開発コストを抑えやすいのも魅力です。OSを問わないクロスプラットフォームな動作を一度の開発で実現できます。アプリストアの審査も不要であり、人件費や時間的コストも削減できます。

                      3.5. 検索エンジンからのアクセスが期待できる

                        検索エンジンからユーザーを獲得しやすいのもPWAの特徴です。PWAの中身はWebサイトのコンテンツであり、クロール拒否などの設定をしなければ、そのまま検索エンジンにも掲載されます。コンテンツの質や検索エンジンの順位次第で豊富な自然流入を期待できます。

                        3.6. サイト直帰率の減少が見込める

                          表示速度が高速なPWAには、ユーザーのサイト直帰率を下げる効果も期待できます。オンラインマーケティングの世界では、「Webページの読み込みは2秒以内が望ましく、3秒を超えるとユーザーが急激に離れていく」という定説があり、PWAはこの2秒という厳しい壁の突破に役立ちます。

                          4. PWAを導入するデメリット

                          PWAは利用者・開発者のどちらの視点でもメリットが多い仕組みです。しかし、一部知っておきたいデメリットもあります。

                          4.1. iOSの場合は機能が制限される

                          PWAはiOSで一部の機能が制限されることがあります。例えば、バックグラウンドでの同期(オフライン時の操作内容を保管しオンライン状態になったタイミングで同期する仕組み)やプッシュ通知の送信に関して、Androidよりも厳しい制約が存在します。

                          ただし、以前のiOSでは、そもそもPWAからのプッシュ通知は送信できませんでした。現在は条件つきで送信できるようにアップデートされており、今後も改善が進む可能性はあります。

                          4.2. ブラウザによって動作が異なる

                            PWAは起動させるブラウザに動作が左右されます。ユーザーがマイナーなブラウザを利用していたり、あるいは大手ブラウザでもアップデートで大きく機能が更新されたりすると、PWAが正常に動作しないことがあります。

                            5. PWAを導入して成功した事例を紹介

                            よりイメージをつかむために、PWAの導入に成功した事例を見ていきましょう。

                            5.1. 事例1

                              ある大手不動産紹介サイトでは、PWAにより、ページ読み込み時間の高速化とプッシュ通知の有効活用を実現しています。

                              膨大な数の物件を取扱う同サイトでは、どうしてもWebページの読み込みに時間がかかるため、ユーザー直帰率を下げるための対策が急務でした。解決策として当初はネイティブアプリのダウンロードを促しましたが、思ったような効果は得られず、PWAの導入に舵を切りました。

                              PWAの実装後は、サイト(ランディングページ)の読み込み時間を75%も削減することに成功。また、新しい物件の情報をプッシュ通知で受け取れる機能を提供した結果、通知開封率は31%と驚異的な水準を記録しました。

                              5.2. 事例2

                              ある大手音楽配信サービスでは、PWAの導入により、月間アクティブユーザーや利用時間の向上を実現しました。

                                元々同サービスでは既にネイティブアプリを提供中でしたが、アプリストアが課す30%もの手数料を巡り、ストア側と対立が深まっていました。そこで、アプリストアに依存しないPWAの開発を決意。特徴である動作の軽快さを活かしつつ、洗練されたUIを意識しながらアプリを作成し、提供をはじめました。

                                結果、PWAの提供開始後には月間アクティブユーザーが約30%も増加。月間平均リスニング時間も約40%向上するなど、大きな成果を獲得しています。

                                6. まとめ

                                PWAはネイティブアプリのようにWebサイト・Webアプリを動作させる仕組みです。高速な動作や開発コストの低さなどの魅力があります。しかし、ネイティブアプリよりもコストが低いとはいえ、PWAの開発にはITの知見も求められます。

                                Brazeでは、マーケターを支援する多様な機能を提供しています。PWAのようにプッシュ通知を送信できるのはもちろん、送信内容のパーソナライズ化や、最適な送信タイミングのAI分析といった、PWAでは難しい機能まで搭載しています。アプリマーケティングに向けた最初のツールとして、ぜひ導入をご検討ください。

                                >>Brazeへのお問い合わせはこちら



                                Team Braze

                                Team Braze

                                関連コンテンツ

                                入門コンテンツ

                                クッキー(Cookie)レスとは?広告やマーケティングへの影響、対策方法について

                                もっと読む

                                ロイヤルカスタマーの定義や重要性は?育成のメリットや役立つツールについても紹介

                                もっと読む

                                ペルソナの意味とは?設定方法やマーケティングにおける重要性を解説

                                もっと読む

                                セグメンテーションとは?分類方法や重要な要素、活用事例について解説

                                もっと読む