PWA のインストールを促すためのパターン

ペニー・マクラクラン
Penny McLachlan 氏

プログレッシブ ウェブアプリ(PWA)をインストールすると、ユーザーはアプリを簡単に見つけて使用できるようになります。ブラウザのプロモーションを使用する場合でも、PWA をインストールできることに気付いていないユーザーもいるため、PWA のインストールを促進して有効にするために使用できるアプリ内エクスペリエンスを提供すると便利です。

PWA のシンプルなインストール ボタンのスクリーンショット。
PWA 内に用意されているシンプルなインストール ボタン。

この記事はすべてを網羅しているわけではありませんが、PWA のインストールを促すさまざまな方法の出発点となるものです。使用するパターンやパターンにかかわらず、どのパターンでもインストール フローをトリガーする同じコードが呼び出されます。これについては、独自のアプリ内インストール エクスペリエンスを提供する方法をご覧ください。

ベスト プラクティス

サイトでどのプロモーション パターンを使用する場合でも適用できるおすすめの方法がいくつかあります。

  • プロモーションはユーザー ジャーニーのフローの外に置きます。たとえば、PWA ログインページでは、ログイン フォームと送信ボタンの下に行動を促すフレーズを配置します。プロモーション パターンを破壊的に使用すると、PWA のユーザビリティが低下し、エンゲージメント指標に悪影響を及ぼします。
  • プロモーションを拒否または拒否できる機能を含めます。ユーザーがこの設定を行う場合は、その設定を記憶します。また、ログインや購入の完了など、コンテンツとの関係に変化があった場合にのみ、再度プロンプトを表示します。
  • PWA のさまざまな部分で手法を組み合わせますが、インストール プロモーションでユーザーを圧迫したり、不快にさせたりしないように注意してください。
  • プロモーションは、beforeinstallprompt イベントが発生したにのみ表示されます。

ブラウザの自動昇格

ほとんどのブラウザでは、特定の条件が満たされると、プログレッシブ ウェブアプリがインストール可能であることが自動的にユーザーに表示されます。たとえば、パソコン版の Chrome ではアドレスバーにインストール ボタンが表示されます。

インストール インジケーターが表示されたアドレスバーのスクリーンショット。
ブラウザによるインストール プロモーション(パソコン)。
ブラウザが提供するインストール プロモーションのスクリーンショット。
ブラウザ提供のインストール プロモーション(モバイル)。

Chrome for Android ではユーザーにミニ情報バーが表示されますが、これは beforeinstallprompt イベントで preventDefault() を呼び出すことで回避できます。preventDefault() を呼び出さなかった場合は、ユーザーが初めてサイトにアクセスし、Android でのインストールに関する基準を満たしたときに、バナーが表示されます。その後、約 90 日後に再度表示されます。

ユーザー インターフェースのプロモーション パターン

ユーザー インターフェースのプロモーション パターンは、ほぼすべての種類の PWA に使用でき、サイトのナビゲーションやバナーなどの場所に表示されます。他の種類のプロモーション パターンと同様に、ユーザー ジャーニーの中断を最小限に抑えるために、ユーザーのコンテキストを認識することが重要です。

プロモーション UI のトリガーのタイミングに配慮したサイトでは、インストール数を増やすとともに、インストールに興味のないユーザーの操作を妨げることを回避できます。

シンプルなインストール ボタン

考えられる最もシンプルな UX は、ウェブ コンテンツの適切な場所に [インストール] ボタンまたは [アプリをダウンロード] ボタンを配置することです。ボタンが他の重要な機能を妨げないようにし、ユーザーがアプリ内を移動する際の妨げにならないようにしてください。

カスタム インストール ボタン
シンプルなインストール ボタン。

これは、サイトのヘッダーの一部であるインストール ボタンです。その他のヘッダー コンテンツには、ロゴやハンバーガー メニューなどのサイトのブランディングが含まれることがよくあります。サイトの機能やユーザーのニーズに応じて、ヘッダーを position:fixed にする場合もあれば、そうでない場合もあります。

ヘッダー内のカスタム インストール ボタン。
ヘッダー内のカスタム インストール ボタン。

