📱 PWAにしたらスマホからのアクセスが変わった話 — 個人開発サイトのモバイル最適化
はじめに — 「ブックマークしてるけど、毎回ブラウザ開くのだるい」
Gravity Portalを公開して数日。Google Analyticsを確認すると、アクセスの約60%がスマートフォンからでした。
パチンコの期待値を計算するユーザーの多くは、パチンコ店にいる時にスマホでアクセスしています。店内で台のスペックを確認し、回転率を入力し、打つべきかどうかを即座に判断する——そんな使い方です。
しかし、通常のWebサイトでは：
- ブラウザを開く → ブックマークを探す → タップ → ページ読み込み待ち
- URLを手入力する → 面倒でやめる
この「アクセスまでの摩擦」を限りなくゼロにする技術がPWA（Progressive Web App）です。
📱 PWAとは何か
一言で言うと
PWAは、Webサイトをネイティブアプリのように使えるようにする技術です。
| 機能 | 通常のWebサイト | PWA | ネイティブアプリ |
|---|---|---|---|
| ホーム画面に追加 | ❌ | ✅ | ✅ |
| オフライン動作 | ❌ | ✅（キャッシュ） | ✅ |
| フルスクリーン | ❌ | ✅ | ✅ |
| アプリストア不要 | ✅ | ✅ | ❌ |
| 更新の即時反映 | ✅ | ✅ | ❌（審査あり） |
| 開発コスト | 低 | 低〜中 | 高 |
要するに、Webの手軽さとアプリの体験を両立できる技術です。
🛠️ 実装手順 — Next.jsにPWAを導入
Step 1: Web Manifest の作成
manifest.jsonはPWAの「名刺」です。アプリ名、アイコン、テーマカラーなどを定義します。
{
"name": "Gravity Portal",
"short_name": "Gravity",
"start_url": "/",
"display": "standalone",
"background_color": "#0f1017",
"theme_color": "#7c7ff2",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192" },
{ "src": "/icon-512.png", "sizes": "512x512" }
]
}Step 2: Service Worker の登録
Service Workerは、ブラウザとサーバーの間に立つ「代理人」です。リクエストをキャッシュし、オフライン時にもコンテンツを返す役割を担います。
Next.jsでは、next-pwaパッケージを使うのが定番でしたが、私はあえて手書きのService Workerを採用しました。理由は：
- キャッシュ戦略を細かくコントロールしたい
- 機種データ（13MB）は積極的にキャッシュして高速化したい
- 計算ロジックはキャッシュせず、常に最新版を使いたい
Step 3: キャッシュ戦略の選択
| リソース | 戦略 | 理由 |
|---|---|---|
| HTML/CSS/JS | Network First | 常に最新版を優先 |
| 機種データJSON | Cache First | 頻繁に変わらない、サイズ大 |
| 画像 | Cache First | 変更されない |
| API（計算） | Network Only | リアルタイム性が必要 |
📊 導入前後の比較
アクセス体験の変化
| 指標 | PWA導入前 | PWA導入後 |
|---|---|---|
| 初回読み込み | 約2.5秒 | 約2.5秒（変わらず） |
| 2回目以降の読み込み | 約1.8秒 | 約0.5秒 |
| アクセス手順 | ブラウザ→ブックマーク→タップ | ホーム画面アイコンをタップ |
| アドレスバー | 表示される | 非表示（フルスクリーン） |
| オフライン時 | エラー画面 | キャッシュから表示 |
特に2回目以降の読み込みが3.6倍高速化したのは大きい。パチンコ店で「ちょっと確認したい」時に、0.5秒でツールが開くのは体験として全く別物です。
ユーザー行動の変化
- ホーム画面に追加してくれるユーザーが増加
- 「アプリはないの？」という問い合わせが減少
- 滞在時間が平均20%増加（ストレスなく使い続けられるため）
⚠️ PWA導入の注意点
1. iOSのPWAサポートは限定的
Androidでは完全なPWA体験を提供できますが、iOSでは：
- プッシュ通知が使えない（iOS 16.4以降で一部対応）
- バックグラウンド同期が動かない
- 「ホームに追加」の導線が分かりにくい
Gravity Portalでは、iOS対応としてService Workerのフォールバックを実装。Service Workerが動かない環境でもWebサイトとして正常に機能するよう設計しています。
2. キャッシュの更新問題
古いキャッシュが残り続けると、ユーザーが最新版のサイトを見られない問題が発生します。Service Workerのバージョン管理とキャッシュの自動クリアの仕組みが必須です。
3. HTTPS必須
Service WorkerはHTTPSでのみ動作します。ローカル開発時はlocalhostが例外として許可されますが、本番環境では必ずSSL証明書が必要です。Vercelを使っていれば自動で対応されます。
💡 まとめ：PWAは「コスパ最強」のモバイル対応
ネイティブアプリを開発するには、iOS/Androidそれぞれの知識が必要で、ストアの審査もあります。個人開発者にとって、この負担は大きすぎる。
PWAなら：
- ✅ 既存のWebサイトに数ファイル追加するだけ
- ✅ ストア審査不要
- ✅ 更新は即時反映
- ✅ ホーム画面にアイコンが出る
- ✅ オフラインでも動く
個人開発サイトのモバイル対応として、PWAはコスパ最強の選択肢です。特にツール系サイト（計算ツール、データベース検索など）との相性は抜群。
「アプリを作るほどではないけど、スマホからの体験を良くしたい」——そんな方にはPWAを強くおすすめします。
📌 関連記事
- Day 1: 構想とNext.jsセットアップ
- バイブコーディング入門: AIに"ノリ"で開発させる新時代の開発スタイル
- Gravity Portal — PWA対応済みのパチンコ分析プラットフォーム