マスク可能なアイコンを使用する PWA のアダプティブ アイコンのサポート

Thomas Steiner

Tiger Oakes

最新の Android スマートフォンにプログレッシブ ウェブアプリ（PWA）をインストールすると、アプリのアイコンの背景が白くなることがあります。Android 8.0 では、デバイスモデル間でさまざまな形状でアプリアイコンを表示するアダプティブ アイコンが導入されました。この形式を使用しないアイコンの背景は白です。

Android では、透明な PWA アイコンが白い円の中に表示されます。

マスク可能なアイコンは、Chrome と Firefox の新しいアイコン形式です。この形式を使用すると、プログレッシブ ウェブアプリでアダプティブ アイコンを使用でき、アイコンの外観をより細かく制御できます。

現在のアイコンを使用する準備は整っていますか？

マスク可能なアイコンはさまざまな形状をサポートする必要があるため、ブラウザまたはプラットフォームに必要な形状とサイズに切り抜くことができるように、パディングのある不透明な画像を指定する必要があります。

マスク可能なアイコンの仕様には、すべてのプラットフォームが遵守する標準化された「最小セーフゾーン」が含まれています。ロゴなどのアイコンの重要な部分は、アイコンの中央の円形領域内にあり、その半径はアイコン幅の 40% と等しい必要があります。一部のプラットフォームでは、外側の 10% のエッジが切り抜かれる場合があります。

Chrome DevTools を使用すると、アイコンのどの部分がセーフゾーン内にあるかを確認できます。プログレッシブ ウェブアプリを開いた状態で DevTools を起動し、[Application] パネルに移動します。[アイコン] セクションで、[マスク可能なアイコンの最小セーフエリアのみを表示する] を選択できます。これにより、アイコンが切り詰められ、セーフエリアのみが表示されます。このセーフエリア内にロゴが表示されていれば、アイコンの準備は完了です。

Android のさまざまな形状でマスク可能なアイコンをテストするには、Tiger Oakes の Maskable.app を使用します。アイコンを開くと、Maskable.app を使用してさまざまな形状とサイズを試して、プレビューをチームと共有できます。

マスク可能なアイコンを採用するにはどうすればよいですか？

既存のアイコンに基づいてマスク可能なアイコンを作成するには、Maskable.app エディタを使用します。アイコンをアップロードし、色とサイズを調整して、画像をエクスポートします。

マスク可能なアイコンを作成して DevTools でテストしたら、新しいアセットを参照するようにウェブアプリ マニフェストを更新する必要があります。ウェブアプリ マニフェストは、ウェブアプリに関する情報を JSON ファイルで提供し、icons 配列が含まれています。

purpose フィールドは、アイコンの使用方法をブラウザに指示します。デフォルトでは、アイコンの目的は "any" です。Android では、これらのアイコンは白い背景上でサイズ変更されます。

{
  …
  "icons": [
    …
    {
      "src": "path/to/regular_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable" // <-- New property value `"maskable"`
    },
    …
  ],
  …
}

アイコンをマスク可能にするには、アイコン マスクで使用することを示すために、その purpose 値を "maskable" に設定します。これにより、白い背景がなくなり、アイコンの外観をより細かく制御できるようになります。他のデバイスでマスクなしでマスク可能なアイコンを使用する場合は、スペースで区切られた複数の目的（"any maskable" など）を指定することもできます。

謝辞

このページは Joe Medley によってレビューされました。