PWA specification・complete field・即時検証

Manifest.json Generator PWA Manifest Generator

Progressive Web App（PWA）仕様に準拠した manifest.json をすばやく作成します。 完全なフィールド設定、アイコン管理、Shortcuts、Screenshots、リアルタイム検証に対応します。

Manifest.json ジェネレーター
基本情報
表示とテーマ
表示モード*
向き
アプリアイコン

💡 PWA のインストールには少なくとも 192×192 と 512×512 のアイコンが必要です。「Add standard sizes」を使うと 72〜512 まで計 8 サイズをまとめて追加できます。

ショートカット

Shortcuts を設定すると、Android では app icon を long press した際に指定 page へすばやく移動できます。

スクリーンショット

Screenshots はアプリストアやインストール画面の表示に使われます（Android と desktop Chrome が対応）。

カテゴリー
manifest.json の即時プレビュー
0 B 
{}
検証結果

field を設定するとすぐに validation が実行されます⋯

広告スペース

❓ FAQ FAQ

manifest.json と PWA に関するよくある質問

manifest.json とは何ですか？

manifest.jsonWeb App Manifest は Web application の設定を記述する JSON format の configuration file です。名前、アイコン、表示モード、開始ページ browser が manifest 情報を読み取ることで、Web サイトを「application」として提示できます。

HTML では 1 行のタグで参照します。<link rel="manifest" href="/manifest.json">

manifest.json の主な機能：

  • website を home screen や desktop に「install」できるようにします
  • アプリケーションアイコンとスプラッシュ画面を定義
  • display mode（full screen、independent window など）を制御します。
  • テーマカラーと背景色を設定
  • Android の長押しショートカット（Shortcuts）を宣言
PWA とは何ですか？manifest.json はなぜ必要ですか？

PWA（Progressive Web App） Web ページとネイティブアプリの利点を組み合わせた技術です。PWA はインストール、オフライン動作、通知受信が可能でありながら、アプリストアを介して公開する必要がありません。

完全な PWA には3つの主要要素が必要です：

  1. manifest.json — アプリケーションの識別情報とインストール情報を宣言します（このツールで生成）
  2. Service Worker — offline cache と background function を提供します。
  3. HTTPS — secure transmission の必要条件

💡 Manifest.json はブラウザが「アプリをインストール」プロンプトを表示するための必要条件の一つで、PWA スコアでも重要な項目です。

各列は何を意味しますか？

manifest.json の主要 field は次のとおりです。

  • name / short_name — アプリケーションの正式名称と、インストール後に表示する短縮名です（short_name は 12 文字以下を推奨）。
  • start_url — アプリ起動時に開くページです。/ のような相対パスを使うことをおすすめします。
  • 範囲 — application の navigation range です。範囲外の link は browser で開かれます。
  • 表示 — 表示モード：standalone（独立ウィンドウ）、fullscreen（全画面）、minimal-ui（簡潔な紹介）、browser（ブラウザー）
  • theme_color — ツールバーとシステムバーの色
  • background_color — splash screen と loading phase の background color
  • 向き — 推奨 direction：portrait、landscape、any
  • アイコン — アプリアイコン。src、sizes、type、purpose を含みます
  • ショートカット — Android で icon を長押しした際に表示される quick shortcut
  • スクリーンショット — インストール画面表示のスクリーンショット
  • カテゴリ — アプリケーションカテゴリ（最大 3）
なぜ do we need 192×192 and 512×512 illustrations のですか？

Google の PWA installation standard では manifest に次の 2 icon を含めることが明確に求められます：

192×192 — インストール後、ホーム画面とアプリ一覧に表示されます

512×512 — インストールのヒントと起動画面での使用

どちらか一方でも不足すると、ブラウザーに「アプリをインストール」プロンプトが表示されない場合があります。72～512 px の複数サイズを用意し、各種デバイスで最適な表示品質を確保します。

💡 各アイコンには次を指定してください purpose：any（一般）、maskable（安全マージンを含め、マスク可能）、monochrome（モノクロ）。

manifest.json はどこへ置き、どう deploy しますか？

manifest.json は通常 Web サイトのルートディレクトリ, および HTML では <head> 引用先：

<link rel="manifest" href="/manifest.json">

デプロイ手順：

  1. このツールで field を設定し、manifest.json をダウンロードします。
  2. Webサイトのルートディレクトリ（画像ファイルと同じディレクトリ）へアップロードします
  3. HTML head に manifest 参照タグを追加
  4. 確認 start_url 付き scope 正しい相対パスを指定
  5. Chrome DevTools の Application panel で manifest loading status を確認します

