ユーザーは通常、アプリストアから、またはパッケージをダウンロードしてインストールすることで、アプリ(特にプラットフォーム アプリ)を入手します。現在では、デスクトップ エクスペリエンスでさえも、一元化されたストアでアプリを提供する方向にシフトしています。
ウェブアプリの場合、このモデルは異なります。ユーザーが一元化された App Depot にアクセスしてウェブアプリを入手する必要はありません。設計上、すべてのウェブ エクスペリエンスがインストールできるわけではありません。アプリのインストールはプラットフォームとブラウザによって異なる場合があります。ブラウザには、アプリをインストールするためのメニューやサーフェスが異なることさえあります。ユーザーがそのインストール オプションをクリックすると、デフォルトのダイアログには、次のような追加情報は表示されません。
インストール可能で、プラットフォーム アプリと同じインタラクションを提供するウェブアプリを作成するには、そのようなエクスペリエンスを実現するための技術的な作業と、ユーザーがこの異なるインストール フローを活用するための適切なガイダンスが必要です。
リッチ インストール UI により、ウェブ デベロッパーは、インストール時にアプリに関する特定のコンテキストをユーザーに提供できます。この UI は Chrome 94 以降のモバイルと Chrome 108 以降のパソコンで使用できます。Chrome では、引き続きインストール可能なアプリのシンプルなインストール ダイアログを提供しますが、この大きな UI によりデベロッパーはウェブアプリを目立たせることができます。また、インストール プロセスがアプリストアのダイアログと似ているため、インストール プロセスがよりわかりやすくなります。
機能豊富なインストール UI を有効にする
Richer インストール UI ダイアログを表示するには、対応するフォーム ファクタのスクリーンショットを screenshots
配列に追加する必要があります。description
フィールドは必須ではありませんが、使用することをおすすめします。コンテンツ ダイアログはこれら 2 つのフィールドのコンテンツで構成されているため、アプリストアでのインストールにより近いエクスペリエンスが実現します。これにより、ユーザーは自分のデバイスにアプリを追加しようとしていることがわかり、空き容量が増えるため、デベロッパーはインストール時にユーザーに具体的なコンテキストを提供できます。
たとえば、description
フィールドを使用すると、ユーザーにそのアプリを使い続けたいという気持ちにさせるアプリの機能を強調できます。screenshots
を使用すると、ウェブアプリの外観をスタンドアロンとして提示でき、プラットフォーム アプリにあるすべての機能に簡単にアクセスできます。
詳細な仕様と、それらをアプリに追加するためのガイドについては、より豊富なインストール UI パターンをご覧ください。
古いスタイルのインストール プロンプトでは、情報やコンテキストはほとんど提供されません。これでは、設置の意味に関するユーザーの期待に応えられず、何が起こったのか混乱してしまう可能性があります。多くのユーザーがインストール リクエストを完全に却下し、それを構築した企業にとっても悪影響を及ぼしました。
リッチ インストールにより、オペレーティング システムと同様のエクスペリエンスを構築できます。
Squoosh アプリのマニフェスト ファイルの例を参考にして、独自のダイアログを作成できます。https://squoosh.app/ で実際にダイアログを試すことができます。
フィードバック カテゴリやアプリの評価など、より充実したインストールを可能にする他のオプションも検討しています。その判断のためには、皆様からのフィードバックが必要です。 デザインについてお聞かせください Richer Installs の UI で、期待どおりに動作しないものはありますか?あるいは、アイデアを具現化するために特定のデータが必要ですか?ご質問やご意見がございましたら、こちらのフォームに記入する
写真撮影: Kaboompics .com(Pexels)