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