アプリの設計

この章では、ブラウザタブの外部にコンテンツをレンダリングする際の重要な側面に焦点を当てます。

ウィンドウ

アプリケーション ウィンドウについての考え方は、オペレーティング システムによって異なります。たとえば、iPhone では、アプリは常に画面の 100% を占めます。Android と iPad では通常、アプリは全画面表示されますが、2 つのアプリ間で画面を共有することもできますが、同時に開くアプリ インスタンスは 1 つだけです。 一方、デスクトップ デバイスでは、アプリケーションで一度に複数のインスタンスを開くことができます。 利用可能な画面領域は、開いている他のすべてのアプリと共有されています。 各アプリケーション インスタンスのサイズを変更して、画面上の任意の場所に配置できます。他のアプリと重なってもかまいません。

アイコン

アプリはアイコンで識別されます。このアイコンは、アプリを検索したとき、設定、アプリを起動する場所、実行中のアプリが表示されている場所に表示されます。

たとえば、次のようなものが挙げられます。

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

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

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

アプリのテーマ設定

PWA でアプリのスタイルをカスタマイズするには、以下のようにいくつかの方法があります。

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

表示モード

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

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

全画面表示

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

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

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

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

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

PWA がタブにレンダリングされるときに、アドレスバーや URL バーに代わってタイトルバーに権限とハードウェアの使用状況が表示されることもあります。

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

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

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

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

現在アクティブな PWA に対する操作を示す Chrome によってレンダリングされた Android 通知。

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

このモードは、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 では、HTML フォーム コントロール内で accent-color プロパティを使用して、ブランドに合った色を定義できます。

システム フォント

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

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

Pull to refresh

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

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

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

  body {
    overscroll-behavior-y: contain;
  }

セーフエリア

デバイスによっては、長方形の画面を遮るものがありません。代わりに、画面が円形などの異なる形状になっている場合や、iPhone 13 のノッチのように画面の一部が使用できない場合があります。このような場合、一部のブラウザでは、コンテンツを表示できるセーフエリアを持つ環境変数が公開されます。

上部には、ノッチベースのデバイスが横向きで表示され、標準ビューポートが横にレンダリングされていない領域が表示されています。下部には、ビューポートに完全にアクセスできるデバイス（ビューポートに合わせる）が示されています。

色や画像をレンダリングするために、目に見えない領域を含め、画面への完全なアクセス権が必要な場合は、<meta name="viewport"> タグのコンテンツに viewport-fit=cover を含めます。次に、safe-area-inset-* 環境変数を使用して、コンテンツをこれらの領域に安全に拡張します。

リソース