Maskable.app 手順まとめ 丸いPWAアイコン

目的：
Androidが「丸・角丸・しずく型」などに自動で切り抜いても、ロゴが欠けない maskableアイコン（512×512）を作る。
※ 出力画像は「最初から丸いPNG」ではなく、背景で全面が埋まった四角いPNGです。

1) 事前準備（用意するもの）

推奨：ロゴは中央寄せ。外周に余白があるほど、丸く切られても欠けません。

2) Maskable.app で作る（重要：Viewerでは編集できない）

  1. Maskable.app（Editor） を開く
  2. 上部タブで Viewer → Editor をクリック
  3. ※ Editorに切り替えると画像が消えることがありますが正常です（Viewerの読み込みは引き継がれません）。
  4. 右側で Add（追加）→ Image を選び、元画像をアップロード
  5. 右側で Add（追加）→ Color を選び、背景色を追加
  6. レイヤー順：Background（Color）を下、Imageを上にする（一般的にこの順が扱いやすい）
つまずきポイント
  • No effect on color layers：背景（Color）を選択している。Imageレイヤーを選択してから Fit を変更する。
  • This layer cannot be deleted or made translucent...：maskableは不透明が必須。正常な仕様。
  • Fit（Contain/Cover/Fill）が押せない：画像レイヤーが無い or Colorを選択中。Add→Imageで追加してからImageを選択。

3) 見た目を整える（ここが“中が四角”を消す鍵）

  1. 右側のレイヤーで Image（画像） をクリックして選択
  2. Fit を Cover にする（丸に切っても全面が埋まりやすい）
  3. Padding（余白）を 15% 前後 にする（ロゴが欠けない安全域）
  4. 中央の Masks → Circle を選んでプレビュー（欠けていないか確認）

ポイント：背景色があることで、Androidの丸マスク後も「中が四角」に見えません。

4) 書き出し（Export）

  1. Export（輸出） をクリック
  2. PNG 512×512 で保存
  3. ファイル名例：maskable_icon.png

5) サーバーへアップロード（あなたのサイト用）

アップロード先：

/pwa-icons/maskable_icon.png

※ /icons はApache予約フォルダに当たる場合があるので、/pwa-icons 推奨。

6) manifest.webmanifest に追加（maskable指定）

icons配列にこの1ブロックを追加：

{
  "src": "/pwa-icons/maskable_icon.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

例（最終形）：

"icons": [
  { "src": "/pwa-icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/pwa-icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
  {
    "src": "/pwa-icons/maskable_icon.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
  }
]

7) 反映（Androidは再インストールが必要）

  1. ホーム画面のPWAを長押し → アンインストール
  2. Chromeで https://canape2020.stars.ne.jp/index.html?v=1 のように ?v=数字 を付けて開く
  3. ︙ → ホーム画面に追加 → インストール

アイコンは後から更新されにくいので、入れ直しが確実です。

8) 最終チェック

追記：manifestが反映しない場合は、<link rel="manifest" href="/manifest.webmanifest?v=yyyymmdd"> のように URLにバージョンを付けると確実です。