PWAは世界を席巻するベストなデジタル施策か？マーケターが知っておきたい今話題のPWAとは

社会のIT化により、店舗の集客方法もすっかり変化しました。チラシやDMなどのアナログ的な集客方法に代わり、WEBサイトやSNSなど、デジタルのツールを利用した集客が全盛期を迎えています。

特にWEBサイトでは、「PWA（Progressive Web Apps）」という新しい技術が登場しています。PWAは「Google」が推奨しているWEBサイト技術で、いってみれば「WEBサイト×ネイティブアプリ（「GooglePlay」や「AppStore」などでインストールして使う通常のアプリ）」のような性質を持っています。

PWAにより、デジタルの集客方法に新たな変化が起こるかもしれません。

今回は次世代のWEBサイト、PWAについてその概要やWEBサイトやネイティブアプリとの違い、メリット・デメリットなど、幅広い観点からご紹介をしていきます。「PWAについて今のうちに知識を仕入れて、自店舗の集客にも将来活用できるようにもなりたい」という店舗オーナーの方はぜひご覧ください。

 

 

PWAとは

 

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と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のメリットです。

 

 

PWAのメリットとデメリットとは？

 

ここからは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実装事例

 

ここからは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で構築できます。

 

 

まとめ

 

今回は次世代のWEBサイトであるPWAについて、メリットや導入事例などをご紹介してきました。

PWAを用いたWEBサイトではWEBサイトとネイティブアプリ、両方の持ち味を組み合わせてユーザーに提供できます。また自店舗アプリを制作して集客に使えば、PWAのデメリットをカバーしながら集客を行うことも可能です。

プッシュ通知やアイコン表示などの集客に有効な施策を実行したい場合は、自店舗アプリを制作代行してもらいましょう。

弊社アプリ制作サービス「店舗アプリ」では、オフラインでの安定した読み込み、それにプッシュ通知やアイコン追加など、各機能でお客様を優良顧客へとしっかり誘導できるアプリを制作し、店舗の集客を強力にサポートします。

気になる方はぜひ下記URLからお問い合わせをよろしくお願いいたします。

店舗アプリお問い合わせURL：https://tenpoapp.com/inquiry-apps/