diff --git a/README.md b/README.md
index 8ad1338..abf5fff 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,28 @@
 # SkillSemiWebGame
 
 設定値（config）の配置ルールと定数一覧は [packages/shared/src/config/README.md](packages/shared/src/config/README.md) を参照してください。
+
+## クライアント環境変数（Vite）
+
+`apps/client/src/config/index.ts` の `PROD_SERVER_URL` は `import.meta.env.VITE_PROD_SERVER_URL` を参照します。
+
+- `VITE_PROD_SERVER_URL` はクライアント用の環境変数です（Viteビルド時に埋め込まれます）。
+- Renderでは server サービスではなく、client をビルドして配信するサービス側で設定してください。
+- 値を変更した場合は再デプロイ（再ビルド）が必要です。
+- `VITE_*` の値はブラウザから参照可能なため、秘密情報は設定しないでください。
+
+### Render での設定手順
+
+1. Render ダッシュボードで client サービスを開く
+2. `Environment` で環境変数を追加する
+3. `Key`: `VITE_PROD_SERVER_URL`
+4. `Value`: `https://<your-server-domain>`
+5. 保存後に再デプロイする
+
+### ローカル開発での例
+
+`apps/client/.env.development`
+
+```env
+VITE_PROD_SERVER_URL=https://<your-server-domain>
+```
diff --git a/apps/client/src/config/index.ts b/apps/client/src/config/index.ts
index fa3f978..87b1862 100644
--- a/apps/client/src/config/index.ts
+++ b/apps/client/src/config/index.ts
@@ -71,7 +71,7 @@
   get DEV_SERVER_URL() {
     return `${this.DEV_SERVER_HOST}:${this.DEV_SERVER_PORT}`;
   },
-  PROD_SERVER_URL: "https://skillsemiwebgame.onrender.com",
+  PROD_SERVER_URL: import.meta.env?.VITE_PROD_SERVER_URL,
   SOCKET_TRANSPORTS: ["websocket", "polling"],
   SOCKET_IO_PATH: sharedConfig.NETWORK_CONFIG.SOCKET_IO_PATH,
 } as const;
diff --git a/apps/client/src/vite-env.d.ts b/apps/client/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/apps/client/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/client/tsconfig.node.json b/apps/client/tsconfig.node.json
index 8a67f62..41f60ef 100644
--- a/apps/client/tsconfig.node.json
+++ b/apps/client/tsconfig.node.json
@@ -4,7 +4,7 @@
     "target": "ES2023",
     "lib": ["ES2023"],
     "module": "ESNext",
-    "types": ["node"],
+    "types": ["node", "vite/client"],
     "skipLibCheck": true,
 
     /* Bundler mode */