コンテンツにスキップ
DevLab

📱 Web App Manifest ジェネレーター

PWA に必要な manifest.json をフォームで作成。name / start_url / display / theme_color、複数サイズの icons 表、shortcuts、share_target、protocol_handlers まで対応。HTML link タグも同時出力。

完全無料 登録不要 ブラウザ完結 5 言語対応 ダークモード

🔒 プライバシーについて

基本情報

アイコン (サイズと src)

チェックを入れたサイズが icons 配列に含まれます。type は src の拡張子から自動判定。

アプリショートカット (最大 4 件)


    
    






    
📖 つまずきやすいポイント


        
PWA に必要な manifest.json をフォームで作成します。name / start_url / display / theme_color に加えて、複数サイズの icons、shortcuts、share_target、protocol_handlers まで対応し、HTML の link タグも同時に出力します。処理はブラウザ内で完結します。ただし manifest だけではアプリはインストールできません — インストール可能と判定されるには、HTTPS・Service Worker・必須フィールド・規定サイズのアイコンが揃っている必要があります。「manifest を置いたのにインストールボタンが出ない」の原因は、たいてい manifest の外側にあります。

    
        

        

            
                

                    ケース
                    何が起きるか
                    どうする
                

            
            
                                

                    インストール可能条件は manifest 単体では満たせない
                    ブラウザがインストールを提案するには、複数の条件をすべて満たす必要があります: HTTPS (または localhost)、fetch イベントを持つ Service Worker が登録されていること、name または short_name、start_url、display が standalone / fullscreen / minimal-ui のいずれか、そして192px と 512px のアイコン。1 つでも欠けると、エラーは出ずに単にボタンが現れません — 何が足りないのかを教えてくれないのが最大の難所です。さらに iOS の Safari は manifest の多くを無視します — ホーム画面に追加したときのアイコンは apple-touch-icon から取り、表示モードは apple-mobile-web-app-capable で決まります。
                    推測せず、Chrome DevTools の Application > Manifest を開いてください。 満たしていない条件が具体的な文章で列挙されます — この画面を見るかどうかで、解決までの時間が数時間変わります。Lighthouse の PWA 監査も同じ判定を機械的に実行します。Service Worker は「登録されている」だけでは足りません — fetch イベントのハンドラが実際に存在する必要がありますので、空の sw.js では条件を満たしません。iOS も対象にするなら、manifest とは別に apple-touch-icon (180×180) と apple-mobile-web-app-title を HTML に足してください — manifest だけを整えても iOS では反映されません。
                

                                

                    start_url と scope の相対解決
                    この 2 つはサイトのルートではなく、manifest ファイルの位置を基準に解決されます。/static/manifest.json に置いた manifest で "start_url": "index.html" と書くと、起動 URL は /static/index.html になります — 存在しなければ、インストールはできたのに開くと 404 という状態になります。scope はさらに影響が広く、アプリのウィンドウ内に留まる URL の範囲を決めます — 範囲外へのリンクを踏むと、ブラウザに飛び出します。scope を書かない場合の既定値も manifest の位置なので、/static/ に置いたまま何も書かないと、サイト本体がすべて範囲外になります。そして start_url が scope の外にあると、そもそもインストール可能と判定されません。
                    両方とも先頭スラッシュ付きの絶対パスで書いてください — "start_url": "/"、"scope": "/"。これだけで相対解決の問題は全部消えます。サイトの一部だけを PWA にする場合は "scope": "/app/" のように範囲を明示し、その範囲の中に start_url が入っていることを確認してください。start_url にクエリを付けると、アナリティクスで PWA 経由の起動を区別できます — "/?source=pwa" のように。manifest 自体はどこに置いても構いませんが、<link rel="manifest"> の href と実際のパスを一致させてください — manifest が 404 を返していても、ブラウザは黙って無視するだけで何も表示しません。
                

                                

                    アイコンが Android で切り取られる (maskable)
                    Android のランチャーはアイコンを円形や角丸四角形にマスクします。したがって "purpose": "any" のアイコンだけを用意すると、四隅が切り落とされます — ロゴが四角い枠いっぱいに描かれていると、端の文字が消えます。これを避けるための指定が "purpose": "maskable" で、マスク用のアイコンは中央 40% 程度を安全領域とし、その外側は切られる前提でデザインします。ところがmaskable だけを用意するのも間違いです — マスクしない環境 (デスクトップのタスクバーやスプラッシュ画面) では、余白の大きい小さなロゴとして表示されます。どちらか一方では必ずどこかで破綻するのがこの仕様の要点です。
                    2 種類を別々のエントリとして両方登録してください。 同じ 512×512 でも、枠いっぱいのものを "purpose": "any"、余白を持たせたものを "purpose": "maskable" として並べます — 1 つのエントリに "any maskable" と書く方法もありますが、その場合は両方の要件を同時に満たす図案でなければなりません。確認は Chrome DevTools の Application > Manifest でできます — マスクをかけた状態のプレビューが表示されるので、切れ具合をその場で見られます。サイズは 192 と 512 の 2 つを最低限用意し、SVG ではなく PNG にしてください — SVG のサポートは環境によってばらつきます。
                

                            
        

    

    
        
