diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1906b1f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SwitchBot Controller | Cloudflare Pages Preview</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        --bg: #0f172a;
+        --card: rgba(255, 255, 255, 0.05);
+        --text: #e2e8f0;
+        --accent: #38bdf8;
+        --muted: #94a3b8;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
+        font-family: "Segoe UI", "Noto Sans JP", system-ui, -apple-system,
+          sans-serif;
+        background: radial-gradient(circle at 20% 20%, #1e293b, var(--bg));
+        color: var(--text);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 32px;
+      }
+
+      main {
+        width: min(960px, 100%);
+        background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), var(--card));
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 16px;
+        padding: 32px;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+      }
+
+      header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 24px;
+      }
+
+      header .pill {
+        padding: 4px 10px;
+        border-radius: 999px;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        color: var(--accent);
+        background: rgba(56, 189, 248, 0.1);
+        font-size: 12px;
+        letter-spacing: 0.4px;
+      }
+
+      h1 {
+        margin: 0;
+        font-size: clamp(24px, 3vw, 32px);
+      }
+
+      p.lead {
+        margin: 8px 0 24px;
+        color: var(--muted);
+        line-height: 1.6;
+      }
+
+      section {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+        gap: 16px;
+      }
+
+      .card {
+        padding: 18px;
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+      }
+
+      .card h2 {
+        margin: 0 0 8px;
+        font-size: 16px;
+        color: var(--accent);
+      }
+
+      .card ul {
+        margin: 0;
+        padding-left: 20px;
+        color: var(--muted);
+        line-height: 1.6;
+      }
+
+      .card ul li + li {
+        margin-top: 6px;
+      }
+
+      footer {
+        margin-top: 24px;
+        font-size: 14px;
+        color: var(--muted);
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <div class="pill">Cloudflare Pages</div>
+        <h1>SwitchBot Controller プレビュー</h1>
+      </header>
+
+      <p class="lead">
+        このページは Pull Request ごとに SwitchBot Controller の UI 挙動を Cloudflare Pages 上で確認するためのプレースホルダーです。Electron や SwitchBot API の実呼び出しは行われず、見た目やモック挙動の確認に専念できます。
+      </p>
+
+      <section>
+        <div class="card">
+          <h2>目的</h2>
+          <ul>
+            <li>PR の変更をブラウザで手軽に共有・レビュー</li>
+            <li>API キー不要で UI の差分を確認</li>
+            <li>Cloudflare Pages のデプロイ動作を事前検証</li>
+          </ul>
+        </div>
+        <div class="card">
+          <h2>確認ポイント</h2>
+          <ul>
+            <li>スタイルやコンポーネントの見た目</li>
+            <li>ルーティングや状態管理のモック挙動</li>
+            <li>多言語対応やテーマ切り替えなどの UI</li>
+          </ul>
+        </div>
+        <div class="card">
+          <h2>注意事項</h2>
+          <ul>
+            <li>SwitchBot Cloud API は呼び出しません（通信なし）</li>
+            <li>Electron 固有の機能はブラウザでは無効です</li>
+            <li>必要に応じてモックデータを利用して動作を再現してください</li>
+          </ul>
+        </div>
+      </section>
+
+      <footer>最新版は PR ごとの Cloudflare Pages プレビューでご確認ください。</footer>
+    </main>
+  </body>
+</html>
