PWAのメリットを最大限活かす！ホーム画面アイコン追加とプッシュ通知のUIパターンを徹底解説！

現在、モバイルインターネットを取り巻く環境で「PWA」が大きな注目を集めています。

PWAとは、Progressive Web Apps（プログレッシブウェブアプリ）の略で、モバイル端末でウェブサイトを表示する際に、まるでネイティブアプリのようなUIや挙動を可能にする仕組みです。この仕組みによって、モバイルユーザーのUX向上が期待されています。PWAを導入することで、例えばページの読み込みや表示時間が高速化される、オフラインでも動作し閲覧が可能になる、など様々なメリットが得られますが、うまく活用することでユーザーとの接触機会の増加が期待できるという点も大きな魅力ではないでしょうか。この「ユーザーとの接触機会の増加」に効果を発揮するであろう機能が「ホーム画面へのアイコン追加」と「プッシュ通知」です。

今回はPWAの「ホーム画面へのアイコン追加」と「プッシュ通知」に焦点を当て、それをいかにエンドユーザーに利用してもらうか、ユーザー側でのその導入方法を事例を交えて紹介したいと思います。

1｜「ホーム画面へのアイコン追加」と「プッシュ通知」

ホーム画面へのアイコン追加

PWAではホーム画面（スクリーン）にアイコンを追加することができます。ユーザーのホーム画面からネイティブアプリと同じようにワンタップでサイトへアクセスできるようになるため、ブラウザを開いてわざわざ検索するなりブックマークから目的のサイトを選ぶなどの手間がかかりません。ユーザーにとっての利便性が向上するので、来訪頻度の増加が期待できます。

ユーザーがホーム画面にアイコンを追加するには二つの方法があります。ひとつはサイト閲覧時に表示されるホーム画面追加のメッセージから行う方法、もうひとつはブラウザメニューの「ホーム画面に追加」から行う方法です。いずれもユーザーにアクションしてもらう必要があります。尚、ひとつ目の方法でユーザーがホーム画面へのアイコン追加を拒否した場合、同じメッセージは一定期間再表示されない仕様となっています（今後変更の可能性あり）。

（Financial Times：https://app.ft.com/?standalone）

プッシュ通知

PWAでは、ネイティブアプリと同じようにプッシュ通知を送ることができます。ユーザーはブラウザを閉じている状態でもプッシュ通知を受け取ることができるので、従来のモバイルサイトと比べてユーザーとの接触機会を格段に増やすことができます。

ユーザーにプッシュ通知を送るためには、あらかじめユーザーの許諾を得る必要があります。プッシュ通知の許可は、サイト閲覧時に表示されるブラウザ固有の許諾メッセージから行いますが、ホーム画面へのアイコン追加と同様、こちらもデフォルトで許諾がONになることはなく、ユーザーにアクションしてもらう必要があります。尚、このブラウザ固有のプッシュ通知許諾メッセージはユーザーに一度拒否されると再出現はしないようです。

（Roman：https://www.romanoriginals.co.uk/?utm_source=web_app_manifest&utm_medium=web_app_manifest）

ユーザーとの接触機会の増加が期待できる「ホーム画面へのアイコン追加」と「プッシュ通知」ですが、それをユーザーに利用してもらうためには、上記のとおりユーザーの実際のアクションが必要となります。つまり、ユーザーにホーム画面にアイコンを追加してもらわないとサイトへの直アクセスはしてもらえず、またプッシュ通知を許可してもらわないとユーザーの元に通知を届けることはできません。従って、当然のことですが、これらのアクションをユーザーに取ってもらえるかどうかで、ユーザーとの接触機会を増やせるかどうかが大きく左右されることになります。

2｜ユーザーのアクションを促す方法の重要性

ネイティブアプリでのプッシュ通知に関して、これまでしばしばその許諾の取得方法について議論されることがありました。今でも多くのネイティブアプリはインストール後の初回起動時に無差別にプッシュ通知許諾のメッセージを表示する形で許可を得ようとしていますが、インストール直後でサービス内容がまだよくわからないタイミングで十分な説明がないままプッシュ通知許可のダイアログが表示されても、ユーザーの視点からすると、”いま決められないので、まずは「許可しない」”にする、”どんな内容の通知が送られてくるのか確認してからあとで考える”と思考するユーザーも多いのではないかと思います。

最近では、こうした”藪から棒”的な許諾の取り方に課題を感じ、アプリのオンボーディング時にプッシュ通知に関して説明をした上で許諾ダイアログを出すなどの工夫をしているアプリも多く見かけるようになりました。

これと同じことがPWAでの「ホーム画面へのアイコン追加」、「プッシュ通知」にも言えます。ホーム画面にアイコンを追加すること、プッシュ通知を受け取ることでユーザーにどんな価値、どんなメリットがあるのかを伝えられないと、ユーザーにアクションを起こしてもらえず、ユーザーとの接触機会増加のチャンスを逃してしまうことにつながりかねません。
タイミングも含め、ユーザーにどのようにホーム画面へのアイコン追加、プッシュ通知の許可を促すのかが、PWA対応においても非常に重要なポイントになります。

