diff --git a/apps/client/src/app.css b/apps/client/src/app.css
index 088ed3a..5dd7253 100644
--- a/apps/client/src/app.css
+++ b/apps/client/src/app.css
@@ -1,25 +1,17 @@
+/* ブラウザのデフォルトの余白を消す */
+body, html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; /* スクロールバーを出さない */
+  background-color: #000;
+}
+
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.preact:hover {
-  filter: drop-shadow(0 0 2em #673ab8aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  text-align: left; /* 中央寄せを解除 */
+}
\ No newline at end of file
diff --git a/apps/client/src/app.tsx b/apps/client/src/app.tsx
index 81196fe..7077170 100644
--- a/apps/client/src/app.tsx
+++ b/apps/client/src/app.tsx
@@ -1,43 +1,58 @@
-import { useState } from 'preact/hooks'
-import preactLogo from './assets/preact.svg'
-import viteLogo from '/vite.svg'
-import './app.css'
+import { useEffect, useRef } from 'preact/hooks';
+import { Application } from 'pixi.js';
+
+// 👇 ここを変更しました！
+// 元: import { Joystick } from './Joystick';
+import { Joystick } from './input/Joystick'; 
+
+
+import { Player } from './entities/Player';
+
+import './app.css';
 
 export function App() {
-  const [count, setCount] = useState(0)
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} class="logo" alt="Vite logo" />
-        </a>
-        <a href="https://preactjs.com" target="_blank">
-          <img src={preactLogo} class="logo preact" alt="Preact logo" />
-        </a>
-      </div>
-      <h1>Vite + Preact</h1>
-      <div class="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/app.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p>
-        Check out{' '}
-        <a
-          href="https://preactjs.com/guide/v10/getting-started#create-a-vite-powered-preact-app"
-          target="_blank"
-        >
-          create-preact
-        </a>
-        , the official Preact + Vite starter
-      </p>
-      <p class="read-the-docs">
-        Click on the Vite and Preact logos to learn more
-      </p>
-    </>
-  )
-}
+  useEffect(() => {
+    // 1. PixiJSアプリケーションの作成
+    const app = new Application();
+
+    const initGame = async () => {
+      await app.init({
+        resizeTo: window,
+        backgroundColor: 0x1099bb,
+        resolution: window.devicePixelRatio || 1,
+        autoDensity: true,
+      });
+
+      if (containerRef.current) {
+        containerRef.current.appendChild(app.canvas);
+      }
+
+      // 2. プレイヤーの作成
+      const player = new Player(0xff0000);
+      player.x = app.screen.width / 2;
+      player.y = app.screen.height / 2;
+      app.stage.addChild(player);
+
+      // 3. ジョイスティックの作成
+      const joystick = new Joystick();
+      app.stage.addChild(joystick);
+
+      // 4. ゲームループ
+      app.ticker.add((ticker) => {
+        if (joystick.input.x !== 0 || joystick.input.y !== 0) {
+          player.move(joystick.input.x, joystick.input.y, ticker.deltaTime);
+        }
+      });
+    };
+
+    initGame();
+
+    return () => {
+      app.destroy(true, { children: true });
+    };
+  }, []);
+
+  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+}
\ No newline at end of file
diff --git a/apps/client/src/entities/Player.ts b/apps/client/src/entities/Player.ts
index ec2c62f..b0dab8b 100644
--- a/apps/client/src/entities/Player.ts
+++ b/apps/client/src/entities/Player.ts
@@ -1,21 +1,20 @@
 import { Graphics } from 'pixi.js';
-import { GAME_CONFIG } from '@repo/shared';
 
 export class Player extends Graphics {
   constructor(color: number = 0xFF0000) {
     super();
-    // プレイヤーを描画
-    this.circle(0, 0, GAME_CONFIG.PLAYER_RADIUS).fill(color);
+    // 半径10の赤い丸を描く（直接数値を指定）
+    this.circle(0, 0, 10).fill(color);
   }
 
   // 移動メソッド
   move(vx: number, vy: number, deltaTime: number) {
-    // 速度 * 時間 = 移動距離
-    const speed = GAME_CONFIG.PLAYER_SPEED * deltaTime;
+    // 速度 200 で移動
+    const speed = 200 * deltaTime;
     this.x += vx * speed;
     this.y += vy * speed;
 
-    // 画面外に出ないように制限（簡易版）
+    // 画面外に出ないように制限
     this.x = Math.max(0, Math.min(window.innerWidth, this.x));
     this.y = Math.max(0, Math.min(window.innerHeight, this.y));
   }
diff --git a/apps/client/src/input/Joystick.ts b/apps/client/src/input/Joystick.ts
index da21610..4ec4640 100644
--- a/apps/client/src/input/Joystick.ts
+++ b/apps/client/src/input/Joystick.ts
@@ -72,4 +72,4 @@
     this.input.set(0, 0);
     this.visible = false;
   }
-}
\ No newline at end of file
+}