PWAマスカブルアイコンセーフゾーンジェネレーターとは
マスク可能アイコンとはプラットフォームの形状に適応できるPWAアイコンです。Androidはデバイスに応じて円、角丸正方形、または角丸長方形で表示することがあります。セーフゾーンは形状に関係なく表示されることが保証されているアイコンの内側部分です。PWAのガイドラインでは重要なアイコンコンテンツがキャンバスの少なくとも80%を占めパディングによってセーフゾーン内に収まるようにすることを推奨しています。
クイックアンサー
正方形のPWAアイコンをアップロードしてマスク可能セーフゾーンのオーバーレイをプレビューします。重要なコンテンツはセーフゾーン（アイコンの内側80%）内に維持します。192x192と512x512のサイズでanyとmaskableの両方の用途を持つマニフェストアイコンエントリをエクスポートします。
Last updated: 2026-05-28
制限事項
- プレビューは円形のセーフゾーンを表示しますが実際のプラットフォーム形状（角丸長方形、角丸正方形、円）は異なります。円形ゾーンはすべての形状に対して合理的な最悪の場合の近似値です。
- このツールは視覚的なプレビューのみを提供します。実際のPNGファイルをエクスポートしません。画像エディターまたはアイコン生成ツールを使用して必要なサイズの最終アイコンファイルを作成してください。
- 一部のプラットフォームはマスク可能なクロッピングに加えてドロップシャドウやプラットフォーム固有のアイコン処理などの追加変換を適用しますがこれらはここではプレビューできません。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- PWA用の正方形PNGアイコン（512x512以上推奨）をアップロードします。
- セーフゾーンパディング率を調整します。15%（PWA標準）は85%の可視セーフゾーンを意味します。
- アイコン上にオーバーレイをプレビューし重要なコンテンツが点線のセーフゾーン円の内側にあることを確認します。
- purpose: maskableを持つマニフェストアイコンエントリをコピーし192x192と512x512でアイコンをエクスポートします。
主な用途
- アプリアイコンの主要な視覚要素が本番デプロイ前にマスク可能セーフゾーン内に収まることを確認します。
- 適切なサイズ、purpose、typeフィールドを持つ正しく構成されたマニフェストアイコンエントリを生成します。
- 異なるパディング値がAndroidおよびChrome OS上のアイコンの可視部分にどのように影響するかをプレビューします。