diff --git a/apps/client/src/app.tsx b/apps/client/src/app.tsx
index ef5d4ef..59067dd 100644
--- a/apps/client/src/app.tsx
+++ b/apps/client/src/app.tsx
@@ -2,7 +2,9 @@
 import { Joystick } from "react-joystick-component";
 import { io, Socket } from "socket.io-client";
 
-// プレイヤーの型定義（サーバーと同じ形にする）
+// 設定：マップの広さ（全員共通）
+const MAP_SIZE = 2000;
+
 type Player = {
   id: string;
   x: number;
@@ -11,127 +13,205 @@
 };
 
 function App() {
-  // 自分のIDを保存する場所
   const [myId, setMyId] = useState<string | null>(null);
-  // 全員のプレイヤー情報を保存する場所 { "ID": {プレイヤー情報}, ... }
   const [players, setPlayers] = useState<Record<string, Player>>({});
   
-  // 通信の接続（二重接続防止のため useRef を使う）
+  // 画面サイズ（カメラ計算用）
+  const [viewport, setViewport] = useState({ w: window.innerWidth, h: window.innerHeight });
+  
+  // 自分の位置（計算用）
+  const myPosRef = useRef({ x: MAP_SIZE / 2, y: MAP_SIZE / 2 });
+  
   const socketRef = useRef<Socket | null>(null);
 
+  // ★ 追加：初期化フラグ
+  const initializedRef = useRef(false);
+
+  // ★ 追加：サーバー上の位置と、手元の計算用位置を同期させる魔法
   useEffect(() => {
-    // 1. サーバーに接続
-    // Viteのプロキシ設定があるので、パスは自動で解決されます
+    // まだIDがない、または既に同期済みなら何もしない
+    if (!myId || initializedRef.current) return;
+
+    const me = players[myId];
+    if (me) {
+      // サーバーの座標を、自分の計算基準(ref)にコピー！
+      myPosRef.current = { x: me.x, y: me.y };
+      initializedRef.current = true;
+      console.log("📍 初期位置を同期しました:", me.x, me.y);
+    }
+  }, [players, myId]);
+
+  useEffect(() => {
+    const handleResize = () => setViewport({ w: window.innerWidth, h: window.innerHeight });
+    window.addEventListener("resize", handleResize);
+
     socketRef.current = io();
     const socket = socketRef.current;
 
-    // 接続成功したとき
     socket.on("connect", () => {
-      console.log("✅ Connected with ID:", socket.id);
+      console.log("Connected:", socket.id);
       setMyId(socket.id || null);
+      // 初期位置ランダム
+      /*
+      myPosRef.current = { 
+        x: Math.random() * (MAP_SIZE - 200) + 100, 
+        y: Math.random() * (MAP_SIZE - 200) + 100 
+      };
+      */
     });
 
-    // --- サーバーからの命令を受け取る ---
-
-    // 1. 今いる全員のリストを受け取る
+    // 1. 今いるプレイヤー情報
     socket.on("current_players", (serverPlayers: Player[]) => {
-      const playersMap: Record<string, Player> = {};
-      serverPlayers.forEach((p) => {
-        playersMap[p.id] = p;
-      });
-      setPlayers(playersMap);
+      const pMap: Record<string, Player> = {};
+      serverPlayers.forEach(p => pMap[p.id] = p);
+      setPlayers(pMap);
     });
 
     // 2. 新しい人が来た
-    socket.on("new_player", (player: Player) => {
-      setPlayers((prev) => ({ ...prev, [player.id]: player }));
+    socket.on("new_player", (p: Player) => {
+      setPlayers(prev => ({ ...prev, [p.id]: p }));
     });
 
-    // 3. 誰かが動いた
-    socket.on("update_player", (data: { id: string; x: number; y: number }) => {
-      setPlayers((prev) => {
-        const target = prev[data.id];
-        if (!target) return prev; // 知らない人なら何もしない
-        // その人の位置だけ更新して新しいリストを作る
-        return {
-          ...prev,
-          [data.id]: { ...target, x: data.x, y: data.y },
+    // 3. 誰かが動いた（★ここをサーバーに合わせて修正しました！）
+    socket.on("update_player", (d: { id: string; x: number; y: number }) => {
+      // ログを出して確認できるようにする
+      console.log("Receive:", d);
+
+      setPlayers(prev => {
+        const target = prev[d.id];
+        // 知らないIDなら無視（または追加処理を入れてもOK）
+        if (!target) return prev; 
+        
+        return { 
+          ...prev, 
+          [d.id]: { ...target, x: d.x, y: d.y } 
         };
       });
     });
 
     // 4. 誰かがいなくなった
-    socket.on("remove_player", (id: string) => {
-      setPlayers((prev) => {
-        const newPlayers = { ...prev };
-        delete newPlayers[id];
-        return newPlayers;
+    socket.on("player_disconnected", (id: string) => { // ※ここもServer実装によっては要確認
+      setPlayers(prev => {
+        const next = { ...prev };
+        delete next[id];
+        return next;
       });
     });
 
-    // 片付け（画面を閉じたときに通信を切る）
     return () => {
       socket.disconnect();
+      window.removeEventListener("resize", handleResize);
     };
   }, []);
 
-  // ジョイスティックを動かしたとき
   const handleMove = (event: any) => {
-    if (socketRef.current && typeof event.x === "number" && typeof event.y === "number") {
-      socketRef.current.emit("move", { x: event.x, y: event.y });
-    }
+    if (!socketRef.current || !myId) return;
+
+    const speed = 4.0;
+    let nextX = myPosRef.current.x + (event.x * speed);
+    let nextY = myPosRef.current.y - (event.y * speed);
+
+    if (nextX < 20) nextX = 20;
+    if (nextX > MAP_SIZE - 20) nextX = MAP_SIZE - 20;
+    if (nextY < 20) nextY = 20;
+    if (nextY > MAP_SIZE - 20) nextY = MAP_SIZE - 20;
+
+    myPosRef.current = { x: nextX, y: nextY };
+
+    // 自分の画面更新
+    setPlayers(prev => {
+      if (!prev[myId]) return prev;
+      return { ...prev, [myId]: { ...prev[myId], x: nextX, y: nextY } };
+    });
+
+    // サーバーへ送信（ここは 'move' で合っています）
+    socketRef.current.emit("move", { x: nextX, y: nextY });
   };
 
-  const handleStop = () => {
-    if (socketRef.current) {
-      socketRef.current.emit("move", { x: 0, y: 0 });
-    }
-  };
+  // カメラ計算
+  let cameraX = 0;
+  let cameraY = 0;
+
+  if (myId && players[myId]) {
+    const me = players[myId];
+    cameraX = me.x - viewport.w / 2;
+    cameraY = me.y - viewport.h / 2;
+/*
+    if (cameraX < 0) cameraX = 0;
+    if (cameraY < 0) cameraY = 0;
+    if (cameraX > MAP_SIZE - viewport.w) cameraX = MAP_SIZE - viewport.w;
+    if (cameraY > MAP_SIZE - viewport.h) cameraY = MAP_SIZE - viewport.h;
+*/
+  }
 
   return (
-    <div style={{
-      width: "100vw", height: "100vh", display: "flex",
-      flexDirection: "column", justifyContent: "center", alignItems: "center",
-      background: "#222", color: "white", overflow: "hidden", userSelect: "none"
+    <div style={{ 
+      width: "100vw", height: "100vh", overflow: "hidden", 
+      background: "#111", position: "relative", touchAction: "none"
     }}>
-      <h1>Multiplayer: {Object.keys(players).length} Online</h1>
-
-      {/* ゲーム画面エリア */}
-      <div style={{
-        position: "relative", width: "300px", height: "300px",
-        border: "2px solid #555", borderRadius: "10px", marginBottom: "20px",
-        background: "#333", overflow: "hidden"
+      
+      {/* UIレイヤー */}
+      <div style={{ 
+        position: "fixed", top: 10, left: 10, zIndex: 1000,
+        background: "rgba(0,0,0,0.6)", padding: "10px", borderRadius: "8px",
+        color: "white", pointerEvents: "none"
       }}>
-        {/* 全員分のボールを描画するループ処理 */}
-        {Object.values(players).map((player) => (
+        <div style={{ color: "#4ade80", fontWeight: "bold" }}>
+          ● Online: {Object.keys(players).length}
+        </div>
+        <div style={{ fontSize: "12px", color: "#ccc" }}>
+           ID: {myId?.slice(0, 4)}
+        </div>
+      </div>
+
+      {/* ゲームワールド */}
+      <div style={{
+        position: "absolute",
+        width: `${MAP_SIZE}px`,
+        height: `${MAP_SIZE}px`,
+        transform: `translate(${-cameraX}px, ${-cameraY}px)`,
+        backgroundImage: "linear-gradient(#333 1px, transparent 1px), linear-gradient(90deg, #333 1px, transparent 1px)",
+        backgroundSize: "100px 100px",
+        backgroundColor: "#222",
+        border: "5px solid #ff4444"
+      }}>
+        
+        {Object.values(players).map((p) => (
           <div
-            key={player.id}
+            key={p.id}
             style={{
               position: "absolute",
-              left: 0,
-              top: 0,
-              transform: `translate(${player.x}px, ${player.y}px)`,
-              width: "20px",
-              height: "20px",
-              background: player.color || "red", // サーバーが決めた色
+              left: 0, top: 0,
+              transform: `translate(${p.x}px, ${p.y}px)`, 
+              width: "20px", height: "20px",
+              background: p.color || "red",
               borderRadius: "50%",
-              // 自分だけ枠線を黄色にする
-              border: player.id === myId ? "2px solid yellow" : "none",
-              zIndex: player.id === myId ? 10 : 1, // 自分を一番手前に
-              marginLeft: "-10px", // 中心に配置
-              marginTop: "-10px",
-              
+              border: p.id === myId ? "2px solid yellow" : "none",
+              boxShadow: p.id === myId ? "0 0 15px rgba(255,255,0,0.5)" : "none",
+              zIndex: p.id === myId ? 100 : 1,
+              marginTop: "-10px", marginLeft: "-10px",
               transition: "transform 0.1s linear",
-              willChange: "transform" // 動きを滑らかにする
             }}
-          />
+          >
+             <div style={{ 
+              position: "absolute", top: -25, left: "50%", transform: "translateX(-50%)", 
+              color: "white", fontSize: "10px", whiteSpace: "nowrap", pointerEvents: "none"
+            }}>
+              {p.id.slice(0,4)}
+            </div>
+          </div>
         ))}
       </div>
 
-      <Joystick
-        size={100} baseColor="#444" stickColor="#888"
-        move={handleMove} stop={handleStop}
-      />
+      {/* ジョイスティック */}
+      <div style={{ position: "fixed", bottom: 50, left: 30, zIndex: 2000 }}>
+        <Joystick 
+          size={100} 
+          baseColor="rgba(255, 255, 255, 0.2)" 
+          stickColor="rgba(255, 255, 255, 0.9)" 
+          move={handleMove} 
+        />
+      </div>
     </div>
   );
 }