そこで、今回はPWA対応しているサービス（サイト）でのホーム画面へのアイコン追加方法と、プッシュ通知許諾の取得方法を調べてみました。今後PWA対応を検討される際の参考にしていただければと思います。

3｜「アイコン追加」・「プッシュ通知許諾」メッセージの表示パターン

今回は海外のサービスを中心に30のサイトについて、「ホーム画面へのアイコン追加」を促す方法と、「プッシュ通知」の許諾の取得方法を調査しました。ここで紹介するに当たり、それぞれ以下のパターンに分類してみました。

ホーム画面へのアイコン追加

• パターン①：メッセージ表示なし（ユーザーが自発的にブラウザメニューから設定）
• パターン②：サイト閲覧時にデフォルトでメッセージを画面下部に自動表示
• パターン③：アイコン追加を促す方法に工夫がある

プッシュ通知

• パターン①：プッシュ通知配信許諾のメッセージなし（またはプッシュ通知配信なし）
• パターン②：サイト閲覧開始直後にブラウザ固有の許諾ダイアログを自動表示
• パターン③：許諾取得の方法に工夫がある

調査した30件を上記のパターンに当てはめると、以下のようになりました。

「ホーム画面へのアイコン追加」については、調査した中では、ブラウザ固有のアイコン追加ダイアログを自動表示するパターンが大多数でした。アイコン追加を促す方法に工夫をしているサイトが2サイトありましたが、現状ではユーザーが閲覧開始をした早い段階でブラウザ固有のアイコン追加ダイアログを自動的に表示させる方式が最も一般的といえるでしょう。逆にアイコン追加の方法には今後工夫のし甲斐があるともいえると思います。

「プッシュ通知」については、調査した30のサイトの中の半数超がプッシュ通知配信を行っていない状況でした。プッシュ通知配信を行っているサイトでは、ブラウザ固有の許諾メッセージを自動表示するパターンが5サイト、許諾の取得方法に工夫をしているパターンが8サイトという状況で、先に触れたプッシュ通知の許諾取得における課題を認識しPWAでも対応しているサイトが一定数あることがわかりました。

尚、今回調査した具体的な30のサイトは以下になります。

今回調査した全30サイトの事例は、以下の記事で紹介しています。併せてご覧ください。

• PWA導入サイトのホーム画面アイコン追加とプッシュ通知のUIパターン 事例30選

4｜PWA対応サイトの「アイコン追加」・「プッシュ通知許諾」の事例

以下、ホーム画面へのアイコン追加を促す方法、プッシュ通知許諾の取得方法のそれぞれについていくつかのサイトをピックアップし、先に紹介したパターン別に事例として紹介したいと思います。

ホーム画面へのアイコン追加の促し方

パターン①：アイコン追加メッセージの自動表示なし

ホーム画面へのアイコン追加に関して、特段それを促すメッセージを表示しないパターンです。ホーム画面にアイコンを追加するには、ユーザーが自らブラウザメニュー内の「ホーム画面に追加」メニューを介して設定する必要があります。

（日経電子版：https://r.nikkei.com/）

パターン②：ブラウザ固有のアイコン追加メッセージを自動表示

サイト閲覧時にデフォルトでホーム画面へのアイコン追加メッセージを画面下部に自動表示するパターンです。ブラウザ固有のダイアログが表示されます。

（Billing Gazette：https://billingsgazette.leeaws.com/pwa/index.html#top-stories）
（Alibaba.com：https://m.alibaba.com/）

パターン③：アイコン追加を促す方法に工夫あり

パターン②のようにデフォルトでブラウザ固有のダイアログのみを自動表示するのではなく、ホーム画面にアイコン追加を促す方法に工夫がをしているパターンです。

上記のFlipkartの場合、デフォルトでアイコン追加のダイアログを出さず、代わりに画面上部中央の「＋」ボタンがブルブル震えることでユーザーの注目を引きます。気づいたユーザーが「＋」ボタンをタップして初めてアイコン追加のダイアログが表示されます。この時点でユーザーがアイコンを追加すればそれで終了ですが、アイコン追加を拒否した場合、「＋」ボタンが再度ブルブルと震えます。先ほども触れたとおり、アイコン追加のダイアログは一度拒否されると一定期間再表示されないため、ユーザーが2回目以降に「＋」ボタンをタップした場合は、どのようにホーム画面にアイコンを追加すればいいかの説明が表示され、ブラウザメニューからのアイコン追加に誘導します。

ユーザーが初めてサイトを訪問した際に、サイトの中身を十分に理解していない状況で早々にホーム画面へのアイコン追加メッセージを表示して拒否されるリスクを取る代わりに、少し控えめに「＋」ボタンに注目を引くことによって、ホーム画面へのアイコン追加をしてもらえる可能性を高めている例と言えます。また、初回のアイコン追加が拒否された場合の対応も考えられており、ユーザーによるアイコン追加の確実性をより高める工夫がされています。

