店舗サイトをPWAにするメリットは？予約・メニュー・クーポンへの再訪導線を作る

飲食店、美容室、サロン、クリニック、小売店などの店舗サイトも、PWAと相性のいい使い方があります。

ただし、必ずしも「店舗専用アプリを作る」という話ではありません。

店舗サイトには、ユーザーが来店前に何度も確認する情報があります。

予約、メニュー、営業時間、アクセス、クーポン。こうしたページへの入口をホーム画面へ置く。

それだけでも、店舗サイトをPWAにする意味は十分にあります。

店舗サイトは「一度見て終わり」ではない

店舗を初めて知った時は、Google検索やSNS、地図サービスなどからサイトへアクセスすることが多いと思います。

検索・SNS
↓
店舗サイト
↓
メニューを見る
↓
予約する

でも、一度利用した後は状況が変わります。

次に知りたいのは店舗の説明ではなく、

• 今日営業しているか
• 予約できるか
• メニューはいくらか
• 住所はどこか
• クーポンはあるか

といった具体的な情報かもしれません。

つまり店舗サイトには、初回訪問だけでなく再訪する理由があります。

毎回店名を検索する必要はない

一度知っている店舗へもう一度アクセスする時でも、よくある流れは、

ブラウザを開く
↓
店名を検索
↓
検索結果から公式サイトを探す
↓
予約ページやメニューへ移動

となります。

もちろんこれでも利用できます。

でも、その店舗を何度も利用する人なら、毎回検索する必要はありません。

PWAとしてホーム画面へ置けば、

ホーム画面
↓
店舗アイコン
↓
店舗サイト

という入口を作れます。

Webサイト自体を作り直すのではなく、既存のWebサイトへ戻る距離を短くする考え方です。

OJapp Tips｜合わせて読みたい
PWAをオフライン対応させるには？Service Workerとキャッシュの基本をやさしく解説 の解説が役に立ちます。

予約ページを直接ホーム画面の入口にする

店舗によっては、トップページより予約ページの方が繰り返し使われます。

例えば美容室なら、

ホーム画面
↓
「予約する」
↓
予約ページ
↓
日時を選ぶ

という導線にできます。

飲食店なら席の予約、クリニックなら診療予約、サロンなら施術予約など、ユーザーが毎回行う操作へ直接つなげられます。

PWAの起動先は必ずトップページである必要はありません。

start_url を使って、そのPWAをホーム画面から開いた時の入口を設計できます。

起動ページの考え方については、start_url: “.” が最強説｜PWAで“入れたページに戻る”を成立させる考え方でも詳しく紹介しています。

メニューをホーム画面に置く使い方もある

飲食店なら、店舗そのものよりメニューを何度も見る人もいます。

例えば、

今日何食べよう？
↓
ホーム画面の店舗アイコン
↓
メニュー
↓
来店

という使い方です。

テイクアウトやモバイルオーダーがある店舗なら、さらに目的が明確になります。

ホーム画面
↓
テイクアウトメニュー
↓
注文

店舗サイトを単なる会社案内として見るのではなく、来店前に使うWebツールのように考えることもできます。

クーポンをホーム画面へ置くという考え方

店舗サイトとホーム画面の組み合わせで分かりやすいのがクーポンです。

例えばWeb上にクーポンページがあるなら、

クーポンページを見る
↓
ホーム画面へ追加
↓
来店時にホーム画面から開く
↓
クーポンを提示

という使い方ができます。

ブラウザのタブを何日も残しておいたり、スクリーンショットを探したりする必要がありません。

ただし、クーポンの利用条件や有効期限、使用済み判定などが必要なら、それらはWebサービス側で実装する必要があります。

PWAにしただけでクーポン管理機能が自動的に作られるわけではありません。

ホーム画面から開いた時だけ特典を表示する方法もある

PWAでは、JavaScriptでstandalone表示かどうかを確認できます。

そのため、通常のブラウザ訪問では表示せず、ホーム画面から起動した時だけ案内を表示する設計もできます。

例えば、

ホーム画面から起動
↓
「いつもありがとうございます」
↓
ホーム画面利用者向けの案内を表示

といった使い方です。

具体的な判定方法は、PWAをホーム画面から開いた時だけ表示を変える方法｜限定案内・クーポンにも使えるで紹介しています。

ただし、standalone判定は「この特定の店舗アイコンを必ずホーム画面から開いた」という厳密な本人確認や認証の仕組みではありません。

高額な特典や不正利用を防ぐ必要がある仕組みなら、サーバー側の認証や利用管理を別に用意するべきです。

店舗全体を1つのPWAにするなら1S1A

店舗サイト全体を1つのアプリとして扱うなら、1S1A（One Site. One App.）の設計が分かりやすいです。

店舗アイコン
↓
店舗トップ
↓
メニュー
予約
アクセス
お知らせ

ユーザーは店舗そのものをホーム画面へ残します。

行きつけの店や定期的に利用するサービスなら、この形が自然です。

特定ページを残すなら1P1Aという選択肢もある

一方、店舗サイトの中でも特定のページだけをよく使う場合があります。

例えば、

/menu/
↓
「メニュー」

/reservation/
↓
「予約」

