ドキュメント（テンプレートから）

atomic.studio/s/3732

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

<div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-gradient-to-r from-[#1a3a5c] to-[#2a5f8f] text-white shadow-lg"><div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 md:px-6 lg:px-8"><div class="flex items-center gap-2"><span class="text-2xl font-bold tracking-tight md:text-3xl">📘 ドキュメント</span><span class="hidden text-sm font-light text-blue-200 md:inline-block">ヘルプセンター</span></div><nav class="hidden items-center gap-6 md:flex"><a href="#" class="text-sm font-medium text-white/90 transition hover:text-white">使い方ガイド</a><a href="#" class="text-sm font-medium text-white/90 transition hover:text-white">FAQ</a><a href="#" class="text-sm font-medium text-white/90 transition hover:text-white">お問い合わせ</a></nav><button class="flex items-center justify-center rounded-md border border-white/30 p-2 text-white/90 transition hover:bg-white/10 md:hidden" aria-label="Webサービスのドキュメント・ヘルプ"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div><div class="border-t border-white/20 px-4 py-2 text-center text-xs text-blue-200 md:hidden">ヘルプセンター</div><h2 class="sr-only">ドキュメントヘルプセンター</h2></header><nav class="w-full bg-[#f5f7fa] border-r border-[#dce1e8] h-full overflow-y-auto" aria-label="Webサービスのドキュメント・ヘルプ"><div class="px-4 py-5 md:px-5 lg:px-6"><div class="mb-6"><h2 class="text-sm font-semibold tracking-wide text-[#2c3e50] uppercase">ドキュメント</h2><div class="mt-1 h-px bg-[#dce1e8]"></div></div><ul class="space-y-1"><li><a href="#intro" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-[#3d4f60] transition-colors duration-150 hover:bg-[#e8ecf1] hover:text-[#1a2a3a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4a90d9] focus-visible:ring-offset-2 focus-visible:ring-offset-[#f5f7fa]"><span class="flex-shrink-0 text-base leading-none" aria-hidden="true">📘</span><span class="truncate">はじめに</span></a></li><li><a href="#quickstart" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-[#3d4f60] transition-colors duration-150 hover:bg-[#e8ecf1] hover:text-[#1a2a3a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4a90d9] focus-visible:ring-offset-2 focus-visible:ring-offset-[#f5f7fa]"><span class="flex-shrink-0 text-base leading-none" aria-hidden="true">🚀</span><span class="truncate">クイックスタート</span></a></li><li><a href="#api" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-[#3d4f60] transition-colors duration-150 hover:bg-[#e8ecf1] hover:text-[#1a2a3a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4a90d9] focus-visible:ring-offset-2 focus-visible:ring-offset-[#f5f7fa]"><span class="flex-shrink-0 text-base leading-none" aria-hidden="true">📡</span><span class="truncate">APIリファレンス</span></a></li><li><a href="#sdk" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-[#3d4f60] transition-colors duration-150 hover:bg-[#e8ecf1] hover:text-[#1a2a3a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4a90d9] focus-visible:ring-offset-2 focus-visible:ring-offset-[#f5f7fa]"><span class="flex-shrink-0 text-base leading-none" aria-hidden="true">🧩</span><span class="truncate">SDK / ライブラリ</span></a></li><li><a href="#tutorial" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-[#3d4f60] transition-colors duration-150 hover:bg-[#e8ecf1] hover:text-[#1a2a3a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4a90d9] focus-visible:ring-offset-2 focus-visible:ring-offset-[#f5f7fa]"><span class="flex-shrink-0 text-base leading-none" aria-hidden="true">📖</span><span class="truncate">チュートリアル</span></a></li><li><a href="#faq" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-[#3d4f60] transition-colors duration-150 hover:bg-[#e8ecf1] hover:text-[#1a2a3a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4a90d9] focus-visible:ring-offset-2 focus-visible:ring-offset-[#f5f7fa]"><span class="flex-shrink-0 text-base leading-none" aria-hidden="true">❓</span><span class="truncate">よくある質問</span></a></li><li><a href="#trouble" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-[#3d4f60] transition-colors duration-150 hover:bg-[#e8ecf1] hover:text-[#1a2a3a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4a90d9] focus-visible:ring-offset-2 focus-visible:ring-offset-[#f5f7fa]"><span class="flex-shrink-0 text-base leading-none" aria-hidden="true">🔧</span><span class="truncate">トラブルシューティング</span></a></li><li><a href="#release" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-[#3d4f60] transition-colors duration-150 hover:bg-[#e8ecf1] hover:text-[#1a2a3a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4a90d9] focus-visible:ring-offset-2 focus-visible:ring-offset-[#f5f7fa]"><span class="flex-shrink-0 text-base leading-none" aria-hidden="true">📋</span><span class="truncate">リリースノート</span></a></li><li><a href="#contact" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-[#3d4f60] transition-colors duration-150 hover:bg-[#e8ecf1] hover:text-[#1a2a3a] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4a90d9] focus-visible:ring-offset-2 focus-visible:ring-offset-[#f5f7fa]"><span class="flex-shrink-0 text-base leading-none" aria-hidden="true">✉️</span><span class="truncate">お問い合わせ</span></a></li></ul></div><div class="border-t border-[#dce1e8] px-4 py-4 md:px-5 lg:px-6"><p class="text-xs text-[#6b7c8d]">ヘルプセンター</p><p class="mt-0.5 text-xs text-[#8a9aa8]">バージョン 2.4.1</p></div></nav><div class="w-full min-h-screen bg-gradient-to-br from-pink-50 via-white to-purple-50 flex flex-col items-center justify-center p-4 md:p-8"><h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-center text-pink-700 mb-6 md:mb-8 lg:mb-10">花の検索</h2><form class="flex items-center w-full max-w-md mx-auto bg-white/90 backdrop-blur-sm rounded-full shadow-lg border border-blue-200/60 overflow-hidden transition-all duration-300 hover:shadow-blue-200/50 focus-within:ring-2 focus-within:ring-blue-400/40"><div class="flex items-center justify-center pl-4 pr-2 text-blue-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"></path></svg></div><input type="text" placeholder="花を探す…" class="flex-1 py-3 pr-4 bg-transparent text-blue-900 placeholder-blue-300/70 text-sm md:text-base outline-none" aria-label="Webサービスのドキュメント・ヘルプ" value=""/><button type="submit" class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-5 py-3 rounded-r-full text-sm md:text-base font-medium transition-all duration-200 shadow-md hover:shadow-lg">検索</button></form></div><nav aria-label="Webサービスのドキュメント・ヘルプ" class="w-full"><h2 class="sr-only">パンくずリスト</h2><ol class="flex flex-wrap items-center gap-1 text-sm md:text-base"><li class="flex items-center"><a href="/" class="text-[#2563eb] underline underline-offset-2 transition-colors hover:text-[#1d4ed8] focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-1 rounded">ホーム</a></li><li class="flex items-center"><span class="mx-1 text-[#6b7280] md:mx-2" aria-hidden="true">/</span><a href="/docs" class="text-[#2563eb] underline underline-offset-2 transition-colors hover:text-[#1d4ed8] focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-1 rounded">ドキュメント</a></li><li class="flex items-center"><span class="mx-1 text-[#6b7280] md:mx-2" aria-hidden="true">/</span><a href="/docs/help" class="text-[#2563eb] underline underline-offset-2 transition-colors hover:text-[#1d4ed8] focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-1 rounded">ヘルプ</a></li><li class="flex items-center"><span class="mx-1 text-[#6b7280] md:mx-2" aria-hidden="true">/</span><span class="font-medium text-[#1f2937]" aria-current="page">現在のページ</span></li></ol></nav><article class="max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-200" role="article"><div class="relative"><div class="bg-gradient-to-br from-blue-50 to-indigo-100 h-40 md:h-48 flex items-center justify-center"><svg class="w-16 h-16 md:w-20 md:h-20 text-blue-400/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg></div><span class="absolute top-3 left-3 bg-blue-600 text-white text-xs font-medium px-2.5 py-1 rounded-full">新着</span></div><div class="p-5 md:p-6"><div class="flex items-center gap-2 text-xs text-gray-400 mb-2"><time dateTime="2025-06-03">2025年6月3日</time><span aria-hidden="true">•</span><span>5分で読めます</span></div><h2 class="text-lg md:text-xl font-bold text-gray-800 mb-2 leading-snug">よくある質問（FAQ）の活用方法</h2><p class="text-sm md:text-base text-gray-600 leading-relaxed mb-4 line-clamp-3">お客様から寄せられる質問を整理し、FAQとして体系的にまとめることで、サポート対応の効率化とユーザー満足度向上を実現する方法をご紹介します。</p><div class="flex items-center justify-between"><div class="flex items-center gap-2"><span class="inline-block w-2 h-2 rounded-full bg-green-400" aria-hidden="true"></span><span class="text-xs text-gray-500">カテゴリ: 運用ガイド</span></div><button type="button" class="text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline transition-colors">詳しく見る →</button></div></div></article><nav class="w-full max-w-4xl mx-auto px-4 py-6 md:py-10" role="navigation" aria-label="Webサービスのドキュメント・ヘルプ"><h2 class="text-lg md:text-xl font-bold text-gray-800 mb-4 md:mb-6 tracking-wide">カテゴリから探す</h2><ul class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4"><li><a href="#getting-started" class="flex flex-col items-center justify-center gap-2 p-4 md:p-5 rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 group"><span class="text-2xl md:text-3xl group-hover:scale-110 transition-transform duration-200" aria-hidden="true">📘</span><span class="text-xs md:text-sm font-medium text-gray-700 group-hover:text-blue-700 text-center leading-tight">はじめに</span></a></li><li><a href="#tutorials" class="flex flex-col items-center justify-center gap-2 p-4 md:p-5 rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 group"><span class="text-2xl md:text-3xl group-hover:scale-110 transition-transform duration-200" aria-hidden="true">📖</span><span class="text-xs md:text-sm font-medium text-gray-700 group-hover:text-blue-700 text-center leading-tight">チュートリアル</span></a></li><li><a href="#guides" class="flex flex-col items-center justify-center gap-2 p-4 md:p-5 rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 group"><span class="text-2xl md:text-3xl group-hover:scale-110 transition-transform duration-200" aria-hidden="true">📚</span><span class="text-xs md:text-sm font-medium text-gray-700 group-hover:text-blue-700 text-center leading-tight">ガイド</span></a></li><li><a href="#api-reference" class="flex flex-col items-center justify-center gap-2 p-4 md:p-5 rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 group"><span class="text-2xl md:text-3xl group-hover:scale-110 transition-transform duration-200" aria-hidden="true">📡</span><span class="text-xs md:text-sm font-medium text-gray-700 group-hover:text-blue-700 text-center leading-tight">APIリファレンス</span></a></li><li><a href="#faq" class="flex flex-col items-center justify-center gap-2 p-4 md:p-5 rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 group"><span class="text-2xl md:text-3xl group-hover:scale-110 transition-transform duration-200" aria-hidden="true">❓</span><span class="text-xs md:text-sm font-medium text-gray-700 group-hover:text-blue-700 text-center leading-tight">よくある質問</span></a></li><li><a href="#troubleshooting" class="flex flex-col items-center justify-center gap-2 p-4 md:p-5 rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 group"><span class="text-2xl md:text-3xl group-hover:scale-110 transition-transform duration-200" aria-hidden="true">🔧</span><span class="text-xs md:text-sm font-medium text-gray-700 group-hover:text-blue-700 text-center leading-tight">トラブルシューティング</span></a></li></ul></nav><nav class="w-full bg-[#f8fafc] border-b border-[#e2e8f0] py-3 px-4 md:px-6 lg:px-8" aria-label="Webサービスのドキュメント・ヘルプ"><div class="max-w-6xl mx-auto flex flex-wrap items-center gap-x-6 gap-y-2 text-sm md:text-base"><h2 class="font-semibold text-[#1e293b] tracking-wide whitespace-nowrap text-base md:text-lg">目次</h2><ul class="flex flex-wrap items-center gap-x-5 gap-y-1 list-none p-0 m-0"><li><a href="#getting-started" class="text-[#475569] hover:text-[#0f172a] hover:underline underline-offset-2 transition-colors duration-150 whitespace-nowrap">はじめに</a><span class="ml-5 text-[#cbd5e1] hidden md:inline" aria-hidden="true">/</span></li><li><a href="#installation" class="text-[#475569] hover:text-[#0f172a] hover:underline underline-offset-2 transition-colors duration-150 whitespace-nowrap">インストール方法</a><span class="ml-5 text-[#cbd5e1] hidden md:inline" aria-hidden="true">/</span></li><li><a href="#configuration" class="text-[#475569] hover:text-[#0f172a] hover:underline underline-offset-2 transition-colors duration-150 whitespace-nowrap">設定</a><span class="ml-5 text-[#cbd5e1] hidden md:inline" aria-hidden="true">/</span></li><li><a href="#usage" class="text-[#475569] hover:text-[#0f172a] hover:underline underline-offset-2 transition-colors duration-150 whitespace-nowrap">使い方</a><span class="ml-5 text-[#cbd5e1] hidden md:inline" aria-hidden="true">/</span></li><li><a href="#api-reference" class="text-[#475569] hover:text-[#0f172a] hover:underline underline-offset-2 transition-colors duration-150 whitespace-nowrap">APIリファレンス</a><span class="ml-5 text-[#cbd5e1] hidden md:inline" aria-hidden="true">/</span></li><li><a href="#faq" class="text-[#475569] hover:text-[#0f172a] hover:underline underline-offset-2 transition-colors duration-150 whitespace-nowrap">よくある質問</a><span class="ml-5 text-[#cbd5e1] hidden md:inline" aria-hidden="true">/</span></li><li><a href="#support" class="text-[#475569] hover:text-[#0f172a] hover:underline underline-offset-2 transition-colors duration-150 whitespace-nowrap">サポート</a></li></ul></div></nav><div class="w-full max-w-3xl mx-auto my-6 rounded-xl overflow-hidden shadow-lg border border-gray-200 bg-white"><div class="flex items-center justify-between px-5 py-3 bg-gray-50 border-b border-gray-200"><div class="flex items-center gap-2"><div class="flex gap-1.5"><span class="w-3 h-3 rounded-full bg-red-400"></span><span class="w-3 h-3 rounded-full bg-yellow-400"></span><span class="w-3 h-3 rounded-full bg-green-400"></span></div><span class="ml-3 text-sm font-medium text-gray-500">example.js</span></div><button class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-300 rounded-md hover:bg-gray-100 active:bg-gray-200 transition-colors"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>コピー</button></div><h2 class="sr-only">コードスニペット</h2><pre class="p-5 overflow-x-auto text-sm leading-relaxed text-gray-800 bg-white md:text-base"><code>function greet(name) {
  return `こんにちは、${name}さん！`;
}

