diff --git a/apps/client/src/index.css b/apps/client/src/index.css
index 4e690a0..7aa4ad3 100644
--- a/apps/client/src/index.css
+++ b/apps/client/src/index.css
@@ -27,13 +27,6 @@
   touch-action: none;
 }
 
-#app {
-  /* safe-area-inset対応：ノッチ・ホームバー領域へのはみ出しを防止 */
-  padding-top: env(safe-area-inset-top);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: env(safe-area-inset-left);
-  padding-right: env(safe-area-inset-right);
-}
 
 a {
   font-weight: 500;
diff --git a/apps/client/src/scenes/game/input/bomb/presentation/BombButton.styles.ts b/apps/client/src/scenes/game/input/bomb/presentation/BombButton.styles.ts
index 38b7d25..902bd69 100644
--- a/apps/client/src/scenes/game/input/bomb/presentation/BombButton.styles.ts
+++ b/apps/client/src/scenes/game/input/bomb/presentation/BombButton.styles.ts
@@ -4,6 +4,7 @@
  * 固定スタイルと動的スタイル生成関数を提供する
  */
 import type { CSSProperties } from "react";
+import { safeBottom, safeRight } from "@client/styles/safeArea";
 
 /** 爆弾ボタン外枠の固定スタイル */
 export const BOMB_BUTTON_FRAME_STYLE: CSSProperties = {
@@ -19,8 +20,8 @@
 /** 爆弾ボタン入力領域の固定スタイル */
 export const BOMB_BUTTON_HIT_AREA_STYLE: CSSProperties = {
   position: "fixed",
-  right: "max(24px, calc(24px + env(safe-area-inset-right)))",
-  bottom: "max(28px, calc(28px + env(safe-area-inset-bottom)))",
+  right: safeRight(24),
+  bottom: safeBottom(28),
   width: "120px",
   height: "120px",
   borderRadius: "50%",
diff --git a/apps/client/src/scenes/game/styles/GameView.styles.ts b/apps/client/src/scenes/game/styles/GameView.styles.ts
index 86a6b82..511ff1e 100644
--- a/apps/client/src/scenes/game/styles/GameView.styles.ts
+++ b/apps/client/src/scenes/game/styles/GameView.styles.ts
@@ -4,6 +4,7 @@
  * 画面全体レイアウトとオーバーレイ表示の見た目を定義する
  */
 import type { CSSProperties } from "react";
+import { safeLeft, safeRight } from "@client/styles/safeArea";
 
 /** ゲーム画面全体のルートスタイル */
 export const GAME_VIEW_ROOT_STYLE: CSSProperties = {
@@ -36,7 +37,7 @@
 export const GAME_VIEW_TOP_RIGHT_OVERLAY_STYLE: CSSProperties = {
   position: "absolute",
   top: "20px",
-  right: "max(16px, calc(16px + env(safe-area-inset-right)))",
+  right: safeRight(16),
   zIndex: 24,
   display: "flex",
   alignItems: "flex-start",
@@ -76,7 +77,7 @@
 export const GAME_VIEW_HP_GAUGE_STYLE: CSSProperties = {
   position: "absolute",
   top: "20px",
-  left: "max(16px, calc(16px + env(safe-area-inset-left)))",
+  left: safeLeft(16),
   zIndex: 12,
   color: "white",
   fontSize: "14px",
diff --git a/apps/client/src/scenes/lobby/LobbyScene.tsx b/apps/client/src/scenes/lobby/LobbyScene.tsx
index 65f2c5e..96b5d5f 100644
--- a/apps/client/src/scenes/lobby/LobbyScene.tsx
+++ b/apps/client/src/scenes/lobby/LobbyScene.tsx
@@ -4,6 +4,22 @@
 import { config } from "@client/config";
 import { OVERLAY_BUTTON_STYLE } from "@client/scenes/shared/styles/overlayStyles";
 import { LobbyRuleModal } from "./components/LobbyRuleModal";
+import {
+  LOBBY_BACK_BUTTON_STYLE,
+  LOBBY_BACKGROUND_STYLE,
+  LOBBY_CONTAINER_STYLE,
+  LOBBY_CONTROLS_BLOCK_STYLE,
+  LOBBY_LABEL_STYLE,
+  LOBBY_LEFT_INNER_STYLE,
+  LOBBY_LEFT_PANEL_STYLE,
+  LOBBY_PLAYER_LIST_HEADER_STYLE,
+  LOBBY_PLAYER_LIST_ITEM_STYLE,
+  LOBBY_PLAYER_LIST_PANEL_STYLE,
+  LOBBY_SELECT_STYLE,
+  LOBBY_START_BUTTON_STYLE,
+  LOBBY_TITLE_STYLE,
+  LOBBY_WAITING_STYLE,
+} from "./styles/LobbyScene.styles";
 
 type Props = {
   room: domain.room.Room | null;
@@ -95,11 +111,7 @@
   return (
     <>
       <style>{`
-        /* 全てのエレメントの幅・高さ計算に余白(padding)を含める魔法のCSS */
-        * {
-          box-sizing: border-box;
-        }
-
+        * { box-sizing: border-box; }
         .lobby-main-layout {
           display: flex;
           flex-direction: row;
@@ -108,7 +120,6 @@
           gap: 20px;
           min-height: 0;
         }
-
         .lobby-player-list {
           list-style: none;
           padding: 0 10px 0 0;
@@ -118,116 +129,32 @@
           flex-grow: 1;
           min-height: 0;
         }
-
-        /* スクロールバーの見た目をスマホ・PCでスッキリさせる */
-        ::-webkit-scrollbar {
-          width: 8px;
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: #555;
-          border-radius: 4px;
-        }
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-thumb { background-color: #555; border-radius: 4px; }
       `}</style>
 
-      {/* 🌟🌟 追加：背景のWebPアニメーション 🌟🌟 */}
-      <div
-        style={{
-          position: "fixed",
-          top: 0,
-          left: 0,
-          width: "100vw",
-          height: "100dvh",
-          backgroundImage: "url('/LobbyAni2.webp')", // ここで画像を読み込み
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          zIndex: 0, // UIの背面レイヤーとして表示する
-          pointerEvents: "none",
-          filter: "brightness(0.4)", // UIの文字を見やすくするために画像を少し暗くする
-        }}
-      />
+      {/* 背景アニメーション */}
+      <div style={LOBBY_BACKGROUND_STYLE} />
 
-      <div
-        className="lobby-container"
-        style={{
-          position: "fixed",
-          inset: 0,
-          padding: "20px",
-          color: "white",
-          // 🌟 変更：元の "#222" (真っ黒) から "transparent" (透明) に変更！
-          background: "transparent",
-          height: "100dvh",
-          width: "100vw",
-          overflowX: "hidden",
-          overflowY: "auto",
-          WebkitOverflowScrolling: "touch",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          zIndex: 1,
-        }}
-      >
+      <div className="lobby-container" style={LOBBY_CONTAINER_STYLE}>
         <button
           onClick={onBackToTitle}
-          style={{
-            ...OVERLAY_BUTTON_STYLE,
-            position: "absolute",
-            top: "20px",
-            left: "20px",
-          }}
+          style={{ ...OVERLAY_BUTTON_STYLE, ...LOBBY_BACK_BUTTON_STYLE }}
         >
           タイトルへ戻る
         </button>
 
-        <h2
-          style={{
-            fontSize: "clamp(1.5rem, 4vw, 2rem)",
-            margin: "0 0 15px 0",
-            // 🌟 追加：文字が背景に埋もれないように影をつける
-            textShadow: "2px 2px 4px rgba(0,0,0,0.8)",
-          }}
-        >
+        <h2 style={LOBBY_TITLE_STYLE}>
           ルーム: {room.roomId} (待機中)
         </h2>
 
         <div className="lobby-main-layout">
           {/* 左半分: スタートボタン or 待機メッセージ */}
-          <div
-            style={{
-              flex: 1,
-              minWidth: 0,
-              display: "flex",
-              flexDirection: "column",
-              padding: "4px 10px 10px",
-            }}
-          >
-            <div
-              style={{
-                width: "100%",
-                flexGrow: 1,
-                display: "flex",
-                alignItems: "flex-start",
-                justifyContent: "flex-start",
-                paddingTop: "2px",
-              }}
-            >
+          <div style={LOBBY_LEFT_PANEL_STYLE}>
+            <div style={LOBBY_LEFT_INNER_STYLE}>
               {isMeOwner ? (
-                <div
-                  style={{
-                    width: "100%",
-                    maxWidth: "350px",
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "12px",
-                  }}
-                >
-                  <label
-                    htmlFor="start-player-count"
-                    style={{
-                      fontSize: "0.95rem",
-                      fontWeight: 700,
-                      textShadow: "1px 1px 2px rgba(0,0,0,0.7)",
-                    }}
-                  >
+                <div style={LOBBY_CONTROLS_BLOCK_STYLE}>
+                  <label htmlFor="start-player-count" style={LOBBY_LABEL_STYLE}>
                     ゲーム人数
                   </label>
                   <select
@@ -236,16 +163,7 @@
                     onChange={(event) => {
                       setSelectedStartPlayerCount(Number(event.target.value));
                     }}
-                    style={{
-                      width: "100%",
-                      padding: "10px 12px",
-                      borderRadius: "8px",
-                      border: "1px solid rgba(255,255,255,0.4)",
-                      background: "rgba(0,0,0,0.55)",
-                      color: "white",
-                      fontSize: "1rem",
-                      fontWeight: 700,
-                    }}
+                    style={LOBBY_SELECT_STYLE}
                   >
                     {startPlayerCountOptions.map((count) => (
                       <option key={count} value={count}>
@@ -254,14 +172,7 @@
                     ))}
                   </select>
 
-                  <label
-                    htmlFor="field-size-preset"
-                    style={{
-                      fontSize: "0.95rem",
-                      fontWeight: 700,
-                      textShadow: "1px 1px 2px rgba(0,0,0,0.7)",
-                    }}
-                  >
+                  <label htmlFor="field-size-preset" style={LOBBY_LABEL_STYLE}>
                     フィールドサイズ
                   </label>
                   <select
@@ -270,16 +181,7 @@
                     onChange={(event) => {
                       setSelectedFieldSizePreset(event.target.value as FieldSizePreset);
                     }}
-                    style={{
-                      width: "100%",
-                      padding: "10px 12px",
-                      borderRadius: "8px",
-                      border: "1px solid rgba(255,255,255,0.4)",
-                      background: "rgba(0,0,0,0.55)",
-                      color: "white",
-                      fontSize: "1rem",
-                      fontWeight: 700,
-                    }}
+                    style={LOBBY_SELECT_STYLE}
                   >
                     {fieldPresetOptions.map((preset) => (
                       <option key={preset} value={preset}>
@@ -288,68 +190,26 @@
                     ))}
                   </select>
 
-                  <button
-                    onClick={handleStart}
-                    style={{
-                      width: "100%",
-                      padding: "20px",
-                      fontSize: "clamp(1.2rem, 3vw, 1.8rem)",
-                      cursor: "pointer",
-                      backgroundColor: "#4ade80",
-                      color: "#111",
-                      border: "none",
-                      borderRadius: "8px",
-                      fontWeight: "bold",
-                      boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
-                    }}
-                  >
+                  <button onClick={handleStart} style={LOBBY_START_BUTTON_STYLE}>
                     ゲームスタート
                   </button>
 
                   <button
-                    onClick={() => {
-                      setIsRuleModalOpen(true);
-                    }}
-                    style={{
-                      ...OVERLAY_BUTTON_STYLE,
-                      width: "100%",
-                    }}
+                    onClick={() => { setIsRuleModalOpen(true); }}
+                    style={{ ...OVERLAY_BUTTON_STYLE, width: "100%" }}
                   >
                     ルールを見る
                   </button>
                 </div>
               ) : (
-                <div
-                  style={{
-                    width: "100%",
-                    maxWidth: "350px",
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "12px",
-                  }}
-                >
-                  <div
-                    style={{
-                      padding: "20px",
-                      fontSize: "clamp(1.2rem, 3vw, 1.5rem)",
-                      backgroundColor: "#555",
-                      color: "#ccc",
-                      borderRadius: "8px",
-                      textAlign: "center",
-                      boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
-                    }}
-                  >
+                <div style={LOBBY_CONTROLS_BLOCK_STYLE}>
+                  <div style={LOBBY_WAITING_STYLE}>
                     ホストの開始を待っています...
                   </div>
 
                   <button
-                    onClick={() => {
-                      setIsRuleModalOpen(true);
-                    }}
-                    style={{
-                      ...OVERLAY_BUTTON_STYLE,
-                      width: "100%",
-                    }}
+                    onClick={() => { setIsRuleModalOpen(true); }}
+                    style={{ ...OVERLAY_BUTTON_STYLE, width: "100%" }}
                   >
                     ルールを見る
                   </button>
@@ -359,49 +219,15 @@
           </div>
 
           {/* 右半分: 参加プレイヤーリスト */}
-          <div
-            style={{
-              flex: 1,
-              minWidth: 0,
-              // 🌟 変更：ベタ塗りのグレーから、後ろの動画がうっすら透ける黒に変更！
-              background: "rgba(0, 0, 0, 0.6)",
-              padding: "20px",
-              borderRadius: "8px",
-              display: "flex",
-              flexDirection: "column",
-              minHeight: 0,
-              boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
-              // 🌟 追加：透け感を引き立たせるための薄い枠線
-              border: "1px solid rgba(255, 255, 255, 0.1)",
-            }}
-          >
-            <h3
-              style={{
-                borderBottom: "1px solid #555",
-                paddingBottom: "10px",
-                margin: "0 0 10px 0",
-                fontSize: "clamp(1rem, 3vw, 1.2rem)",
-              }}
-            >
+          <div style={LOBBY_PLAYER_LIST_PANEL_STYLE}>
+            <h3 style={LOBBY_PLAYER_LIST_HEADER_STYLE}>
               参加プレイヤー ({room.players.length}/{room.maxPlayers})
             </h3>
-            <ul
-              className="lobby-player-list"
-            >
+            <ul className="lobby-player-list">
               {room.players.map((p: domain.room.RoomMember) => (
-                <li
-                  key={p.id}
-                  style={{
-                    margin: "10px 0",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "10px",
-                  }}
-                >
+                <li key={p.id} style={LOBBY_PLAYER_LIST_ITEM_STYLE}>
                   <span>{p.id === myId ? "🟢" : "⚪"}</span>
-                  <span
-                    style={{ fontWeight: p.id === myId ? "bold" : "normal" }}
-                  >
+                  <span style={{ fontWeight: p.id === myId ? "bold" : "normal" }}>
                     {p.name}
                   </span>
                   {p.isOwner && <span style={{ fontSize: "0.9em" }}>👑</span>}
@@ -419,9 +245,7 @@
 
       {isRuleModalOpen && (
         <LobbyRuleModal
-          onClose={() => {
-            setIsRuleModalOpen(false);
-          }}
+          onClose={() => { setIsRuleModalOpen(false); }}
         />
       )}
     </>
diff --git a/apps/client/src/scenes/lobby/styles/LobbyScene.styles.ts b/apps/client/src/scenes/lobby/styles/LobbyScene.styles.ts
new file mode 100644
index 0000000..769dcac
--- /dev/null
+++ b/apps/client/src/scenes/lobby/styles/LobbyScene.styles.ts
@@ -0,0 +1,155 @@
+/**
+ * LobbyScene.styles
+ * LobbyScene の描画スタイル定数を集約する
+ */
+import type { CSSProperties } from "react";
+import { safeLeft, safeTop } from "@client/styles/safeArea";
+
+/** 背景アニメーション画像レイヤーのスタイル */
+export const LOBBY_BACKGROUND_STYLE: CSSProperties = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100dvh",
+  backgroundImage: "url('/LobbyAni2.webp')",
+  backgroundSize: "cover",
+  backgroundPosition: "center",
+  zIndex: 0,
+  pointerEvents: "none",
+  filter: "brightness(0.4)",
+};
+
+/** メインコンテナのスタイル */
+export const LOBBY_CONTAINER_STYLE: CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  padding: "20px",
+  color: "white",
+  background: "transparent",
+  height: "100dvh",
+  width: "100vw",
+  overflowX: "hidden",
+  overflowY: "auto",
+  WebkitOverflowScrolling: "touch",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  zIndex: 1,
+};
+
+/** タイトルへ戻るボタンのスタイル */
+export const LOBBY_BACK_BUTTON_STYLE: CSSProperties = {
+  position: "absolute",
+  top: safeTop(20),
+  left: safeLeft(20),
+};
+
+/** ルームタイトルのスタイル */
+export const LOBBY_TITLE_STYLE: CSSProperties = {
+  fontSize: "clamp(1.5rem, 4vw, 2rem)",
+  margin: "0 0 15px 0",
+  textShadow: "2px 2px 4px rgba(0,0,0,0.8)",
+};
+
+/** 左パネルのスタイル */
+export const LOBBY_LEFT_PANEL_STYLE: CSSProperties = {
+  flex: 1,
+  minWidth: 0,
+  display: "flex",
+  flexDirection: "column",
+  padding: "4px 10px 10px",
+};
+
+/** 左パネル内コントロール群ラッパーのスタイル */
+export const LOBBY_LEFT_INNER_STYLE: CSSProperties = {
+  width: "100%",
+  flexGrow: 1,
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "flex-start",
+  paddingTop: "2px",
+};
+
+/** オーナー・非オーナー共通のコントロールブロックのスタイル */
+export const LOBBY_CONTROLS_BLOCK_STYLE: CSSProperties = {
+  width: "100%",
+  maxWidth: "350px",
+  display: "flex",
+  flexDirection: "column",
+  gap: "12px",
+};
+
+/** セレクトラベルのスタイル */
+export const LOBBY_LABEL_STYLE: CSSProperties = {
+  fontSize: "0.95rem",
+  fontWeight: 700,
+  textShadow: "1px 1px 2px rgba(0,0,0,0.7)",
+};
+
+/** セレクトボックスのスタイル */
+export const LOBBY_SELECT_STYLE: CSSProperties = {
+  width: "100%",
+  padding: "10px 12px",
+  borderRadius: "8px",
+  border: "1px solid rgba(255,255,255,0.4)",
+  background: "rgba(0,0,0,0.55)",
+  color: "white",
+  fontSize: "1rem",
+  fontWeight: 700,
+};
+
+/** ゲームスタートボタンのスタイル */
+export const LOBBY_START_BUTTON_STYLE: CSSProperties = {
+  width: "100%",
+  padding: "20px",
+  fontSize: "clamp(1.2rem, 3vw, 1.8rem)",
+  cursor: "pointer",
+  backgroundColor: "#4ade80",
+  color: "#111",
+  border: "none",
+  borderRadius: "8px",
+  fontWeight: "bold",
+  boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
+};
+
+/** 非オーナー待機表示のスタイル */
+export const LOBBY_WAITING_STYLE: CSSProperties = {
+  padding: "20px",
+  fontSize: "clamp(1.2rem, 3vw, 1.5rem)",
+  backgroundColor: "#555",
+  color: "#ccc",
+  borderRadius: "8px",
+  textAlign: "center",
+  boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
+};
+
+/** 右パネル（プレイヤーリスト）のスタイル */
+export const LOBBY_PLAYER_LIST_PANEL_STYLE: CSSProperties = {
+  flex: 1,
+  minWidth: 0,
+  background: "rgba(0, 0, 0, 0.6)",
+  padding: "20px",
+  borderRadius: "8px",
+  display: "flex",
+  flexDirection: "column",
+  minHeight: 0,
+  boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
+  border: "1px solid rgba(255, 255, 255, 0.1)",
+};
+
+/** プレイヤーリストヘッダーのスタイル */
+export const LOBBY_PLAYER_LIST_HEADER_STYLE: CSSProperties = {
+  borderBottom: "1px solid #555",
+  paddingBottom: "10px",
+  margin: "0 0 10px 0",
+  fontSize: "clamp(1rem, 3vw, 1.2rem)",
+};
+
+/** プレイヤーリスト1行のスタイル */
+export const LOBBY_PLAYER_LIST_ITEM_STYLE: CSSProperties = {
+  margin: "10px 0",
+  display: "flex",
+  alignItems: "center",
+  gap: "10px",
+};
diff --git a/apps/client/src/scenes/title/TitleScene.tsx b/apps/client/src/scenes/title/TitleScene.tsx
index 2f7d0b6..d261437 100644
--- a/apps/client/src/scenes/title/TitleScene.tsx
+++ b/apps/client/src/scenes/title/TitleScene.tsx
@@ -56,8 +56,6 @@
         style={{
           position: "fixed",
           inset: 0,
-          width: "100vw",
-          height: "100lvh",
           overflow: "hidden",
           backgroundImage: "url('/title.png')",
           backgroundSize: "cover",
diff --git a/apps/client/src/styles/safeArea.ts b/apps/client/src/styles/safeArea.ts
new file mode 100644
index 0000000..55dbc5e
--- /dev/null
+++ b/apps/client/src/styles/safeArea.ts
@@ -0,0 +1,20 @@
+/**
+ * safeArea
+ * safe-area-inset を考慮したCSSオフセット値生成ユーティリティ
+ */
+
+/** 右端オフセットにsafe-area-inset-rightを加算した値を返す */
+export const safeRight = (px: number): string =>
+  `max(${px}px, calc(${px}px + env(safe-area-inset-right)))`
+
+/** 左端オフセットにsafe-area-inset-leftを加算した値を返す */
+export const safeLeft = (px: number): string =>
+  `max(${px}px, calc(${px}px + env(safe-area-inset-left)))`
+
+/** 上端オフセットにsafe-area-inset-topを加算した値を返す */
+export const safeTop = (px: number): string =>
+  `max(${px}px, calc(${px}px + env(safe-area-inset-top)))`
+
+/** 下端オフセットにsafe-area-inset-bottomを加算した値を返す */
+export const safeBottom = (px: number): string =>
+  `max(${px}px, calc(${px}px + env(safe-area-inset-bottom)))`
diff --git a/apps/client/vite.config.ts b/apps/client/vite.config.ts
index 7372d12..5e5cdfd 100644
--- a/apps/client/vite.config.ts
+++ b/apps/client/vite.config.ts
@@ -18,7 +18,20 @@
           navigateFallback: 'index.html',
           // Socket.IO の通信をService Workerのキャッシュ対象から除外
           navigateFallbackDenylist: [/^\/socket\.io/],
-          runtimeCaching: [],
+          runtimeCaching: [
+            {
+              // 画像アセットをキャッシュして初回以降の読み込みを高速化
+              urlPattern: /\.(?:png|webp|svg)$/i,
+              handler: 'CacheFirst',
+              options: {
+                cacheName: 'image-assets',
+                expiration: {
+                  maxEntries: 30,
+                  maxAgeSeconds: 60 * 60 * 24 * 30, // 30日
+                },
+              },
+            },
+          ],
         },
         manifest: {
           name: 'PixelPaintWar',