マスカブルアイコンとは?

Android適応アイコンはアイコンをシステム定義の形状（円·スクワークル·角丸四角）にクロップ。`purpose: maskable` アイコンはロゴ周囲に安全領域パディングを含む → クロップがエッジを切り落とさない。192/512でロゴ周囲~20%パディングのマスカブルバリアントを生成。

manifest.jsonとAppleメタタグの両方が必要?

iOSでホーム画面追加を望むなら yes。Appleは部分的なマニフェストサポート（theme_color·`apple-touch-icon` 経由のアイコン）あるがほとんど無視。`apple-mobile-web-app-capable` メタが実際にiOSがサイトをスタンドアロンアプリとして扱うようにする。

PWA Manifest ビルダー

開発

PWAマニフェストはブラウザとOSにウェブアプリのインストールと表示方法を伝える: 起動アイコン·スプラッシュカラー·フルスクリーン vs ブラウザクロム·対応方向·ディープリンクスコープ。このビルダーは実際に必要なフィールドで仕様準拠の `manifest.json` を生成 — Android安全領域用のマスカブルバリアント含む合理的なデフォルトアイコンセット（192px·512px）。出力には `<link rel="manifest">` とApple固有の `apple-mobile-web-app-*` メタタグも含む — Appleはまだ完全なマニフェストサポートを実装しておらず、クロスプラットフォームのインストール可能性には両方必要。すべて編集可能、入力するとJSONが再生成される。

—

名前Short name（ホーム画面）

説明

Start URLScope

表示モード方向

テーマカラー

背景色

Lang方向（Direction）カテゴリー

アイコン

アイコン基本パス

manifest.json

{
  "name": "My App",
  "short_name": "MyApp",
  "description": "A progressive web app",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "lang": "en",
  "categories": [
    "productivity",
    "utilities"
  ],
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

HTML head（link + Appleメタ）

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0ea5e9" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="MyApp" />
<link rel="apple-touch-icon" href="/icons/icon-180.png" />

manifest.jsonは `Content-Type: application/manifest+json` で配信。Lighthouse PWA監査が欠落フィールドをフラグ。

使い方

name + short_name を設定（short_nameはホーム画面に表示 — 12文字未満推奨）。start_urlは起動時に開くべき場所。
表示モードを選択: `standalone`（ブラウザUIなし、推奨）が最も一般的。`fullscreen` はステータスバー非表示、`minimal-ui` は薄いブラウザシェル維持。
アイコン追加。デフォルトはAndroid（192/512）、適応アイコン用マスカブルバリアントをカバー。JSONを `manifest.json` に、HTMLを `<head>` にコピー。

よくある質問

マスカブルアイコンとは?: Android適応アイコンはアイコンをシステム定義の形状（円·スクワークル·角丸四角）にクロップ。`purpose: maskable` アイコンはロゴ周囲に安全領域パディングを含む → クロップがエッジを切り落とさない。192/512でロゴ周囲~20%パディングのマスカブルバリアントを生成。
manifest.jsonとAppleメタタグの両方が必要?: iOSでホーム画面追加を望むなら yes。Appleは部分的なマニフェストサポート（theme_color·`apple-touch-icon` 経由のアイコン）あるがほとんど無視。`apple-mobile-web-app-capable` メタが実際にiOSがサイトをスタンドアロンアプリとして扱うようにする。

PWA Manifest ビルダー

使い方

よくある質問

関連ツール

JWT デコーダー

UUID ジェネレーター

ハッシュ生成 (SHA)

URL エンコーダー / デコーダー

Base64 エンコーダー / デコーダー

JSON フォーマッター & バリデーター