定義
Progressive Web App（PWA／プログレッシブ・ウェブ・アプリ） とは、Webサイトの技術（HTML・CSS・JavaScript）を用いながら、ネイティブアプリに近いユーザー体験を提供するアプリケーション形態です。Service Worker、Web App Manifest、HTTPS という3つの技術基盤を組み合わせることで、オフライン動作、プッシュ通知、ホーム画面へのインストール、高速な読み込みを実現します。
DTC／EC業界では「アプリストアを経由せずに、アプリ級の体験を顧客に届ける手段」として再評価が進んでいます。2024年時点でモバイル経由のEC売上の約 73% がブラウザ経由であり、PWAはそのブラウザ接点をそのまま収益化チャネルに変える技術です。
类比（たとえ話）
PWAを理解する最適なたとえは「軽自動車の車体に、高級セダンの内装を載せた車」です。
- 車体（=Web技術）：誰でも製造でき、どこでも走れる。整備工場（ブラウザ）が共通。
- 内装（=ネイティブ体験）：乗り心地、静粛性、快適装備は高級車級。
- 給油（=アップデート）：アプリストアという「ディーラー」に行かずとも、次に乗った瞬間に最新仕様になっている。
つまりPWAは「ストア審査という関所を通らず、それでもアプリの快適さを提供する」という発想です。
公式（技術構成式）
PWAの成立条件は、以下の積集合で表されます。
PWA = Service Worker × Web App Manifest × HTTPS
- Service Worker：バックグラウンドで動くプロキシ。キャッシュ戦略とオフライン対応を担う。
- Web App Manifest：manifest.json にアプリ名、アイコン、テーマカラー、display: standalone を定義。
- HTTPS：Service Workerの登録に必須。セキュリティ要件。
パフォーマンス指標も数値で管理します。
LCP（Largest Contentful Paint） ≤ 2.5秒 FID（First Input Delay） ≤ 100ms CLS（Cumulative Layout Shift） ≤ 0.1
この3つを「Core Web Vitals」と呼び、Google検索順位にも直結します。
比較表：PWA vs ネイティブアプリ vs 従来Web
| 項目 | PWA | ネイティブアプリ | 従来Web |
|---|---|---|---|
| インストール | ホーム画面追加（ストア不要） | App Store / Google Play 必須 | 不可 |
| オフライン動作 | ◎（Service Worker） | ◎ | × |
| プッシュ通知 | ○（iOS 16.4以降対応） | ◎ | × |
| 開発コスト | 低（1コードベース） | 高（iOS/Android別） | 低 |
| アップデート | 自動 | ストア審査・承認待ち | 自動 |
| ストア手数料 | 0% | 15〜30% | 0% |
| デバイス機能 | △（制限あり） | ◎（フルアクセス） | × |
| 発見性 | SEO + ストア検索 | ストア検索のみ | SEOのみ |
DTC文脈では「ストア手数料15〜30%の回避」と「カゴ落ち率の改善」が最大の導入動機です。あるアパレルDTCではPWA化後にCVRが 1.8% → 3.1% へ改善、LCPは 4.2秒 → 1.9秒 に短縮した事例があります。
応用場景（DTC／ECでの活用）
1. リピート購入の高速化：Service Workerで商品一覧とカートをキャッシュ。再訪時の表示は0.5秒以下。
2. プッシュ通知による再訪喚起：セール開始、カート放棄リマインド、入荷通知。開封率はメールの約 3〜5倍 とも言われる。
3. オフライン閲覧：電車内や地下でも商品閲覧可能。購買意欲の瞬間を逃さない。
4. ホーム画面追加による継続接点：ストア審査なしで「アプリ的アイコン」を獲得。再訪率が平均 2.3倍 に向上した報告例あり。
5. 低帯域地域・新興国対応：通信が不安定な市場でも快適に動作。越境ECで特に有効。
よくある誤解（常見誤区）
- 「PWA＝アプリの代替」：誤り。ネイティブの全機能（高度なカメラ制御、Bluetooth、バックグラウンド位置情報など）は制限される。併用戦略が現実的。
- 「iOSでは動かない」：2023年以降、iOS 16.4でプッシュ通知、ホーム画面追加も正式対応。ただしSafari経由のみなど制約は残る。
- 「SEOに不利」：逆。Core Web Vitals改善によりSEO評価は上がる傾向。
- 「一度作れば終わり」：Service Workerのキャッシュ戦略は継続的なメンテが必要。古いキャッシュが障害になるケースも。
- 「ストア手数料が完全ゼロ」：決済は自社決済ゲートウェイ経由になるため、決済手数料（2.9%〜3.6%程度）は別途発生する。
関連術語
- Service Worker：PWAの中核。キャッシュとオフライン制御。
- Web App Manifest：インストール可能性を定義するJSON。
- Core Web Vitals：LCP・FID・CLSからなるUX指標。
- AMP（Accelerated Mobile Pages）：高速化技術だがPWAとは別物。
- Headless Commerce：PWAと相性の良いECアーキテクチャ。
- App Shell Model：UIの骨格を先に描画するPWA設計手法。
PWAは「ストアの審査と手数料から解放され、ブラウザの瞬間購買力を最大化する」ための、DTC時代の必須インフラです。特にリピート率とCVRに課題を持つブランドにとって、導入ROIは極めて高いと言えます。