（Flipkart：https://www.flipkart.com/?start_url=homescreenicon）

上記のSelioの場合も、Flipkart同様デフォルトでアイコン追加のダイアログを出さず、代わりにホーム画面にアイコンを追加することによるメリットを説明したダイアログを表示させています。例えば、リテラシーのさほど高くないユーザーなど、いきなり「ホーム画面に追加」とだけ記載されたブラウザ固有のメッセージが表示されても意味を理解できず、とりあえず拒否してしまうことも多いと思います。そうしたリスクを低減するために、事前に、ホーム画面にアイコンを追加することでユーザーにどんないいことがあるのかを説明し理解してもらうことで、アイコン追加の可能性を高めている例といえます。あらゆるレベルのユーザーを考慮し工夫していると思います。

（Selio：https://pt.selio.com/homescreen?utm_source=direct&utm_medium=homescreen）

プッシュ通知配信許諾の取得方法

パターン①：許諾メッセージの自動表示なし

プッシュ通知配信許諾のメッセージを自動表示しないパターンです。プッシュ通知を受け取るためには、ユーザーが自らサイトメニュー等のプッシュ通知設定で配信を許可する必要があります。

（日経電子版：https://r.nikkei.com/）

パターン②：ブラウザ固有の許諾メッセージを自動表示

サイト閲覧開始直後にプッシュ通知配信に関するブラウザ固有の許諾ダイアログを自動表示するパターンです。

（cnet：https://www.cnet.com/?homepage=1&setDevice=mobile）
（Roman：https://www.romanoriginals.co.uk/?utm_source=web_app_manifest&utm_medium=web_app_manifest）

パターン③：プッシュ通知許諾の取得方法に工夫あり

パターン②のようにデフォルトでブラウザ固有のダイアログのみを自動表示するのではなく、プッシュ通知配信の許諾の取得方法に工夫をしているパターンです。

上記はエールフランスのプッシュ通知許諾取得の事例です。デフォルトでブラウザ固有のプッシュ通知許諾ダイアログを表示する代わりに、トップページ内にプッシュ通知の内容を説明したコンテンツを掲載し、そこからプッシュ通知配信許諾に誘導しています。「●●が通知を送信しようとしています」とだけ記載された無味乾燥なブラウザ固有のメッセージをいきなり表示するよりも、どんな内容の通知が送られるのか、ユーザーにどんな価値があるのかを事前に説明した上で許可を取る方が確実性が高いですし、先にも触れたとおり、ブラウザ固有のメッセージ表示は1回だけのチャンスなので、こうした工夫はプッシュ通知の許諾を得る上で非常に有効だと思います。
尚、プッシュ通知配信登録を完了した際にはページ上にその旨が表示されますが（右下の画面）、他のページに遷移して再度トップページに戻るとこのメッセージは表示されません。

（Air France：https://mobile.airfrance.fr/?fromHomeScreen=true）

Twitterもエールフランス同様、デフォルトでブラウザ固有のプッシュ通知許諾ダイアログを表示する代わりに、タイムライン内にプッシュ通知の説明を掲載し、そこからプッシュ通知配信許諾に誘導しています。

（twitter：https://mobile.twitter.com/）

上記はLancomeの例ですが、こちらもエールフランス同様、デフォルトでブラウザ固有のプッシュ通知許諾ダイアログを表示する代わりに、画面下部にプッシュ通知の説明を掲載したダイアログを表示し、そこからプッシュ通知配信許諾に誘導しています。

（Lancome：https://www.lancome-usa.com/homepage?homescreen=1）

さいごに

今回はPWAの「ホーム画面へのアイコン追加」と「プッシュ通知」に焦点を当て、ユーザーがこれらを利用するための手続きについて事例を交えて紹介しました。いかがでしたか？

PWA対応による「ホーム画面へのアイコン追加」と「プッシュ通知」はうまく活用することでユーザーとの接触機会の増加を期待できますが、それは飽くまでユーザーが実際に”アイコンを追加した”、”プッシュ通知を許可した”場合に限られることは言うまでもありません。従って、ユーザーがアイコンを追加しやすい状態、プッシュ通知を許可しやすい状態をいかに構築するかが非常に重要なポイントになります。

今回紹介した事例の中にも、様々な工夫をこらしてこうしたの状態を作っているケースがありました。今後PWA対応を検討される際には、PWAのメリットを最大限活かせるよう、是非今回紹介した事例を参考にしていただければと思います。

尚、今回調査した全30サイトの事例は、以下の記事で紹介しています。併せてご覧ください。

• PWA導入サイトのホーム画面アイコン追加とプッシュ通知のUIパターン 事例30選

PWAに関するお悩み・ご相談はこちらで受け付けています。