ダッシュボード（テンプレートから）

atomic.studio/s/3712

📄 index.html コードを直接編集して「適用」でプレビューに反映

<div class="min-h-screen bg-zinc-950 text-white"><section class="bg-slate-50 p-6 md:p-10"><div class="mx-auto max-w-6xl"><div class="flex items-center justify-between gap-4"><h2 class="text-2xl md:text-3xl font-bold text-slate-900">ダッシュボード</h2><span class="rounded-full bg-white border border-slate-200 px-4 py-1.5 text-sm text-slate-600 shadow-sm">今月</span></div><div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-4"><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><p class="text-sm font-medium text-slate-500">売上</p><p class="mt-3 text-3xl font-bold tracking-tight text-slate-900">¥2,480,000</p><p class="mt-2 inline-flex items-center gap-1 text-sm font-semibold text-emerald-600"><span>▲</span>+12.4%</p></div><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><p class="text-sm font-medium text-slate-500">新規顧客</p><p class="mt-3 text-3xl font-bold tracking-tight text-slate-900">318</p><p class="mt-2 inline-flex items-center gap-1 text-sm font-semibold text-emerald-600"><span>▲</span>+5.1%</p></div><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><p class="text-sm font-medium text-slate-500">解約率</p><p class="mt-3 text-3xl font-bold tracking-tight text-slate-900">1.8%</p><p class="mt-2 inline-flex items-center gap-1 text-sm font-semibold text-emerald-600"><span>▲</span>-0.3pt</p></div><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><p class="text-sm font-medium text-slate-500">稼働中ジョブ</p><p class="mt-3 text-3xl font-bold tracking-tight text-slate-900">47</p><p class="mt-2 inline-flex items-center gap-1 text-sm font-semibold text-rose-600"><span>▼</span>-2</p></div></div></div></section><section class="bg-white p-6 md:p-10"><div class="mx-auto max-w-5xl"><h2 class="text-2xl font-bold text-slate-900">タスクボード</h2><div class="mt-6 grid gap-5 md:grid-cols-3"><div class="rounded-2xl bg-slate-50 p-4 border border-slate-100"><div class="flex items-center justify-between px-1"><h3 class="font-semibold text-slate-700">未着手</h3><span class="rounded-full bg-white px-2 py-0.5 text-xs font-bold text-slate-500 border border-slate-200">2</span></div><div class="mt-3 space-y-3"><div class="rounded-xl bg-white p-4 shadow-sm border border-slate-100 hover:shadow-md transition"><p class="font-medium text-slate-800">要件ヒアリング</p><span class="mt-2 inline-block rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500">営業</span></div><div class="rounded-xl bg-white p-4 shadow-sm border border-slate-100 hover:shadow-md transition"><p class="font-medium text-slate-800">デザイン案レビュー</p><span class="mt-2 inline-block rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500">制作</span></div></div></div><div class="rounded-2xl bg-slate-50 p-4 border border-slate-100"><div class="flex items-center justify-between px-1"><h3 class="font-semibold text-slate-700">進行中</h3><span class="rounded-full bg-white px-2 py-0.5 text-xs font-bold text-slate-500 border border-slate-200">3</span></div><div class="mt-3 space-y-3"><div class="rounded-xl bg-white p-4 shadow-sm border border-slate-100 hover:shadow-md transition"><p class="font-medium text-slate-800">API実装</p><span class="mt-2 inline-block rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500">開発</span></div><div class="rounded-xl bg-white p-4 shadow-sm border border-slate-100 hover:shadow-md transition"><p class="font-medium text-slate-800">コンテンツ執筆</p><span class="mt-2 inline-block rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500">制作</span></div><div class="rounded-xl bg-white p-4 shadow-sm border border-slate-100 hover:shadow-md transition"><p class="font-medium text-slate-800">請求処理</p><span class="mt-2 inline-block rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500">経理</span></div></div></div><div class="rounded-2xl bg-slate-50 p-4 border border-slate-100"><div class="flex items-center justify-between px-1"><h3 class="font-semibold text-slate-700">完了</h3><span class="rounded-full bg-white px-2 py-0.5 text-xs font-bold text-slate-500 border border-slate-200">1</span></div><div class="mt-3 space-y-3"><div class="rounded-xl bg-white p-4 shadow-sm border border-slate-100 hover:shadow-md transition"><p class="font-medium text-slate-800">キックオフMTG</p><span class="mt-2 inline-block rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500">営業</span></div></div></div></div></div></section><section class="bg-slate-50 py-20 md:py-28"><div class="mx-auto max-w-6xl px-6"><h2 class="text-3xl md:text-4xl font-bold text-slate-900">在庫車両</h2><div class="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-5"><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚗<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-indigo-100 text-indigo-700">新着</span></div><div class="p-5"><h3 class="font-bold text-slate-900">プリウス S</h3><p class="text-sm text-slate-400 mt-0.5">2023年式 / 8,200km / パールホワイト</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥2,480,000</p></div></div><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚙<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-red-100 text-red-700">人気</span></div><div class="p-5"><h3 class="font-bold text-slate-900">ヴェゼル e:HEV</h3><p class="text-sm text-slate-400 mt-0.5">2022年式 / 15,600km / プラチナホワイト</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥2,880,000</p></div></div><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚐<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-indigo-100 text-indigo-700">高品質</span></div><div class="p-5"><h3 class="font-bold text-slate-900">ランドクルーザー 300</h3><p class="text-sm text-slate-400 mt-0.5">2022年式 / 22,000km / ソリッドブラック</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥7,980,000</p></div></div><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚘<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-green-100 text-green-700">経済的</span></div><div class="p-5"><h3 class="font-bold text-slate-900">ワゴンR スマイル</h3><p class="text-sm text-slate-400 mt-0.5">2023年式 / 5,100km / ラピスブルー</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥1,280,000</p></div></div><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚗<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-red-100 text-red-700">人気</span></div><div class="p-5"><h3 class="font-bold text-slate-900">クラウンクロスオーバー</h3><p class="text-sm text-slate-400 mt-0.5">2023年式 / 11,200km / エモーショナルレッド</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥4,580,000</p></div></div><div class="group rounded-2xl bg-white border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition"><div class="relative aspect-[4/3] bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center text-7xl">🚘<span class="absolute top-3 left-3 rounded-full text-xs font-bold px-2.5 py-1 bg-indigo-100 text-indigo-700">値下げ</span></div><div class="p-5"><h3 class="font-bold text-slate-900">N-BOX カスタム</h3><p class="text-sm text-slate-400 mt-0.5">2022年式 / 18,500km / プレミアムホワイト</p><p class="mt-3 text-2xl font-bold text-indigo-600">¥1,680,000</p></div></div></div></div></section><section class="bg-white p-6 md:p-10"><div class="mx-auto max-w-6xl"><div class="flex flex-wrap items-center justify-between gap-3"><h2 class="text-2xl font-bold text-slate-900">顧客一覧</h2><input aria-label="検索" placeholder="検索…" class="w-full sm:w-64 rounded-xl border border-slate-200 px-3 py-2 text-sm outline-none focus:border-indigo-400"/></div><div class="mt-6 overflow-x-auto rounded-2xl border border-slate-100 shadow-sm"><table class="min-w-full divide-y divide-slate-100 text-sm"><thead class="bg-slate-50"><tr><th class="px-5 py-3 text-left font-semibold text-slate-600 whitespace-nowrap">顧客名</th><th class="px-5 py-3 text-left font-semibold text-slate-600 whitespace-nowrap">ステータス</th><th class="px-5 py-3 text-left font-semibold text-slate-600 whitespace-nowrap">プラン</th><th class="px-5 py-3 text-left font-semibold text-slate-600 whitespace-nowrap">登録日</th><th class="px-5 py-3 text-left font-semibold text-slate-600 whitespace-nowrap">MRR</th></tr></thead><tbody class="divide-y divide-slate-100"><tr class="hover:bg-slate-50/70 transition"><td class="px-5 py-3 text-slate-700 whitespace-nowrap">田中商事</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-emerald-100 text-emerald-700">稼働中</span></td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">Pro</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">2026-01-12</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">¥48,000</td></tr><tr class="hover:bg-slate-50/70 transition"><td class="px-5 py-3 text-slate-700 whitespace-nowrap">佐藤デザイン</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-emerald-100 text-emerald-700">稼働中</span></td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">Standard</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">2026-02-03</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">¥18,000</td></tr><tr class="hover:bg-slate-50/70 transition"><td class="px-5 py-3 text-slate-700 whitespace-nowrap">鈴木工業</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-rose-100 text-rose-700">停止</span></td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">Pro</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">2025-11-28</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">¥0</td></tr><tr class="hover:bg-slate-50/70 transition"><td class="px-5 py-3 text-slate-700 whitespace-nowrap">山本クリニック</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-emerald-100 text-emerald-700">稼働中</span></td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">Enterprise</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">2026-03-19</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">¥120,000</td></tr><tr class="hover:bg-slate-50/70 transition"><td class="px-5 py-3 text-slate-700 whitespace-nowrap">伊藤事務所</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap"><span class="rounded-full px-2.5 py-0.5 text-xs font-semibold bg-emerald-100 text-emerald-700">試用</span></td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">Trial</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">2026-05-30</td><td class="px-5 py-3 text-slate-700 whitespace-nowrap">¥0</td></tr></tbody></table></div></div></section><div class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4"><div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl md:p-7"><h2 class="text-lg font-bold text-slate-900">在庫を瞬時に見える化</h2><p class="mt-3 text-sm text-slate-600 leading-relaxed">この顧客レコードを削除します。削除すると元に戻せません。よろしいですか？</p><div class="mt-7 flex justify-end gap-3"><button class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">キャンセル</button><button class="rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-500">削除する</button></div></div></div><nav class="bg-white/95 backdrop-blur sticky top-0 shadow-sm z-50"><div class="max-w-7xl mx-auto px-4 md:flex md:justify-between md:items-center md:h-16"><div class="flex justify-between items-center h-16 md:h-auto"><h2 class="font-bold text-indigo-600 text-xl">RealtyPro</h2><button class="md:hidden p-2 rounded-xl text-gray-600 hover:text-indigo-600 focus:outline-none" aria-label="メニューを開く"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div><div class="hidden md:flex md:items-center md:space-x-8 pb-4 md:pb-0"><a href="#" class="block py-2 md:py-0 text-gray-700 hover:text-indigo-600 transition">物件検索</a><a href="#" class="block py-2 md:py-0 text-gray-700 hover:text-indigo-600 transition">売買</a><a href="#" class="block py-2 md:py-0 text-gray-700 hover:text-indigo-600 transition">賃貸</a><a href="#" class="block py-2 md:py-0 text-gray-700 hover:text-indigo-600 transition">管理・仲介</a><a href="#" class="block py-2 md:py-0 text-gray-700 hover:text-indigo-600 transition">お問い合わせ</a><div class="mt-3 md:mt-0"><a href="#" class="inline-block bg-indigo-600 text-white px-5 py-2 rounded-xl hover:bg-indigo-700 transition">無料相談</a></div></div></div></nav><div class="bg-white rounded-2xl border border-gray-200 py-8 px-6 shadow-sm"><div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"><h2 class="text-xl font-bold text-gray-800 mb-2 md:mb-0">年間レポート</h2><div class="flex gap-2"><button class="px-4 py-1.5 text-sm rounded-xl bg-indigo-600 text-white font-medium">年間</button><button class="px-4 py-1.5 text-sm rounded-xl bg-gray-100 text-gray-600 font-medium hover:bg-gray-200">四半期</button><button class="px-4 py-1.5 text-sm rounded-xl bg-gray-100 text-gray-600 font-medium hover:bg-gray-200">月次</button></div></div><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8"><div class="bg-gray-50 rounded-xl p-4 border border-gray-100"><p class="text-sm text-gray-500 mb-1">合計</p><p class="text-2xl font-bold text-gray-800">6,780</p></div><div class="bg-gray-50 rounded-xl p-4 border border-gray-100"><p class="text-sm text-gray-500 mb-1">平均</p><p class="text-2xl font-bold text-gray-800">565</p></div><div class="bg-gray-50 rounded-xl p-4 border border-gray-100"><p class="text-sm text-gray-500 mb-1">最大</p><p class="text-2xl font-bold text-gray-800">720</p></div></div><div class="relative"><div class="absolute left-0 top-0 bottom-8 w-10 flex flex-col justify-between text-xs text-gray-400 pointer-events-none"><span>720</span><span>360</span><span>0</span></div><div class="absolute left-10 right-0 top-0 bottom-8 flex flex-col justify-between pointer-events-none"><div class="border-t border-dashed border-gray-200"></div><div class="border-t border-dashed border-gray-200"></div><div class="border-t border-dashed border-gray-200"></div></div><div class="ml-10 flex items-end gap-1.5 sm:gap-2 h-48"><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">420</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:58.333333333333336%"></div><span class="text-xs text-gray-500 mt-1.5">1月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">380</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:52.77777777777778%"></div><span class="text-xs text-gray-500 mt-1.5">2月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">510</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:70.83333333333334%"></div><span class="text-xs text-gray-500 mt-1.5">3月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">470</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:65.27777777777779%"></div><span class="text-xs text-gray-500 mt-1.5">4月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">620</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:86.11111111111111%"></div><span class="text-xs text-gray-500 mt-1.5">5月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">580</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:80.55555555555556%"></div><span class="text-xs text-gray-500 mt-1.5">6月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">690</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:95.83333333333334%"></div><span class="text-xs text-gray-500 mt-1.5">7月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">720</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:100%"></div><span class="text-xs text-gray-500 mt-1.5">8月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">650</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:90.27777777777779%"></div><span class="text-xs text-gray-500 mt-1.5">9月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">590</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:81.94444444444444%"></div><span class="text-xs text-gray-500 mt-1.5">10月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">540</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:75%"></div><span class="text-xs text-gray-500 mt-1.5">11月</span></div><div class="flex-1 flex flex-col items-center justify-end h-full"><span class="text-xs font-semibold text-gray-700 mb-1">610</span><div class="w-full bg-indigo-500 rounded-t-md transition-all duration-300 hover:bg-indigo-600" style="height:84.72222222222221%"></div><span class="text-xs text-gray-500 mt-1.5">12月</span></div></div></div></div><section class="bg-white py-20 md:py-28"><div class="mx-auto max-w-6xl px-6"><div class="text-center max-w-2xl mx-auto"><h2 class="text-3xl md:text-4xl font-bold text-slate-900">数字で見る私たちの実績</h2><p class="mt-4 text-slate-600">リアルタイム管理で欠品・過剰在庫をゼロに。売上アップを実現</p></div><dl class="mt-16 grid grid-cols-2 gap-8 md:grid-cols-4"><div class="text-center"><dt class="text-4xl md:text-5xl font-extrabold tracking-tight text-indigo-600">1,200<span class="text-2xl md:text-3xl text-indigo-400">社</span></dt><dd class="mt-3 text-sm md:text-base text-slate-500">導入企業数</dd></div><div class="text-center"><dt class="text-4xl md:text-5xl font-extrabold tracking-tight text-indigo-600">98<span class="text-2xl md:text-3xl text-indigo-400">%</span></dt><dd class="mt-3 text-sm md:text-base text-slate-500">継続利用率</dd></div><div class="text-center"><dt class="text-4xl md:text-5xl font-extrabold tracking-tight text-indigo-600">4.8<span class="text-2xl md:text-3xl text-indigo-400">/5</span></dt><dd class="mt-3 text-sm md:text-base text-slate-500">顧客満足度</dd></div><div class="text-center"><dt class="text-4xl md:text-5xl font-extrabold tracking-tight text-indigo-600">24<span class="text-2xl md:text-3xl text-indigo-400">h</span></dt><dd class="mt-3 text-sm md:text-base text-slate-500">平均サポート応答</dd></div></dl></div></section><section class="bg-white p-6 md:p-10"><div class="mx-auto max-w-5xl"><h2 class="text-2xl font-bold text-slate-900">主要指標</h2><div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3"><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><div class="flex items-start justify-between"><div><p class="text-sm text-slate-500">セッション</p><p class="mt-1 text-2xl font-bold text-slate-900">8,420</p></div><span class="text-sm font-semibold text-emerald-600">+6.2%</span></div><svg viewBox="0 0 100 32" preserveAspectRatio="none" class="mt-4 h-10 w-full"><polyline points="0.0,19.6 16.7,14.4 33.3,17.9 50.0,10.9 66.7,13.5 83.3,7.5 100.0,4.0" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline></svg></div><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><div class="flex items-start justify-between"><div><p class="text-sm text-slate-500">コンバージョン</p><p class="mt-1 text-2xl font-bold text-slate-900">3.8%</p></div><span class="text-sm font-semibold text-emerald-600">+0.4pt</span></div><svg viewBox="0 0 100 32" preserveAspectRatio="none" class="mt-4 h-10 w-full"><polyline points="0.0,15.1 16.7,13.3 33.3,17.0 50.0,9.6 66.7,11.4 83.3,5.9 100.0,4.0" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline></svg></div><div class="rounded-2xl bg-white p-6 border border-slate-100 shadow-sm"><div class="flex items-start justify-between"><div><p class="text-sm text-slate-500">離脱率</p><p class="mt-1 text-2xl font-bold text-slate-900">27%</p></div><span class="text-sm font-semibold text-rose-600">-1.1pt</span></div><svg viewBox="0 0 100 32" preserveAspectRatio="none" class="mt-4 h-10 w-full"><polyline points="0.0,4.0 16.7,6.6 33.3,5.3 50.0,9.2 66.7,7.9 83.3,10.5 100.0,11.8" fill="none" stroke="#f43f5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline></svg></div></div></div></section><section class="bg-slate-50 p-6 md:p-10"><div class="mx-auto max-w-3xl"><h2 class="text-2xl md:text-3xl font-bold text-slate-900">アカウント設定</h2><div class="mt-8 space-y-8"><div class="rounded-2xl bg-white border border-slate-100 shadow-sm"><p class="border-b border-slate-100 px-6 py-4 font-semibold text-slate-700">通知</p><div class="divide-y divide-slate-100"><div class="flex items-center justify-between gap-4 px-6 py-4"><div><p class="font-medium text-slate-900">メール通知</p><p class="text-sm text-slate-500">重要な更新をメールで受け取る</p></div><span class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition bg-indigo-600"><span class="inline-block h-5 w-5 transform rounded-full bg-white shadow transition translate-x-5"></span></span></div><div class="flex items-center justify-between gap-4 px-6 py-4"><div><p class="font-medium text-slate-900">プッシュ通知</p><p class="text-sm text-slate-500">ブラウザ通知を有効化</p></div><span class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition bg-slate-300"><span class="inline-block h-5 w-5 transform rounded-full bg-white shadow transition translate-x-1"></span></span></div></div></div><div class="rounded-2xl bg-white border border-slate-100 shadow-sm"><p class="border-b border-slate-100 px-6 py-4 font-semibold text-slate-700">プライバシー</p><div class="divide-y divide-slate-100"><div class="flex items-center justify-between gap-4 px-6 py-4"><div><p class="font-medium text-slate-900">プロフィール公開</p><p class="text-sm text-slate-500">他ユーザーに公開する</p></div><span class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition bg-indigo-600"><span class="inline-block h-5 w-5 transform rounded-full bg-white shadow transition translate-x-5"></span></span></div><div class="flex items-center justify-between gap-4 px-6 py-4"><div><p class="font-medium text-slate-900">アクティビティ表示</p><p class="text-sm text-slate-500">最終ログインを表示</p></div><span class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition bg-slate-300"><span class="inline-block h-5 w-5 transform rounded-full bg-white shadow transition translate-x-1"></span></span></div></div></div></div></div></section><section class="rounded bg-gray-900 p-6 text-gray-100 shadow-lg md:p-8"><h2 class="mb-4 text-xl font-bold tracking-tight md:text-2xl">在庫検索フィルターパネル</h2><p class="text-sm leading-relaxed text-gray-300 md:text-base">商品名、カテゴリ、在庫状況から素早く絞り込み。リアルタイムで在庫一覧を更新します。</p></section><section class="rounded-xl bg-gray-900 p-4 md:p-6 text-gray-100 shadow-lg"><h2 class="mb-4 text-lg font-bold md:text-xl">入出庫履歴リスト</h2><div class="overflow-x-auto"><table class="w-full text-left text-sm md:text-base"><thead><tr class="border-b border-gray-700"><th class="py-2 pr-2">日付</th><th class="py-2 pr-2">品目</th><th class="py-2 pr-2">区分</th><th class="py-2 pr-2">数量</th><th class="py-2 pr-2">備考</th></tr></thead><tbody><tr class="border-b border-gray-800 hover:bg-gray-800"><td class="py-2 pr-2 whitespace-nowrap">2025-01-10</td><td class="py-2 pr-2">アルミパイプ A-100</td><td class="py-2 pr-2"><span class="inline-block rounded px-2 py-0.5 text-xs font-semibold md:text-sm bg-green-700 text-green-100">入庫</span></td><td class="py-2 pr-2">50</td><td class="py-2 pr-2">定期補充</td></tr><tr class="border-b border-gray-800 hover:bg-gray-800"><td class="py-2 pr-2 whitespace-nowrap">2025-01-11</td><td class="py-2 pr-2">スチールプレート SP-20</td><td class="py-2 pr-2"><span class="inline-block rounded px-2 py-0.5 text-xs font-semibold md:text-sm bg-red-700 text-red-100">出庫</span></td><td class="py-2 pr-2">12</td><td class="py-2 pr-2">製造ラインB</td></tr><tr class="border-b border-gray-800 hover:bg-gray-800"><td class="py-2 pr-2 whitespace-nowrap">2025-01-12</td><td class="py-2 pr-2">銅線 0.5mm</td><td class="py-2 pr-2"><span class="inline-block rounded px-2 py-0.5 text-xs font-semibold md:text-sm bg-green-700 text-green-100">入庫</span></td><td class="py-2 pr-2">200</td><td class="py-2 pr-2">新規仕入</td></tr><tr class="border-b border-gray-800 hover:bg-gray-800"><td class="py-2 pr-2 whitespace-nowrap">2025-01-13</td><td class="py-2 pr-2">樹脂パレット TP-5</td><td class="py-2 pr-2"><span class="inline-block rounded px-2 py-0.5 text-xs font-semibold md:text-sm bg-red-700 text-red-100">出庫</span></td><td class="py-2 pr-2">8</td><td class="py-2 pr-2">出荷準備</td></tr></tbody></table></div></section><div class="text-white"><section class="px-6 py-16 md:py-24 text-center bg-zinc-900"><p class="text-sm tracking-widest text-indigo-400 mb-3">在庫管理アプリのダッシュボード</p><h2 class="text-3xl md:text-5xl font-bold mb-4">在庫を瞬時に見える化</h2><p class="text-zinc-300 max-w-2xl mx-auto mb-8">リアルタイム管理で欠品・過剰在庫をゼロに。売上アップを実現</p><a href="#contact" class="inline-block px-8 py-3 rounded-full bg-indigo-500 text-zinc-900 font-semibold">無料で始める</a><p class="text-base text-zinc-400 mt-6">在庫管理アプリのダッシュボードのウェブサイトへようこそ。</p></section><section class="px-6 py-14 max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6">サービス一覧</h3><div class="grid gap-4 md:grid-cols-3"><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">在庫リアルタイム監視</h4><p class="text-sm text-zinc-300">全倉庫の在庫数を即時可視化し、過不足をアラートで通知</p></div><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">入出庫履歴管理</h4><p class="text-sm text-zinc-300">商品ごとの入出庫記録を時系列で表示し、トレーサビリティを確保</p></div><div class="rounded-xl bg-zinc-800 p-6"><h4 class="font-semibold mb-2">発注点自動計算</h4><p class="text-sm text-zinc-300">過去の販売データに基づき、最適な発注タイミングを提案</p></div></div></section><section class="px-6 py-14 bg-zinc-900"><div class="max-w-5xl mx-auto"><h3 class="text-2xl font-bold mb-6 text-center">選ばれる特徴</h3><div class="grid gap-4 md:grid-cols-3"><div class="text-center p-6"><div class="text-3xl mb-2">📦</div><h4 class="font-semibold mb-1">ダッシュボード一覧</h4><p class="text-sm text-zinc-400">在庫数・入出庫・発注状況を1画面で把握</p></div><div class="text-center p-6"><div class="text-3xl mb-2">🔔</div><h4 class="font-semibold mb-1">アラート機能</h4><p class="text-sm text-zinc-400">在庫切れや過剰在庫をメール・画面通知</p></div><div class="text-center p-6"><div class="text-3xl mb-2">📊</div><h4 class="font-semibold mb-1">グラフ分析</h4><p class="text-sm text-zinc-400">月別・商品別の在庫推移をグラフで可視化</p></div><div class="text-center p-6"><div class="text-3xl mb-2">🔗</div><h4 class="font-semibold mb-1">外部連携</h4><p class="text-sm text-zinc-400">POSやECサイトとAPI連携し在庫を自動更新</p></div></div></div></section><section class="px-6 py-14 max-w-3xl mx-auto"><h3 class="text-2xl font-bold mb-6">よくある質問</h3><div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 予約は必要ですか?</p><p class="text-sm text-zinc-300">A. ご予約優先ですが当日も承ります。※サンプル</p></div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 駐車場はありますか?</p><p class="text-sm text-zinc-300">A. 近隣に駐車場がございます。※サンプル</p></div><div class="border-b border-zinc-700 py-4"><p class="font-semibold mb-1">Q. 支払い方法は?</p><p class="text-sm text-zinc-300">A. 現金・各種カード・電子マネー対応。※サンプル</p></div></div></section></div></div>