console.log(greet(&quot;世界&quot;));</code></pre></div><div class="w-full max-w-2xl mx-auto px-4 py-8 md:py-12"><h2 class="text-xl md:text-2xl font-bold text-gray-800 mb-6 md:mb-8 border-l-4 border-blue-600 pl-3">よくあるご質問</h2><div class="space-y-3"><div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm bg-white"><button class="w-full flex items-center justify-between px-4 md:px-6 py-3 md:py-4 text-left text-sm md:text-base font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500" aria-expanded="false"><span class="pr-4">アカウント登録方法</span><svg class="w-4 h-4 md:w-5 md:h-5 text-gray-400 flex-shrink-0 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-4 md:px-6 pb-3 md:pb-4 text-sm md:text-base text-gray-600 leading-relaxed border-t border-gray-100 pt-3">メールアドレスとパスワードを入力し、送信ボタンを押してください。確認メールが届きますので、リンクをクリックして登録を完了してください。</div></div></div><div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm bg-white"><button class="w-full flex items-center justify-between px-4 md:px-6 py-3 md:py-4 text-left text-sm md:text-base font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500" aria-expanded="false"><span class="pr-4">パスワードを忘れた場合</span><svg class="w-4 h-4 md:w-5 md:h-5 text-gray-400 flex-shrink-0 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-4 md:px-6 pb-3 md:pb-4 text-sm md:text-base text-gray-600 leading-relaxed border-t border-gray-100 pt-3">ログイン画面の「パスワードをお忘れの方」リンクから、登録済みのメールアドレスを入力してください。再設定用のURLをお送りします。</div></div></div><div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm bg-white"><button class="w-full flex items-center justify-between px-4 md:px-6 py-3 md:py-4 text-left text-sm md:text-base font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500" aria-expanded="false"><span class="pr-4">プランの変更・解約</span><svg class="w-4 h-4 md:w-5 md:h-5 text-gray-400 flex-shrink-0 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-4 md:px-6 pb-3 md:pb-4 text-sm md:text-base text-gray-600 leading-relaxed border-t border-gray-100 pt-3">管理画面の「契約プラン」より、いつでもプランの変更や解約手続きが可能です。解約後も当月分のサービスはご利用いただけます。</div></div></div><div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm bg-white"><button class="w-full flex items-center justify-between px-4 md:px-6 py-3 md:py-4 text-left text-sm md:text-base font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500" aria-expanded="false"><span class="pr-4">よくあるエラーと対処法</span><svg class="w-4 h-4 md:w-5 md:h-5 text-gray-400 flex-shrink-0 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></button><div class="overflow-hidden transition-all duration-300 ease-in-out max-h-0 opacity-0"><div class="px-4 md:px-6 pb-3 md:pb-4 text-sm md:text-base text-gray-600 leading-relaxed border-t border-gray-100 pt-3">エラーコードが表示された場合は、ヘルプページの「エラーコード一覧」をご参照ください。多くの場合、ブラウザのキャッシュクリアで解決します。</div></div></div></div></div><div class="max-w-2xl mx-auto p-6 md:p-8 bg-white rounded-2xl shadow-lg border border-gray-100"><div class="mb-6"><h2 class="text-2xl font-bold text-gray-800">フィードバック</h2><p class="text-gray-500 mt-1 text-sm">ドキュメントやヘルプサイトの改善にご協力ください</p></div><form noValidate=""><div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"><div><label for="name" class="block text-sm font-medium text-gray-700 mb-1">お名前 <span class="text-red-500">*</span></label><input type="text" id="name" class="w-full px-3 py-2.5 border rounded-lg text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#1a73e8] focus:border-transparent transition border-gray-300" placeholder="例：山田 太郎" name="name" value=""/></div><div><label for="email" class="block text-sm font-medium text-gray-700 mb-1">メールアドレス <span class="text-red-500">*</span></label><input type="email" id="email" class="w-full px-3 py-2.5 border rounded-lg text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#1a73e8] focus:border-transparent transition border-gray-300" placeholder="例：user@example.com" name="email" value=""/></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"><div><label for="category" class="block text-sm font-medium text-gray-700 mb-1">カテゴリ</label><select id="category" name="category" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-[#1a73e8] focus:border-transparent transition"><option value="bug" selected="">バグ報告</option><option value="improvement">改善提案</option><option value="question">質問</option><option value="other">その他</option></select></div><div><label for="urgency" class="block text-sm font-medium text-gray-700 mb-1">緊急度</label><select id="urgency" name="urgency" class="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-[#1a73e8] focus:border-transparent transition"><option value="low">低い</option><option value="medium" selected="">普通</option><option value="high">高い</option></select></div></div><div class="mb-6"><label for="message" class="block text-sm font-medium text-gray-700 mb-1">フィードバック内容 <span class="text-red-500">*</span></label><textarea id="message" name="message" rows="5" class="w-full px-3 py-2.5 border rounded-lg text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#1a73e8] focus:border-transparent transition resize-y border-gray-300" placeholder="具体的な内容を記載してください（例：〇〇のページでリンクが切れています）"></textarea></div><div class="flex flex-col sm:flex-row gap-3"><button type="submit" class="flex-1 px-6 py-2.5 bg-[#1a73e8] text-white rounded-lg hover:bg-[#1557b0] transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-[#1a73e8] focus:ring-offset-2">送信する</button><button type="button" class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2">クリア</button></div></form></div><footer class="bg-[#1e293b] text-gray-300"><div class="mx-auto max-w-7xl px-4 py-10 md:py-12 lg:py-14"><div class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"><div><h2 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white">製品</h2><ul class="space-y-2 text-sm"><li><a href="#" class="transition hover:text-white">機能一覧</a></li><li><a href="#" class="transition hover:text-white">料金プラン</a></li><li><a href="#" class="transition hover:text-white">アップデート</a></li></ul></div><div><h2 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white">ドキュメント</h2><ul class="space-y-2 text-sm"><li><a href="#" class="transition hover:text-white">クイックスタート</a></li><li><a href="#" class="transition hover:text-white">API リファレンス</a></li><li><a href="#" class="transition hover:text-white">チュートリアル</a></li><li><a href="#" class="transition hover:text-white">よくある質問</a></li></ul></div><div><h2 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white">サポート</h2><ul class="space-y-2 text-sm"><li><a href="#" class="transition hover:text-white">ヘルプセンター</a></li><li><a href="#" class="transition hover:text-white">コミュニティ</a></li><li><a href="#" class="transition hover:text-white">お問い合わせ</a></li><li><a href="#" class="transition hover:text-white">ステータス</a></li></ul></div><div><h2 class="mb-3 text-sm font-semibold uppercase tracking-wider text-white">会社</h2><ul class="space-y-2 text-sm"><li><a href="#" class="transition hover:text-white">ブログ</a></li><li><a href="#" class="transition hover:text-white">採用情報</a></li><li><a href="#" class="transition hover:text-white">プライバシー</a></li><li><a href="#" class="transition hover:text-white">利用規約</a></li></ul></div></div><div class="mt-10 border-t border-gray-700 pt-6 text-center text-xs text-gray-500 md:flex md:items-center md:justify-between md:text-left"><p>© 2026 ドキュメント・ヘルプサイト. All rights reserved.</p><p class="mt-2 md:mt-0"><a href="#" class="transition hover:text-gray-300">プライバシーポリシー</a><span class="mx-2">·</span><a href="#" class="transition hover:text-gray-300">クッキー設定</a></p></div></div></footer></div>