プログレッシブ ウェブアプリ（PWA）をインストールすると、ユーザーが見つけやすく、使いやすくなります。ブラウザでプロモーションを行っていても、PWA をインストールできることを認識していないユーザーもいます。そのため、PWA のインストールを促進して有効にするために使用できるアプリ内エクスペリエンスを提供すると役に立ちます。
この記事では、PWA のインストールを促進するさまざまな方法について説明しますが、網羅的なものではありません。使用するパターンに関係なく、いずれもインストール フローをトリガーする同じコードにつながります。このコードについては、独自のアプリ内インストール エクスペリエンスを提供する方法をご覧ください。
ベスト プラクティス
サイト上で使用しているプロモーション パターンに関係なく適用されるベスト プラクティスもあります。
- プロモーションはユーザー ジャーニーのフローの外側に配置します。たとえば、PWA のログインページでは、ログイン フォームと送信ボタンの下に行動を促すフレーズを配置します。プロモーション パターンを中断して使用すると、PWA のユーザビリティが低下し、エンゲージメント指標に悪影響を及ぼします。
- プロモーションを閉じたり拒否したりする機能を含めます。ユーザーが同意した場合は、ユーザーの設定を記憶し、ユーザーがコンテンツとの関係を変更した場合（ログインした、購入を完了したなど）にのみ、プロンプトを再度表示します。
- PWA のさまざまな部分でこれらの手法を組み合わせて使用します。ただし、インストール プロモーションでユーザーを圧倒したりイライラしたりしないように注意してください。
beforeinstallpromptイベントがトリガーされた後にのみプロモーションを表示します。
ブラウザの自動プロモーション
特定の条件を満たすと、ほとんどのブラウザで、プログレッシブ ウェブアプリをインストールできることがユーザーに自動的に示されます。たとえば、パソコン版 Chrome では、オムニボックスにインストール ボタンが表示されます。
Android 版 Chrome では、ミニ情報バーがユーザーに表示されます。これは、beforeinstallprompt イベントで preventDefault() を呼び出すことで回避できます。preventDefault() を呼び出さない場合、バナーはユーザーがサイトに初めてアクセスし、Android でインストール可能条件を満たしたときに表示され、その後約 90 日後に再度表示されます。
ユーザー インターフェースのプロモーション パターン
ユーザー インターフェースのプロモーション パターンは、ほぼすべての PWA に使用でき、サイト ナビゲーションやバナーなどの場所に表示されます。他の種類のプロモーション パターンと同様に、ユーザーのジャーニーの中断を最小限に抑えるため、ユーザーのコンテキストに注意することが重要です。
プロモーション UI をトリガーするタイミングを慎重に検討しているサイトは、インストール数を増やし、インストールに関心のないユーザーのジャーニーを妨げることがありません。
簡単インストール ボタン
最もシンプルな UX は、ウェブ コンテンツの適切な場所に [インストール] ボタンまたは [アプリを入手] ボタンを配置することです。ボタンが他の重要な機能を妨げないようにし、ユーザーがアプリ内での操作の妨げとならないようにする必要があります。
固定ヘッダー
これは、サイトのヘッダーに表示されるインストール ボタンです。その他のヘッダー コンテンツには、ロゴやハンバーガー メニューなどのサイトのブランディングが含まれることがよくあります。ヘッダーは、サイトの機能とユーザーのニーズに応じて position:fixed にするかしないかを決めます。
適切に使用すれば、サイトのヘッダーから PWA のインストールを促すことは、最も忠実な顧客が簡単にサイトに戻ってくるようにするための優れた方法です。PWA ヘッダーのピクセルは貴重なため、インストールの行動を促すフレーズは適切なサイズにし、他のヘッダー コンテンツよりも重要性が高く、邪魔にならないようにします。
下記を確認してください。
beforeinstallpromptが起動していない限り、インストール ボタンを表示しません。- ユーザーにとってのインストール済みのユースケースの価値を評価します。選択的ターゲティングを検討して、プロモーションの恩恵を受ける可能性が高いユーザーにのみプロモーションを表示します。
- 貴重なヘッダー領域を効率的に使用します。ヘッダーに表示する他の有益なコンテンツを検討し、インストール プロモーションの優先度を他のオプションと比較します。
ナビゲーション メニュー
メニューを開いたユーザーはアプリに興味を持っていることを示しているため、ナビゲーション メニューはアプリのインストールを促すのに適しています。
下記を確認してください。
- 重要なナビゲーション コンテンツを妨げないようにします。PWA インストール プロモーションは他のメニュー項目の下に配置します。
- PWA をインストールするとユーザーにどのようなメリットがあるかを、簡潔に説明します。
ランディング ページ
ランディング ページの目的は商品やサービスを宣伝することであるため、PWA のインストールのメリットを宣伝する際には、大々的に宣伝するのが適切です。
まず、サイトの価値提案を説明し、インストールによって得られるメリットを訪問者に伝えます。
下記を確認してください。
- 訪問者に最も重要な機能にアピールし、ランディング ページに誘導した可能性のあるキーワードを強調します。
- 価値提案を明確にしたうえで、インストール プロモーションと行動を促すフレーズを目立つようにします。ランディング ページは、ユーザーが最初に訪れるページです。
- ユーザーが最も長い時間滞在するアプリの部分にインストール プロモーションを追加することをご検討ください。
インストール バナー
ほとんどのユーザーは、モバイル エクスペリエンスでインストール バナーに遭遇しており、バナーで提供されるインタラクションに慣れています。バナーはユーザーの操作を中断する可能性があるため、慎重に使用する必要があります。
下記を確認してください。
- ユーザーがサイトに関心を示すまで待ってから、バナーを表示します。ユーザーがバナーを閉じた場合は、ユーザーがコンテンツへのエンゲージメントが高いことを示すコンバージョン イベント（e コマース サイトでの購入やアカウント登録など）をトリガーしない限り、再度表示しないでください。
- バナーに、PWA をインストールするメリットを簡単に説明します。たとえば、ユーザーのデバイスのストレージをほとんど使用しない、ストアにリダイレクトせずにすぐにインストールされる、など、PWA のインストールを iOS / Android アプリと区別できます。
一時的な UI
スナックバー デザイン パターンなどの一時的な UI は、ユーザーに通知し、ユーザーが簡単にアクション（この場合はアプリのインストール）を完了できるようにします。適切に使用すると、このような UI パターンはユーザーフローを中断せず、通常はユーザーが無視すると自動的に閉じられます。
アプリの操作が数回行われた後にスナックバーを表示します。ページの読み込み時やコンテキスト外で表示すると、簡単に見落とされたりして、認知的オーバーロードにつながる可能性があります。この場合、ユーザーは表示されているすべてのものを閉じます。サイトの新規ユーザーは、PWA をインストールする準備ができていない可能性があります。そのため、このパターンは、ユーザーから強い興味 / 関心のシグナル（再訪問、ユーザーのログイン、類似のコンバージョン イベントなど）が得られるまで待つことをおすすめします。
下記を確認してください。
- スナックバーを 4 ～ 7 秒間表示して、ユーザーが邪魔にならないように、スナックバーを表示して反応するのに十分な時間を確保します。
- バナーなどの他の一時的な UI の上に表示しないようにします。
- このパターンを使用する前に、ユーザーからの強い興味 / 関心のシグナル（リピート訪問、ユーザーのログイン、同様のコンバージョン イベントなど）が得られるまで待ちます。
変換後
e コマースサイトでの購入など、ユーザー コンバージョン イベントの直後は、PWA のインストールを促進する絶好の機会です。ユーザーがコンテンツに明らかに関心を示しており、コンバージョンはユーザーがサービスを再度利用する可能性を示しています。
予約または決済経路
予約フローや購入手続きフロー後など、一連のジャーニーの途中または後にインストール プロモーションを表示します。ユーザーがジャーニーを完了した後にプロモーションを表示する場合は、ジャーニーが完了したため、目立つようにできることがよくあります。
下記を確認してください。
- 関連する行動を促すフレーズを含めます。アプリをインストールするとメリットが得られるユーザーはどのようなユーザーですか？その理由は何ですか？現在のジャーニーに関連性はありますか？
- アプリをインストールしたユーザー向けの独自の特典がある場合は、その特典を記載します。
- プロモーションは、ユーザー ジャーニーの次のステップの邪魔にならないようにしてください。邪魔になるプロモーションは、ジャーニーの完了率に悪影響を及ぼす可能性があります。上記の e コマースの例では、購入手続きの主要な行動を促すフレーズがアプリ インストールのプロモーションの上に表示されています。
登録、ログイン、ログアウトのフロー
このプロモーションは、プロモーション カードを目立たせることができるジャーニー プロモーション パターンの特殊なケースです。
通常、これらのページは、PWA の価値提案がすでに確立されているエンゲージド ユーザーにのみ表示されます。また、これらのページに配置する他の有用なコンテンツも多くありません。そのため、邪魔にならない限り、大きな行動を促すフレーズを表示しても、邪魔になることはありません。
下記を確認してください。
- 登録フォーム内でユーザーの操作を中断しないようにします。複数の手順が必要な場合は、お客様がその手順を完了するまで待つことをおすすめします。
- 登録したユーザーに最も関連性の高い機能を宣伝します。
- アプリのログイン済みエリアに追加のインストール プロモーションを追加することを検討してください。
インラインのプロモーション パターン
インライン プロモーション手法では、プロモーションをサイトのコンテンツに織り込むことができます。これは多くの場合、ユーザー インターフェースのプロモーションよりも微妙であり、トレードオフがあります。プロモーションは、関心のあるユーザーの目に留まるように目立たせますが、ユーザー エクスペリエンスの質を損なうほど目立たせないようにします。
インフィード
フィードの中にあるインストール プロモーションは、PWA 内のニュース記事やその他の情報カードのリストの間に表示されます。
目標は、ユーザーが視聴しているコンテンツに、より便利な方法でアクセスする方法を示すことです。ユーザーにとって有益な機能の宣伝に重点を置きます。
下記を確認してください。
- ユーザーに不快感を与えることのないよう、プロモーションの頻度を制限してください。
- ユーザーがプロモーションを閉じられる機能を提供します。
- ユーザーが閉じたことを記憶します。