diff --git a/apps/client/src/scenes/game/GameScene.tsx b/apps/client/src/scenes/game/GameScene.tsx
index 5fbf5c2..6dce426 100644
--- a/apps/client/src/scenes/game/GameScene.tsx
+++ b/apps/client/src/scenes/game/GameScene.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from "react";
-import { Joystick } from "./input/joystick/Joystick";
 import { GameManager } from "./GameManager";
+import { GameView } from "./GameView";
 import { config } from "@repo/shared";
 
+/** GameScene の入力プロパティ */
 interface GameSceneProps {
   myId: string | null;
 }
@@ -33,7 +34,7 @@
     const manager = new GameManager(pixiContainerRef.current, myId);
     manager.init();
     
-    // 参照を保持（ジョイスティック入力を渡すため）
+    // 参照を保持（入力を渡すため）
     gameManagerRef.current = manager;
 
     // 描画用のタイマーループ (100msごとに更新して滑らかにする)
@@ -53,34 +54,12 @@
   }, [myId]);
 
   return (
-    <div style={{
-      width: "100vw", height: "100vh", overflow: "hidden", position: "relative", backgroundColor: "#000",
-      userSelect: "none", // 画面全体のテキスト選択を無効化
-      WebkitUserSelect: "none" // Safari対策
-    }}>
-      {/* タイマーUIの表示 */}
-      <div style={{
-        position: "absolute", top: "20px", left: "50%", transform: "translateX(-50%)",
-        zIndex: 10, color: "white", fontSize: "32px", fontWeight: "bold",
-        textShadow: "2px 2px 4px rgba(0,0,0,0.5)", fontFamily: "monospace",
-        userSelect: "none", // 画面全体のテキスト選択を無効化
-        WebkitUserSelect: "none" // Safari対策
-      }}>
-        {timeLeft}
-      </div>
-      
-      {/* PixiJS Canvas 配置領域 */}
-      <div ref={pixiContainerRef} style={{ position: "absolute", top: 0, left: 0, zIndex: 1 }} />
-      
-      {/* UI 配置領域 */}
-      <div style={{ position: "absolute", zIndex: 20, width: "100%", height: "100%" }}>
-        <Joystick 
-          onInput={(x, y) => { 
-            // ジョイスティックの入力を毎フレーム Manager に渡す
-            gameManagerRef.current?.setJoystickInput(x, y); 
-          }} 
-        />
-      </div>
-    </div>
+    <GameView
+      timeLeft={timeLeft}
+      pixiContainerRef={pixiContainerRef}
+      onInput={(x, y) => {
+        gameManagerRef.current?.setJoystickInput(x, y);
+      }}
+    />
   );
 }
\ No newline at end of file
diff --git a/apps/client/src/scenes/game/GameView.tsx b/apps/client/src/scenes/game/GameView.tsx
new file mode 100644
index 0000000..a1c5732
--- /dev/null
+++ b/apps/client/src/scenes/game/GameView.tsx
@@ -0,0 +1,58 @@
+/**
+ * GameView
+ * ゲーム画面の描画専用コンポーネント
+ * タイマー表示，PixiJSの描画領域，入力UIの配置のみを担当する
+ */
+import { Joystick } from "./input/joystick/Joystick";
+
+/** 表示と入力に必要なプロパティ */
+type Props = {
+  timeLeft: string;
+  pixiContainerRef: React.RefObject<HTMLDivElement>;
+  onInput: (x: number, y: number) => void;
+};
+
+/** 画面描画と入力UIをまとめて描画する */
+export const GameView = ({ timeLeft, pixiContainerRef, onInput }: Props) => {
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        overflow: "hidden",
+        position: "relative",
+        backgroundColor: "#000",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+      }}
+    >
+      {/* タイマーUIの表示 */}
+      <div
+        style={{
+          position: "absolute",
+          top: "20px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 10,
+          color: "white",
+          fontSize: "32px",
+          fontWeight: "bold",
+          textShadow: "2px 2px 4px rgba(0,0,0,0.5)",
+          fontFamily: "monospace",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+        }}
+      >
+        {timeLeft}
+      </div>
+
+      {/* PixiJS Canvas 配置領域 */}
+      <div ref={pixiContainerRef} style={{ position: "absolute", top: 0, left: 0, zIndex: 1 }} />
+
+      {/* UI 配置領域 */}
+      <div style={{ position: "absolute", zIndex: 20, width: "100%", height: "100%" }}>
+        <Joystick onInput={onInput} />
+      </div>
+    </div>
+  );
+};