manifest はキャッシュされます。変更してもすでにインストール済みの端末にはすぐ反映されません — アイコンや名前を差し替えたのに古いままなのは、たいていこれです。反映のタイミングはブラウザ任せなので、開発中は DevTools の Application > Manifest から更新を促し、アンインストールと再インストールで確かめてください。そして manifest.json は Content-Type: application/manifest+json で配信してください — サーバーが text/plain で返すと読み込まれないことがあります。設計面でひとつ: display: "standalone" はブラウザの UI を消すので、戻るボタンも URL バーも無くなります — アプリ内に戻る手段を用意していないと、ユーザーが行き止まりに入ります。外部サイトへのリンクは scope の外なのでブラウザに飛びますが、そこから戻ってこられるとは限りません。最後に、PWA にしたからといってインストールされるわけではありません — インストールを促す導線と、それに見合う利点 (オフライン動作・通知・起動の速さ) をユーザーに示せているかどうかが本体です。

    









    
📖 使い方

    
    
                
  1. 
            1
            
    
                
    基本情報を入力
    
                
    name / short_name / start_url / display / theme_color などを入力。
    
            
    
        
    2. 
                
  2. 
            2
            
    
                
    アイコンとショートカットを設定
    
                
    使うサイズにチェックを入れ、共通プレフィックスと拡張子を指定。必要なら shortcuts を最大 4 件まで追加。
    
            
    
        
    3. 
                
  3. 
            3
            
    
                
    生成してデプロイ
    
                
    「JSON を生成」を押して manifest.json を保存。HTML スニペットを <head> に貼り付ければ PWA として認識されます。
    
            
    
        
    4. 
            






    
❓ よくある質問

    

                

            
                PWA と認識されるための最小要件は？
                
            
            
manifest.json に name (または short_name)、start_url、display: standalone (または fullscreen / minimal-ui)、192x192 と 512x512 のアイコン、HTTPS 提供、Service Worker の登録が必要です。本ツールは前者をすべて満たす出力を行います。

        

                

            
                maskable アイコンは必要ですか？
                
            
            
Android のアダプティブアイコンに最適化するため強く推奨されます。チェックを入れると purpose: "maskable" の 512x512 を 1 件追加します。中央 80% 内に重要な絵柄を配置してください。

        

                

            
                manifest.json の更新が反映されません
                
            
            
ブラウザは manifest.json を強くキャッシュします。Cache-Control を短めに設定するか、HTML から ?v=... 付きで参照する、または Application タブから Update on reload を実行してください。

        

            






    

        
🔗 関連ツール

        
    






    

        
            🐛 このツールで問題が発生しましたか？
            
        

        

            完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。
        


        

                        

            

                
                
            


            

                
                
                

                    ※ 不具合再現のため、ブラウザ情報 (UA / 画面サイズ / 言語 / URL) を自動で送信します