Feature/diagnosi UI

frontend/src/app/diagnosis/page.tsx

@@ -2,8 +2,10 @@ import DiagnosisFlow from '@/features/diagnosis/components/DiagnosisFlow';
 
 export default function DiagnosisPage() {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center p-4">
-      <DiagnosisFlow />
+    <div className="flex min-h-screen w-full flex-col items-center justify-center bg-page-pattern p-4">
+      <div className="flex w-full max-w-5xl flex-1 flex-col items-center justify-center">
+        <DiagnosisFlow />
+      </div>
     </div>
   );
 }

frontend/src/app/globals.css

@@ -1,5 +1,26 @@
 @import 'tailwindcss';
 
+/* 共通ページ背景: 黄色ベース + 白の水玉模様 */
+@utility bg-page-pattern {
+  background-color: #f0f380;
+  background-image: radial-gradient(circle, #fff 2px, transparent 2px);
+  background-size: 20px 20px;
+}
+
+/* トップページ用: SVG背景 + 白の水玉オーバーレイ */
+@utility bg-top-pattern {
+  background-image:
+    radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 4px),
+    url('/images/bg-pattern.svg');
+  background-size:
+    16px 16px,
+    cover;
+  background-position:
+    0 0,
+    center;
+  background-repeat: repeat, no-repeat;
+}
+
 @keyframes fadeInUp {
   from {
     opacity: 0;

frontend/src/app/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import type { CSSProperties } from 'react';
@@ -62,7 +63,7 @@ export default function TopPage() {
   const handleStartClick = () => {
     setShowExplosion(true);
 
-    const audio = new Audio('/start-se.mp3');
+    const audio = new Audio('/sounds/start-se.mp3');
     audio.play().catch(() => {});
 
     setTimeout(() => {
@@ -75,44 +76,27 @@ export default function TopPage() {
   };
 
   return (
-    <div
-      className="h-dvh w-full overflow-hidden flex flex-col items-center justify-center"
-      style={{
-        backgroundImage: `
-        radial-gradient(circle, rgba(255,255,255,0.8) 1.0px, transparent 4px),
-        url('/bg-pattern.svg')
-      `,
-        backgroundSize: '16px 16px, cover',
-        backgroundPosition: '0 0, center',
-        backgroundRepeat: 'repeat, no-repeat',
-      }}
-    >
+    <div className="flex h-dvh w-full flex-col items-center justify-center overflow-hidden bg-top-pattern">
       <div className="flex flex-col items-center gap-[2vh] w-full">
-        <img
-          src="/RealYouLogo.png"
+        <Image
+          src="/images/RealYouLogo.png"
           alt="Real You -本当の私じゃだめですか？-"
-          className="
-          max-h-[65vh]
-          w-auto
-          object-contain
-          drop-shadow-2xl
-        "
+          width={800}
+          height={500}
+          className="max-h-[65vh] w-auto object-contain drop-shadow-2xl"
         />
 
         <div className="relative">
           <button
             onClick={handleStartClick}
             className="transition-all duration-100 ease-out hover:scale-110 active:scale-95 active:opacity-50"
           >
-            <img
-              src="/StartButton.png"
+            <Image
+              src="/images/StartButton.png"
               alt="診断スタート"
-              className="
-              w-[40vw]
-              max-w-xs
-              min-w-[180px]
-              drop-shadow-md
-            "
+              width={320}
+              height={120}
+              className="w-[40vw] max-w-xs min-w-[180px] drop-shadow-md"
             />
           </button>
 

frontend/src/features/diagnosis/components/BaselineSurvey.tsx

@@ -143,11 +143,11 @@ export default function BaselineSurvey() {
       <div className="flex flex-col gap-3">
         {currentQuestion.options.map((option) => (
           <button
-            key={option}
-            onClick={() => handleAnswer(option)}
+            key={option.value}
+            onClick={() => handleAnswer(option.value)}
             className="rounded-lg border-2 border-gray-200 bg-white px-6 py-3 text-left font-medium text-gray-700 transition hover:border-blue-400 hover:bg-blue-50"
           >
-            {option}
+            {option.label}
           </button>
         ))}
       </div>