diff --git a/apps/client/src/scenes/game/input/joystick/JoystickView.tsx b/apps/client/src/scenes/game/input/joystick/JoystickView.tsx
index cf6db61..62d449f 100644
--- a/apps/client/src/scenes/game/input/joystick/JoystickView.tsx
+++ b/apps/client/src/scenes/game/input/joystick/JoystickView.tsx
@@ -3,18 +3,18 @@
  * ジョイスティックの見た目だけを描画するコンポーネント
  * 入力処理は持たず，受け取った座標情報をもとにUIを描く
  */
-import type { Point } from "./common";
-
-/** 表示に必要な座標と状態 */
-type Props = {
-  isActive: boolean;
-  center: Point;
-  knobOffset: Point;
-  radius: number;
-};
+import {
+  JOYSTICK_BASE_BG_COLOR,
+  JOYSTICK_BASE_BORDER_COLOR,
+  JOYSTICK_BASE_BORDER_WIDTH,
+  JOYSTICK_KNOB_BG_COLOR,
+  JOYSTICK_KNOB_SHADOW,
+  JOYSTICK_KNOB_SIZE,
+} from "./common";
+import type { UseJoystickViewProps } from "./common";
 
 /** UIの見た目だけを描画するビュー */
-export const JoystickView = ({ isActive, center, knobOffset, radius }: Props) => {
+export const JoystickView = ({ isActive, center, knobOffset, radius }: UseJoystickViewProps) => {
   if (!isActive) return null;
 
   // ベースリングとノブの描画
@@ -26,9 +26,9 @@
         top: center.y - radius,
         width: radius * 2,
         height: radius * 2,
-        background: "rgba(255, 255, 255, 0.1)",
+        background: JOYSTICK_BASE_BG_COLOR,
         borderRadius: "50%",
-        border: "2px solid rgba(255, 255, 255, 0.3)",
+        border: `${JOYSTICK_BASE_BORDER_WIDTH}px solid ${JOYSTICK_BASE_BORDER_COLOR}`,
         pointerEvents: "none",
       }}
     >
@@ -37,12 +37,12 @@
           position: "absolute",
           left: "50%",
           top: "50%",
-          width: 40,
-          height: 40,
-          background: "rgba(255, 255, 255, 0.8)",
+          width: JOYSTICK_KNOB_SIZE,
+          height: JOYSTICK_KNOB_SIZE,
+          background: JOYSTICK_KNOB_BG_COLOR,
           borderRadius: "50%",
           transform: `translate(calc(-50% + ${knobOffset.x}px), calc(-50% + ${knobOffset.y}px))`,
-          boxShadow: "0 0 10px rgba(0,0,0,0.5)",
+          boxShadow: JOYSTICK_KNOB_SHADOW,
         }}
       />
     </div>
diff --git a/apps/client/src/scenes/game/input/joystick/common/index.ts b/apps/client/src/scenes/game/input/joystick/common/index.ts
index ec6f310..ce854ff 100644
--- a/apps/client/src/scenes/game/input/joystick/common/index.ts
+++ b/apps/client/src/scenes/game/input/joystick/common/index.ts
@@ -13,7 +13,16 @@
 	UseJoystickInputPresenterProps,
 	UseJoystickStateProps,
 	UseJoystickStateReturn,
+	UseJoystickViewProps,
 } from './joystick.types';
 
 /** 共有定数を再公開する */
-export { MAX_DIST } from './joystick.constants';
+export {
+	JOYSTICK_BASE_BG_COLOR,
+	JOYSTICK_BASE_BORDER_COLOR,
+	JOYSTICK_BASE_BORDER_WIDTH,
+	JOYSTICK_KNOB_BG_COLOR,
+	JOYSTICK_KNOB_SHADOW,
+	JOYSTICK_KNOB_SIZE,
+	MAX_DIST,
+} from './joystick.constants';
diff --git a/apps/client/src/scenes/game/input/joystick/common/joystick.constants.ts b/apps/client/src/scenes/game/input/joystick/common/joystick.constants.ts
index 88b2d7b..3645788 100644
--- a/apps/client/src/scenes/game/input/joystick/common/joystick.constants.ts
+++ b/apps/client/src/scenes/game/input/joystick/common/joystick.constants.ts
@@ -6,3 +6,21 @@
 
 /** UI側と共有する最大半径の既定値 */
 export const MAX_DIST = 60;
+
+/** ジョイスティックベースの背景色 */
+export const JOYSTICK_BASE_BG_COLOR = 'rgba(255, 255, 255, 0.1)';
+
+/** ジョイスティックベースの枠線色 */
+export const JOYSTICK_BASE_BORDER_COLOR = 'rgba(255, 255, 255, 0.3)';
+
+/** ジョイスティックベースの枠線太さ */
+export const JOYSTICK_BASE_BORDER_WIDTH = 2;
+
+/** ジョイスティックノブのサイズ */
+export const JOYSTICK_KNOB_SIZE = 40;
+
+/** ジョイスティックノブの背景色 */
+export const JOYSTICK_KNOB_BG_COLOR = 'rgba(255, 255, 255, 0.8)';
+
+/** ジョイスティックノブの影 */
+export const JOYSTICK_KNOB_SHADOW = '0 0 10px rgba(0,0,0,0.5)';
diff --git a/apps/client/src/scenes/game/input/joystick/common/joystick.types.ts b/apps/client/src/scenes/game/input/joystick/common/joystick.types.ts
index 16ee180..be5b9b9 100644
--- a/apps/client/src/scenes/game/input/joystick/common/joystick.types.ts
+++ b/apps/client/src/scenes/game/input/joystick/common/joystick.types.ts
@@ -53,3 +53,11 @@
 	onInput: (moveX: number, moveY: number) => void;
 	maxDist?: number;
 };
+
+/** JoystickView に渡す描画状態型 */
+export type UseJoystickViewProps = {
+	isActive: boolean;
+	center: Point;
+	knobOffset: Point;
+	radius: number;
+};