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

プラットフォームに適応するアプリアイコン。

Thomas Steiner 氏
タイガーオーク

マスク可能なアイコンとは

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

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

マスク可能なアイコンは新しいアイコン形式です。より詳細に制御でき、プログレッシブ ウェブアプリでアダプティブ アイコンを使用できます。マスク可能なアイコンを指定すると、アイコンがシェイプ全体に表示され、すべての Android デバイスで適切に表示されます。最近 Firefox と Chrome でこの新しい形式がサポートされるようになったため、アプリで採用できます。

円全体を覆う PWA アイコン（Android）
代わりに、マスク可能なアイコンが円全体を覆います。

現在のアイコンは準備できましたか？

マスク可能なアイコンはさまざまな形状をサポートする必要があるため、ブラウザが必要な形状とサイズに切り抜き可能なパディング付きの不透明画像を提供します。最終的な形状はブラウザやプラットフォームによって異なるため、特定の形状に依存しないことをおすすめします。

プラットフォーム固有のさまざまなシェイプ。

幸いなことに、すべてのプラットフォームで尊重される「最小セーフゾーン」が明確に定義され、標準化されています。ロゴなどのアイコンの重要な部分は、アイコンの中央の円形領域（アイコン幅の 40% と同じ半径）内に収める必要があります。外側の 10% はトリミングされる場合があります。

アイコンのどの部分がセーフゾーン内にあるかは Chrome DevTools で確認できます。プログレッシブ ウェブアプリを開いた状態で、DevTools を起動して [アプリケーション] パネルに移動します。[アイコン] セクションで、[マスク可能なアイコンの最小セーフエリアのみを表示する] を選択できます。セーフエリアのみが表示されるように、アイコンはカットされます。このセーフエリア内にロゴが表示されていれば 問題ありません

エッジが切り抜かれて PWA アイコンが表示されている DevTools の [Applications] パネル
[Applications] パネル。

さまざまな Android シェイプでマスク可能なアイコンをテストするには、Tiger が作成した Maskable.app ツールを使用します。アイコンを開くと、Maskable.app でさまざまな形状やサイズを試して、チームの他のユーザーとプレビューを共有できます。

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

既存のアイコンに基づいてマスク可能なアイコンを作成する場合は、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 によってレビューされました。