diff --git a/README.md b/README.md
index d4764a4..8c0b1e3 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,7 @@
 # moon-keeper
 
 ポルノグラフィティで一番好きな楽曲は「月飼い」です。
+
+## ドキュメント
+
+- [月を水面で飼う — 月相実装 最終設計ドキュメント](moon_phase_design.md)
diff --git a/index.html b/index.html
index d794750..04e5cad 100644
--- a/index.html
+++ b/index.html
@@ -81,6 +81,52 @@
       opacity: 0.7;
       pointer-events: auto;
     }
+
+    /* 月相スライダー（左下・ホバー表示） */
+    #phase-area {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 150px;
+      height: 130px;
+      z-index: 101;
+    }
+    #phase-ui {
+      position: fixed;
+      bottom: 16px;
+      left: 16px;
+      padding: 10px 12px;
+      background: rgba(0, 0, 0, 0.45);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 8px;
+      color: rgba(255, 255, 255, 0.65);
+      font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
+      font-size: 11px;
+      line-height: 1.6;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+      z-index: 100;
+      width: 180px;
+    }
+    #phase-area:hover ~ #phase-ui,
+    #phase-area:hover ~ #phase-ui.hidden {
+      opacity: 0.9;
+      pointer-events: auto;
+    }
+    #phase-ui label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    #phase-ui input[type="range"] {
+      width: 120px;
+    }
+    #phase-ui .value {
+      min-width: 48px;
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
   </style>
 </head>
 <body>
@@ -92,6 +138,15 @@
     Moon texture: <a href="https://www.solarsystemscope.com/textures/" target="_blank" rel="noopener">Solar System Scope</a><br>
     Repository: <a href="https://github.com/clockcrockwork/moon-keeper" target="_blank" rel="noopener">moon-keeper</a>
   </div>
+  <div id="phase-area"></div>
+  <div id="phase-ui" class="hidden">
+    <label>
+      月相
+      <input id="phase-slider" type="range" min="0" max="1" step="0.001" value="0.5" aria-label="moon phase" />
+      <span class="value" id="phase-value">0.500</span>
+    </label>
+    <div>左下ホバーで表示（制作・検証用）</div>
+  </div>
   
   <script type="importmap">
   {
@@ -110,8 +165,32 @@
     const CONFIG = {
       moonDepth: 5,
       moonSize: 2.0,
-      starCount: 250,
+      starCount: 300,
+      starDensityMin: 0.35,
+      starDensityMax: 1.0,
     };
+
+    // ========================================
+    // 月相計算
+    // ========================================
+    function illuminatedFraction(phase01) {
+      // 0.0 = 新月, 0.5 = 満月
+      return 0.5 * (1 - Math.cos(phase01 * Math.PI * 2));
+    }
+
+    function calculateMoonPhase(date = new Date()) {
+      // 2000-01-06 18:14 UTC の新月を基準にする簡易モデル
+      const synodicMonth = 29.53058867;
+      const knownNewMoon = Date.UTC(2000, 0, 6, 18, 14, 0);
+      const daysSinceKnown = (date.getTime() - knownNewMoon) / 86400000;
+      const phase01 = ((daysSinceKnown % synodicMonth) + synodicMonth) % synodicMonth / synodicMonth;
+      return {
+        phase01,
+        fraction01: illuminatedFraction(phase01),
+      };
+    }
+
+    const phaseState = calculateMoonPhase();
     
     // ========================================
     // レンダラー・カメラ
@@ -156,17 +235,18 @@
       geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
       geo.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));
       geo.setAttribute('alpha', new THREE.Float32BufferAttribute(alphas, 1));
