個人サイト（テンプレートから） — Atomic Studio

Atomic Studio /個人サイト（テンプレートから）

9部品・0〜数百トークン ↩ 戻す履歴複製 💬 ことばで直す 🔗 共有 🚀 デプロイ ⏹

atomic.studio/s/3719

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

<link rel="preload" as="image" href="https://placehold.co/600x400/1e293b/94a3b8?text=Work+1"/><link rel="preload" as="image" href="https://placehold.co/600x400/334155/94a3b8?text=Work+2"/><link rel="preload" as="image" href="https://placehold.co/600x400/0f172a/94a3b8?text=Work+3"/><link rel="preload" as="image" href="https://placehold.co/600x400/1e293b/94a3b8?text=Work+4"/><link rel="preload" as="image" href="https://placehold.co/600x400/334155/94a3b8?text=Work+5"/><link rel="preload" as="image" href="https://placehold.co/600x400/0f172a/94a3b8?text=Work+6"/><div class="min-h-screen bg-zinc-950 text-white"><header class="w-full bg-[#0f0f0f] text-white px-6 py-5 md:px-12 lg:px-20 flex items-center justify-between border-b border-[#2a2a2a]"><h2 class="sr-only">サイトヘッダー</h2><div class="text-xl md:text-2xl font-bold tracking-tight"><span class="text-[#c084fc]">✦</span> <span class="bg-gradient-to-r from-[#c084fc] to-[#f9a8d4] bg-clip-text text-transparent">Ryo</span></div><nav class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-300"><a href="#works" class="hover:text-[#c084fc] transition-colors duration-200">Works</a><a href="#about" class="hover:text-[#c084fc] transition-colors duration-200">About</a><a href="#contact" class="hover:text-[#c084fc] transition-colors duration-200">Contact</a></nav><button class="md:hidden flex flex-col gap-1.5 group" aria-label="メニューを開く"><span class="block w-6 h-0.5 bg-gray-300 group-hover:bg-[#c084fc] transition-colors duration-200"></span><span class="block w-6 h-0.5 bg-gray-300 group-hover:bg-[#c084fc] transition-colors duration-200"></span><span class="block w-6 h-0.5 bg-gray-300 group-hover:bg-[#c084fc] transition-colors duration-200"></span></button></header><section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-[#0f0c29] via-[#302b63] to-[#24243e] px-6 py-20 md:px-12 lg:px-24"><div class="absolute top-[-10%] left-[-10%] w-[300px] h-[300px] md:w-[500px] md:h-[500px] rounded-full bg-[#6c63ff] opacity-10 blur-3xl pointer-events-none"></div><div class="absolute bottom-[-10%] right-[-10%] w-[250px] h-[250px] md:w-[400px] md:h-[400px] rounded-full bg-[#ff6584] opacity-10 blur-3xl pointer-events-none"></div><div class="relative z-10 max-w-4xl mx-auto text-center"><h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6 tracking-tight">フリーランス<br class="md:hidden"/><span class="bg-gradient-to-r from-[#6c63ff] to-[#ff6584] bg-clip-text text-transparent">Webデザイナー</span></h2><p class="text-base md:text-lg lg:text-xl text-gray-300 max-w-2xl mx-auto mb-10 leading-relaxed">シンプルで美しい、心を動かすデジタル体験を創造します。<br class="hidden md:block"/>あなたの想いを、デザインの力でカタチに。</p><div class="flex flex-col sm:flex-row items-center justify-center gap-4"><a href="#works" class="inline-block px-8 py-3 md:px-10 md:py-4 rounded-full bg-gradient-to-r from-[#6c63ff] to-[#ff6584] text-white font-semibold text-base md:text-lg shadow-lg shadow-[#6c63ff]/30 hover:shadow-xl hover:shadow-[#6c63ff]/40 hover:scale-105 transition-all duration-300 ease-out">作品を見る</a><a href="#contact" class="inline-block px-8 py-3 md:px-10 md:py-4 rounded-full border-2 border-white/30 text-white font-semibold text-base md:text-lg hover:bg-white/10 hover:border-white/50 transition-all duration-300 ease-out">お問い合わせ</a></div><div class="mt-16 flex items-center justify-center gap-2"><span class="w-8 h-[2px] bg-[#6c63ff] rounded-full"></span><span class="w-16 h-[2px] bg-gradient-to-r from-[#6c63ff] to-[#ff6584] rounded-full"></span><span class="w-8 h-[2px] bg-[#ff6584] rounded-full"></span></div></div></section><section class="min-h-screen bg-[#0f0f0f] text-gray-200 flex items-center justify-center px-6 py-20 md:px-16 lg:px-24"><div class="max-w-4xl w-full"><h2 class="text-3xl md:text-4xl lg:text-5xl font-light tracking-widest text-[#d4af37] mb-8 border-b border-[#d4af37]/30 pb-4">About Me</h2><div class="flex flex-col md:flex-row gap-10 md:gap-16 items-start"><div class="shrink-0 w-40 h-40 md:w-52 md:h-52 lg:w-60 lg:h-60 rounded-full border-2 border-[#d4af37]/40 overflow-hidden bg-[#1a1a1a] flex items-center justify-center"><span class="text-6xl md:text-7xl lg:text-8xl text-[#d4af37]/60 font-serif italic">M</span></div><div class="space-y-5 text-base md:text-lg leading-relaxed"><p class="font-light">フリーランスWebデザイナーとして、東京を拠点に活動しています。 大学でグラフィックデザインを学んだ後、制作会社で5年の経験を積み、 2021年に独立しました。</p><p class="font-light">シンプルで洗練されたデザイン、そして細部へのこだわりを大切にしています。 クライアントの想いを形にし、使いやすく美しいWeb体験を提供することが 私の使命です。</p><p class="font-light">現在は、コーポレートサイト・ランディングページ・ECサイトの制作を中心に、 ブランディングからUI/UX設計まで幅広く手がけています。</p><div class="flex flex-wrap gap-3 pt-4"><span class="px-4 py-1.5 text-sm border border-[#d4af37]/40 text-[#d4af37]/90 rounded-full tracking-wide">UI/UX Design</span><span class="px-4 py-1.5 text-sm border border-[#d4af37]/40 text-[#d4af37]/90 rounded-full tracking-wide">Figma</span><span class="px-4 py-1.5 text-sm border border-[#d4af37]/40 text-[#d4af37]/90 rounded-full tracking-wide">React / Next.js</span><span class="px-4 py-1.5 text-sm border border-[#d4af37]/40 text-[#d4af37]/90 rounded-full tracking-wide">Tailwind CSS</span><span class="px-4 py-1.5 text-sm border border-[#d4af37]/40 text-[#d4af37]/90 rounded-full tracking-wide">WordPress</span><span class="px-4 py-1.5 text-sm border border-[#d4af37]/40 text-[#d4af37]/90 rounded-full tracking-wide">Adobe XD</span></div></div></div></div></section><section class="w-full max-w-4xl mx-auto px-4 py-12 md:py-20"><h2 class="text-2xl md:text-3xl font-bold tracking-wide text-[#1a1a2e] mb-2">スキル</h2><p class="text-sm md:text-base text-[#555] mb-8 md:mb-10 border-l-4 border-[#e94560] pl-3">フリーランスWebデザイナーとしての主要スキル</p><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6"><div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 p-4 md:p-5 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-sm md:text-base font-semibold text-[#1a1a2e]">HTML / CSS</span><span class="text-xs md:text-sm text-[#e94560] font-bold">95%</span></div><div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-700 ease-out" style="width:95%;background:linear-gradient(90deg, #e94560, #ff6b6b)"></div></div></div><div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 p-4 md:p-5 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-sm md:text-base font-semibold text-[#1a1a2e]">JavaScript</span><span class="text-xs md:text-sm text-[#e94560] font-bold">85%</span></div><div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-700 ease-out" style="width:85%;background:linear-gradient(90deg, #e94560, #ff6b6b)"></div></div></div><div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 p-4 md:p-5 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-sm md:text-base font-semibold text-[#1a1a2e]">React</span><span class="text-xs md:text-sm text-[#e94560] font-bold">80%</span></div><div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-700 ease-out" style="width:80%;background:linear-gradient(90deg, #e94560, #ff6b6b)"></div></div></div><div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 p-4 md:p-5 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-sm md:text-base font-semibold text-[#1a1a2e]">Next.js</span><span class="text-xs md:text-sm text-[#e94560] font-bold">75%</span></div><div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-700 ease-out" style="width:75%;background:linear-gradient(90deg, #e94560, #ff6b6b)"></div></div></div><div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 p-4 md:p-5 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-sm md:text-base font-semibold text-[#1a1a2e]">Tailwind CSS</span><span class="text-xs md:text-sm text-[#e94560] font-bold">90%</span></div><div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-700 ease-out" style="width:90%;background:linear-gradient(90deg, #e94560, #ff6b6b)"></div></div></div><div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 p-4 md:p-5 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-sm md:text-base font-semibold text-[#1a1a2e]">Figma</span><span class="text-xs md:text-sm text-[#e94560] font-bold">85%</span></div><div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-700 ease-out" style="width:85%;background:linear-gradient(90deg, #e94560, #ff6b6b)"></div></div></div><div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 p-4 md:p-5 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-sm md:text-base font-semibold text-[#1a1a2e]">WordPress</span><span class="text-xs md:text-sm text-[#e94560] font-bold">70%</span></div><div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-700 ease-out" style="width:70%;background:linear-gradient(90deg, #e94560, #ff6b6b)"></div></div></div><div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 p-4 md:p-5 border border-gray-100"><div class="flex items-center justify-between mb-3"><span class="text-sm md:text-base font-semibold text-[#1a1a2e]">Git / GitHub</span><span class="text-xs md:text-sm text-[#e94560] font-bold">78%</span></div><div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-700 ease-out" style="width:78%;background:linear-gradient(90deg, #e94560, #ff6b6b)"></div></div></div></div></section><section class="bg-[#0b1120] py-20 px-4 md:px-8 lg:px-16"><div class="max-w-7xl mx-auto"><div class="text-center mb-14"><h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">制作実績</h2><div class="w-16 h-0.5 bg-gradient-to-r from-cyan-400 to-blue-500 mx-auto mt-4 mb-6"></div><p class="text-gray-400 text-base md:text-lg max-w-2xl mx-auto leading-relaxed">フリーランスとして手がけたプロジェクトの一部をご紹介します。</p></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"><div class="group relative bg-[#1a2332] rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500 hover:-translate-y-1"><div class="aspect-[3/2] overflow-hidden"><img src="https://placehold.co/600x400/1e293b/94a3b8?text=Work+1" alt="ブランドサイト A" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"/></div><div class="p-5 md:p-6"><span class="inline-block text-xs font-semibold tracking-wider text-cyan-400 bg-cyan-400/10 px-3 py-1 rounded-full mb-3">Webデザイン</span><h3 class="text-lg md:text-xl font-bold text-white mb-2">ブランドサイト A</h3><p class="text-gray-400 text-sm leading-relaxed">洗練されたブランド体験を提供するコーポレートサイト</p></div><div class="absolute inset-0 border-2 border-transparent group-hover:border-cyan-400/30 rounded-2xl transition-all duration-500 pointer-events-none"></div></div><div class="group relative bg-[#1a2332] rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500 hover:-translate-y-1"><div class="aspect-[3/2] overflow-hidden"><img src="https://placehold.co/600x400/334155/94a3b8?text=Work+2" alt="ECプラットフォーム B" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"/></div><div class="p-5 md:p-6"><span class="inline-block text-xs font-semibold tracking-wider text-cyan-400 bg-cyan-400/10 px-3 py-1 rounded-full mb-3">UI/UX</span><h3 class="text-lg md:text-xl font-bold text-white mb-2">ECプラットフォーム B</h3><p class="text-gray-400 text-sm leading-relaxed">コンバージョン率200%向上したショッピング体験</p></div><div class="absolute inset-0 border-2 border-transparent group-hover:border-cyan-400/30 rounded-2xl transition-all duration-500 pointer-events-none"></div></div><div class="group relative bg-[#1a2332] rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500 hover:-translate-y-1"><div class="aspect-[3/2] overflow-hidden"><img src="https://placehold.co/600x400/0f172a/94a3b8?text=Work+3" alt="クリエイティブポートフォリオ C" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"/></div><div class="p-5 md:p-6"><span class="inline-block text-xs font-semibold tracking-wider text-cyan-400 bg-cyan-400/10 px-3 py-1 rounded-full mb-3">フロントエンド</span><h3 class="text-lg md:text-xl font-bold text-white mb-2">クリエイティブポートフォリオ C</h3><p class="text-gray-400 text-sm leading-relaxed">アニメーションを駆使した没入型ポートフォリオ</p></div><div class="absolute inset-0 border-2 border-transparent group-hover:border-cyan-400/30 rounded-2xl transition-all duration-500 pointer-events-none"></div></div><div class="group relative bg-[#1a2332] rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500 hover:-translate-y-1"><div class="aspect-[3/2] overflow-hidden"><img src="https://placehold.co/600x400/1e293b/94a3b8?text=Work+4" alt="SaaSランディングページ D" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"/></div><div class="p-5 md:p-6"><span class="inline-block text-xs font-semibold tracking-wider text-cyan-400 bg-cyan-400/10 px-3 py-1 rounded-full mb-3">Webデザイン</span><h3 class="text-lg md:text-xl font-bold text-white mb-2">SaaSランディングページ D</h3><p class="text-gray-400 text-sm leading-relaxed">クリーンで信頼感のあるプロダクトページ</p></div><div class="absolute inset-0 border-2 border-transparent group-hover:border-cyan-400/30 rounded-2xl transition-all duration-500 pointer-events-none"></div></div><div class="group relative bg-[#1a2332] rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500 hover:-translate-y-1"><div class="aspect-[3/2] overflow-hidden"><img src="https://placehold.co/600x400/334155/94a3b8?text=Work+5" alt="メディアマガジン E" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"/></div><div class="p-5 md:p-6"><span class="inline-block text-xs font-semibold tracking-wider text-cyan-400 bg-cyan-400/10 px-3 py-1 rounded-full mb-3">UI/UX</span><h3 class="text-lg md:text-xl font-bold text-white mb-2">メディアマガジン E</h3><p class="text-gray-400 text-sm leading-relaxed">読みやすさを追求したリーディング体験</p></div><div class="absolute inset-0 border-2 border-transparent group-hover:border-cyan-400/30 rounded-2xl transition-all duration-500 pointer-events-none"></div></div><div class="group relative bg-[#1a2332] rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl hover:shadow-cyan-500/10 transition-all duration-500 hover:-translate-y-1"><div class="aspect-[3/2] overflow-hidden"><img src="https://placehold.co/600x400/0f172a/94a3b8?text=Work+6" alt="飲食店予約アプリ F" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"/></div><div class="p-5 md:p-6"><span class="inline-block text-xs font-semibold tracking-wider text-cyan-400 bg-cyan-400/10 px-3 py-1 rounded-full mb-3">フロントエンド</span><h3 class="text-lg md:text-xl font-bold text-white mb-2">飲食店予約アプリ F</h3><p class="text-gray-400 text-sm leading-relaxed">直感的な操作性とモダンなビジュアル</p></div><div class="absolute inset-0 border-2 border-transparent group-hover:border-cyan-400/30 rounded-2xl transition-all duration-500 pointer-events-none"></div></div></div><div class="text-center mt-12"><button type="button" class="inline-flex items-center gap-2 px-8 py-3.5 bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-semibold rounded-full hover:from-cyan-400 hover:to-blue-500 transition-all duration-300 shadow-lg shadow-cyan-500/20 hover:shadow-cyan-400/30">すべての作品を見る<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></button></div></div></section><article class="group relative w-full max-w-sm mx-auto bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 border border-gray-100/50" role="article" aria-label="プロジェクト: ポートフォリオサイト"><h2 class="sr-only">ポートフォリオサイト</h2><div class="relative w-full h-48 md:h-56 lg:h-64 bg-gradient-to-br from-[#f0ebe3] to-[#e6ddd0] flex items-center justify-center overflow-hidden"><span class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-widest text-[#b8a99a]/30 select-none">THUMB</span><div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300"></div><span class="absolute top-3 left-3 px-3 py-1 text-xs font-medium text-white bg-[#8b7a6b]/80 rounded-full backdrop-blur-sm shadow-sm">Webデザイン / コーディング</span></div><div class="p-5 md:p-6 lg:p-7"><h3 class="text-lg md:text-xl lg:text-2xl font-semibold text-[#3d332b] tracking-tight mb-2 leading-tight">ポートフォリオサイト</h3><p class="text-sm md:text-base text-[#6b5d52] leading-relaxed mb-4 line-clamp-3">自身の制作実績をまとめたポートフォリオサイト。シンプルかつ洗練されたUI/UXを意識し、スムーズな遷移と可読性を重視。</p><div class="flex flex-wrap gap-2 mb-5"><span class="px-3 py-1 text-xs font-mono text-[#5c4f44] bg-[#f5f0eb] rounded-full border border-[#e3d9d0]">React</span><span class="px-3 py-1 text-xs font-mono text-[#5c4f44] bg-[#f5f0eb] rounded-full border border-[#e3d9d0]">Tailwind CSS</span><span class="px-3 py-1 text-xs font-mono text-[#5c4f44] bg-[#f5f0eb] rounded-full border border-[#e3d9d0]">Figma</span></div><a href="#" class="inline-flex items-center gap-1.5 text-sm font-medium text-[#8b7a6b] hover:text-[#5c4f44] transition-colors duration-200 group/link" aria-label="ポートフォリオサイトの詳細を見る"><span>詳細を見る</span><svg class="w-4 h-4 transition-transform duration-200 group-hover/link:translate-x-1" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a></div><div class="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#c4b5a5] to-transparent scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div></article><section class="w-full bg-[#f8f6f2] py-16 md:py-24"><div class="mx-auto max-w-6xl px-4 md:px-8"><h2 class="mb-12 text-center text-2xl font-light tracking-widest text-[#2c2c2c] md:text-3xl">お客様の声</h2><div class="grid gap-8 md:grid-cols-3"><div class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition-shadow duration-300 hover:shadow-md md:p-8"><div class="mb-6 flex items-center gap-1"><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div><p class="mb-8 flex-1 text-sm leading-relaxed text-[#4a4a4a] md:text-base">彼のデザインは、細部へのこだわりとユーザー体験への深い理解が感じられます。納期も正確で、とても信頼できるパートナーです。</p><div class="border-t border-[#e8e4dc] pt-4"><p class="text-sm font-medium text-[#2c2c2c]">田中 美咲</p><p class="mt-1 text-xs text-[#8a8a8a]">株式会社クリエイト / プロダクトマネージャー</p></div></div><div class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition-shadow duration-300 hover:shadow-md md:p-8"><div class="mb-6 flex items-center gap-1"><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div><p class="mb-8 flex-1 text-sm leading-relaxed text-[#4a4a4a] md:text-base">依頼したWebサイトのクオリティが想像以上で驚きました。訪問者のコンバージョン率も向上し、ビジネスに大きく貢献しています。</p><div class="border-t border-[#e8e4dc] pt-4"><p class="text-sm font-medium text-[#2c2c2c]">佐藤 健一</p><p class="mt-1 text-xs text-[#8a8a8a]">スタートアップ企業 / 代表取締役</p></div></div><div class="flex flex-col rounded-2xl bg-white p-6 shadow-sm transition-shadow duration-300 hover:shadow-md md:p-8"><div class="mb-6 flex items-center gap-1"><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg><svg class="h-4 w-4 text-[#d4a373]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div><p class="mb-8 flex-1 text-sm leading-relaxed text-[#4a4a4a] md:text-base">フリーランスとしての柔軟な対応と、プロフェッショナルな提案力。何度もリピートしたくなる理由がよくわかります。</p><div class="border-t border-[#e8e4dc] pt-4"><p class="text-sm font-medium text-[#2c2c2c]">山田 花子</p><p class="mt-1 text-xs text-[#8a8a8a]">デザイン事務所 / アートディレクター</p></div></div></div></div></section><section class="min-h-screen flex items-center justify-center bg-[#f5f0eb] px-4 py-12"><div class="bg-white p-8 md:p-12 rounded-2xl shadow-lg max-w-lg w-full"><h2 class="text-2xl md:text-3xl font-light text-[#2c2c2c] mb-2">お問い合わせ</h2><p class="text-[#6b6b6b] text-sm md:text-base mb-8">ご質問・ご依頼はこちらから</p><form noValidate=""><div class="mb-6"><label for="name" class="block text-sm font-medium text-[#4a4a4a] mb-1">お名前</label><input type="text" id="name" required="" class="w-full px-4 py-3 rounded-lg border border-[#d4cfc9] bg-[#faf8f6] text-[#2c2c2c] placeholder-[#b0a8a0] focus:outline-none focus:ring-2 focus:ring-[#c4a88a] focus:border-transparent transition" placeholder="例：山田 太郎" name="name" value=""/></div><div class="mb-6"><label for="email" class="block text-sm font-medium text-[#4a4a4a] mb-1">メールアドレス</label><input type="email" id="email" required="" class="w-full px-4 py-3 rounded-lg border border-[#d4cfc9] bg-[#faf8f6] text-[#2c2c2c] placeholder-[#b0a8a0] focus:outline-none focus:ring-2 focus:ring-[#c4a88a] focus:border-transparent transition" placeholder="example@mail.com" name="email" value=""/></div><div class="mb-8"><label for="message" class="block text-sm font-medium text-[#4a4a4a] mb-1">メッセージ</label><textarea id="message" name="message" rows="5" required="" class="w-full px-4 py-3 rounded-lg border border-[#d4cfc9] bg-[#faf8f6] text-[#2c2c2c] placeholder-[#b0a8a0] focus:outline-none focus:ring-2 focus:ring-[#c4a88a] focus:border-transparent transition resize-none" placeholder="お問い合わせ内容をご記入ください"></textarea></div><button type="submit" class="w-full py-3 px-6 bg-[#2c2c2c] text-white rounded-lg font-medium hover:bg-[#4a4a4a] transition duration-200 tracking-wide">送信する</button></form></div></section><footer class="bg-[#1a1a2e] text-gray-300 py-10 px-6 md:px-12 lg:px-20"><h2 class="sr-only">フッター</h2><div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6"><div class="text-center md:text-left"><p class="text-lg font-semibold tracking-wide text-white">Yuki Tanaka</p><p class="text-sm text-gray-400 mt-1">フリーランスWebデザイナー</p></div><nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm"><a href="#about" class="hover:text-white transition-colors duration-200">About</a><a href="#works" class="hover:text-white transition-colors duration-200">Works</a><a href="#services" class="hover:text-white transition-colors duration-200">Services</a><a href="#contact" class="hover:text-white transition-colors duration-200">Contact</a></nav><div class="flex gap-4 text-lg"><a href="https://twitter.com" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors duration-200" aria-label="Twitter">𝕏</a><a href="https://github.com" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors duration-200" aria-label="GitHub">GH</a><a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors duration-200" aria-label="Instagram">IG</a></div></div><div class="mt-8 border-t border-gray-700 pt-6 text-center text-xs text-gray-500"><p>© 2026 Yuki Tanaka. All rights reserved.</p></div></footer></div>