Feature/diagnosi UI

frontend/src/app/diagnosis/page.tsx

@@ -1,9 +1,20 @@
 import DiagnosisFlow from '@/features/diagnosis/components/DiagnosisFlow';
 
+const diagnosisBackgroundStyle = {
+  backgroundColor: '#f0f380',
+  backgroundImage: 'radial-gradient(circle, #fff 2px, transparent 2px)',
+  backgroundSize: '20px 20px',
+};
+
 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 p-4"
+      style={diagnosisBackgroundStyle}
+    >
+      <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

@@ -76,18 +76,7 @@ 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">
         <Image
           src="/images/RealYouLogo.png"

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

@@ -117,39 +117,48 @@ export default function BaselineSurvey() {
   }
 
   return (
-    <div className="flex w-full max-w-md flex-col gap-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">簡易性格診断</h1>
-        <span className="text-sm font-medium text-gray-500">
-          {currentIndex + 1} / {totalQuestions}
-        </span>
+    <div className="relative w-full max-w-2xl">
+      {/* ヘッダー: タイトル + プログレスバー */}
+      <div className="mb-0 flex items-start justify-between gap-4">
+        {/* タイトルエリア - メインカードに少し重なる */}
+        <div className="relative z-10 flex flex-col">
+          <div className="rounded-2xl border-4 border-gray-800 bg-white px-6 py-3 shadow-md">
+            <h1 className="text-xl font-bold text-gray-900">質問コーナー</h1>
+          </div>
+        </div>
+
+        {/* プログレスバー: 5セグメント */}
+        <div className="flex shrink-0 gap-0.5 rounded-xl border-4 border-gray-800 bg-gray-100 p-1">
+          {Array.from({ length: totalQuestions }).map((_, i) => (
+            <div
+              key={i}
+              className={`h-6 w-8 rounded-lg transition-colors ${
+                i <= currentIndex ? 'bg-rose-400' : 'bg-gray-200'
+              }`}
+            />
+          ))}
+        </div>
       </div>
 
-      <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200">
-        <div
-          className="h-full rounded-full bg-blue-600 transition-all duration-300"
-          style={{
-            width: `${((currentIndex + 1) / totalQuestions) * 100}%`,
-          }}
-        />
-      </div>
-
-      <div className="rounded-lg border border-gray-200 bg-white p-6">
-        <p className="text-lg font-medium">
+      {/* メインカード: 質問 + 4択 - タイトルと重なる */}
+      <div className="relative -mt-4 rounded-3xl border-4 border-gray-800 bg-white p-6 shadow-lg">
+        <p className="mb-6 text-xl font-bold text-gray-900">
           Q{currentIndex + 1}. {currentQuestion.label}
         </p>
-      </div>
 
-      <div className="flex flex-col gap-3">
-        {currentQuestion.options.map((option) => (
-          <button
-            key={option}
-            onClick={() => handleAnswer(option)}
-            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}
-          </button>
-        ))}
+        {/* 2x2グリッドの選択肢 */}
+        <div className="grid grid-cols-2 gap-4">
+          {currentQuestion.options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => handleAnswer(option.value)}
+              className="rounded-2xl border-4 border-gray-800 bg-gray-100 px-6 py-4 text-center font-bold text-gray-900 transition hover:bg-rose-50 hover:border-rose-300"
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
       </div>
     </div>
   );