サイトのヘッダーから PWA のインストールを促すことは、ロイヤリティの高いユーザーが自社のエクスペリエンスに簡単に戻ってもらううえで効果的です。PWA ヘッダー内のピクセルは貴重であるため、インストールを促すフレーズは適切なサイズで、他の想定されるヘッダー コンテンツよりも重要度が高く、煩わしさを感じさせないようにする必要があります。

ヘッダー内のカスタム インストール ボタン
ヘッダー内のカスタム インストール ボタン

下記を確認してください。

  • beforeinstallprompt が呼び出されない限り、インストール ボタンを表示しません。
  • インストール済みのユースケースがユーザーにもたらす価値を評価します。選択的ターゲット設定を使用して、メリットを得られる見込みのあるユーザーにのみプロモーションを表示することを検討してください。
  • 貴重なヘッダー空間を効率的に使用する。ヘッダーでユーザーに提供できるものが他にないか検討し、他のオプションと比較してインストール プロモーションの優先度を比較検討します。
ナビゲーション メニューのカスタム インストール ボタン
スライドアウト ナビゲーション メニューにインストール ボタンやプロモーションを追加する。

ナビゲーション メニューは、アプリのインストールを促進するのに最適な場所です。メニューを開いたユーザーは、アプリのエクスペリエンスに関与していると示すことができます。

下記を確認してください。

  • 重要なナビゲーション コンテンツの邪魔にならないようにします。PWA インストール プロモーションを他のメニュー項目の下に配置します。
  • PWA をインストールするメリットについて、簡潔で関連性の高い提案を行います。

ランディング ページ

ランディング ページの目的は商品やサービスを宣伝することです。そのため、PWA をインストールするメリットを売り込む場合は、このページを 1 か所に拡大することをおすすめします。

ランディング ページにカスタム インストール プロンプトを表示する。
ランディング ページにカスタム インストール プロンプトが表示されている。

まず、サイトの価値提案について説明し、次にインストールによって得られるメリットをユーザーに伝えます。

下記を確認してください。

  • ユーザーにとって最も重要な機能にアピールし、ユーザーをランディング ページに誘導した可能性のあるキーワードを強調します。
  • インストール プロモーションと行動を促すフレーズは、人目を引くものにします。ただし、価値提案を明確にした場合にのみ実施します。結局のところランディングページです
  • アプリ内のユーザーが多くの時間を費やす部分にインストール プロモーションを追加することを検討してください。

ほとんどのユーザーは、モバイル エクスペリエンスでインストール バナーを目にしたことがあるので、バナーによって提供される操作はよくご存じでしょう。バナーはユーザーの邪魔になる可能性があるため、慎重に使用してください。

ページ上部のカスタム インストール バナー。
ページ上部のバナー(閉じることができる)。

下記を確認してください。

  • ユーザーがサイトに関心を示してからバナーを表示します。ユーザーがバナーを閉じた場合は、e コマースサイトでの購入やアカウントの登録など、コンテンツへのより高いレベルのエンゲージメントを示すコンバージョン イベントがトリガーされない限り、再度表示することはできません。
  • バナーに PWA をインストールすることの意義を簡単に説明します。たとえば、PWA がユーザーのデバイスのストレージをほとんど使用しないこと、またはストア リダイレクトなしですぐにインストールできることを説明して、iOS/Android アプリと PWA のインストールを区別できます。

一時的な UI

Snackbar デザイン パターンなどの一時的な UI は、ユーザーに通知し、アクション(この場合はアプリのインストール)を簡単に完了できるようにします。適切に使用すれば、この種の UI パターンはユーザーフローを中断せず、ユーザーが無視すると自動的に閉じます。

スナックバーとしてのカスタム インストール バナー。
PWA がインストール可能であることを示す、閉じることができるスナックバー。

アプリを数回操作した後にスナックバーを表示します。ページの読み込み時やコンテキスト外に表示されると、見落とされたり、認知的過負荷につながる可能性があります。その場合、ユーザーは表示されている内容をすべて閉じるだけです。サイトの新規ユーザーは、PWA をインストールする準備ができていない可能性があります。そのため、このパターン(リピート訪問、ユーザーのログイン、同様のコンバージョン イベントなど)については、ユーザーから強い関心シグナルが得られるまで待ってから行うことをおすすめします。

