Tailwind CSSで作る！製品LP｜Swiper・アニメーションも解説

近年、Tailwind CSSの人気はますます高まり、ランディングページ（LP）の制作においても大きな力を発揮しています。本記事では、実際に公開しているスマホ製品LP（デモはこちら）を例に、Tailwind CSSを中心とした構成と実装方法を丁寧に解説します。

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>

✪ 画像素材がないものはランダムで表示されるようになっています。フリー素材などでご用意ください。

プラグイン名	特徴
GoFullPage	ウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla	色を抽出するための拡張機能です。
WhatFont	ウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixel	デザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

ステップ	内容
ステップ 1	構図を手書きか全画面スクショ（Go full page等）した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2	HTMLの基本構造を作成する
ステップ 3	CSSでレイアウトを模写する
ステップ 4 中級〜	JavaScriptを追加して動きを再現する
ステップ 5	最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。