-      
+
       const mat = new THREE.ShaderMaterial({
-        uniforms: { time: { value: 0 } },
+        uniforms: { time: { value: 0 }, density: { value: CONFIG.starDensityMax } },
         vertexShader: `
           attribute float size;
           attribute float alpha;
           varying float vAlpha;
           uniform float time;
+          uniform float density;
           void main() {
             float twinkle = sin(time * 0.4 + position.x * 1.5 + position.z) * 0.2 + 0.8;
-            vAlpha = alpha * twinkle;
+            vAlpha = alpha * twinkle * density;
             vec4 mv = modelViewMatrix * vec4(position, 1.0);
             gl_PointSize = size * (120.0 / -mv.z);
             gl_Position = projectionMatrix * mv;
@@ -200,11 +280,17 @@
         'moon.webp',
         t => { t.colorSpace = THREE.SRGBColorSpace; }
       );
-      const mat = new THREE.MeshBasicMaterial({ map: tex });
+      const mat = new THREE.MeshStandardMaterial({
+        map: tex,
+        roughness: 0.8,
+        metalness: 0.0,
+        emissive: new THREE.Color(0x0d0d0d),
+        emissiveIntensity: 0.25,
+      });
       const mesh = new THREE.Mesh(geo, mat);
       return mesh;
     }
-    
+
     const moon = createMoon();
     const moonInitialRotation = Math.random() * Math.PI * 2;
 
@@ -220,7 +306,7 @@
     const moonGlow = new THREE.Mesh(
       new THREE.PlaneGeometry(CONFIG.moonSize * 5, CONFIG.moonSize * 5),
       new THREE.ShaderMaterial({
-        uniforms: {},
+        uniforms: { glowStrength: { value: 0.35 } },
         vertexShader: `
           varying vec2 vUv;
           void main() {
@@ -230,20 +316,33 @@
         `,
         fragmentShader: `
           varying vec2 vUv;
+          uniform float glowStrength;
           void main() {
             float dist = length(vUv - 0.5) * 2.0;
-            float glow = smoothstep(1.0, 0.3, dist) * 0.15;
+            float glow = smoothstep(1.0, 0.3, dist) * glowStrength;
             gl_FragColor = vec4(0.9, 0.85, 0.7, glow);
           }
         `,
         transparent: true,
         blending: THREE.AdditiveBlending,
-        depthWrite: false
+        depthWrite: false,
+        side: THREE.DoubleSide
       })
     );
     moonGlow.rotation.x = -Math.PI / 2;
-    moonGlow.position.set(0, moon.position.y - 0.1, 0);
+    moonGlow.position.copy(moonPivot.position);
     underwaterScene.add(moonGlow);
+
+    const ambient = new THREE.AmbientLight(0xffffff, 0.05);
+    underwaterScene.add(ambient);
+
+    const sunLight = new THREE.DirectionalLight(0xffffff, 1.4);
+    const sunTarget = new THREE.Object3D();
+    sunTarget.position.copy(moonPivot.position);
+    underwaterScene.add(sunTarget);
+    sunLight.target = sunTarget;
+    sunLight.position.set(3, 4, 1);
+    underwaterScene.add(sunLight);
     
     // ========================================
     // レンダーターゲット（月と星空をテクスチャに）
@@ -262,6 +361,7 @@
     const WATER_SEG = 150;
     const waveHeight = new Float32Array((WATER_SEG + 1) ** 2);
     const waveVelocity = new Float32Array((WATER_SEG + 1) ** 2);
+    let touchEnergy = 0;
     
     function createWater() {
       const geo = new THREE.PlaneGeometry(WATER_SIZE, WATER_SIZE, WATER_SEG, WATER_SEG);
@@ -277,6 +377,9 @@
           time: { value: 0 },
           moonPos: { value: new THREE.Vector3(0, -CONFIG.moonDepth, 0) },
           cameraY: { value: camera.position.y },
+          phaseFraction: { value: phaseState.fraction01 },
+          moonColor: { value: new THREE.Color(0.9, 0.85, 0.7) },
+          touchEnergy: { value: 0 },
         },
         vertexShader: `
           attribute float waveHeight;
@@ -309,49 +412,64 @@
           uniform float time;
           uniform vec3 moonPos;
           uniform float cameraY;
+          uniform float phaseFraction;
+          uniform vec3 moonColor;
+          uniform float touchEnergy;
           
           varying float vHeight;
           varying vec2 vScreenUV;
           varying vec3 vWorldPos;
           varying vec3 vNormal;
-          
+
           void main() {
-            // 波による屈折オフセット（強め）
-            vec2 distortion = vNormal.xz * vHeight * 0.35;
-            vec2 uv = vScreenUV + distortion;
-            uv = clamp(uv, 0.0, 1.0);
-            
+            float fraction = clamp(phaseFraction, 0.0, 1.0);
+
+            // 波による屈折オフセット（デカップリング済み）
+            vec2 baseDistortion = vNormal.xz * vHeight * 0.35;
+            float distortGain = mix(1.15, 1.0, pow(fraction, 0.8));
+            vec2 distortion = baseDistortion * distortGain;
+            vec2 uv = clamp(vScreenUV + distortion, 0.0, 1.0);
+
             // 水中の映像（月と星空）を歪めて取得
             vec3 underwater = texture2D(underwaterTex, uv).rgb;
-            
+
             // 月明かりの反射（控えめなスペキュラ）
             vec3 viewDir = normalize(vec3(0.0, cameraY, 0.0) - vWorldPos);
             vec3 lightDir = normalize(moonPos - vWorldPos);
-            vec3 halfDir = normalize(viewDir - lightDir);
+            vec3 halfDir = normalize(viewDir + lightDir);
             vec3 normal = normalize(vNormal);
-            
+
             float spec = pow(max(dot(normal, halfDir), 0.0), 64.0);
-            vec3 moonlightReflect = vec3(0.9, 0.85, 0.7) * spec * 0.25;
-            
-            // 波頭のハイライト（感度上げ）
-            float waveHighlight = smoothstep(0.01, 0.06, vHeight) * 0.55;
+            float specGain = mix(0.12, 0.25, pow(fraction, 0.8));
+            vec3 moonlightReflect = moonColor * spec * specGain;
+
+            // 波頭のハイライト（二段構え）
+            float waveSignal = smoothstep(0.01, 0.06, vHeight);
+            float waveBase = waveSignal * 0.35;
+            float waveMoonAdd = waveSignal * 0.20 * pow(fraction, 0.7);
+            float waveHighlight = waveBase + waveMoonAdd;
             vec3 highlight = vec3(0.7, 0.75, 0.9) * waveHighlight;
-            
+
+            // 触った瞬間だけ出る補助光
+            float interaction = touchEnergy * smoothstep(0.02, 0.08, abs(vHeight));
+            vec3 touchGlow = vec3(0.5, 0.6, 0.9) * interaction * 0.35;
+
             // 水面の色味（エッジ部分のみ、中心は透明）
             float distFromCenter = length(vWorldPos.xz);
             float edgeFade = smoothstep(3.0, 8.0, distFromCenter);
             vec3 waterTint = vec3(0.01, 0.03, 0.08) * edgeFade * 0.3;
-            
+
             // 合成（水中の映像がメイン）
             vec3 finalColor = underwater;
             finalColor += waterTint;
             finalColor += moonlightReflect;
             finalColor += highlight;
-            
+            finalColor += touchGlow;
+
             // 波の谷は少し暗く
             float valleyDark = smoothstep(0.0, -0.08, vHeight) * 0.15;
             finalColor *= (1.0 - valleyDark);
-            
+
             gl_FragColor = vec4(finalColor, 1.0);
           }
         `,
@@ -362,6 +480,50 @@
     
     const water = createWater();
     mainScene.add(water);
+
+    function updatePhaseUI() {
+      const slider = document.getElementById('phase-slider');
+      const value = document.getElementById('phase-value');
+      if (slider && value) {
+        slider.value = phaseState.phase01.toFixed(3);
+        value.textContent = phaseState.phase01.toFixed(3);
+      }
+    }
+
+    function applyPhaseState() {
+      const angle = phaseState.phase01 * Math.PI * 2;
+      const radius = 6.5;
+      sunLight.position.set(Math.cos(angle) * radius, 4.5, Math.sin(angle) * radius);
+      sunLight.target.position.copy(moonPivot.position);
+      sunLight.target.updateMatrixWorld();
+
+      const glow = THREE.MathUtils.lerp(0.2, 0.55, Math.pow(phaseState.fraction01, 0.7));
+      moonGlow.material.uniforms.glowStrength.value = glow;
+      sunLight.intensity = THREE.MathUtils.lerp(0.45, 1.6, Math.pow(phaseState.fraction01, 0.9));
+      water.material.uniforms.phaseFraction.value = phaseState.fraction01;
+      water.material.uniforms.moonPos.value.set(moonPivot.position.x, moonPivot.position.y, moonPivot.position.z);
+
+      const density = THREE.MathUtils.lerp(
+        CONFIG.starDensityMax,
+        CONFIG.starDensityMin,
+        Math.pow(phaseState.fraction01, 0.8)
+      );
+      starfield.material.uniforms.density.value = density;
+
+      updatePhaseUI();
+    }
+
+    function initPhaseUI() {
+      const slider = document.getElementById('phase-slider');
+      if (!slider) return;
+      slider.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        phaseState.phase01 = isNaN(value) ? phaseState.phase01 : value;
+        phaseState.fraction01 = illuminatedFraction(phaseState.phase01);
+        applyPhaseState();
+      });
+      updatePhaseUI();
+    }
     
     // ========================================
     // 波のシミュレーション
@@ -414,6 +576,8 @@
       const half = WATER_SIZE / 2;
       const gx = Math.floor((wx + half) / WATER_SIZE * WATER_SEG);
       const gz = Math.floor((wz + half) / WATER_SIZE * WATER_SEG);
+
+      touchEnergy = Math.min(1.0, touchEnergy + strength * 0.6);
       
       const radius = 4;
       for (let dz = -radius; dz <= radius; dz++) {
@@ -481,6 +645,9 @@
     renderer.domElement.addEventListener('touchstart', onDown, { passive: false });
     renderer.domElement.addEventListener('touchmove', onMove, { passive: false });
     renderer.domElement.addEventListener('touchend', onUp);
+
+    initPhaseUI();
+    applyPhaseState();
     
     // ========================================
     // リサイズ
@@ -500,15 +667,19 @@
     // ========================================
     function animate() {
       requestAnimationFrame(animate);
-      
+
       const time = performance.now() * 0.001;
-      
+
       updateWaves();
-      
+
       moon.rotation.y = moonInitialRotation + time * 0.006;
+      moonGlow.position.copy(moonPivot.position);
+      moonGlow.quaternion.copy(camera.quaternion);
       starfield.material.uniforms.time.value = time;
       water.material.uniforms.time.value = time;
-      
+      touchEnergy *= 0.92;
+      water.material.uniforms.touchEnergy.value = touchEnergy;
+
       // 1) 月と星空をレンダーターゲットに描画
       renderer.setRenderTarget(renderTarget);
       renderer.render(underwaterScene, camera);
diff --git a/moon_phase_design.md b/moon_phase_design.md
new file mode 100644
index 0000000..e137cca
--- /dev/null
+++ b/moon_phase_design.md
@@ -0,0 +1,233 @@
+# 月を水面で飼う — 月相実装 最終設計ドキュメント
+
+本ドキュメントは「水面に映る月を飼う」という体験テーマを前提に、
+**月相（新月〜満月）を導入しつつ、水面を触る体験価値を決して損なわない**ための
+最終的な設計指針・実装方針をまとめたものである。
+
+---
+
+## 0. 作品テーマの再定義（最重要）
+
+この作品の主役は：
+
+* 月そのものではない
+* 天文学的な正確さでもない
+
+**主役は「水面を介して月を飼う体験」そのもの**である。
+
+ユーザーが行っている行為は：
+
+* 月を見ることではなく
+* 月を触ることでもなく
+
+👉 **水面を触ることで、月の存在を感じること**。
+
+したがって、
+
+* 月相は「世界の状態」として存在する
+* 水面の触感は「常に応答する存在」として保証されなければならない
+
+この優先順位は、以降すべての設計判断に優先する。
+
+---
+
+## 1. 問題設定
+
+### 1.1 直感的だが破綻する設計
+
+「月相が新月に近づくほど、受光量を減らす」
+
+という単純な設計は、物理的には正しく見えるが、
+本作では次の問題を引き起こす：
+
+* 水面の向こうの月がほぼ見えなくなる
+* 歪みが読み取れなくなる
+* 波を立てても光らず、触っている感覚が消える
+
+👉 **体験のフィードバックが失われる**。
+
+このため、
+
+> 水面の受光量を月相にそのまま従属させる
+
+という設計は不採用とする。
+
+---
+
+## 2. 解決方針の中核：受光の分離（デカップリング）
+
+水面が受け取る光を、意味的に二層に分けて扱う。
+
+### 2.1 Moon-driven Light（世界の状態）
+
+* 月相に応じて変化してよい光
+* 「今日は満月だ」「今日は新月だ」を表す
+
+対象：
+
+* 月面の照らされ方（欠け）
+* 月色のスペキュラ反射（控えめ）
+
+### 2.2 Interaction-driven Light（体験の保証）
+
+* 月相に関係なく、必ず残る光
+* ユーザーが触ったことへの応答
+
+対象：
+
+* 波頭のハイライト
+* 歪みの視認性
+* 触った瞬間の「生きている感」
+
+👉 **Interaction-driven Light は月相に従属させない**。
+
+---
+
+## 3. 月相の扱い（世界パラメータ）
+
+### 3.1 表現パラメータ
+
+* `phase01` : 月相（0〜1）
+
+  * 0.0 = 新月
+  * 0.5 = 満月
+* `fraction01` : 照明率（0〜1）
+
+### 3.2 計算方法
+
+* オフライン計算
+* SunCalc などの既存ライブラリ使用を前提
+* 正確性よりも**時間変化が滑らかであること**を重視
+
+---
+
+## 4. 月相が影響するもの（影響してよい）
+
+### 4.1 水中シーン（underwaterScene）
+
+* 月は MeshStandard / PhongMaterial に変更
+* DirectionalLight（太陽役）を配置
+* 月相に応じてライト方向を回転
+
+結果：
+
+* 新月：月はほぼ暗く、縁のみが見える
+* 満月：全面が照らされる
+
+これが renderTarget を通して水面に映る。
+
+### 4.2 星の量
+
+* 満月ほど星は少ない
+* 新月ほど星は多い
+
+星は「世界の明るさ」の指標なので、月相連動は自然。
+
+---
+
+## 5. 月相が影響してはならないもの（最重要）
+
+### 5.1 水面の触感
+
+以下は **常に可視でなければならない**：
+
+* 波が立ったこと
+* 歪みが発生したこと
+* 水面が反応していること
+
+理由：
+
+* ユーザーは月ではなく水面を触っているため
+
+👉 月相によって「触ったのに何も起きない」は許容しない。
+
+---
+
+## 6. 水面シェーダー設計（最終形）
+
+### 6.1 波頭ハイライト
+
+波頭の光は二段構えとする：
+
+* **Base（常時保証）**
+* **Moon Add（月相連動・控えめ）**
+
+```glsl
+float waveSignal = smoothstep(0.01, 0.06, vHeight);
+
+float waveBase    = waveSignal * 0.35;                 // 常時残す
+float waveMoonAdd = waveSignal * 0.20 * pow(fraction, 0.7);
+
+float waveHighlight = waveBase + waveMoonAdd;
+```
+
+### 6.2 スペキュラ（月由来）
+
+* 月相で増減してよい
+* ただしゼロにはしない
+
+```glsl
+float specGain = mix(0.12, 0.25, pow(fraction, 0.8));
+vec3 moonlightReflect = moonColor * spec * specGain;
+```
+
+### 6.3 歪み（屈折）
+
+* 新月ほど見えなくなる問題を補正
+* 暗いほど歪みを強調
+
+```glsl
+float distortGain = mix(1.15, 1.0, pow(fraction, 0.8));
+vec2 distortion = baseDistortion * distortGain;
+```
+
+---
+
+## 7. 触った瞬間の体験補強（任意だが推奨）
+
+### 7.1 Touch Energy
+
+* 触った瞬間だけ発生する補助光
+* 時間とともに減衰
+
+目的：
+
+* 新月でも「触った感触」を即座に返す
+* 常時明るくしないことで世界観を守る
+
+```glsl
+float interaction = touchEnergy * smoothstep(0.02, 0.08, abs(vHeight));
+vec3 touchGlow = interactionColor * interaction * 0.35;
+finalColor += touchGlow;
+```
+
+---
+
+## 8. UI（補助的存在）
+
+* 左下に hover 表示の月相スライダー
+* 右下クレジットと同様の構造
+
+役割：
+
+* 制作・検証用
+* 体験の主導線にはしない
+
+---
+
+## 9. 設計原則まとめ
+
+1. 月相は「世界の状態」であり、主役ではない
+2. 水面は常に触れる存在でなければならない
+3. 体験フィードバックは月相より優先される
+4. 物理的正しさより、因果が感じられることを重視する
+
+---
+
+## 最終宣言
+
+> 月が見えない夜でも、水面は応えてくれる。
+> それを飼っている。
+
+この作品は、
+**月を描く作品ではなく、月を介した水面との関係を育てる作品**である。
