From 99eced4790452aedfc869b2c1b07b36086ccc04d Mon Sep 17 00:00:00 2001
From: yu-sugimoto <yuyuyuk2002@gmail.com>
Date: Tue, 24 Feb 2026 09:18:32 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=83=80=E3=83=83=E3=82=B7=E3=83=A5?=
 =?UTF-8?q?=E3=83=9C=E3=83=BC=E3=83=89=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=82=92=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Layout.tsx | 46 ++++++++++++++++++------------
 frontend/src/pages/Dashboard.tsx   | 21 ++++++++++----
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 606462a..f425c32 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -32,25 +32,33 @@ export default function Layout() {
           minHeight: '100vh',
         }}
       >
-        {!sidebarOpen && (
-          <button
-            onClick={() => setSidebarOpen(true)}
-            style={{
-              position: 'fixed',
-              top: '12px',
-              left: '12px',
-              zIndex: 101,
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              padding: '6px',
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            <span style={{ fontSize: '30px', color: '#9ca3af' }}>☰</span>
-          </button>
-        )}
+        <div
+          style={{
+            padding: '12px 16px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+          }}
+        >
+          {!sidebarOpen && (
+            <button
+              onClick={() => setSidebarOpen(true)}
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                padding: '6px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <span style={{ fontSize: '30px', color: '#9ca3af' }}>☰</span>
+            </button>
+          )}
+          <span style={{ fontSize: '26px', fontWeight: 600, color: 'rgba(255,255,255,0.87)' }}>
+            UI Recommender
+          </span>
+        </div>
         <Outlet context={{ refreshJobs } satisfies LayoutContext} />
       </div>
     </div>
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 17459ec..7b1cfbe 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -47,8 +47,6 @@ export default function Dashboard() {
 
   return (
     <div style={{ maxWidth: '800px', margin: '0 auto', padding: '24px' }}>
-      <h1 style={{ fontSize: '24px', marginBottom: '24px' }}>UI Recommender</h1>
-
       {settingsLoaded && (
         <div
           style={{
@@ -80,11 +78,17 @@ export default function Dashboard() {
 
       <form onSubmit={handleSubmit}>
         <div style={{ marginBottom: '16px' }}>
-          <label
-            style={{ display: 'block', marginBottom: '4px', fontSize: '16px', fontWeight: 600 }}
+          <h2
+            style={{
+              fontSize: '36px',
+              fontWeight: 600,
+              marginTop: '80px',
+              marginBottom: '50px',
+              textAlign: 'center',
+            }}
           >
-            UI Change Instruction
-          </label>
+            どのようなデザインにしたいですか？
+          </h2>
           <textarea
             value={instruction}
             onChange={(e) => setInstruction(e.target.value)}
@@ -105,6 +109,11 @@ export default function Dashboard() {
           />
         </div>
 
+        <p style={{ fontSize: '12px', color: '#9ca3af', marginBottom: '16px' }}>
+          あなたは AI によって実装・提案されたデザイン中から選択するだけです。 選択後、AI
+          は修正を理解して PR を自動作成します。
+        </p>
+
         {submitError && (
           <p style={{ color: '#f87171', fontSize: '16px', marginBottom: '12px' }}>{submitError}</p>
         )}