スナックバーとしてのカスタム インストール バナー。
PWA がインストール可能であることを示す、閉じることができるスナックバー。

下記を確認してください。

  • スナックバーを 4 ~ 7 秒間表示して、ユーザーが邪魔にならないように、スナックバーを見て反応する時間を十分に確保します。
  • バナーなどの他の一時的な UI の上には表示しないでください。
  • このパターンは、ユーザーの興味や関心に関する強いシグナル(リピート訪問、ユーザーのログイン、同様のコンバージョン イベントなど)が発生するまで待ってから使用してください。

変換後

ユーザー コンバージョン イベントの直後(e コマースサイトでの購入など)は、PWA のインストールを促す絶好の機会です。ユーザーは明らかにコンテンツに関心を示しており、多くの場合、コンバージョンは、ユーザーがそのサービスを再び利用する兆候を示している。

コンバージョン後のインストール プロモーション。
ユーザーが購入を完了した後のインストール プロモーション。

予約または決済経路

予約フローや購入手続きフローの後など、連続したジャーニーの最中または後にインストール プロモーションを表示します。ユーザーがジャーニーを完了した後にプロモーションを表示する場合は、ジャーニーが完結するため、通常、プロモーションをより目立たせることができます。

ユーザー ジャーニー後のインストール プロモーション。
ユーザー ジャーニー後のインストール プロモーション。

下記を確認してください。

  • 関連性の高い行動を促すフレーズを含める。どのようなユーザーがアプリをインストールすれば メリットが得られるでしょうか?またその理由は?それは、現在のプロセスとどのように関連していますか?
  • インストール済みアプリのユーザーを対象とする独自の特典がある場合は、それについて記載します。
  • プロモーションがジャーニーの次のステップの邪魔にならないようにしましょう。そうしないと、プロセスの完了率に悪影響を及ぼす可能性があります。上記の e コマースの例では、購入手続きを促す主要なフレーズがアプリ インストール プロモーションの上に表示されています。

登録、ログイン、ログアウトのフロー

このプロモーションは、ジャーニー プロモーション パターンの特殊なケースで、プロモーション カードをより目立たせることができます。

登録ページのカスタム インストール ボタン。
登録ページのカスタム インストール ボタン。

通常、こうしたページは、PWA の価値提案がすでに確立されているエンゲージメント ユーザーにのみ表示されます。多くの場合、これらのページに配置する有用なコンテンツは他に多くありません。そのため、邪魔にならない限り、行動を促すフレーズを大きくしても邪魔になりません。

下記を確認してください。

  • 登録フォーム内でユーザーの操作を中断しないようにしてください。複数のステップからなるプロセスの場合は、ユーザーがそのプロセスを完了するまで待つことをおすすめします。
  • 登録したユーザーに関連性の高い機能を宣伝します。
  • アプリのログイン領域にインストール プロモーションを追加することを検討してください。

インライン プロモーションのパターン

インライン プロモーションの手法は、プロモーションとサイトのコンテンツを織り交ぜて行われます。これは、多くの場合、トレードオフのあるユーザー インターフェースでのプロモーションよりもわかりにくいものです。興味を持ったユーザーが気づくほど目立たせつつ、ユーザー エクスペリエンスの質を損なうほどプロモーションは目立たないようにする必要があります。

インフィード

インフィード インストール プロモーションは、PWA のニュース記事やその他の情報カードリストの間に表示されます。

コンテンツ フィード内のインストール プロモーション。
コンテンツ フィード内のインストール プロモーション。

目標は、ユーザーがコンテンツに簡単にアクセスする方法を示すことです。ユーザーにとって有用な機能を宣伝することに重点を置きます。

下記を確認してください。

  • ユーザーに不快な思いをさせないよう、プロモーションの頻度は限定します。
  • ユーザーがプロモーションを閉じることができるようにします。
  • ユーザーの選択を記憶します。