アプリの設計

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

ウィンドウ

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

アイコン

アプリはアイコンで識別されます。このアイコンは、アプリの検索時、設定内、アプリの起動時、実行中のアプリが表示される場所に表示されます。

指標には以下が含まれます。

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

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

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

アプリのテーマを設定する

PWA では、次のようなさまざまな方法でアプリのスタイル設定をカスタマイズできます。

  • テーマの色: ウィンドウのタイトルバーの色（デスクトップ）と、ステータスバーの色（モバイル デバイス）を定義します。メタタグを使用すると、ダークモードやライトモードなど、さまざまなスキームを指定でき、ユーザーの設定に基づいてそれらが使用されます。
  • 背景色: アプリとその CSS が読み込まれる前のウィンドウの色を定義します。
  • アクセント カラー: フォーム コントロールなど、組み込みのブラウザ コンポーネントの色を定義します。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> テーマとアクセント カラーが表示されているデスクトップ PWA と、テーマと背景色が表示されている Android PWA スプラッシュ画面。
テーマとアクセント カラーを表示するデスクトップ PWA と、テーマと背景色を表示する Android PWA スプラッシュ画面
で確認できます。

表示モード

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

  • 全画面表示
  • スタンドアロン
  • 最小限のユーザー インターフェース
で確認できます。

全画面表示

全画面表示は、ゲーム、VR、AR などの臨場感あふれるエクスペリエンスに適しています。現在のところ、この機能は Android デバイスでのみ利用可能です。ステータスバーとナビゲーション バーは非表示になり、PWA が画面の 100% 画面に表示されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

<ph type="x-smartling-placeholder">
</ph> Microsoft Edge 上の [戻る] ボタンと [再読み込み] ボタンを備えたデスクトップの最小限の UI
<ph type="x-smartling-placeholder">
</ph> 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;
}

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

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-* 環境変数を使用して、コンテンツをこれらの領域に安全に拡張します。

リソース