このページは Cloud Translation API によって翻訳されました。

ユーザーが重要なアプリのインストールを Chrome でサポートする方法

Thomas Steiner

Dibyajyoti Pal

Vincent Scheib

Dan Murphy

Chrome の内部ユーザー調査によると、多くのユーザーはウェブアプリのインストールを重視しています。次のようなメリットがあります。

オペレーティングシステムのタスクバーまたはドックからチャットアプリを起動する。
アプリを切り替えたときに表示される専用のトップレベルウィンドウから音楽を再生する。
没入感のあるビデオ通話のためにブラウザの UX を整理。
関連付けられたファイル（オペレーティングシステムのファイルエクスプローラ）からウェブアプリを直接開く。

Chrome とウェブデベロッパーが支援する方法は複数あります。たとえば、新しい ML プロモーション機能などです。この記事では、ユーザーがアプリをインストールする方法の概要について説明します。

インストール可能条件を満たす「作成された」アプリ

Chrome のインストール可能条件を満たすアプリには、Chrome デスクトップブラウザのアドレスバーにインストールアイコンが自動的に表示されます（次のスクリーンショットでハイライト表示されています）。ユーザーはクリックしてアプリをインストールできます。

Chrome デスクトップブラウザのアドレスバーにあるインストールアイコン。

別の方法として、[その他] [保存して共有] > [ $appName をインストール] を選択してインストールすることもできます。

Chrome デスクトップの [その他] メニューに [アプリをインストール] メニュー項目を追加。

モバイルでは、表示されたインストールプロンプトを使用するか、[その他] > [ホーム画面に追加] > [アプリをインストール] を使用してアプリをインストールできます。

モバイル版ウィキペディアのウェブサイト。

Wikipedia ウェブサイトの [ホーム画面に追加] プロンプト。

Wikipedia サイトのアプリのインストールダイアログ。

これらのインストールは「作成済み」と呼ばれます。これは、デベロッパーがインストール可能性の基準を満たすことで、この UX を有効にしているためです。

カスタマイズされたインストールエクスペリエンス

デベロッパーはさらに一歩進んで、カスタマイズされたインストールエクスペリエンスを提供できます。これは、Squoosh や SVGcode などのアプリが採用しているアプローチです。次の例では、ハイライト表示された [インストール] ボタンをご覧ください。スクリーンショットを提供することで、デベロッパーはより豊かなインストールエクスペリエンスを作成できます。

Squoosh アプリとそのインストールボタン。

スクリーンショット付きの Squoosh アプリのインストールプロンプト。

SVGcode アプリとそのインストールボタン。

任意のアプリの「手動」インストール

Google の調査によると、ユーザーは、インストールの条件を満たしていない場合や、カスタマイズされたインストールフローを提供していない場合でも、あらゆるウェブエクスペリエンスをインストールしたいと考えています。たとえば、Wordle があります。執筆時点では、ウェブアプリマニフェストに icons メンバーと start_url がありません。

{  
    "name": "Wordle",  
    "short_name": "Wordle",  
    "theme_color": "#FFFFFF",  
    "background_color": "#FFFFFF",  
    "display": "minimal-ui"  
}

このような場合は、Chrome でページを「手動」アプリとしてインストールする手動の方法があります。デスクトップ版の次のスクリーンショットでハイライト表示されています。ブラウザウィンドウの右上にあるその他アイコン > [保存と共有] > [ページをアプリとしてインストール] を選択します。インストールプロンプトで、アプリ名を任意の名前に変更できます。

デスクトップ版 Chrome で、インストールページをアプリメニューアイテムとして表示。

パソコン版 Chrome の [このページをアプリとしてインストール] ダイアログ。

モバイルの場合は、その他アイコン > [ホーム画面に追加] > [アプリをインストール] をタップします。

モバイル版 Chrome の IMDB ウェブサイト。

Chrome モバイルの [ホーム画面に追加] メニューアイテムが表示された IMDB ウェブサイト。

アプリのインストールダイアログが表示された IMDB ウェブサイト。

これは機能しますが、実際には検出されない可能性があります。そのため、Chrome チームは機械学習（ML）を活用したアプローチに投資しています。

機械学習に基づくインストールプロンプト

Android では、Chrome セグメンテーションを使用して、サイトの健全性に関する特性（有効なマニフェストの存在など）やユーザーのサイト訪問データ（過去 14 日間のサイト訪問の合計数など）などのシグナルの収集に基づいて、ユーザーが特定のページをインストールするかどうかを予測します。このデータは収集され、ユーザーがインストールする可能性が高い場合にインストールダイアログをトリガーする ML モデルをトレーニングするために使用されます。サイトがインストール条件を満たしている場合は、通常のインストールダイアログが表示されます。他のページには手動インストールダイアログが表示されます。

「このページをアプリとしてインストール」ダイアログが表示された Wordle ウェブサイト。

初期の結果は、ユーザーが ML によってトリガーされたインストールプロンプトを受け入れていることを示しています。チームは、これまでに得られた経験を使用してモデルをさらに微調整し、ユーザーが希望するアプリをインストールできるようにする予定です。

パソコンとモバイルでショートカットを作成する

Chrome 128 以降では、[その他] [保存して共有] > [ショートカットを作成] を選択すると、ユーザーのデスクトップまたはホーム画面にブックマークが作成されます。これにより、Android の動作と同様に、新しいタブで特定のページが開きます。Android では、[その他] > [ホーム画面に追加] > [ショートカットを作成] を使用してショートカットを作成します。

デスクトップ版のこのメニュー項目の以前の動作は、[ページをアプリとしてインストール] オプションに移動されました。このオプションを使用すると、前述のように「手動」アプリが作成されます。

まとめ

ユーザーはアプリを繰り返し使用します。ブラウザのタブで表示されることもありますし、スタンドアロンエクスペリエンスとして表示されることもあります。Chrome は、次のような方法でユーザーが目標を達成できるよう支援します。

デベロッパーが豊富なインストールエクスペリエンスを作成できるようにします。
デベロッパーがインストールを想定していなくても、ユーザーがアプリをインストールできるようにする。
ユーザーが再訪したいページへのショートカットを作成できるようにする。
ユーザーが望んでいるのは、機械学習に基づいてインストールの信頼度が高いアプリを事前に提案することです。

では、Wordle に戻りましょう。

Wordle 1,110 3/6

⬛⬛⬛🟨?⬛

⬛🟨?⬛🟨?🟩?

🟩?🟩?🟩?🟩?🟩?

謝辞

このドキュメントは、Finnur Breki Thorarinsson、Ella Ge、Rachel Andrew が確認しました。