Tailwind CSS: プロジェクト：Tailwind CSS でSaaSランディングページを構築
1. プロジェクト要件
ナビバー、ヒーローセクション、機能紹介、料金プラン、お客様の声、フッターを含む完全なSaaS製品ランディングページを構築します。ダークモード対応とモバイルからデスクトップへのレスポンシブ対応を行います。
2. 技術要件
- Tailwind CSS v4 CDN
- レスポンシブデザイン（モバイルファースト）
- ダークモード（dark: プレフィックス）
- Flexbox + Grid ハイブリッドレイアウト
- インタラクティブ状態とトランジション
3. ステップバイステップの実装
(1) サンプル：ステップ1 - レスポンシブナビバー
ナビバーにはロゴ、メニューリンク、CTAボタンが含まれています。モバイルではハンバーガーメニューに折りたたみます。
HTML
📖 参照専用
<!DOCTYPE html>
<html lang="ja" class="scroll-smooth">
``<head>``
`<meta charset="UTF-8">`
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
``<title>``CloudFlow - スマートワークフロープラットフォーム</title>
`<script src="https://cdn.tailwindcss.com">``</script>`
`<script>`
tailwind.config = {
darkMode: 'class'
}
`</script>`
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
<!-- ナビバー -->
`<nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 z-50">`
`<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">`
`<div class="flex items-center justify-between h-16">`
<!-- ロゴ -->
`<div class="flex items-center gap-2">`
`<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">`
`<span class="text-white font-bold text-sm">`CF`</span>`
`</div>`
`<span class="text-xl font-bold">`CloudFlow`</span>`
`</div>`
<!-- デスクトップメニュー -->
`<div class="hidden md:flex items-center gap-8">`
`<a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">`機能`</a>`
`<a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">`料金`</a>`
`<a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">`お客様の声`</a>`
`</div>`
<!-- CTAボタン -->
`<div class="hidden md:flex items-center gap-4">`
`<button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">`
`<span class="dark:hidden">`🌙`</span>`
`<span class="hidden dark:inline">`☀️`</span>`
`</button>`
`<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">`ログイン`</a>`
`<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">`無料トライアル`</a>`
`</div>`
<!-- モバイルメニューボタン -->
`<button id="menuToggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">`
`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
`</svg>`
`</button>`
`</div>`
`</div>`
<!-- モバイルメニュー -->
`<div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">`
`<div class="px-4 py-4 space-y-3">`
`<a href="#features" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">`機能`</a>`
`<a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">`料金`</a>`
`<a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400 hover:text-blue-600">`お客様の声`</a>`
`<div class="pt-3 border-t border-gray-200 dark:border-gray-800">`
`<a href="#" class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">`無料トライアル`</a>`
`</div>`
`</div>`
`</div>`
`</nav>`
`<script>`
const themeToggle = document.getElementById('themeToggle');
themeToggle?.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
menuToggle?.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
`</script>`
</body>
</html>
(2) サンプル：ステップ2 - ヒーローセクション
大きな見出し、サブタイトル、2つのCTAボタン、機能アイコンリスト。
HTML
📖 参照専用
<!DOCTYPE html>
<html lang="ja" class="scroll-smooth">
``<head>``
`<meta charset="UTF-8">`
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
``<title>``CloudFlow - スマートワークフロープラットフォーム</title>
`<script src="https://cdn.tailwindcss.com">``</script>`
`<script>`
tailwind.config = { darkMode: 'class' }
`</script>`
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
<!-- ヒーローセクション -->
`<section class="pt-32 pb-20 px-4">`
`<div class="max-w-7xl mx-auto text-center">`
<!-- バッジ -->
`<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 rounded-full text-sm mb-8">`
`<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse">``</span>`
新バージョン v3.0 リリース
`</div>`
<!-- 見出し -->
`<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">`
ワークフローを`<span class="text-blue-600 dark:text-blue-400">`自動化`</span>`
`<br class="hidden sm:block">`
チームの生産性を解放
`</h1>`
<!-- サブタイトル -->
`<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">`
CloudFlowは200以上のアプリを接続し、ワークフローを視覚的に編成し、コードを1行も書くことなくビジネスプロセスを自動化します。
`</p>`
<!-- CTAボタン -->
`<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">`
`<a href="#" class="w-full sm:w-auto px-8 py-3.5 bg-blue-600 text-white text-lg rounded-xl hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/25 transition-all">`
無料で始める
`</a>`
`<a href="#" class="w-full sm:w-auto px-8 py-3.5 border border-gray-300 dark:border-gray-700 text-lg rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">`
`<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">`
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
`</svg>`
デモを見る
`</a>`
`</div>`
<!-- 機能アイコン -->
`<div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">`
`<div class="flex flex-col items-center gap-2">`
`<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center">`
`<svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
`</svg>`
`</div>`
`<span class="text-sm text-gray-600 dark:text-gray-400">`超高速`</span>`
`</div>`
`<div class="flex flex-col items-center gap-2">`
`<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center">`
`<svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
`</svg>`
`</div>`
`<span class="text-sm text-gray-600 dark:text-gray-400">`安全・信頼性`</span>`
`</div>`
`<div class="flex flex-col items-center gap-2">`
`<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center">`
`<svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
`</svg>`
`</div>`
`<span class="text-sm text-gray-600 dark:text-gray-400">`200以上の連携`</span>`
`</div>`
`<div class="flex flex-col items-center gap-2">`
`<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center">`
`<svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
`</svg>`
`</div>`
`<span class="text-sm text-gray-600 dark:text-gray-400">`データインサイト`</span>`
`</div>`
`</div>`
`</div>`
`</section>`
</body>
</html>
(3) サンプル：ステップ3 - 機能カード
Gridレイアウトを使用して、4つの機能カードをアイコンと説明付きで表示します。
HTML
📖 参照専用
<!DOCTYPE html>
``<html lang="ja">``
``<head>``
`<meta charset="UTF-8">`
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
``<title>``機能カード</title>
`<script src="https://cdn.tailwindcss.com">``</script>`
`<script>`
tailwind.config = { darkMode: 'class' }
`</script>`
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
`<section id="features" class="py-20 px-4">`
`<div class="max-w-7xl mx-auto">`
<!-- セクション見出し -->
`<div class="text-center mb-16">`
`<h2 class="text-3xl sm:text-4xl font-bold mb-4">`CloudFlowを選ぶ理由`</h2>`
`<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">`ワークフローをより効率的にする強力な機能`</p>`
`</div>`
<!-- 機能カードグリッド -->
`<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">`
<!-- カード1 -->
`<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">`
`<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors">`
`<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
`</svg>`
`</div>`
`<h3 class="text-lg font-semibold mb-2">`ビジュアルビルダー`</h3>`
`<p class="text-gray-600 dark:text-gray-400 text-sm">`ドラッグ＆ドロップインターフェースで、コードを書かずに複雑なワークフローを構築`</p>`
`</div>`
<!-- カード2 -->
`<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">`
`<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors">`
`<svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
`</svg>`
`</div>`
`<h3 class="text-lg font-semibold mb-2">`チームコラボレーション`</h3>`
`<p class="text-gray-600 dark:text-gray-400 text-sm">`リアルタイム共同編集、権限管理、ワークフローの共有所有`</p>`
`</div>`
<!-- カード3 -->
`<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">`
`<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors">`
`<svg class="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
`</svg>`
`</div>`
`<h3 class="text-lg font-semibold mb-2">`スマートアナリティクス`</h3>`
`<p class="text-gray-600 dark:text-gray-400 text-sm">`内蔵アナリティクスダッシュボードでワークフローパフォーマンスをリアルタイム監視`</p>`
`</div>`
<!-- カード4 -->
`<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">`
`<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-600 transition-colors">`
`<svg class="w-6 h-6 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
`</svg>`
`</div>`
`<h3 class="text-lg font-semibold mb-2">`エンタープライズセキュリティ`</h3>`
`<p class="text-gray-600 dark:text-gray-400 text-sm">`SOC 2認証、エンドツーエンド暗号化、エンタープライズグレードのコンプライアンス要件に対応`</p>`
`</div>`
`</div>`
`</div>`
`</section>`
</body>
</html>
(4) サンプル：ステップ4 - 料金テーブル
3つの料金プランカード、中央のプランをおすすめとしてハイライト。
HTML
📖 参照専用
<!DOCTYPE html>
``<html lang="ja">``
``<head>``
`<meta charset="UTF-8">`
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
``<title>``料金テーブル</title>
`<script src="https://cdn.tailwindcss.com">``</script>`
`<script>`
tailwind.config = { darkMode: 'class' }
`</script>`
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
`<section id="pricing" class="py-20 px-4">`
`<div class="max-w-7xl mx-auto">`
<!-- セクション見出し -->
`<div class="text-center mb-16">`
`<h2 class="text-3xl sm:text-4xl font-bold mb-4">`シンプルで透明な料金`</h2>`
`<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">`チームに合ったプランをお選びください。いつでもアップグレード・ダウングレード可能。`</p>`
`</div>`
<!-- 料金カード -->
`<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">`
<!-- 無料プラン -->
`<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">`
`<h3 class="text-lg font-semibold mb-2">`無料`</h3>`
`<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">`始めたばかりの個人向け`</p>`
`<div class="mb-6">`
`<span class="text-4xl font-bold">```</span>`
`<span class="text-gray-500">`/月`</span>`
`</div>`
`<ul class="space-y-3 mb-8">`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
5つのワークフロー
`</li>`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
月1,000回実行
`</li>`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
コミュニティサポート
`</li>`
`</ul>`
`<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">`
始める
`</a>`
`</div>`
<!-- Proプラン（おすすめ） -->
`<div class="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-blue-600 shadow-xl shadow-blue-600/10 scale-105">`
`<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-sm rounded-full">`
一番人気
`</div>`
`<h3 class="text-lg font-semibold mb-2">`Pro`</h3>`
`<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">`成長中のチーム向け`</p>`
`<div class="mb-6">`
`<span class="text-4xl font-bold">```</span>`
`<span class="text-gray-500">`/月`</span>`
`</div>`
`<ul class="space-y-3 mb-8">`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
無制限のワークフロー
`</li>`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
月50,000回実行
`</li>`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
優先メールサポート
`</li>`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
高度なアナリティクス
`</li>`
`</ul>`
`<a href="#" class="block w-full py-3 text-center bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">`
今すぐアップグレード
`</a>`
`</div>`
<!-- エンタープライズプラン -->
`<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">`
`<h3 class="text-lg font-semibold mb-2">`エンタープライズ`</h3>`
`<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">`大規模組織向け`</p>`
`<div class="mb-6">`
`<span class="text-4xl font-bold">```</span>`
`<span class="text-gray-500">`/月`</span>`
`</div>`
`<ul class="space-y-3 mb-8">`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
Proの全機能
`</li>`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
無制限の実行回数
`</li>`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
専任アカウントマネージャー
`</li>`
`<li class="flex items-center gap-3 text-sm">`
`<svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
`</svg>`
SLA保証
`</li>`
`</ul>`
`<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">`
営業に連絡
`</a>`
`</div>`
`</div>`
`</div>`
`</section>`
</body>
</html>
(5) サンプル：ステップ5 - お客様の声とフッター
ソーシャルプルーフ（ユーザーの声）とリンク付きの完全なフッターを表示します。
HTML
📖 参照専用
<!DOCTYPE html>
``<html lang="ja">``
``<head>``
`<meta charset="UTF-8">`
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
``<title>``お客様の声とフッター</title>
`<script src="https://cdn.tailwindcss.com">``</script>`
`<script>`
tailwind.config = { darkMode: 'class' }
`</script>`
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
<!-- お客様の声 -->
`<section id="testimonials" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">`
`<div class="max-w-7xl mx-auto">`
`<div class="text-center mb-16">`
`<h2 class="text-3xl sm:text-4xl font-bold mb-4">`世界中のチームに信頼されています`</h2>`
`<p class="text-gray-600 dark:text-gray-400">`10,000社以上がCloudFlowを選択`</p>`
`</div>`
`<div class="grid md:grid-cols-3 gap-8">`
<!-- お客様の声1 -->
`<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">`
`<div class="flex items-center gap-1 mb-4">`
`<span class="text-yellow-400">`★★★★★`</span>`
`</div>`
`<p class="text-gray-600 dark:text-gray-400 mb-6">`「CloudFlowのおかげで、毎週20時間の繰り返し作業が削減されました。チームはついに本当に重要なことに集中できます。」`</p>`
`<div class="flex items-center gap-3">`
`<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center font-semibold text-blue-600">`鈴`</div>`
`<div>`
`<p class="font-medium text-sm">`鈴木花子`</p>`
`<p class="text-gray-500 text-xs">`CTO、TechCorp`</p>`
`</div>`
`</div>`
`</div>`
<!-- お客様の声2 -->
`<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">`
`<div class="flex items-center gap-1 mb-4">`
`<span class="text-yellow-400">`★★★★★`</span>`
`</div>`
`<p class="text-gray-600 dark:text-gray-400 mb-6">`「ビジュアルビルダーが非常に直感的で、非技術的なチームメンバーでもすぐに使い始められました。画期的です。」`</p>`
`<div class="flex items-center gap-3">`
`<div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center font-semibold text-green-600">`山`</div>`
`<div>`
`<p class="font-medium text-sm">`山田太郎`</p>`
`<p class="text-gray-500 text-xs">`VP of Operations、ShopDirect`</p>`
`</div>`
`</div>`
`</div>`
<!-- お客様の声3 -->
`<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl">`
`<div class="flex items-center gap-1 mb-4">`
`<span class="text-yellow-400">`★★★★★`</span>`
`</div>`
`<p class="text-gray-600 dark:text-gray-400 mb-6">`「エンタープライズグレードのコンプライアンス機能により、コアプロセスのクラウド移行に自信が持てました。強くお勧めします。」`</p>`
`<div class="flex items-center gap-3">`
`<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center font-semibold text-purple-600">`佐`</div>`
`<div>`
`<p class="font-medium text-sm">`佐藤一郎`</p>`
`<p class="text-gray-500 text-xs">`IT Director、FinEdge Capital`</p>`
`</div>`
`</div>`
`</div>`
`</div>`
<!-- ブランドロゴ -->
`<div class="mt-16 text-center">`
`<p class="text-gray-500 text-sm mb-6">`業界リーダーに信頼されています`</p>`
`<div class="flex flex-wrap items-center justify-center gap-8 opacity-50">`
`<span class="text-2xl font-bold text-gray-400">`TechCorp`</span>`
`<span class="text-2xl font-bold text-gray-400">`DataFlow`</span>`
`<span class="text-2xl font-bold text-gray-400">`CloudBase`</span>`
`<span class="text-2xl font-bold text-gray-400">`NetPro`</span>`
`</div>`
`</div>`
`</div>`
`</section>`
<!-- フッター -->
`<footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4">`
`<div class="max-w-7xl mx-auto">`
`<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">`
<!-- 製品 -->
`<div>`
`<h4 class="text-white font-semibold mb-4">`製品`</h4>`
`<ul class="space-y-2 text-sm">`
`<li>``<a href="#" class="hover:text-white transition-colors">`機能`</a>``</li>`
`<li>``<a href="#" class="hover:text-white transition-colors">`料金`</a>``</li>`
`<li>``<a href="#" class="hover:text-white transition-colors">`連携`</a>``</li>`
`<li>``<a href="#" class="hover:text-white transition-colors">`変更履歴`</a>``</li>`
`</ul>`
`</div>`
<!-- リソース -->
`<div>`
`<h4 class="text-white font-semibold mb-4">`リソース`</h4>`
`<ul class="space-y-2 text-sm">`
`<li>``<a href="#" class="hover:text-white transition-colors">`ドキュメント`</a>``</li>`
`<li>``<a href="#" class="hover:text-white transition-colors">`API`</a>``</li>`
`<li>``<a href="#" class="hover:text-white transition-colors">`チュートリアル`</a>``</li>`
`<li>``<a href="#" class="hover:text-white transition-colors">`ブログ`</a>``</li>`
`</ul>`
`</div>`
<!-- 会社 -->
`<div>`
`<h4 class="text-white font-semibold mb-4">`会社`</h4>`
`<ul class="space-y-2 text-sm">`
`<li>``<a href="#" class="hover:text-white transition-colors">`会社概要`</a>``</li>`
`<li>``<a href="#" class="hover:text-white transition-colors">`採用情報`</a>``</li>`
`<li>``<a href="#" class="hover:text-white transition-colors">`お問い合わせ`</a>``</li>`
`</ul>`
`</div>`
<!-- 法務 -->
`<div>`
`<h4 class="text-white font-semibold mb-4">`法務`</h4>`
`<ul class="space-y-2 text-sm">`
`<li>``<a href="#" class="hover:text-white transition-colors">`プライバシーポリシー`</a>``</li>`
`<li>``<a href="#" class="hover:text-white transition-colors">`利用規約`</a>``</li>`
`<li>``<a href="#" class="hover:text-white transition-colors">`セキュリティとコンプライアンス`</a>``</li>`
`</ul>`
`</div>`
`</div>`
`<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">`
`<div class="flex items-center gap-2">`
`<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">`
`<span class="text-white font-bold text-sm">`CF`</span>`
`</div>`
`<span class="text-white font-bold">`CloudFlow`</span>`
`</div>`
`<p class="text-sm">`© 2025 CloudFlow. All rights reserved.`</p>`
`</div>`
`</div>`
`</footer>`
</body>
</html>
(6) サンプル：完全なランディングページ
上記のすべてのセクションを1つのランディングページファイルにまとめます：
HTML
📖 参照専用
<!DOCTYPE html>
<html lang="ja" class="scroll-smooth">
``<head>``
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
``<title>``CloudFlow - スマートワークフロー自動化プラットフォーム</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
<!-- ナビバー -->
<nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">CF</span>
</div>
<span class="text-xl font-bold">CloudFlow</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">機能</a>
<a href="#pricing" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">料金</a>
<a href="#testimonials" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">お客様の声</a>
</div>
<div class="hidden md:flex items-center gap-4">
<button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<span class="dark:hidden">🌙</span>
<span class="hidden dark:inline">☀️</span>
</button>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 transition-colors">ログイン</a>
<a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">無料トライアル</a>
</div>
<button id="menuToggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
<div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
<div class="px-4 py-4 space-y-3">
<a href="#features" class="block py-2 text-gray-600 dark:text-gray-400">機能</a>
<a href="#pricing" class="block py-2 text-gray-600 dark:text-gray-400">料金</a>
<a href="#testimonials" class="block py-2 text-gray-600 dark:text-gray-400">お客様の声</a>
<div class="pt-3 border-t border-gray-200 dark:border-gray-800">
<a href="#" class="block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg">無料トライアル</a>
</div>
</div>
</div>
</nav>
<!-- ヒーロー -->
<section class="pt-32 pb-20 px-4">
<div class="max-w-7xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400 rounded-full text-sm mb-8">
<span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
新バージョン v3.0 リリース
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
ワークフローを<span class="text-blue-600 dark:text-blue-400">自動化</span>
<br class="hidden sm:block">チームの生産性を解放
</h1>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
CloudFlowは200以上のアプリを接続し、ワークフローを視覚的に編成し、コードを1行も書くことなくビジネスプロセスを自動化します。
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
<a href="#" class="w-full sm:w-auto px-8 py-3.5 bg-blue-600 text-white text-lg rounded-xl hover:bg-blue-700 hover:shadow-lg hover:shadow-blue-500/25 transition-all">無料で始める</a>
<a href="#" class="w-full sm:w-auto px-8 py-3.5 border border-gray-300 dark:border-gray-700 text-lg rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/></svg>
デモを見る
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
<span class="text-sm text-gray-600 dark:text-gray-400">超高速</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
<span class="text-sm text-gray-600 dark:text-gray-400">安全・信頼性</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></div>
<span class="text-sm text-gray-600 dark:text-gray-400">200以上の連携</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center"><svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
<span class="text-sm text-gray-600 dark:text-gray-400">データインサイト</span>
</div>
</div>
</div>
</section>
<!-- 機能 -->
<section id="features" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">CloudFlowを選ぶ理由</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">ワークフローをより効率的にする強力な機能</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors"><svg class="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">ビジュアルビルダー</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">ドラッグ＆ドロップインターフェースで、コードを書かずに複雑なワークフローを構築</p>
</div>
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors"><svg class="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">チームコラボレーション</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">リアルタイム共同編集、権限管理、ワークフローの共有所有</p>
</div>
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors"><svg class="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">スマートアナリティクス</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">内蔵アナリティクスダッシュボードでワークフローパフォーマンスをリアルタイム監視</p>
</div>
<div class="group p-6 bg-gray-50 dark:bg-gray-900 rounded-2xl hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-orange-600 transition-colors"><svg class="w-6 h-6 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
<h3 class="text-lg font-semibold mb-2">エンタープライズセキュリティ</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">SOC 2認証、エンドツーエンド暗号化、エンタープライズグレードのコンプライアンス要件に対応</p>
</div>
</div>
</div>
</section>
<!-- 料金 -->
<section id="pricing" class="py-20 px-4 bg-gray-50 dark:bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">シンプルで透明な料金</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-xl mx-auto">チームに合ったプランをお選びください。いつでもアップグレード・ダウングレード可能。</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-2">無料</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">始めたばかりの個人向け</p>
<div class="mb-6"><span class="text-4xl font-bold">$0</span><span class="text-gray-500">/月</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>5つのワークフロー</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>月1,000回実行</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>コミュニティサポート</li>
</ul>
<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">始める</a>
</div>
<div class="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-blue-600 shadow-xl shadow-blue-600/10 md:scale-105">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-blue-600 text-white text-sm rounded-full">一番人気</div>
<h3 class="text-lg font-semibold mb-2">Pro</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">成長中のチーム向け</p>
<div class="mb-6"><span class="text-4xl font-bold">$19</span><span class="text-gray-500">/月</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>無制限のワークフロー</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>月50,000回実行</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>優先メールサポート</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>高度なアナリティクス</li>
</ul>
<a href="#" class="block w-full py-3 text-center bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">今すぐアップグレード</a>
</div>
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold mb-2">エンタープライズ</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-6">大規模組織向け</p>
<div class="mb-6"><span class="text-4xl font-bold">$49</span><span class="text-gray-500">/月</span></div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Proの全機能</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>無制限の実行回数</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>専任アカウントマネージャー</li>
<li class="flex items-center gap-3 text-sm"><svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>SLA保証</li>
</ul>
<a href="#" class="block w-full py-3 text-center border border-gray-300 dark:border-gray-600 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">営業に連絡</a>
</div>
</div>
</div>
</section>
<!-- お客様の声 -->
<section id="testimonials" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">世界中のチームに信頼されています</h2>
<p class="text-gray-600 dark:text-gray-400">10,000社以上がCloudFlowを選択</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
<p class="text-gray-600 dark:text-gray-400 mb-6">「CloudFlowのおかげで、毎週20時間の繰り返し作業が削減されました。チームはついに本当に重要なことに集中できます。」</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center font-semibold text-blue-600">鈴</div>
<div><p class="font-medium text-sm">鈴木花子</p><p class="text-gray-500 text-xs">CTO、TechCorp</p></div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
<p class="text-gray-600 dark:text-gray-400 mb-6">「ビジュアルビルダーが非常に直感的で、非技術的なチームメンバーでもすぐに使い始められました。画期的です。」</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center font-semibold text-green-600">山</div>
<div><p class="font-medium text-sm">山田太郎</p><p class="text-gray-500 text-xs">VP of Operations、ShopDirect</p></div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl">
<div class="flex items-center gap-1 mb-4"><span class="text-yellow-400">★★★★★</span></div>
<p class="text-gray-600 dark:text-gray-400 mb-6">「エンタープライズグレードのコンプライアンス機能により、コアプロセスのクラウド移行に自信が持てました。強くお勧めします。」</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center font-semibold text-purple-600">佐</div>
<div><p class="font-medium text-sm">佐藤一郎</p><p class="text-gray-500 text-xs">IT Director、FinEdge Capital</p></div>
</div>
</div>
</div>
</div>
</section>
<!-- フッター -->
<footer class="bg-gray-900 dark:bg-gray-950 text-gray-400 py-16 px-4">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
<div>
<h4 class="text-white font-semibold mb-4">製品</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">機能</a></li>
<li><a href="#" class="hover:text-white transition-colors">料金</a></li>
<li><a href="#" class="hover:text-white transition-colors">連携</a></li>
<li><a href="#" class="hover:text-white transition-colors">変更履歴</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">リソース</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">ドキュメント</a></li>
<li><a href="#" class="hover:text-white transition-colors">API</a></li>
<li><a href="#" class="hover:text-white transition-colors">チュートリアル</a></li>
<li><a href="#" class="hover:text-white transition-colors">ブログ</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">会社</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">会社概要</a></li>
<li><a href="#" class="hover:text-white transition-colors">採用情報</a></li>
<li><a href="#" class="hover:text-white transition-colors">お問い合わせ</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">法務</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">プライバシーポリシー</a></li>
<li><a href="#" class="hover:text-white transition-colors">利用規約</a></li>
<li><a href="#" class="hover:text-white transition-colors">セキュリティとコンプライアンス</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"><span class="text-white font-bold text-sm">CF</span></div>
<span class="text-white font-bold">CloudFlow</span>
</div>
<p class="text-sm">© 2025 CloudFlow. All rights reserved.</p>
</div>
</div>
</footer>
<script>
document.getElementById('themeToggle')?.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
document.getElementById('menuToggle')?.addEventListener('click', () => {
document.getElementById('mobileMenu').classList.toggle('hidden');
});
</script>
</body>
</html>
4. 受入基準
- [ ] ナビバーはモバイルでハンバーガーメニュー、デスクトップでフルリンクを表示
- [ ] ヒーローセクションの見出しは中央揃え、CTAボタンは小画面で全幅表示
- [ ] 機能カードはモバイルで1列、タブレットで2列、デスクトップで4列
- [ ] 中央の料金カードがシャドウ効果でハイライトされている
- [ ] お客様の声カードはモバイルで縦並び、デスクトップで3列
- [ ] すべてのセクションでダークモード切替時に正しい色変化を表示
- [ ] すべてのインタラクティブ要素にホバー/アクティブ状態のフィードバックがある
5. 拡張機能
- スムーズスクロールナビゲーションにアクティブセクションハイライトを追加
- Alpine.jsを統合してアニメーション付きモバイルメニュー遷移を実装
- スクロール時ビューポート入りアニメーションを追加（AOSライブラリまたは
animate.css） - 月額/年額料金切替を実装
- ソーシャルプルーフを追加（スクロールする顧客ロゴ、統計カウンター）
▶ サンプル
`html
ユーザー名
プロフィール
これはTailwind CSSの基本的なカードコンポーネント例です。
❓ よくある質問
Q Tailwindの@applyディレクティブはいつ使うべきですか？
A 同じユーティリティの組み合わせを複数の要素で再利用する場合に使用します。ただし、過度な使用は避けてください。Tailwindの強みはインラインユーティリティにあります。
Q Tailwindのデフォルトテーマをカスタマイズするには？
A ailwind.config.jsを編集して hemeオブジェクトを拡張します。カスタムカラー、フォント、スペーシング、ブレークポイントを追加できます。
Q Tailwind CSSは大規模プロジェクトに適していますか？
A はい！Tailwindのユーティリティファーストアプローチはスケールします。コンポーネント抽出、@applyの適切な使用、ファイル整理を行ってください。
📖 まとめ
- Tailwind CSSはユーティリティファーストクラスで迅速なUI開発を行う
- レスポンシブデザインはsm:、md:、lg:、xl:ブレークポイントを使用
- ダークモードはdark:プレフィックスとdarkMode: 'class'設定で有効化
- カスタムテーマは ailwind.config.jsで設定
- コンポーネントは@applyやフレームワークコンポーネントで抽出可能
📝 練習問題
- 基本（難易度⭐）：Tailwindのflexとgapユーティリティを使って、レスポンシブなカードコンポーネントを作成してください。
- 中級（難易度⭐⭐）：Alpine.jsとTailwindを使ったモバイルハンバーガーメニュー付きナビゲーションバーを構築してください。
- 上級（難易度⭐⭐⭐）：ヒューチャー、機能紹介、価格表、フッターを含む完全なランディングページを作成してください。
