お問い合わせ2019.04.26世界中の多くのサービスでPWAを導入!マーケターが知っておきたい今話題のPWAとは?社会のIT化により、店舗の集客方法もすっかり変化しました。チラシやDMなどのアナログ的な集客方法に代わり、WEBサイトやSNSなど、デジタルのツールを利用した集客が全盛期を迎えています。Apps)」という新しい技術が登場しています。PWAは「Google」が推奨しているWEBサイト技術で、いってみれば「WEBサイト×ネイティブアプリ(「GooglePlay」や「AppStore」などでインストールして使う通常のアプリ)」のような性質を持っています。PWAにより、デジタルの集客方法に新たな変化が起こるかもしれません。今回は次世代のWEBサイト、PWAについてその概要やWEBサイトやネイティブアプリとの違い、メリット・デメリットなど、幅広い観点からご紹介をしていきます。「PWAについて今のうちに知識を仕入れて、自店舗の集客にも将来活用できるようにもなりたい」という店舗オーナーの方はぜひご覧ください。目次1.PWAとは2.WEBとネイティブアプリとPWAの違い3.PWAのメリットとデメリットとは?4.PWA実装事例5.まとめ11.PWAとはPWAとは、「進んでいる・革新的なWEBアプリケーション」のような意味で、WEBサイトの次世代技術「モダンWEB(WEBアプリなど)」の一つです。ネーミングにアプリという名前が冠されている通り、WEBサイトでありながらネイティブアプリのような特徴を色濃く持つ、既存のWEBサイトの概念を覆すような革新的な機能が取り入れられています。PWAは、「ServiceWorkerを」ベースにして制作されます。ServiceWorkerとは、WEB上で動くプログラミング言語である「JavaScript」で作られたプログラム環境で、WEBサイトのバックグラウンド(ユーザーがWEBサイトを閲覧などしている背後)で起動します。PWAが脚光を浴びたのは2015年5月のこと。I/O」でPWAについてのプレゼンテーションが行われ、認知度が向上。Edge」などはServiceWorkerに未対応でした。Worderに対応しました。Edge(一部機能に対応)など、機能が制限されているものもありますが主要ブラウザーではServiceWorkerを軒並みサポートしています。日本国内ではiOSのSafariもServiceWorkerに対応したことで、ServiceWorkerに対応しているブラウザーシェアが2倍に跳ね上がりました。ガラパゴス市場といわれ、「iPhone」のシェアが国外と比較すると非常に高い日本では、「iPhoneでPWAがしっかり使えるか」が、PWAが普及するための重要なカギでした。iPhoneでもPWAが利用できる土壌が整ったことにより、日本国内でもPWAを導入しようとする動きが広がりつつあります。ちなみに海外ではGoogleの「Android」搭載スマートフォンのシェアが高いため、すでにServiceWorkerを使ってのPWA開発環境が整っている状況。日本よりもさまざまなPWAを利用したサイトが制作されるなど、日本よりも海外の方がPWAの普及は早くなりそうです。最新鋭のWEBサイト技術であるPWAですが、そもそもWEBサイトやネイティブアプリと何が違うのでしょうか?ここからはPWAとWEBサイト、ネイティブアプリの違いを表での比較でご紹介していきます。WEB上でアクセスして使う。「HTML」、「CSS」、「JavaScript」などで構成され、「ServiceWorker」と連携。WEB上でアクセスして閲覧する。・キャッシュなどの仕組みもあるが、インターネットに接続していないと閲覧は難しい。・「WebAPI」などWEBサイトに動的なギミックを追加できる技術はあるが、PWAと比較すると機能の自由度は低い。ストアアプリからインストールしてローカル環境で利用。「JAVA」や「C言語」などで構成され、オフラインでも安定して使いやすい。・オフラインでも利用でき、処理も高速である。・動的なエフェクトや機能の実装もWEBサイトよりネイティブのほうがリッチ。・ストアアプリなどからインストールする手間がかかり、開発費や維持費が高くなりがち。WEBサイトはプル型なので、有益な情報をリアルタイムで、相手にわかるように表示することができません。集客上重要になるのは、「有益な情報をリアルタイムでお客様にわかるように届けられるか」です。この点ではプッシュ通知などでクーポンやセール通知など、お客様に重要な情報をリアルタイムで発信できるネイティブアプリのほうが有利です。このネイティブアプリのメリットを、WEBサイトのメリットと組み合わせて集客ができるのがPWAです。PWAではWEBサイトであるにもかかわらず、バックグラウンドで動作するServiceWorkerと連携することで、相手が自店舗のサイトを閉じていてもプッシュ通知などで情報を発信可能。ネイティブアプリと同じようにオフラインでも安定して、そして快適に各ページを読み込みできます。ネイティブアプリのデメリットである「アプリストアからインストールする手間」がなくなるので、よりスムーズにお客様がアプリ形式で店舗の情報を閲覧することができます。開発費や維持費などがネイティブアプリに対して安くなるのもPWAのメリットです。3.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ですが、デメリットもあります。・HTTPS環境が必要である・現状では他ツールと併用しなければならず、管理が面倒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サイトを今から用意するならば、「他ツールも含めて自店舗が集客をしっかり行える体制が整えられるか」をしっかり確認する必要があります。4.PWA実装事例ここからはPWAの実装事例3つをお伝えしていきます。TwitterLite国内でもユーザーが4500万人を突破した人気SNS「Twitter」でも、「TwitterLite」というPWAのWEBサイトを提供しています。TwitterLiteではTwitterアプリと同じような直感的な操作が可能で、訪問別のページビュー(ユーザーが見たWEBサイト内ページの総数)が65%、ユーザーのツイートも75%増加しました。アプリがインストールできない環境でもさっと起動して使える利便性が受けているようで、自店舗でもお客様が自店舗アプリをダウンロードできないときの代替手段になりそうです。PWAを併用することで、ユーザーにとって利便性の高いPWAのWEBサイトを構築しています。初動はAMPを用いた高速化、その後はユーザーが楽天レシピのページを読み込みするごとにPWAによるリッチな機能が利用できるようになっています。楽天レシピではこの取り組みによってページへの滞在時間が50%増加、アイコンを追加したユーザーの再訪問率が70%増加するなど、目覚ましい実績を上げています。自店舗でもAMPとPWAを併用することで、より満足度の高い顧客体験をユーザーができるようになるかもしれません。SUUMO「株式会社リクルートホールディングス」が運営している不動産情報ポータルサイト「SUUMO」は、国内で先駆けてPWAのWEBサイト内実装を行っています。スマホサイトもユーザーが操作しやすいように大きめのメニューボタンなど、ネイティブアプリのような作りでなっていて使いやすいのが特徴。SUUMOはPWA導入によりWEBサイトの読み込み時間が4分の1になり、プッシュ通知も多くのユーザーが開封してくれています。自店舗でもWEBサイト読み込みが速くなり、プッシュ通知の発信などユーザーに有益な情報を届けやすい環境をPWAで構築できます。5.まとめ今回は次世代のWEBサイトであるPWAについて、メリットや導入事例などをご紹介してきました。PWAを用いたWEBサイトではWEBサイトとネイティブアプリ、両方の持ち味を組み合わせてユーザーに提供できます。自店舗アプリを制作して集客に使えば、PWAのデメリットをカバーしながら集客を行うことも可能です。プッシュ通知やアイコン表示などの集客に有効な施策を実行したい場合は、自店舗アプリを制作代行してもらいましょう。弊社アプリ制作サービス「店舗アプリ」では、オフラインでの安定した読み込み、それにプッシュ通知やアイコン追加など、各機能でお客様を優良顧客へとしっかり誘導できるアプリを制作し、店舗の集客を強力にサポートします。気になる方はぜひ下記URLからお問い合わせをよろしくお願いいたします。大学関係者必見!学生とのコミュニケーションは大学専用アプリで!RECOMMEND関連性の高い記事2018.10.24スタバが「携帯アプリ」を客に勧める理由2018.12.13スマホで集客する時代!LINE@と専用アプリ集客、どれを選べば...2020.1.30iOSアプリを初心者が作るのは大変!店舗アプリProを活用しよう!2019.5.24初回来店のあとの再来店施策を「している」お店と「していない」お...2019.9.20スマホ決済アプリが急増中!日本もキャッシュレスの時代へ2019.8.29POSレジ連携会員カードアプリ店舗アプリは、店舗の集客に必要な機能が詰まった世界1のスマホO2Oアプリ制作運用サービスです。gp只今キャンペーン実施中!フリーダイヤル平日10:00~18:000800-888-2794お問い合わせ只今キャンペーン実施中!お問い合わせはこちら。