diff --git a/apps/client/public/LobbyAni.webp b/apps/client/public/LobbyAni.webp
new file mode 100644
index 0000000..804616f
--- /dev/null
+++ b/apps/client/public/LobbyAni.webp
Binary files differ
diff --git a/apps/client/src/scenes/lobby/LobbyScene.tsx b/apps/client/src/scenes/lobby/LobbyScene.tsx
index 578fb65..1956dbe 100644
--- a/apps/client/src/scenes/lobby/LobbyScene.tsx
+++ b/apps/client/src/scenes/lobby/LobbyScene.tsx
@@ -14,7 +14,6 @@
 
   return (
     <>
-      \n{" "}
       <style>{`
         /* 全てのエレメントの幅・高さ計算に余白(padding)を含める魔法のCSS */
         * {
@@ -51,6 +50,7 @@
           border-radius: 4px;
         }
       `}</style>
+
       <div className="portrait-blocker">
         <div style={{ fontSize: "4rem", marginBottom: "20px" }}>🔄</div>
         <p style={{ margin: 0, lineHeight: "1.5" }}>
@@ -59,12 +59,30 @@
           スマホを横向きにしてください。
         </p>
       </div>
+
+      {/* 🌟🌟 追加：背景のWebPアニメーション 🌟🌟 */}
+      <div
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100dvh",
+          backgroundImage: "url('/LobbyAni.webp')", // ここで画像を読み込み
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          zIndex: -1, // UIの一番後ろに配置
+          filter: "brightness(0.4)", // UIの文字を見やすくするために画像を少し暗くする
+        }}
+      />
+
       <div
         className="lobby-container"
         style={{
           padding: "20px",
           color: "white",
-          background: "#222",
+          // 🌟 変更：元の "#222" (真っ黒) から "transparent" (透明) に変更！
+          background: "transparent",
           height: "100dvh",
           width: "100vw",
           display: "flex",
@@ -73,30 +91,34 @@
         }}
       >
         <h2
-          style={{ fontSize: "clamp(1.5rem, 4vw, 2rem)", margin: "0 0 15px 0" }}
+          style={{
+            fontSize: "clamp(1.5rem, 4vw, 2rem)",
+            margin: "0 0 15px 0",
+            // 🌟 追加：文字が背景に埋もれないように影をつける
+            textShadow: "2px 2px 4px rgba(0,0,0,0.8)",
+          }}
         >
           ルーム: {room.roomId} (待機中)
         </h2>
 
-        {/* 🌟 ここから左右に分けるコンテナ (flexDirection: "row" に変更) */}
         <div
           style={{
             display: "flex",
             flexDirection: "row",
             width: "100%",
-            maxWidth: "900px" /* 画面幅が広いPCでも間延びしないように */,
-            flexGrow: 1 /* 残りの高さをすべて使う */,
-            gap: "20px" /* 左右の要素の隙間 */,
-            minHeight: 0 /* flex要素内のスクロールを有効にするためのおまじない */,
+            maxWidth: "900px",
+            flexGrow: 1,
+            gap: "20px",
+            minHeight: 0,
           }}
         >
-          {/* 🌟 左半分: スタートボタン or 待機メッセージ */}
+          {/* 左半分: スタートボタン or 待機メッセージ */}
           <div
             style={{
-              flex: 1 /* 左右で1:1の幅にする */,
+              flex: 1,
               display: "flex",
-              alignItems: "center" /* 上下中央揃え */,
-              justifyContent: "center" /* 左右中央揃え */,
+              alignItems: "center",
+              justifyContent: "center",
               padding: "10px",
             }}
           >
@@ -105,7 +127,7 @@
                 onClick={onStart}
                 style={{
                   width: "100%",
-                  maxWidth: "350px" /* ボタンが横に伸びすぎないように制限 */,
+                  maxWidth: "350px",
                   padding: "20px",
                   fontSize: "clamp(1.2rem, 3vw, 1.8rem)",
                   cursor: "pointer",
@@ -114,7 +136,7 @@
                   border: "none",
                   borderRadius: "8px",
                   fontWeight: "bold",
-                  boxShadow: "0 4px 6px rgba(0,0,0,0.3)" /* 立体感を追加 */,
+                  boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
                 }}
               >
                 ゲームスタート
@@ -138,17 +160,20 @@
             )}
           </div>
 
-          {/* 🌟 右半分: 参加プレイヤーリスト */}
+          {/* 右半分: 参加プレイヤーリスト */}
           <div
             style={{
-              flex: 1 /* 左右で1:1の幅にする */,
-              background: "#333",
+              flex: 1,
+              // 🌟 変更：ベタ塗りのグレーから、後ろの動画がうっすら透ける黒に変更！
+              background: "rgba(0, 0, 0, 0.6)",
               padding: "20px",
               borderRadius: "8px",
               display: "flex",
               flexDirection: "column",
-              minHeight: 0 /* これがないとスクロールが効かない場合がある */,
+              minHeight: 0,
               boxShadow: "0 4px 6px rgba(0,0,0,0.3)",
+              // 🌟 追加：透け感を引き立たせるための薄い枠線
+              border: "1px solid rgba(255, 255, 255, 0.1)",
             }}
           >
             <h3