近年、Tailwind CSSの人気はますます高まり、ランディングページ（LP）の制作においても大きな力を発揮しています。本記事では、実際に公開しているスマホ製品LP（デモはこちら）を例に、Tailwind CSSを中心とした構成と実装方法を丁寧に解説します。
- 「Tailwind CSS LP 作り方を知りたい」
- 「Swiper.js スライダーを導入して動きを出したい」
- 「グリッドやアニメーションの設計に迷う」
こんな方に向けて、使えるHTMLテンプレートとコード解説をお届けします。
✅ 使用技術のまとめ
| 技術 | 内容 |
|---|---|
| Tailwind CSS | ユーティリティクラスによる柔軟かつ高速なスタイリング |
| Swiper.js | レスポンシブ対応のスライダーライブラリ |
| IntersectionObserver | 要素の表示タイミングでフェードインアニメーションを実装 |
| Google Fonts | Noto Sans JP + Interを使用したタイポグラフィ設計 |
🎯 セクション構成とTailwind活用のポイント
① Heroセクション（導入パート）
<section class="h-screen flex flex-col justify-center items-center text-center px-6 fade-in animated-bg">h-screen, flex, items-center によって画面中央に垂直配置
fade-in と animated-bg によって登場時のインパクトを演出
テキストサイズは text-[min(10vw,60px)] を使用し、モバイルファーストでの柔軟な見せ方を実現しています
② Swiperによる製品スライダー
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">…</div>
</div>
</div>
Swiperはスマホ製品 LP テンプレートにおいて、複数アングルやシーンの訴求に最適
Tailwindの rounded, shadow-md, w-full で美しいレイアウトを実現
③ Pricing セクション（グリッドレイアウト）
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 px-4">grid-cols-1 md:grid-cols-3でモバイルとPCでレスポンシブ対応hover:shadow-lg,ring-2 ring-blackで中央カードを目立たせる設計
💡 Tailwind グリッドレイアウトを活用することで、複雑なCSSレスポンシブ設計が不要になります。
④ アニメーションで魅せる
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(40px); }
100% { opacity: 1; transform: translateY(0); }
}IntersectionObserverと .fade-in クラスで、Tailwind CSSでは補えない挙動をJavaScriptで補完
LP全体に動きを加えることで「動きのある UI/UX」を実現
🧪 応用アイデア
Tailwind CSSでLPを作る際、以下のような拡張も可能です：
- フォーム連携（PHPやFirebase）
- ダークモード切替（Tailwindの
dark:を活用） - CTAボタンのアニメーション追加
- SEO強化用の
<meta>や構造化データの挿入
✅ まとめ
このように、Tailwind CSSを活用することで、スピーディかつデザイン性の高いLPが実現できます。今回紹介したスマホ製品LPのようなプロモーションサイト制作に、ぜひTailwindのユーティリティファーストな設計思想を取り入れてみてください。
👉 デモサイトはこちらにて公開中：
🔗 https://codequest.work/html/intermediate/005/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CodeQuest.work Pro - 次世代スマートフォン</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/swiper@11/swiper-bundle.min.css" rel="stylesheet" />
<script src="https://unpkg.com/swiper@11/swiper-bundle.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet" />
<style>
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bgAnimate {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.fade-in {
opacity: 0;
transform: translateY(40px);
transition: opacity 1s ease, transform 1s ease;
}
.fade-in.show {
opacity: 1;
transform: translateY(0);
}
.animated-bg {
background: linear-gradient(270deg, #000000, #1a1a1a, #333333);
background-size: 600% 600%;
animation: bgAnimate 30s ease infinite;
}
body {
font-family: "Inter", "Noto Sans JP", sans-serif;
}
</style>
</head>
<body class="text-white">
<!-- Hero Section -->
<section class="h-screen flex flex-col justify-center items-center text-center px-6 fade-in animated-bg">
<h1 class="text-[min(10vw,60px)] font-bold tracking-tighter leading-tight">CodeQuest.work Pro</h1>
<p class="text-lg mt-4 max-w-xl font-light tracking-wide">次世代スマートフォン、驚きの速さと洗練された美しさを、あなたの手に。</p>
<a href="#features" class="mt-8 inline-block text-sm border border-white px-6 py-3 tracking-wider font-semibold hover:bg-white hover:text-black transition">製品の詳細を見る</a>
</section>
<!-- Feature Slider Section -->
<section id="features" class="py-32 bg-white text-black text-center fade-in">
<h2 class="text-4xl font-extrabold tracking-tight mb-6">美しさと機能性の融合</h2>
<p class="text-lg max-w-3xl mx-auto font-light tracking-wide">CodeQuest.work Proは極限まで洗練されたデザインと最新のハードウェアで、日常に革新をもたらします。</p>
<div class="mt-12 max-w-4xl mx-auto">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/id/1011/800/400" alt="フロントビュー" class="rounded shadow-md w-full" /></div>
<div class="swiper-slide"><img src="https://picsum.photos/id/1012/800/400" alt="サイドビュー" class="rounded shadow-md w-full" /></div>
<div class="swiper-slide"><img src="https://picsum.photos/id/1013/800/400" alt="使用シーン" class="rounded shadow-md w-full" /></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<!-- Lifestyle Section -->
<section class="py-32 bg-black text-white text-center fade-in">
<h2 class="text-4xl font-extrabold tracking-tight mb-6">あらゆる瞬間を、より豊かに</h2>
<p class="text-lg max-w-3xl mx-auto font-light tracking-wide">先進のカメラ、臨場感あふれるスピーカー、1日中持続するバッテリー。CodeQuest.work Proは、あなたのライフスタイルを格上げします。</p>
<div class="mt-12">
<img src="https://picsum.photos/id/1015/800/400" alt="ライフスタイル" class="mx-auto rounded shadow-md" />
</div>
</section>
<!-- Pricing Section -->
<section class="py-32 bg-white text-black text-center fade-in">
<h2 class="text-4xl font-extrabold tracking-tight mb-6">価格とプラン</h2>
<p class="text-lg max-w-3xl mx-auto font-light tracking-wide mb-12">あなたにぴったりのモデルをお選びください。</p>
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 px-4">
<div class="border border-gray-300 rounded-lg p-6 shadow hover:shadow-lg transition">
<h3 class="text-2xl font-bold mb-4">CodeQuest.work Pro Mini</h3>
<p class="text-4xl font-extrabold mb-4">¥89,800</p>
<ul class="text-left space-y-2 mb-6">
<li>✔︎ 5.4インチディスプレイ</li>
<li>✔︎ デュアルカメラ</li>
<li>✔︎ 128GB ストレージ</li>
</ul>
<a href="#" class="inline-block px-6 py-3 bg-black text-white font-semibold rounded hover:bg-gray-800 transition">購入する</a>
</div>
<div class="border border-gray-300 rounded-lg p-6 shadow-lg ring-2 ring-black transition">
<h3 class="text-2xl font-bold mb-4">CodeQuest.work Pro</h3>
<p class="text-4xl font-extrabold mb-4">¥119,800</p>
<ul class="text-left space-y-2 mb-6">
<li>✔︎ 6.1インチOLED</li>
<li>✔︎ トリプルカメラ</li>
<li>✔︎ 256GB ストレージ</li>
</ul>
<a href="#" class="inline-block px-6 py-3 bg-black text-white font-semibold rounded hover:bg-gray-800 transition">購入する</a>
</div>
<div class="border border-gray-300 rounded-lg p-6 shadow hover:shadow-lg transition">
<h3 class="text-2xl font-bold mb-4">CodeQuest.work Pro Max</h3>
<p class="text-4xl font-extrabold mb-4">¥139,800</p>
<ul class="text-left space-y-2 mb-6">
<li>✔︎ 6.7インチOLED</li>
<li>✔︎ 高性能カメラ + LiDAR</li>
<li>✔︎ 512GB ストレージ</li>
</ul>
<a href="#" class="inline-block px-6 py-3 bg-black text-white font-semibold rounded hover:bg-gray-800 transition">購入する</a>
</div>
</div>
</section>
<!-- Specs Section -->
<section class="py-32 bg-gray-100 text-black text-center fade-in">
<h2 class="text-4xl font-extrabold tracking-tight mb-6">スペック詳細</h2>
<p class="text-lg max-w-3xl mx-auto font-light tracking-wide mb-12">主要スペックを一目で比較できます。</p>
<div class="overflow-x-auto">
<table class="table-auto mx-auto text-left border-collapse">
<thead>
<tr>
<th class="px-4 py-2 font-bold">モデル</th>
<th class="px-4 py-2">ディスプレイ</th>
<th class="px-4 py-2">カメラ</th>
<th class="px-4 py-2">ストレージ</th>
<th class="px-4 py-2">バッテリー</th>
</tr>
</thead>
<tbody>
<tr class="bg-white">
<td class="px-4 py-2 font-semibold">CodeQuest.work Pro Mini</td>
<td class="px-4 py-2">5.4インチ LCD</td>
<td class="px-4 py-2">デュアルカメラ</td>
<td class="px-4 py-2">128GB</td>
<td class="px-4 py-2">最大18時間</td>
</tr>
<tr class="bg-gray-50">
<td class="px-4 py-2 font-semibold">CodeQuest.work Pro</td>
<td class="px-4 py-2">6.1インチ OLED</td>
<td class="px-4 py-2">トリプルカメラ</td>
<td class="px-4 py-2">256GB</td>
<td class="px-4 py-2">最大22時間</td>
</tr>
<tr class="bg-white">
<td class="px-4 py-2 font-semibold">CodeQuest.work Pro Max</td>
<td class="px-4 py-2">6.7インチ OLED</td>
<td class="px-4 py-2">トリプルカメラ + LiDAR</td>
<td class="px-4 py-2">512GB</td>
<td class="px-4 py-2">最大26時間</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- FAQ Section -->
<section class="py-32 bg-white text-black text-center fade-in">
<h2 class="text-4xl font-extrabold tracking-tight mb-6">よくあるご質問</h2>
<div class="max-w-3xl mx-auto text-left space-y-8">
<div>
<h3 class="font-semibold text-lg">Q. 保証期間はどのくらいですか？</h3>
<p class="text-base">A. ご購入日より1年間の製品保証が付いています。</p>
</div>
<div>
<h3 class="font-semibold text-lg">Q. 防水性能はありますか？</h3>
<p class="text-base">A. IP68等級の防水・防塵に対応しています。</p>
</div>
<div>
<h3 class="font-semibold text-lg">Q. どこで購入できますか？</h3>
<p class="text-base">A. 公式オンラインストアまたは正規販売店でご購入いただけます。</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="py-32 bg-black text-white text-center fade-in">
<h2 class="text-4xl font-extrabold tracking-tight mb-6">お問い合わせ</h2>
<p class="text-lg max-w-2xl mx-auto font-light tracking-wide mb-8">ご不明点やご質問がございましたら、お気軽にお問い合わせください。</p>
<a href="#" class="inline-block px-8 py-4 bg-white text-black font-semibold rounded hover:bg-gray-200 transition">お問い合わせフォームへ</a>
</section>
<!-- Footer -->
<footer class="py-12 bg-gray-900 text-white text-center text-sm">
<p>© 2025 CodeQuest.work Inc. All rights reserved.</p>
</footer>
<!-- Animation Script -->
<script>
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("show");
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1 }
);
document.querySelectorAll(".fade-in").forEach((el) => observer.observe(el));
const swiper = new Swiper(".swiper", {
loop: true,
pagination: { el: ".swiper-pagination", clickable: true },
autoplay: { delay: 4000 },
});
</script>
</body>
</html>