ユーザーは通常、アプリ（特にプラットフォーム アプリ）をアプリストアから入手するか、パッケージのダウンロードとインストールを通じて入手します。現在では、デスクトップでさえも、一元管理された店舗でアプリを提供する方向に移行しつつある。
ウェブアプリの場合、ユーザーは一元的なアプリ デポにアクセスする必要がないため、設計上すべてのウェブ エクスペリエンスがインストール可能というわけではありません。また、アプリのインストールはプラットフォームやブラウザによって異なり、ブラウザにはアプリをインストールするためのメニューやサーフェスも異なります。ユーザーがそのインストール オプションをクリックすると、デフォルトのダイアログには以下のような追加情報は表示されません。
インストール可能で、プラットフォーム アプリと同じインタラクションを提供するウェブアプリを作成するには、そのようなエクスペリエンスを可能にするための技術的な作業と、この異なるインストール フローを利用するための適切なガイダンスが必要です。
よりリッチなインストール UI により、ウェブ デベロッパーは、インストール時にアプリに関する具体的なコンテキストをユーザーに提供できます。この UI は、モバイル版 Chrome 94 以降とパソコン版 Chrome 108 以降で利用できます。Chrome では引き続き、インストール可能なアプリ用のシンプルなインストール ダイアログが提供されますが、この大きくなった UI により、デベロッパーはウェブアプリをハイライト表示するスペースを確保できます。また、アプリストアのダイアログと類似しているため、インストール プロセスがより使いやすくなります。
よりリッチなインストール UI の有効化
リッチなインストール UI ダイアログを表示するには、デベロッパーは、対応するフォーム ファクタのスクリーンショットを 1 つ以上 screenshots 配列に追加する必要があります。description フィールドは必須ではありませんが、省略することをおすすめします。コンテンツ ダイアログは、これら 2 つのフィールドの内容で構築されるため、アプリストアでのインストールと似た操作になります。これにより、ユーザーは自分のデバイスにアプリを追加していると認識でき、空き容量を増やせるため、デベロッパーはインストール時にユーザーに具体的なコンテキストを提供できます。
たとえば、デベロッパーは description フィールドを使って、ユーザーがそのアプリをデバイスに残しておくことを奨励するアプリの機能を強調できます。screenshots を使用すると、ウェブアプリの外観をスタンドアロンとして提示でき、プラットフォーム アプリと同様に簡単にアクセスできます。
詳細な仕様と、それらをアプリに追加するためのガイドについては、よりリッチなインストール UI パターンをご覧ください。
古いスタイルのインストール プロンプトでは、情報とコンテキストがほとんど提供されませんでした。この状況では設置の意味に対するお客様の期待と一致せず、何が起こったのかについてお客様が混乱する可能性があります。多くがインストール リクエストを完全に拒否しました。これは、開発した企業にとっても好ましくありませんでした。
インストール量が多いほど、オペレーティング システムと同様のエクスペリエンスを構築できます。
Squoosh アプリのマニフェスト ファイルの例に沿って独自のビルドを作成できます。また、https://squoosh.app/ でダイアログをライブでお試しいただけます。
フィードバック Google では、カテゴリやアプリの評価など、インストール数を増やすための他の方法を検討しています。判断をするために、フィードバックをお寄せください。 デザインについて教えてください リッチ インストール UI で、想定どおりに動作しない点はありますか？または、アイデアを実行するために必要な特定のデータはありますか？ご質問やご意見がありましたら、こちらのフォームにご記入ください。
写真撮影: Kaboompics .com（Pexels）