プログレッシブ ウェブアプリ（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 をインストールするメリットを宣伝する際は、このページを大きく表示することをおすすめします。
まずサイトの価値提案を説明し、次に設置によって得られるメリットを訪問者に伝えます。
下記を確認してください。
- ユーザーにとって最も重要な特長をアピールし、ユーザーをランディング ページに誘導した可能性のあるキーワードを強調します。
- 人目を引くインストール プロモーションと行動を促すフレーズは、価値提案を明確にした後にしてください。結局、これがランディング ページです
- ユーザーがアプリに多くの時間を費やす部分にインストール プロモーションを追加することを検討してください。
インストール バナー
ほとんどのユーザーは、モバイル エクスペリエンスでインストール バナーを目にしたことがあるため、バナーが提供する操作についてはよくご存じでしょう。バナーはユーザーの操作を妨げる可能性があるため、使用する際は注意が必要です。
下記を確認してください。
- ユーザーがサイトに関心を示すまで待ってから、バナーを表示します。ユーザーがバナーを閉じた場合は、コンテンツに対する高いエンゲージメントを示すコンバージョン イベント（e コマースサイトでの購入やアカウント登録など）をトリガーしない限り、再度表示しないでください。
- バナーに PWA をインストールするメリットを簡単に説明します。たとえば、PWA のインストールは、ユーザーのデバイスのストレージをほとんど使用しないことや、ストアのリダイレクトなしで即座にインストールされることを示すことで、iOS/Android アプリとを区別できます。
一時的な UI
スナックバー デザイン パターンなどの一時的な UI は、ユーザーに通知して、操作（この場合はアプリのインストール）を簡単に完了できるようにします。このような UI パターンを適切に使用しても、ユーザーフローを中断せず、通常、ユーザーが無視しても自動的に閉じます。
スナックバーは、アプリを何度か操作した後に表示します。ページの読み込み時に表示される場合や、文脈から外れて表示された場合、簡単に見落としたり、認知機能過負荷を招いたりする可能性があります。この場合、ユーザーは表示されたすべての内容を閉じるだけで済みます。サイトの新規ユーザーは、PWA をインストールする準備ができていない可能性があります。そのため、このパターンは、ユーザーから強い関心を示すシグナル（再訪問、ユーザーのログイン、類似のコンバージョン イベントなど）が得られるまで待つことをおすすめします。
下記を確認してください。
- スナックバーを 4 ～ 7 秒間表示して、邪魔にならない程度にユーザーがそれを見て反応する時間を確保します。
- バナーなど、他の一時的な UI の上に表示しないようにしてください。
- 関心の強いシグナル（再訪問、ユーザーのログイン、同様のコンバージョン イベントなど）がユーザーから得られてから、このパターンを使用してください。
コンバージョン後
e コマースサイトでの購入など、ユーザー コンバージョン イベントの直後は、PWA のインストールを促す絶好の機会です。ユーザーがコンテンツを利用していることが明確になり、多くの場合、コンバージョンによって、そのユーザーが再度サービスを利用していることを示唆できます。
予約または決済の経路
予約フローや購入手続きフロー後など、一連のジャーニーの途中または後にインストール プロモーションを表示します。ユーザーがジャーニーを完了した後にプロモーションを表示する場合は、ジャーニーが完了しているため、多くの場合、目立たせることができます。
下記を確認してください。
- 関連性の高い行動を促すフレーズを含める。アプリをインストールするメリットと その理由は何でしょうかお客様の現在のジャーニーとどのように関連しているか？
- インストール済みのアプリユーザー向けに独自の特典を提供している場合は、そのことをアピールします。
- ジャーニーの次のステップの妨げにならないようにプロモーションを表示しないでください。ジャーニーの完了率に悪影響を及ぼす可能性があります。上記の e コマースの例では、購入手続きを促すための重要な「行動を促すフレーズ」がアプリのインストール プロモーションの上に配置されています。
登録、ログイン、ログアウトのフロー
このプロモーションは、ジャーニー プロモーション パターンの特殊なケースで、プロモーション カードをより目立つようにできます。
これらのページは通常、PWA の価値提案がすでに確立されている、エンゲージメントが高いユーザーにのみ表示されます。また多くの場合、このページには有用なコンテンツが少ないことが多くあります。そのため、大きな行動を促すフレーズを作成しても、邪魔にならない限り、中断が少なくなります。
下記を確認してください。
- 登録フォーム内でユーザーが操作を中断しないようにしてください。複数のステップから成るプロセスの場合は、ユーザーがプロセスを完了するまで待つことをおすすめします。
- 登録したユーザーに最も関連性の高い機能を宣伝します。
- アプリのログイン領域内にインストール プロモーションを追加することを検討してください。
インラインのプロモーション パターン
インライン プロモーションの手法は、プロモーションとサイト コンテンツを織り交ぜたものです。これは多くの場合、ユーザー インターフェースのプロモーションよりも微妙であり、トレードオフがあります。興味を持ったユーザーの目に留まる程度にプロモーションを目立たせる必要がありますが、ユーザー エクスペリエンスの質を低下させるほどのものは目立たないようにします。
インフィード
インフィード インストール プロモーションは、ニュース記事や PWA の情報カードのリストの間に表示されます。
目標は、ユーザーが楽しんでいるコンテンツにもっと便利にアクセスする方法をユーザーに示すことです。ユーザーに役立つ機能を宣伝することに重点を置きます。
下記を確認してください。
- プロモーションの頻度を制限して、ユーザーに不快な思いをさせないようにします。
- ユーザーがプロモーションを非表示にできるようにします。
- 非表示にするユーザーの選択を記憶します。