アプリの設計

この章では、ブラウザのタブの外部でコンテンツをレンダリングする際の重要な要素について説明します。

ウィンドウ

オペレーティング システムによって、アプリケーション ウィンドウの概念は異なります。たとえば、iPhone では、アプリは常に画面の 100% を占有します。Android と iPad では、通常、アプリはフルスクリーンで実行されますが、2 つのアプリ間で画面を共有できます。ただし、一度に開くアプリ インスタンスは 1 つだけです。一方、パソコンでは、アプリケーションのインスタンスを一度に複数開くことができます。使用可能な画面領域は、開いている他のすべてのアプリと共有されます。各アプリケーション インスタンスは、サイズを変更して画面上の任意の場所（他のアプリと重なっていても可）に配置できます。

アイコン

Google はアプリをアイコンで認識します。このアイコンは、アプリを検索する際、設定画面、アプリを起動する場所、実行中のアプリが表示される場所に表示されます。

次のようなアクセサリーが含まれます。

  • ホーム画面（iOS、iPadOS、Android）。
  • アプリ ランチャー（macOS、Android）。
  • スタートメニューまたはアプリメニュー（Windows、ChromeOS、Linux）。
  • ドック、タスクバー、マルチタスク パネル（すべてのオペレーティング システム）。

プログレッシブ ウェブアプリのアイコンを作成する際は、各オペレーティング システムでアイコンをレンダリングし、下の画像のようなさまざまな形状のマスクを適用できるため、アイコンがプラットフォームに依存しないことを確認してください。

プラットフォームごとに異なる形状の PWA アイコン。

アプリのテーマ設定

PWA のアプリ スタイルをカスタマイズする方法はいくつかあります。

  • テーマの色: パソコンのウィンドウのタイトルバーの色と、モバイル デバイスのステータスバーの色を定義します。メタタグを使用すると、ダークモードやライトモードなど、さまざまなスキームのオプションを設定できます。これらのオプションは、ユーザーの設定に基づいて使用されます。
  • 背景色: アプリとその CSS が読み込まれる前のウィンドウの色を定義します。
  • アクセント カラー: フォーム コントロールなどの組み込みブラウザ コンポーネントの色を定義します。
テーマとアクセント カラーが表示されたデスクトップ PWA と、テーマと背景色が表示された Android PWA のスプラッシュ画面。
テーマとアクセント カラーが表示されたデスクトップ PWA と、テーマと背景色が表示された Android PWA のスプラッシュ画面。

表示モード

プログレッシブ ウェブアプリで使用するウィンドウ エクスペリエンスの種類を定義できます。選択できるオプションは次の 3 つです。

  • 全画面表示
  • スタンドアロン
  • 最小限のユーザー インターフェース

また、ウィンドウ コントロールの横にあるタイトルバー領域を使用して、ウィンドウ コントロール オーバーレイという高度な表示モードで PWA をアプリのように見せることもできます。PWA のタイトルバーのウィンドウ コントロール オーバーレイをカスタマイズするをご覧ください。

全画面表示

フルスクリーン エクスペリエンスは、ゲーム、VR、AR などの没入型エクスペリエンスに適しています。現在のところ、この機能は Android デバイスでのみご利用いただけます。ステータスバーとナビゲーション バーが非表示になり、PWA のコンテンツに画面全体が使用されます。

デスクトップと iPadOS では、全画面 PWA はサポートされていませんが、PWA 内から Fullscreen API を使用して、ユーザーのリクエストに応じてアプリを全画面表示できます。

スタンドアロン エクスペリエンス

プログレッシブ ウェブアプリで最も一般的なオプションであるスタンドアロン モードでは、ブラウザのナビゲーション UI のない OS 標準のウィンドウに PWA が表示されます。ウィンドウには、ブラウザで制御されるメニューも含まれることがあります。このメニューでは、ユーザーは次の操作を行えます。

  • 現在の URL をコピーします。
  • ブラウザの拡張機能の確認、適用、無効化を行う。
  • 権限を表示、変更する。
  • 現在のオリジンと SSL 証明書を確認します。

また、PWA がタブ内でレンダリングされる場合は、タイトルバーに権限とハードウェアの使用状況が表示され、オムニボックスまたは URL バーが置き換えられることもあります。

パソコンの Microsoft Edge でインストールされた PWA のメニュー。 パソコン版 Google Chrome でインストールされた PWA で、プルダウン メニューとプラグイン アイコンが表示されている様子。 上記の画像は、Microsoft Edge と Chrome のデスクトップで PWA がスタンドアロン モードでどのように表示されるかを示しています。

モバイル デバイスでは、スタンドアロンの PWA エクスペリエンスにより、ステータスバーが表示されたままの標準画面が作成されるため、ユーザーは通知、時刻、バッテリー残量を確認できます。多くの場合、パソコンのスタンドアロン エクスペリエンスに含まれるような、ブラウザで制御されるメニューはありません。

スタンドアロン アプリをレンダリングしている iOS デバイス。

Android の一部のブラウザでは、PWA がフォアグラウンドにある間、固定のサイレントな通知が作成され、ユーザーは現在の URL などのオプションをコピーできます。

Chrome によってレンダリングされた Android 通知。現在アクティブな PWA に対するいくつかのアクションが表示されています。

