PWA（Progressive Web Apps）とは？基本の仕組みから注目される理由を紹介
業種全般
スマートフォンの普及により、店舗の集客や顧客管理はデジタル化が急速に進んでいます。その中でも注目されているのが、Webサイトでありながらアプリのように利用できる「PWA（Progressive Web Apps）」です。
PWAはアプリストアを介さずに利用できる手軽さと、プッシュ通知などのアプリ機能を兼ね備えており、顧客との接点強化や再来店促進に活用されています。
本記事では、PWAの基本的な仕組みや注目されている理由、導入メリットについて分かりやすく解説し、店舗集客への活用方法をご紹介します。
PWA対応の店舗アプリなら、アプリストアを経由せずブラウザから簡単に利用を開始でき、ダウンロードの手間なく顧客との接点を構築できます。プッシュ通知や会員証機能も活用できるため、再来店促進や販促施策を効率的に実現し、顧客体験の向上とリピート率の最大化に貢献します。
店舗アプリ導入で、リピート率 UP と集客の自動化を実現。
貴社の売上を最大化する仕組みをご提案します。
- プッシュ通知で開封率 UP！顧客接点を強化
- クーポン配信やポイント機能で再来店を促進
- 顧客データ分析で効率的なマーケティングを実施
サービス資料は完全無料！他社との比較検討も大歓迎です。
貴社の集客課題解決に繋がる具体的な導入メリットをご確認いただけます！
PWA（Progressive Web Apps）とは？
PWAとは、「進んでいる・革新的なWEBアプリケーション」のような意味で、WEBサイトの次世代技術「モダンWEB（WEBアプリなど）」の一つです。
ネーミングにアプリという名前が冠されている通り、WEBサイトでありながらネイティブアプリのような特徴を色濃く持つ、既存のWEBサイトの概念を覆すような革新的な機能が取り入れられています。
PWAは、「ServiceWorkerを」ベースにして制作されます。ServiceWorkerとは、WEB上で動くプログラミング言語である「JavaScript」で作られたプログラム環境で、WEBサイトのバックグラウンド（ユーザーがWEBサイトを閲覧などしている背後）で起動します。
PWAが脚光を浴びたのは2015年5月のこと。Googleが開催する開発者向けの会議である「Google I/O」でPWAについてのプレゼンテーションが行われ、認知度が向上。ただし初期からPWAに対応していたのはPWAを推奨しているGoogleの「Google Chrome」くらいで、「Apple」の「Safari」や「Microsoft」の「Microsoft Edge」などはServiceWorkerに未対応でした。
しかし近年は状況が変化し、2018年3月にはSafari、4月にはMicrosoft EdgeがService Worderに対応しました。
現在ServiceWorkerに対応しているウェブブラウザーは、
- Google Chrome
- Safari（一部機能に対応）
- FireFox（一部機能に対応）
- Microsoft Edge（一部機能に対応）
など、機能が制限されているものもありますが主要ブラウザーではServiceWorkerを軒並みサポートしています。
日本国内ではiOSのSafariもServiceWorkerに対応したことで、ServiceWorkerに対応しているブラウザーシェアが2倍に跳ね上がりました。ガラパゴス市場といわれ、「iPhone」のシェアが国外と比較すると非常に高い日本では、「iPhoneでPWAがしっかり使えるか」が、PWAが普及するための重要なカギでした。iPhoneでもPWAが利用できる土壌が整ったことにより、日本国内でもPWAを導入しようとする動きが広がりつつあります。
ちなみに海外ではGoogleの「Android」搭載スマートフォンのシェアが高いため、すでにServiceWorkerを使ってのPWA開発環境が整っている状況。日本よりもさまざまなPWAを利用したサイトが制作されるなど、日本よりも海外の方がPWAの普及は早くなりそうです。
関連記事：店舗の認知度を上げる方法｜デジタルとリアルの最適解とは？
PWA（Progressive Web Apps）が注目されている理由
PWAは、Webサイトでありながらネイティブアプリのような機能を提供できる新しい技術として注目されています。アプリの利便性とWebの手軽さを兼ね備えており、ユーザーと企業の双方にメリットがあります。
導入や利用のハードルを下げながら、顧客体験の向上や再来店促進などに活用できる点が評価されています。
アプリストア不要で手軽に利用を開始できる
PWAの大きな特徴は、App StoreやGoogle Playなどのアプリストアを経由せず、ブラウザから直接利用を開始できる点です。ユーザーはWebサイトにアクセスするだけで、ホーム画面に追加してアプリのように利用できます。
従来のアプリのようにダウンロードやインストールの手間がないため、利用開始までのハードルを大幅に下げることができます。これにより、ユーザーの離脱を防ぎ、より多くの顧客にサービスを利用してもらいやすくなる点が注目されています。
プッシュ通知などアプリと同等の機能を利用できる
PWAはWebベースでありながら、プッシュ通知やホーム画面アイコンの追加など、ネイティブアプリと同等の機能を利用できます。これにより、新商品やキャンペーン情報をユーザーのスマートフォンに直接届けることが可能になります。
タイムリーな情報発信は、顧客との接点を維持し、再来店や再利用を促すうえで非常に効果的です。Webサイトの手軽さとアプリの機能性を両立できる点が、PWAが注目されている理由の一つです。
開発・運用コストを抑えながら導入できる
PWAはWeb技術をベースに開発されるため、iOSとAndroidそれぞれのネイティブアプリを個別に開発する必要がありません。そのため、開発コストや運用コストを抑えながら導入できるメリットがあります。
また、Webサイトと同様に更新が可能なため、アプリストアの審査を待つ必要がなく、迅速に機能改善や情報更新を行えます。コスト効率と運用の柔軟性を兼ね備えている点も、多くの企業に選ばれている理由です。
PWAとWEBサイト、ネイティブアプリの違い
最新鋭のWEBサイト技術であるPWAですが、そもそもWEBサイトやネイティブアプリと何が違うのでしょうか？ここからはPWAとWEBサイト、ネイティブアプリの違いを表での比較でご紹介していきます。
| 構造 | 機能 | |
| PWA | WEB上でアクセスして使う。「HTML」、「CSS」、「JavaScript」などで構成され、「ServiceWorker」と連携。ServiceWorkerはタブを閉じてもバックグラウンドで起動し続ける。 | ・プッシュ通知やアイコン追加などネイティブアプリと同じように可能で機能をリッチにできる ・プリキャッシュ機能により、前もって複数のページをあらかじめ読み込めるので、オフラインでも安定して動作可能で読み込みも高速である ・通常のWEBサイトと同じように検索エンジンなどからすぐアクセスでき、ネイティブアプリのようにインストールの手間がかからない ・開発費や維持費がネイティブアプリより安い |
| WEBサイト | WEB上でアクセスして閲覧する。「HTML」、「CSS」、「JavaScript」などで構成され、タブを閉じると起動は停止する。 | ・ウェブブラウザーで表示させて使うのが基本 ・キャッシュなどの仕組みもあるが、インターネットに接続していないと閲覧は難しい。更新時も再読み込みが必要 ・「WebAPI」などWEBサイトに動的なギミックを追加できる技術はあるが、PWAと比較すると機能の自由度は低い。 |
| ネイティブアプリ | ストアアプリからインストールしてローカル環境で利用。「JAVA」や「C言語」などで構成され、オフラインでも安定して使いやすい。 | ・プッシュ通知やアイコン追加など、スマホユーザーに適した機能を多く利用可能 ・オフラインでも利用でき、処理も高速である。 ・動的なエフェクトや機能の実装もWEBサイトよりネイティブのほうがリッチ。 ・ストアアプリなどからインストールする手間がかかり、開発費や維持費が高くなりがち。 |
WEBサイトはプル型なので、有益な情報をリアルタイムで、相手にわかるように表示することができません。集客上重要になるのは、「有益な情報をリアルタイムでお客様にわかるように届けられるか」です。この点ではプッシュ通知などでクーポンやセール通知など、お客様に重要な情報をリアルタイムで発信できるネイティブアプリのほうが有利です。
このネイティブアプリのメリットを、WEBサイトのメリットと組み合わせて集客ができるのがPWAです。
PWAではWEBサイトであるにもかかわらず、バックグラウンドで動作するServiceWorkerと連携することで、相手が自店舗のサイトを閉じていてもプッシュ通知などで情報を発信可能。しかもネイティブアプリと同じようにオフラインでも安定して、そして快適に各ページを読み込みできます。
またネイティブアプリのデメリットである「アプリストアからインストールする手間」がなくなるので、よりスムーズにお客様がアプリ形式で店舗の情報を閲覧することができます。開発費や維持費などがネイティブアプリに対して安くなるのもPWAのメリットです。
関連記事：スタンプカードはもう紙じゃない！デジタルアプリ化で店舗集客を加速させる方法
店舗アプリ導入で、リピート率 UP と集客の自動化を実現。
貴社の売上を最大化する仕組みをご提案します。
- プッシュ通知で開封率 UP！顧客接点を強化
- クーポン配信やポイント機能で再来店を促進
- 顧客データ分析で効率的なマーケティングを実施
サービス資料は完全無料！他社との比較検討も大歓迎です。
貴社の集客課題解決に繋がる具体的な導入メリットをご確認いただけます！
PWA（Progressive Web Apps）のメリットとデメリットとは？
ここからはPWAのメリットやデメリットをご紹介していきます。
PWAのメリットとは
アイコン追加もしてもらいやすく、プッシュ通知を表示できる
既存のWEBサイトでもドラッグ＆ドロップでの要素の並び替えや、ダイナミックなアニメーションなど、ネイティブアプリに似た機能を搭載することは可能でした。しかしまだまだネイティブアプリに比べると足りない機能も存在し、大きなものが「アイコン追加と、プッシュ機能」の2つです。
アイコン追加については、実は既存のWEBサイトでも可能です。しかしウェブブラウザーからの設定から「ブックマークを追加」を行わないとアイコンに追加できないという面倒くささから、意外と利用していないユーザーも多いのが現状。
ホーム画面に自店舗WEBサイトのアイコンがあるとお客様が「この店舗のWEBサイトをまた見てみよう」となりやすく、自店舗のWEBサイトに再訪問してくれる可能性が高まります。このように自社WEBサイトをアイコン追加してもらうのは、自店舗のリピート集客などにも有効です。
またWEBサイトではネイティブアプリと違ってポップアップ表示でのプッシュ通知ができません。これはWEBサイトの大きな弱点の1つで、「アプリのようにWEBサイトでもプッシュ通知が表示できればな」と思っているWEB開発者も多くいました。
PWAでは既存のWEBアプリの問題を解決。PWAのWEBアプリをユーザーが表示したときにポップアップで「アイコンを追加するか、しないか」のメッセージを簡単に出せます。ユーザーが許可するとホーム画面にすぐアイコンが作成されるので、ウェブブラウザーの設定からいちいちWEBアプリをブックマークしなくてもよい利便性がメリットです。
また画期的なのがプッシュ通知を表示可能なこと。WEBサイトをWEBアプリ化する際も搭載できなかったプッシュ通知が使えるようになったのは、店舗の集客においては大きなメリットです。
例えば「本日限定の時限式クーポンを配布しよう」、「タイムセールの告知を今すぐしたい」といったときも、ネイティブアプリのように設定を行えば、簡単にユーザーのスマホにプッシュ通知でクーポンやセール情報の発信が可能です。簡単なアイコン追加とプッシュ通知での情報発信、ネイティブアプリの特徴である2つの機能を搭載可能なのがPWAの特徴です。
WEB分析やSEO対策など、既存のWEBサイトと同じことが可能
ネイティブアプリとWEBアプリは、使われている言語や処理の呼び出し方などに違いがあります。WEB分析ツールがネイティブアプリでも導入できれば便利なのですが、残念ながらネイティブアプリの分析は専用のツールを使わなければいけません。
PWAはネイティブアプリのような機能を持ったWEBサイトです。本質的にはWEBサイトの一種なので、既存のWEBアプリと同じようにWEB分析ツールを利用可能です。
「GoogleAnalytics」や「Ptengine」などのWEB分析ツールをPWAで利用すれば、分析担当者側もWEBサイトとネイティブアプリ、両方の分析をするときに別々の分析ツールを使わずに済み、分析時間の削減にもつながります。自店舗でも分析するツールを少なくまとめられるのは、分析結果からの業務改善店の洗い出しなど、分析以外の時間が割きやすくなるのでメリットです。
また自店舗のアプリをストアアプリ内のキーワードで上位に表示させやすくするといった対策を行うには、「ASO（アプリ検索最適化）」の観点に基づいた作業をしなければならず、こちらもWEBサイトのSEO（検索エンジン最適化）まで同時に行い場合、時間がかかります。
しかしPWAはWEBサイトの一種なので、SEO対策さえすれば検索エンジンの上位表示によりインストールしてくれるユーザーも増え、ASO対策を行う必要もありません。
WEB分析やSEO対策など、WEBサイトと同じ集客対策が取れるのもPWAのメリットです。
オフラインでも快適に、そして安定して動作する
WEBサイトにも、読み込んだページのコピーを閲覧しているユーザーのスマホなどに残すキャッシュ機能は以前から存在しています。しかしキャッシュ機能にも限界があり、オフラインでもWEBサイトを安定して読み込めるわけではありませんでした。またWEBサイトはページの読み込み時間も遅くなりやすく、読み込みが遅いとユーザーが不満を募らせ離脱してしまう可能性が高くなってしまいます。
PWAではWEBサイトを読み込んだときに、自動的に他ページをあらかじめキャッシュしておくプリキャッシュ機能があります。プリキャッシュ機能により、ユーザーがオフラインで自店舗サイトを閲覧しているときもネイティブアプリのように安心してページを読み込めます。
またキャッシュをユーザーのローカル環境に用意できるということは、インターネットにいちいち接続しなくても次々他のページを読み込むことができるということ。よってPWAのWEBサイトは読み込み速度が圧倒的に速いので、WEBサイトを閲覧しているユーザーの離脱率低下にもつながります。
後述でPWAの導入事例をご紹介しますが、実際PWAを導入した企業でもユーザーのWEBサイトの離脱率低下がはっきり確認できたという報告があります。
上記のようにメリットの多いPWAですが、デメリットもあります。
PWAのデメリットとは
HTTPS環境が必要である
「HTTP（WEBページで使われる通信時の決まり）」は、現在新しい技術である「HTTPS（WEBページ等のデータを送受信するときにデータをSSL化（暗号化する）決まり）」への移行段階にあります。PWAのWEBサイトを制作するときに必要なServiceWorkerも、WEBサイトがHTTPS化していないと利用できません。
今からPWAのWEBサイトを一から作る場合はHTTPSの対応も楽なのです。しかし従来のHTTPのままのWEBサイトをHTTPS化しようとするとHTTPS化実行に必要な証明書の発行や設置など、技術的な手間がかかる可能性も。
ただしWEBサイトをHTTPS化することはSEO対策としても必須です。HTTPS化されていないWEBサイトで自店舗の集客を行っているときは、今からでも遅くはないのでHTTPS移行の準備をしておきましょう。
現状では他ツールと併用しなければならず、管理が面倒
PWAは集客にも便利であることはお分かりいただけたと思います。ただし現状PWAは他集客ツールの代わりになるまではまだ技術が成熟していません。
各主要ウェブブラウザーのPWAへの完全対応など、課題がまだたくさんあります。自店舗への集客をしっかり行うには、やはり既存のWEBサイト、WEBアプリやネイティブアプリ、SNSなど他コンテンツの活用が必要です。
しかしWEBサイトやWEBアプリ、ネイティブアプリ、SNS、PWA。極端な話全ツールを活用して集客を行うにはメンテナンスや分析にも手間がかかってしまいます。もしPWAのWEBサイトを今から用意するならば、「他ツールも含めて自店舗が集客をしっかり行える体制が整えられるか」をしっかり確認する必要があります。
関連記事：ポイントカードをアプリ化するべき理由！デジタル化のメリットとは？
PWA（Progressive Web Apps）実装事例
ここからはPWAの実装事例3つをお伝えしていきます。
TwitterLite
国内でもユーザーが4500万人を突破した人気SNS「Twitter」でも、「TwitterLite」というPWAのWEBサイトを提供しています。TwitterLiteではTwitterアプリと同じような直感的な操作が可能で、訪問別のページビュー（ユーザーが見たWEBサイト内ページの総数）が65％、ユーザーのツイートも75％増加しました。
アプリがインストールできない環境でもさっと起動して使える利便性が受けているようで、自店舗でもお客様が自店舗アプリをダウンロードできないときの代替手段になりそうです。
楽天レシピ
「株式会社楽天」が運営しているレシピ紹介サイト「楽天レシピ」は、「AMP（Googleなどが提供する、スマホでのWEBサイト読み込みを高速化する仕組み）」 と PWAを併用することで、ユーザーにとって利便性の高いPWAのWEBサイトを構築しています。
初動はAMPを用いた高速化、その後はユーザーが楽天レシピのページを読み込みするごとにPWAによるリッチな機能が利用できるようになっています。楽天レシピではこの取り組みによってページへの滞在時間が50%増加、アイコンを追加したユーザーの再訪問率が70％増加するなど、目覚ましい実績を上げています。
自店舗でもAMPとPWAを併用することで、より満足度の高い顧客体験をユーザーができるようになるかもしれません。
SUUMO
「株式会社リクルートホールディングス」が運営している不動産情報ポータルサイト「SUUMO」は、国内で先駆けてPWAのWEBサイト内実装を行っています。スマホサイトもユーザーが操作しやすいように大きめのメニューボタンなど、ネイティブアプリのような作りでなっていて使いやすいのが特徴
SUUMOはPWA導入によりWEBサイトの読み込み時間が4分の1になり、プッシュ通知も多くのユーザーが開封してくれています。自店舗でもWEBサイト読み込みが速くなり、プッシュ通知の発信などユーザーに有益な情報を届けやすい環境をPWAで構築できます。
PWAや店舗アプリの導入を検討している方にとって、実際の活用事例は非常に参考になります。導入前後でどのような成果が出たのか、どのような課題を解決できたのかを具体的に確認できるため、自社での活用イメージも明確になります。
導入事例はこちら
店舗アプリ導入で、リピート率 UP と集客の自動化を実現。
貴社の売上を最大化する仕組みをご提案します。
- プッシュ通知で開封率 UP！顧客接点を強化
- クーポン配信やポイント機能で再来店を促進
- 顧客データ分析で効率的なマーケティングを実施
サービス資料は完全無料！他社との比較検討も大歓迎です。
貴社の集客課題解決に繋がる具体的な導入メリットをご確認いただけます！
まとめ
今回は次世代のWEBサイトであるPWAについて、メリットや導入事例などをご紹介してきました。
PWAを用いたWEBサイトではWEBサイトとネイティブアプリ、両方の持ち味を組み合わせてユーザーに提供できます。また自店舗アプリを制作して集客に使えば、PWAのデメリットをカバーしながら集客を行うことも可能です。
プッシュ通知やアイコン表示などの集客に有効な施策を実行したい場合は、自店舗アプリを制作代行してもらいましょう。
弊社アプリ制作サービス「店舗アプリ」では、オフラインでの安定した読み込み、それにプッシュ通知やアイコン追加など、各機能でお客様を優良顧客へとしっかり誘導できるアプリを制作し、店舗の集客を強力にサポートします。
気になる方はぜひお問い合わせをよろしくお願いいたします。
