当サイト、オリジナルWordPressプラグイン「OJapp PWA Marketing」を使用しています。
各記事は専用アイコンでホーム画面に追加できます。ぜひお試しください。
PWAを作る時、どうしても「ホーム画面に追加できた！」というところがゴールになりがちです。
Manifestを設定して、アイコンを用意して、ホーム画面に追加。そこからstandaloneで起動できたら、とりあえずPWAとして形になった感じがします。
私もPWA LABで色々な設定を試している時は、「追加できるか」「どう表示されるか」をかなり検証してきました。
でも、その先を作っていくうちに考え方が少し変わりました。PWAはホーム画面に追加してもらったところが完成ではなく、むしろそこからが本番なんじゃないか。
ホーム画面に置かれたアイコンから、ユーザーが後日もう一度戻ってくる。その起動を判定して、Webとは少し違う体験を返し、実際に再訪されているか計測する。
今回は「PWAを作る方法」ではなく、ホーム画面へ追加された後に何をするかを考えてみます。
ホーム画面に追加できただけでは、まだ使われたとは限らない
PWAでは、ホーム画面への追加が分かりやすい成果に見えます。
自分のWebサイトに専用アイコンが付き、普通のアプリと同じようにホーム画面へ並ぶ。
これはもちろん大きな変化です。
ただ、そのアイコンが一度も押されなければどうでしょう。
ホーム画面に置かれたという事実はあっても、再訪の入口としてはまだ機能していません。
逆に、追加された数は多くなくても、そのアイコンから何度も起動されているなら、そのPWAはかなり意味のある場所を取れていることになります。
「追加されたか」より、その後「戻ってきたか」。
PWAを運用するなら、ここまで見た方が面白いと思っています。
ホーム画面はWebサイトへの新しい入口になる
通常、Webサイトへ戻ってくる入口はいくつかあります。
- Google検索
- SNS
- ブックマーク
- メール
- 他サイトからのリンク
PWAでは、ここにスマホのホーム画面を追加できます。
例えばWebツールなら、毎回検索する必要がありません。
商品ページなら、ショップのトップページから商品を探し直す必要もありません。
予約ページなら、店名を検索してサイトへ入り、予約ページを探す工程を減らせます。
ホーム画面のアイコンを1回押せば、目的のページへ直接戻れます。
この「次に戻ってくる入口を作る」という考え方については、ホーム画面マーケティングとは？PWAで「ページを届ける」という新しいWeb戦略でも詳しく書いています。
追加された後は、ホーム画面起動を判定できる
ここからがPWAの面白いところです。
ホーム画面からPWAとして開かれている場合、JavaScriptから現在の表示モードを確認できます。
const isPWA =
window.matchMedia('(display-mode: standalone)').matches ||
window.navigator.standalone === true;これによって、通常のブラウザから見ている状態と、ホーム画面側からstandaloneで開いている状態を分けられます。
つまり同じURLでも、
通常のWebアクセス
↓
普通のWeb体験
ホーム画面から起動
↓
PWA向けの体験という出し分けができます。
判定方法については、PWAをホーム画面から開いたか判定する方法｜display-mode: standaloneの使い方でコードを含めて解説しています。
ホーム画面から戻ってきた人だけ表示を変えられる
起動状態を判定できれば、ホーム画面ユーザーだけUIを変えることもできます。
例えば、
- 「ホーム画面に追加してください」という案内を消す
- ホーム画面専用メニューを出す
- 「おかえりなさい」と表示する
- 新しい機能を案内する
- 予約や購入へのショートカットを表示する
- ホーム画面ユーザー向けのOfferを表示する
といったことができます。
別のPWA専用ページを作る必要もありません。
同じページの中で、standaloneの時だけ要素を表示すればいいだけです。
if (isPWA) {
document.getElementById('home-message').hidden = false;
}通常のWeb訪問者と、一度ホーム画面へ置いて自分から戻ってきたユーザーでは状況が違います。
だったら、見せるものが少しくらい違ってもいい。
具体的な実装は、PWAをホーム画面から開いた時だけ表示を変える方法｜限定案内・クーポンにも使えるで紹介しています。
Pushしなくても、戻ってきた瞬間に情報を渡せる
PWAというとPush通知を思い浮かべることがあります。
もちろんPushも便利ですが、ホーム画面からの再訪では別の考え方もできます。
こちらから通知を送って呼び戻すのではありません。
ユーザーが必要になった時に、自分でホーム画面のアイコンを押す。
その時だけ、今伝えたいことを表示する。
ホーム画面に追加
↓
ユーザーが必要な時に起動
↓
ホーム画面起動を判定
↓
案内・Offer・新着情報を表示これはPushとはかなり違います。
ユーザーのスマホへこちらから割り込むのではなく、戻ってきた瞬間に返すという形です。
OJapp PROのHome Screen Offerも、この考え方から作っています。通常のWeb訪問者全員へ表示するのではなく、ホーム画面から起動した時にOfferを出す設計です。
そして「本当に戻ってきたか」を計測する
表示を変えられるなら、同じ判定をアクセス解析にも使えます。
if (isPWA && typeof gtag === 'function') {
gtag('event', 'pwa_home_launch', {
page_path: location.pathname,
page_title: document.title
});
}これで通常のPage Viewとは別に、standalone状態で利用されたアクセスをイベントとして記録できます。
すると、
- ホーム画面から何回利用されたか
- どのページが再訪されているか
- 追加しただけで終わっていないか
- ホーム画面が本当に入口として機能しているか
を考えられるようになります。
私はここまで来て、PWAの見方がかなり変わりました。
Manifestが正しく動いたか、アイコンが綺麗に出たか、standaloneになったか。もちろんそれも大事です。
でも運用が始まった後に知りたいのは、そのアイコンが本当に押されているかです。
「インストール数」だけをゴールにしなくていい
ネイティブアプリでは、ダウンロード数やインストール数が分かりやすい指標になります。
PWAでも同じ感覚で「何人がホーム画面に追加したか」を追いたくなります。
でもPWAはWebです。
だから、Webらしい指標とホーム画面らしい指標を組み合わせてもいいと思います。
| 指標 | 見るもの |
|---|---|
| PV | ページが見られた回数 |
| 検索流入 | 新しく見つけてもらえたか |
| ホーム画面追加 | 再訪用の入口を作ってもらえたか |
| ホーム画面起動 | その入口から実際に戻ってきたか |
個人的には最後の「戻ってきたか」がかなり重要です。
100人に追加されて1回しか起動されないページより、10人に追加されて毎日のように使われるWebツールの方が、ホーム画面では強いかもしれません。
再訪したくなるページでなければ、PWAにしても残らない
ここまで考えると、技術とは別の問題も見えてきます。
どれだけ綺麗なManifestを書いても、ユーザーがもう一度使いたいと思わなければホーム画面のアイコンは押されません。
例えば、
- 何度も使うWebツール
- よく見る商品
- 予約ページ
- 会員ページ
- ダッシュボード
- プロフィールやリンクページ
- 定期的に確認する情報
のようなページは、再訪との相性がいいです。
逆に、一度読んだら終わりのページを無理にホーム画面へ追加してもらっても、その後使われない可能性があります。
PWA化できるページと、ホーム画面に残したくなるページは同じではありません。
ここは技術よりUXの話です。
PWAは「追加する技術」から「戻ってくる設計」へ
PWAを作り始めた時は、Manifestを書いてホーム画面へ追加できればかなり達成感があります。
でも、その先にはもう一段あります。
ホーム画面に追加できる
↓
ホーム画面から起動できる
↓
起動を判定できる
↓
ホーム画面向けの体験を作る
↓
再訪を計測する
↓
もっと戻りたくなる体験へ改善するここまで考えると、PWAは単なる「Webサイトをアプリっぽくする技術」ではなくなってきます。
Web検索から最初の出会いを作り、気に入ったページをホーム画面へ残してもらい、次からは検索せず直接戻ってきてもらう。
Webの入口を、ブラウザの中だけではなくホーム画面まで広げられる。
PWAはホーム画面に追加してもらったら完成ではありません。
そのアイコンが次に押された時から、本当のホーム画面UXが始まります。
GoogleでOJapp Tipsを優先する情報源に追加
今後、Google検索でOJapp Tipsの記事を見つけやすくできます。
WPプラグイン[OJapp PWA Marketing]リリース！ 