/coupon/
↓
「クーポン」

のように、それぞれを別のホーム画面エントリとして設計する方法です。

これは1P1A（One Page. One App.）の考え方です。

店舗サイト全体ではなく、ユーザーが必要な機能やページをホーム画面へ置きます。

店舗ごとにアイコンを置く使い方も分かりやすい

複数の店舗を利用する人なら、ホーム画面にそれぞれの店舗への入口を置くこともできます。

☕ Coffee Shop
🍜 Ramen Shop
✂️ Hair Salon
🏥 Clinic

それぞれがWebサイトへの入口ですが、ユーザーから見ると「よく使う店舗」がホーム画面に並びます。

アプリストアから各店舗専用アプリを探す必要はありません。

店舗側も、ホーム画面への入口を作るためだけにネイティブアプリを開発する必要はありません。

小規模店舗ほど「専用アプリを作らない」という選択肢がある

大規模チェーンなら、ネイティブアプリを開発して会員証、ポイント、決済、モバイルオーダーなどを統合する意味があります。

一方、小さな飲食店や美容室が同じ規模のアプリを作る必要があるとは限りません。

必要なのが、

• 予約
• メニュー
• 営業時間
• アクセス
• お知らせ
• クーポン

程度なら、すでにWebサイトで提供できていることも多いです。

その場合は、

既存の店舗サイト
＋
ホーム画面への入口

という構成でも十分に成立します。

「アプリが欲しい」ではなく、「お客さんが次に簡単に戻れる入口が欲しい」と考えると、必要なものがかなりシンプルになります。

アプリストアからの集客とは役割が違う

もちろん、PWAをホーム画面へ置く方法にはネイティブアプリとは違う部分があります。

アプリストアに掲載されることで新しいユーザーに発見してもらう、という導線とは別です。

店舗サイトのPWAで考えているのは、すでに店舗を知った人との再訪導線です。

店舗を知らない
↓
検索・SNS・地図・口コミなどで発見
↓
店舗サイトを見る
↓
気に入る
↓
ホーム画面へ残す
↓
次回は直接戻る

PWAが新規集客をすべて置き換えるわけではありません。

検索やSNSなどで一度接点を持った後、その次の入口を作る役割です。

店舗にとってホーム画面はかなり強い場所

スマートフォンのホーム画面には、ユーザー自身が選んだアプリや機能が並んでいます。

そこに店舗への入口が残れば、ブラウザの履歴や検索結果より見つけやすい場所に存在できます。

ただし、ホーム画面へ追加されたからといって必ず来店されるわけではありません。

アイコンを置いてもらうこと自体を目的にするのではなく、

予約が楽になる
メニューをすぐ見られる
クーポンをすぐ出せる
営業時間を確認できる

といった実用的な理由を作ることが重要です。

「ホーム画面に追加してください」だけでは伝わりにくい

店舗サイトでも、単にPWAという技術を説明して追加を求める必要はありません。

例えば予約ページなら、

よくご利用いただく方へ
次回からホーム画面から予約できます

メニューページなら、

メニューをホーム画面に残しておくと
次回すぐ確認できます

クーポンなら、

このクーポンをホーム画面に残す

という案内の方が、追加する理由が伝わります。

PWAを売るのではなく、その後の便利さを伝えます。

店舗サイトは「ホーム画面マーケティング」と相性がいい

私は、Webページへの入口をユーザー自身のホーム画面へ残してもらう考え方をホーム画面マーケティングと呼んでいます。

店舗では、この考え方がかなり分かりやすく使えます。

検索やSNSで店舗を知る
↓
来店する
↓
気に入る
↓
店舗や予約ページをホーム画面へ残す
↓
次回は自分から開く

Push通知のように店舗側から毎回呼び戻すのではありません。

ユーザーが必要な時に、自分で店舗への入口を開きます。

「また来てください」と通知し続ける方法とは違う、静かな再訪導線です。

店舗サイトをPWAにするなら「次に何をしたいか」を考える

店舗サイトをPWAにする時、最初に考えたいのは技術ではありません。

その店舗を一度利用した人が、次にサイトを開く時に何をしたいのかです。

次も予約したい
↓
予約ページ

メニューを確認したい
↓
メニューページ

営業時間を見たい
↓
店舗情報

特典を使いたい
↓
クーポンページ

目的が分かれば、ホーム画面に置くべき入口も見えてきます。

店舗全体を置くのか。

予約を置くのか。

メニューを置くのか。

ユーザーによって必要な入口が違うなら、ページ単位で考える方法もあります。

店舗アプリを作らなくても「いつもの店」はホーム画面に置ける

店舗のデジタル施策というと、専用アプリ、ポイントアプリ、Push通知など大きな仕組みを考えがちです。

もちろん、それらが必要な店舗もあります。

でも、もっと小さく始めることもできます。

今ある店舗サイトを使う。

今ある予約ページを使う。

今あるメニューを使う。

そのURLを、必要なユーザーが自分のホーム画面へ残せるようにする。

店舗サイトをPWAにする価値は、巨大な店舗アプリを作ることだけではなく、「いつもの店」へ戻る入口をユーザーのホーム画面に作れることにもあると思っています。