PWAの「ホーム画面に追加」を案内するベストなタイミングは？

PWAを作ったら、できればユーザーにホーム画面へ追加してもらいたい。

そこで考えるのが、「ホーム画面に追加できます」という案内をどこで出すかです。

ページを開いた瞬間に大きく表示する。記事の途中で表示する。Webツールを使い終わった後に出す。

技術的にはどこでも出せますが、私は「追加できます」と伝えるタイミングより、「また使いたい」と思ったタイミングの方が重要だと思っています。

今回はPWAの実装方法ではなく、ホーム画面への追加をどのタイミングで案内すると自然なのか、UX側から考えてみます。

初回訪問ですぐ「ホーム画面に追加」は少し早い

初めて開いたWebサイトで、いきなり「ホーム画面に追加してください」と言われたらどうでしょう。

まだ記事も読んでいない。

ツールなら、まだ使ってもいない。

その状態では、ユーザー側にホーム画面へ残す理由がありません。

これはPWAに限らず、初めて訪れたサイトでいきなり、

• 会員登録してください
• 通知を許可してください
• メルマガ登録してください
• アプリをインストールしてください

と続けて求められるのと少し似ています。

サイト側にはメリットがあっても、ユーザーにはまだメリットが見えていません。

ホーム画面追加は「また使いたい」の後にある

そもそも、なぜユーザーはWebページをホーム画面へ置くのでしょう。

理由は色々ありますが、かなり単純に考えると、

「またここを開きたいから」

です。

一度しか使わないページなら、ホーム画面に残しておく必要はありません。

逆に、

• このツール便利だからまた使おう
• このページをあとで何度も確認したい
• この商品をすぐ見られるようにしたい
• この予約ページを探し直すのが面倒

と思った瞬間なら、ホーム画面へ置く意味があります。

だからホーム画面追加の案内は、価値を説明する前ではなく、価値を体験した後に出す方が自然です。

OJapp Tips｜合わせて読みたい
HTML・CSS・JavaScriptの違いを小学生でもわかるように説明してみた の解説が役に立ちます。

記事なら「読み終わった時」が分かりやすい

ブログ記事なら、記事の最後はかなり自然な場所です。

最後まで読んだということは、少なくともその内容に一定の興味があった可能性があります。

そこで、

この記事やサイトをまた読みたい場合は、ホーム画面に追加しておくとすぐ戻れます。

くらいの軽い案内を置く。

これなら記事を読む邪魔もしません。

特に、何度も参照する技術資料、手順記事、チェックリストなどは相性がいいと思います。

ホーム画面追加そのものの基本については、Webサイトをホーム画面に追加する方法と基本でも紹介しています。

Webツールなら「使えた直後」が強い

Webツールの場合は、もっと分かりやすいタイミングがあります。

ユーザーが実際にツールを使って、目的を達成した直後です。

例えば画像圧縮ツールなら、

画像を選ぶ
↓
圧縮する
↓
保存できた
↓
「次回すぐ使えるようにホーム画面へ追加できます」

という流れです。

この時点では、ユーザーはすでにツールが何をするものか理解しています。

しかも実際に一度使っています。

そこで「次回は検索せず、ホーム画面から直接開けます」と伝えれば、ホーム画面へ置くメリットも説明しやすくなります。

単に「PWAをインストールできます」と言うより、次に楽になることを伝える方が分かりやすいです。

「インストールできます」だけではメリットが伝わりにくい

PWAを作る側は「インストールできる」ということ自体を機能として考えます。

でもユーザー側からすると、それだけでは「だから何が便利なの？」となります。

例えば、

このWebアプリをインストールできます。

よりも、

ホーム画面に追加すると、次回から検索せず1タップで開けます。

の方が目的が分かります。

予約ページなら、

次回の予約もホーム画面からすぐ開けます。

でもいい。

Webツールなら、

よく使うならホーム画面に置いておくと便利です。

でも十分です。

PWAという技術を売るのではなく、ホーム画面へ置いた後の便利さを伝える。

