Merge pull request #12 from laiso/issue-11-support-site-refresh

laiso · web-flow · commit 6b08cbd92ba7 · 2026-03-22T16:48:36.000+07:00
Issue 11: サポートサイトのデザインと内容を改善
diff --git a/workspace/docs/index.html b/workspace/docs/index.html
@@ -3,48 +3,50 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Nano Code 補足情報サイト</title>
+    <title>作って学ぶ AIエージェント サポートサイト</title>
     <style>
       :root {
-        color-scheme: light dark;
-        --bg: #0f172a;
-        --panel: #111827;
-        --text: #e5e7eb;
-        --muted: #94a3b8;
-        --accent: #38bdf8;
-        --border: rgba(148, 163, 184, 0.2);
+        --bg: #ffffff;
+        --surface: #f7faff;
+        --text: #1f2937;
+        --muted: #4b5563;
+        --accent: #0066cc;
+        --accent-soft: #e6f0ff;
+        --border: #d9e3f0;
       }
       * { box-sizing: border-box; }
       body {
         margin: 0;
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        background: linear-gradient(180deg, #020617 0%, var(--bg) 100%);
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
+        background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
         color: var(--text);
-        line-height: 1.7;
+        line-height: 1.8;
       }
       main {
         max-width: 960px;
         margin: 0 auto;
-        padding: 64px 24px;
+        padding: 64px 24px 40px;
       }
-      .hero, section {
-        background: rgba(17, 24, 39, 0.72);
+      .hero, section, footer {
+        background: var(--bg);
         border: 1px solid var(--border);
         border-radius: 20px;
         padding: 28px;
-        backdrop-filter: blur(10px);
-        box-shadow: 0 20px 50px rgba(2, 6, 23, 0.35);
+        box-shadow: 0 12px 30px rgba(0, 102, 204, 0.08);
+      }
+      .hero {
+        background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
       }
       .hero h1 {
         margin: 0 0 12px;
         font-size: clamp(2rem, 4vw, 3.25rem);
       }
-      .hero p, li { color: var(--muted); }
+      .hero p, li, footer { color: var(--muted); }
       .badge {
         display: inline-block;
         padding: 6px 12px;
         border-radius: 999px;
-        background: rgba(56, 189, 248, 0.14);
+        background: var(--accent-soft);
         color: var(--accent);
         font-weight: 700;
         margin-bottom: 16px;
@@ -54,48 +56,48 @@
         gap: 20px;
         margin-top: 24px;
       }
-      h2 { margin-top: 0; }
-      ul { padding-left: 20px; }
-      a { color: var(--accent); }
+      h2 { margin-top: 0; color: var(--accent); }
+      ul {
+        padding-left: 20px;
+        margin: 0;
+      }
+      .chapters li { margin-bottom: 10px; }
+      .chapter {
+        color: var(--accent);
+        font-weight: 700;
+      }
+      footer {
+        margin-top: 20px;
+        text-align: center;
+        font-size: 0.95rem;
+      }
     </style>
   </head>
   <body>
     <main>
       <div class="hero">
-        <div class="badge">Nano Code Supplement</div>
-        <h1>Nano Code 補足情報サイト</h1>
+        <div class="badge">Support Site</div>
+        <h1>作って学ぶ AIエージェント サポートサイト</h1>
         <p>
-          このページは Nano Code の利用を補助するための情報をまとめたサイトです。
-          基本機能の紹介、導入のヒント、運用時の注意点を簡潔に確認できます。
+          書籍「作って学ぶ AIエージェント ── TypeScriptとLLMで切り拓くAI時代のエンジニアリング」
+          （laiso 著、技術評論社刊）のサポートサイトです。
         </p>
       </div>
 
       <div class="grid">
-        <section>
-          <h2>概要</h2>
-          <p>
-            Nano Code は、軽量かつ直感的に使えるコーディング支援ツールです。
-            この補足サイトでは、初めて触れる方にも分かりやすいように情報を整理しています。
-          </p>
-        </section>
-
-        <section>
-          <h2>主なポイント</h2>
-          <ul>
-            <li>シンプルな操作で素早く作業を開始できる</li>
-            <li>必要な情報にすぐアクセスできる構成</li>
-            <li>導入後の確認事項や運用のコツを掲載</li>
-          </ul>
-        </section>
-
         <section>
           <h2>補足情報</h2>
-          <p>
-            今後の更新に合わせて、使い方のコツ、設定例、FAQ などを追加していく想定です。
-            詳細情報の掲載先としてご利用ください。
-          </p>
+          <ul class="chapters">
+            <li><span class="chapter">7.4節</span>：補足情報 1</li>
+            <li><span class="chapter">7.7節</span>：補足情報 2</li>
+            <li><span class="chapter">7.2節</span>：補足情報 3</li>
+          </ul>
         </section>
       </div>
+
+      <footer>
+        書籍情報：ISBN 978-4-297-15565-0
+      </footer>
     </main>
   </body>
 </html>