最小限のユーザー インターフェース

このモードは、Android とパソコンのオペレーティング システムでプログレッシブ ウェブアプリで利用できます。使用すると、PWA をレンダリングするブラウザに最小限のユーザー インターフェースが表示され、ユーザーがアプリ内を移動しやすくなります。

Android では、現在の <title> 要素とオリジンをレンダリングするタイトルバーが表示され、小さなプルダウン メニューを使用できます。パソコンでは、タイトルバーにナビゲーションを支援する一連のボタンが表示されます。たとえば、現在の読み込みステータスに基づいて、停止アクションと再読み込みアクションを切り替えるコントロールや、戻るボタンなどがあります。

戻るボタンと再読み込みボタンのある Microsoft Edge のパソコン用最小 UI
Android では、ブラウザは最小 UI 用に読み取り専用のテーマ設定されたナビゲーション バーを使用します（ここでは Firefox と Chrome）。

パソコン向けのデザインの最適化

デスクトップで動作するようにプログレッシブ ウェブアプリを設計する場合は、ブラウザのタブ内やモバイル オペレーティング システム内のアプリの場合とは異なり、ウィンドウサイズが無限に存在することを考慮する必要があります。

第 3 章で、ミニモードについて説明しました。デスクトップ アプリは 200 x 100 ピクセルまで小さくできます。このウィンドウでは、HTML の <title> 要素のコンテンツがウィンドウのタイトルとして使用されます。このコンテンツは、アプリ間で Alt+Tab キーを押したときや、その他の場所でもレンダリングされます。

HTML の <title> 要素に注意し、その使用方法を再検討してください。<title> は SEO のためだけに使用するものではなく、ブラウザのタブで最初の文字列のみをレンダリングするものでもありません。スタンドアロンのデスクトップ ウィンドウのユーザー エクスペリエンスの一部となります。

CSS のベスト プラクティス

コンテンツがスタンドアロン エクスペリエンスでレンダリングされる場合、CSS のレイアウト、デザイン、アニメーションに関するこれまでの経験はすべて有効です。ただし、スタンドアロン ウィンドウでエクスペリエンスを改善するためのヒントやコツがいくつかあります。

メディアクエリ

PWA で利用できる最初のメディアクエリは、browser、standalone、minimal-ui、fullscreen の値を受け入れる display-mode プロパティです。

このメディアクエリは、各モードに異なるスタイルを適用します。たとえば、ブラウザモードの場合のみインストール インビテーションをレンダリングしたり、ユーザーがシステム アイコンからアプリを使用している場合にのみ特定の情報をレンダリングしたりできます。たとえば、アプリがスタンドアロン モードで起動されたときに使用する「戻る」ボタンを追加するなどです。

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}

アプリ エクスペリエンス

ユーザーは、インストール済みの PWA を使用するときに、アプリの動作を期待します。最適なエクスペリエンスとは何かを定義するのは簡単ではありませんが、デフォルトのウェブ動作が最適なエクスペリエンスを提供しない状況もあります。

ユーザー選択

通常、コンテンツはマウスまたはポインタ、または長押しのタップ操作で選択できます。コンテンツには便利ですが、PWA 内のナビゲーション アイテム、メニュー、ボタンには最適なエクスペリエンスを提供しません。

数字などのインタラクティブなボタンをすべて選択できる計算機 PWA。

したがって、user-select: none とその接頭辞 -webkit- を使用して、これらの要素でのユーザー選択を無効にすることをおすすめします。

.unselectable {
   user-select: none;
}

アクセント カラー

PWA では、プロパティ accent-color を使用して、HTML フォーム コントロール内でブランドに合わせて色を定義できます。

システム フォント

ダイアログやメッセージなどの要素をユーザーのデフォルトのプラットフォーム フォントと一致させる場合は、次のフォント ファミリーを使用できます。

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

下方向にスワイプして更新

Google Chrome や Safari などの最新のモバイル ブラウザには、ページを下にスクロールすると更新される機能があります。Android 版 Chrome などの一部のブラウザでは、スタンドアロンの PWA でもこの動作が有効になります。

この操作を無効にすることをおすすめします。たとえば、独自のジェスチャー管理や更新アクションを提供する場合や、ユーザーが意図せずアクションをトリガーする可能性がある場合などです。

この動作は、overscroll-behavior-y: contain を使用して無効にできます。

  body {
    overscroll-behavior-y: contain;
  }

セーフエリア

デバイスによっては、長方形の画面が邪魔なく表示されない場合があります。代わりに、画面が円形などの別の形状であるか、iPhone 13 のノッチのように画面の一部が使用できない場合があります。このような場合、一部のブラウザでは、コンテンツを表示できる安全な領域を持つ環境変数が公開されます。

上は、ノッチベースのデバイスを横向きにした状態で、標準のビューポートでレンダリングされていない領域が側面に表示されています。下は、viewport-fit=cover によりビューポート全体にアクセスできるデバイスです。

画面全体（非表示領域も含む）にアクセスして色や画像をレンダリングする場合は、<meta name="viewport"> タグのコンテンツに viewport-fit=cover を含めます。次に、safe-area-inset-* 環境変数を使用して、それらの領域にコンテンツを安全に拡張します。

リソース