この方がユーザー目線では自然だと思います。

2回目の訪問で案内する方法もある

初回では何も出さず、再訪したユーザーにだけ案内する方法もあります。

これはかなり理にかなっています。

一度ページを使い、後日もう一度戻ってきたということは、すでに再訪する理由があったということだからです。

例えば localStorage を使えば、以前訪問したことがあるかをブラウザ側へ簡単に記録できます。

const visited = localStorage.getItem('visited');

if (visited) {
  // 再訪ユーザー向けにホーム画面追加を案内
} else {
  localStorage.setItem('visited', '1');
}

これなら初回訪問では何も出さず、2回目以降に、

また来てくれましたね。よく使うならホーム画面から直接開けます。

と案内できます。

もちろん localStorage は端末やブラウザ単位の保存なので、厳密なユーザー識別に使うものではありません。

それでも軽いUIの出し分けには使えます。

localStorage の特徴や容量については、localStorageの容量制限はどれくらい？ブラウザごとの目安と注意点でもまとめています。

すでにホーム画面から開いているなら案内しない

もう1つやっておきたいのが、すでにPWAとして起動しているユーザーへの対応です。

ホーム画面のアイコンから開いているのに、

ホーム画面に追加してください。

と表示されたら変ですよね。

standalone状態はJavaScriptから判定できます。

const isPWA =
  window.matchMedia('(display-mode: standalone)').matches ||
  window.navigator.standalone === true;

if (!isPWA) {
  // ホーム画面追加の案内を表示
}

これなら通常のブラウザ表示でだけ追加案内を出し、ホーム画面から起動している時は消せます。

この出し分けについては、PWAをホーム画面から開いた時だけ表示を変える方法で詳しく紹介しています。

ホーム画面追加の案内は毎回出さなくていい

タイミングだけでなく、頻度も大事です。

ページを開くたびに毎回、

ホーム画面に追加しませんか？

と表示されたら、かなり邪魔です。

一度閉じたユーザーにはしばらく表示しない、特定の操作をした後だけ表示するなど、案内自体にも距離感が必要です。

例えば localStorage に閉じた日時を保存して、一定期間は再表示しないという方法もあります。

PWAだからといって、ホーム画面への追加を強く迫る必要はありません。

むしろ「必要ならここに置けますよ」くらいの存在の方が、Webらしいと思っています。

追加ボタンが出ない環境も考えておく

PWAのホーム画面追加は、OSやブラウザによって方法が違います。

開発者側が用意した「インストール」ボタンを押せば、すべての端末で同じインストール画面を開けるわけではありません。

特にiPhoneでは、Safariの共有メニューから「ホーム画面に追加」を選ぶ操作が基本になります。

そのため案内UIを作るなら、

• 対応環境ではインストール操作へつなぐ
• iPhoneでは追加手順を案内する
• すでにstandaloneなら案内を消す

など、環境ごとの違いも考えた方が親切です。

「インストールボタンが出ない」という時の考え方は、PWAのインストールボタンが表示されない原因でも解説しています。

おすすめのタイミングはページの目的によって違う

全部に共通しているのは、ユーザーがそのページの価値を理解した後という点です。

「追加してください」ではなく「次から楽になります」

PWAのホーム画面追加を考える時、開発者側はどうしてもインストール率を上げたくなります。

でも、ホーム画面はユーザー自身の場所です。

そこへ置いてもらうなら、まず置く理由が必要です。

だから私は、

ページを開く
↓
すぐ追加を要求する

よりも、

ページを使う
↓
便利だと分かる
↓
また使いたいと思う
↓
ホーム画面という選択肢を伝える

という順番の方が自然だと思っています。

前の記事でも書いたように、PWAはホーム画面に追加してもらってからが本番です。

なら、その入口を作ってもらう段階でも無理に急がなくていい。

「ホーム画面に追加できます」ではなく、「これ、次も使うならホーム画面に置けますよ」。

そのくらいのタイミングと距離感が、PWAのホーム画面追加にはちょうどいいと思います。