PWA インストール UI の拡充

はじめに

モバイル デバイスとデバイス ベンダーのアプリストアの導入により、ソフトウェアを検出、評価、インストールする方法に関するユーザーの心理モデルは変わりました。ユーザーはアプリストアや、アプリに関するコンテキスト、ソーシャル フィードバック、評価など、アプリストアを通じて提供される追加情報に親しみを持てるようになり、ChromeOS、Mac、Windows などのデスクトップ オペレーティング システムでアプリストアのメタファーが出現しています。

現在のインストール サーフェスに関する課題

現在、ユーザーが PWA をインストールする場合、最小限の情報で情報バーとモーダル オーバーレイが表示されます。ユーザーがインストールを続けると、プロセスがあまりにも早く終了し、ユーザーにコンテキストが提供されません。この場合、アプリのインストールに対するユーザーの期待に反しており、何が起こったのかがわかりにくくなる可能性があります。

PWA インストール UI の例。
PWA インストール UI の例

デベロッパーがネイティブ エクスペリエンスと同等のインストール体験を提供できるように、Chrome では、新しいインストール サーフェスである Richer Install を導入しました。これにより、デベロッパーはマニフェスト ファイルに説明とスクリーンショットを追加して、Chrome for Android 内のボトムシート ダイアログに表示できます。

Chrome のボトムシート UI の例。
Chrome のボトムシート UI の例

これにより、デベロッパーは、ユーザーの期待に沿い、インストール エクスペリエンスの既存のメンタルモデルを模倣した、より魅力的なインストール プロセスを作成できます。

より充実したインストール UI を展開しました。
より充実したインストール UI が開かれました。
より充実したインストール UI を閉じました。
機能豊富なインストール UI を折りたたんだ状態。

下位互換性

マニフェスト ファイルにスクリーンショットが 1 枚も含まれていないウェブサイトでは、引き続き既存のプロンプトが表示されます。今後、デベロッパー コミュニティの浸透やユーザーの反応に応じて変わる可能性があります。

UI のプレビュー

この UI は、Android 版 Chrome 94 とパソコン版 Chrome 108 から利用できます。

この機能は squoosh.app で有効になっており、そこでプレビューできます。

実装

より充実したインストール UI ダイアログを表示するには、対応するフォーム ファクタのスクリーンショットを screenshots 配列に追加する必要があります。description フィールドは必須ではありませんが、指定することをおすすめします。コンテンツ ダイアログは、screenshots フィールドと description フィールドのコンテンツを使用して構築されており、アプリストアでのインストールにより近いエクスペリエンスを実現します。この UI により、ユーザーはデバイスにアプリを追加しようとしていることがわかるほか、デベロッパーは利用可能なスペースが増えるため、インストール時にユーザーに具体的なコンテキストを提供できます。

たとえば、デベロッパーは description フィールドを使用して、ユーザーにデバイスを使い続けたいという動機付けとなるアプリの機能を強調できます。また、screenshots では、プラットフォーム アプリにあるすべての簡単なアクセスを備えたスタンドアロンのウェブアプリの外観を提示できます。

詳細な仕様と、それらをアプリに追加するためのガイドについては、より豊富なインストール UI パターンをご覧ください。

フィードバック

将来的には、カテゴリやアプリの評価など、他のデータの追加も検討する予定ですが、これはデベロッパーやユーザーからのフィードバックに基づいて行われます。

今後数か月のうちに、この新しい UI パターンをデベロッパーがどのように模索しているのかを確認し、皆様からのフィードバックをお待ちしております。こちらのフォームに記入してお問い合わせください。