⚠️ 注意：manifest 内のアイコンパスはmanifest ファイルの場所を基準にします, manifest がルートディレクトリにある場合、icon path は通常 / から始まります。

このツールは安全ですか？対応ブラウザーは？

完全に安全です！Manifest.json Generator は 100% 純粋なフロントエンドツール：

  • ✅ すべてのフィールド設定、JSON 生成、検証はブラウザ内で行われます
  • ✅ データがサーバーへアップロードされることはありません
  • ✅ 登録やログインは不要で、読み込み後は完全にオフラインで利用できます。
  • ✅ 設定内容は一切保存されません

ブラウザー互換性： このツールは Chrome、Firefox、Safari、Edge、Opera など主要 browser の最新 version に対応しています。

📖 PWA Manifest 完全ガイド：インストール可能な Web App をゼロから構築する

manifest.json と Progressive Web App について詳しく学ぶ

機能紹介

Manifest.json Generator は ToolHub が提供する無料の PWA Manifest 作成ツールです。グラフィカルな UI から設定できます Application 名、略称、説明、言語、Start Page、Scope を設定します。, 選択 表示モード、画面方向、テーマカラー、および管理 アプリケーションアイコン、Shortcuts、Screenshots、カテゴリ。右側に整形済み manifest.json を即座に生成し、required field、icon integrity、color validity を自動検証します。

manifest.json とは何ですか？

Web App Manifest W3C が策定した、Web アプリケーションのメタデータを JSON 形式で記述する標準です。ブラウザや OS が manifest を読み取ることで、ホーム画面への表示、独立したウィンドウ、スプラッシュ画面やアイコンの設定など、Web サイトをネイティブアプリのように扱えます。

最もシンプルな manifest.json の例：

{ "name": "ToolHub", "short_name": "ToolHub", "start_url": "/", "display": "standalone", "background_color": "#0B1120", "theme_color": "#0B1120", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" } ] }

PWA 入門：なぜ Web サイトを「インストール可能」にするのか？

PWA（Progressive Web App） Web アプリケーションにネイティブアプリのような体験を与えます：

  • インストール可能 — アプリストアを経由せず、ホーム画面へ直接インストールできます
  • オフラインで利用可能 — Service Worker でオフラインアクセスを提供
  • 高効率 — 高速起動と没入感のあるインターフェース（全画面または独立ウィンドウ）
  • 低しきい値 — review は不要で、更新はすぐに反映されます。
  • クロスプラットフォーム — 同じ code で Android、Windows、iOS（一部対応）、macOS をサポートできます。

Manifest.json は PWA の「ID」に相当する重要なメタデータです。これがないと、ブラウザーは Web サイトをインストール可能なアプリとして扱えません。

フィールドの説明

必須フィールド

  • name または short_name — 少なくとも 1 つ、アプリケーション名
  • start_url — 開始ページ
  • display — 表示モード
  • icons — 少なくとも 1 枚の image が必要です。192×192 と 512×512 を推奨します。

重要なフィールド

  • description — アプリケーションの説明
  • lang — 主言語（例：zh-TW、en）
  • scope — ナビゲーション範囲。start_url と同じ階層、またはそれより上位に設定することを推奨します
  • orientation — 方向の優先設定
  • theme_color / background_color — テーマと背景色
  • shortcuts — Android の long press shortcut（最大4件を推奨）
  • screenshots — インストール画面のスクリーンショット
  • categories — カテゴリタグ（最大 3 件）

ベストプラクティス

  • short_name は 12 文字以内に収めてください, メイン画面で切れないようにするため
  • maskable アイコンを用意します — purpose を maskable に設定した icon は四辺に safe margin を確保してください。content は中央約 80% に収めるのが目安です。
  • theme_color は Web サイトの brand と一致させてください。 — モバイル端末の toolbar や system bar の配色にも影響します。
  • start_url に相対パスを使用 — ドメイン変更時のパス切れを防ぎます
  • favicon と一緒に管理 — favicon-generator で生成した PWA アイコンと共用できます

ブラウザー互換性

このツールは最新の Web 標準に基づいて開発され、Google Chrome、Mozilla Firefox、Apple Safari、Microsoft Edge、Opera の最新バージョンに対応しています。最良の使用体験のため、ブラウザは最新版を利用することをおすすめします。

プライバシー保護

ToolHub はデータのプライバシーを重視しています。Manifest.json Generator では 100% 純フロントエンド構成、すべてのフィールド設定、JSON 生成、検証はブラウザー内で行われ、データが外部サーバーへ送信されることはありません。入力内容を保存、解析、共有することもありません。

操作に成功しました