N.N. LLC. ロゴ - 千葉県船橋市のIT企業N.N. LLC.
技術ブログ

Tailwind CSSでダークテーマのWebサイトを構築する設計パターン

約28分で読めます
Tailwind CSSでダークテーマのWebサイトを構築する設計パターン

はじめに

ダークテーマは、目の負担を軽減し、バッテリー消費を抑え、モダンで洗練された印象を与えるデザインとして広く普及しています。当社（N.N. LLC.）のコーポレートサイトも、ダークテーマをベースに構築されています。

本記事では、Tailwind CSS v3.4を使ったダークテーマWebサイトの設計パターンを、実際のコード例とともに詳しく解説します。カラーパレットの設計から、ガラスモーフィズム、アニメーション、アクセシビリティ対応まで、実践的な内容をカバーします。

Tailwind CSS v3.4のダークモード機能

Tailwind CSS v3.4では、ダークモードの切り替えに2つの戦略が用意されています。

  • media戦略: ユーザーのOS設定（prefers-color-scheme）に自動追従。設定不要で手軽
  • class戦略: HTMLの親要素にdarkクラスを付与して切り替え。ユーザーの手動切り替えに対応可能

当社サイトではclass戦略を採用しています。tailwind.config.jsで以下のように設定します。

// tailwind.config.js
module.exports = {
  darkMode: ["class"],
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
  ],
  // ...
}

class戦略を採用することで、OS設定に関係なくサイト側でテーマを制御でき、常にダークテーマで表示するデザインが可能になります。

カラーパレット設計

ダークテーマの品質を左右するのがカラーパレットの設計です。当社サイトで採用しているパレットは以下のとおりです。

背景カラー

ダークテーマの背景は、完全な黒（#000000）を避け、グラデーションで奥行きを出すのがポイントです。

<!-- ページ全体の背景 -->
<body class="bg-gradient-to-br from-gray-900 to-black text-white">

<!-- セクション背景のバリエーション -->
<section class="bg-gray-900/50">        <!-- 半透明の暗い背景 -->
<section class="bg-gray-950">            <!-- 最も暗い背景 -->
<section class="bg-black/40">            <!-- 透過度を調整した黒 -->

テキストカラー

  • メインテキスト: text-white（コントラスト比 21:1）
  • サブテキスト: text-gray-300（コントラスト比 10.4:1）
  • 補足テキスト: text-gray-400（コントラスト比 7.5:1）
  • 非活性テキスト: text-gray-500（コントラスト比 5.3:1、WCAG AA準拠）

アクセントカラー

<!-- CTA・リンク -->
<a class="text-blue-400 hover:text-blue-300">リンク</a>

<!-- ボタン -->
<button class="bg-blue-500 hover:bg-blue-600 text-white">
  お問い合わせ
</button>

<!-- アクセントカラーのグラデーション -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600"></div>

CSS変数 + Tailwindによるテーマシステム設計

shadcn/uiとの統合を見据えたテーマシステムでは、CSS変数（カスタムプロパティ）を活用します。HSL形式で色を定義することで、Tailwindの透明度ユーティリティとの相性が良くなります。

/* globals.css */
@layer base {
  :root {
    --background: 240 10% 3.9%;    /* ほぼ黒に近いダークブルー */
    --foreground: 0 0% 98%;        /* ほぼ白 */
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --primary: 217.2 91.2% 59.8%;  /* ブルー系のプライマリ */
    --primary-foreground: 0 0% 100%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --radius: 0.5rem;
  }
}

これらのCSS変数をtailwind.config.jsで参照することで、Tailwindのユーティリティクラスからテーマカラーを使用できるようになります。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // ... その他のカラー
      },
    },
  },
}

使用時は以下のように記述します。

<div class="bg-background text-foreground">
  <button class="bg-primary text-primary-foreground">ボタン</button>
  <div class="bg-card text-card-foreground rounded-lg">カード</div>
</div>

glass-effect（ガラスモーフィズム）の実装

ガラスモーフィズムは、ダークテーマに透明感と奥行きを加える効果的なテクニックです。Tailwind CSSのbackdrop-blurユーティリティを使って実装します。

/* globals.css でカスタムクラスとして定義 */
.glass-effect {
  @apply bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg;
}

/* ボーダーを追加したバリエーション */
.glass-card {
  @apply bg-white/5 backdrop-blur-lg border border-white/10 rounded-xl;
}

コンポーネントでの使用例を示します。

// React コンポーネント例
function GlassCard({ title, description, icon }) {
  return (
    <div className="
      bg-white/5 backdrop-blur-lg
      border border-white/10 rounded-xl
      p-6 hover:bg-white/10
      transition-all duration-300
    ">
      <div className="text-blue-400 mb-4">{icon}</div>
      <h3 className="text-xl font-bold text-white mb-2">{title}</h3>
      <p className="text-gray-400">{description}</p>
    </div>
  );
}

ガラスエフェクトの背景透過度は用途によって調整します。

  • ナビゲーションバー: bg-black/60 backdrop-blur-xl（しっかり読める程度の透過）
  • カードコンポーネント: bg-white/5 backdrop-blur-lg（うっすら透ける程度）
  • モーダル背景: bg-black/80 backdrop-blur-sm（背景をしっかり暗く）

グラデーションテキスト（gradient-text）の実装

テキストにグラデーションを適用すると、ダークテーマ上で視覚的なアクセントになります。Tailwindのbg-clip-textユーティリティを使って実装します。

/* globals.css */
.gradient-text {
  @apply text-transparent bg-clip-text
    bg-gradient-to-r from-blue-400 to-purple-600;
}

使用例と、バリエーションの定義方法を示します。

<!-- 基本的な使用例 -->
<h1 class="text-4xl font-bold gradient-text">
  ITソリューションで、ビジネスを加速。
</h1>

<!-- Tailwindのユーティリティクラスで直接指定する場合 -->
<h2 class="text-transparent bg-clip-text
  bg-gradient-to-r from-green-400 to-cyan-500
  text-3xl font-bold">
  サービス一覧
</h2>

<!-- ホバーでグラデーションが変化するパターン -->
<a class="text-transparent bg-clip-text
  bg-gradient-to-r from-blue-400 to-purple-600
  hover:from-purple-400 hover:to-pink-500
  transition-all duration-300 font-semibold">
  詳しく見る
</a>

アニメーション設計

ダークテーマのWebサイトにアニメーションを加えることで、静的になりがちなダーク背景にダイナミックさを与えます。当社サイトで使用しているアニメーションパターンを紹介します。

fade-in アニメーション

/* globals.css */
.animate-fade-in {
  @apply animate-in fade-in duration-500;
}

/* tailwindcss-animate プラグインを使用しない場合のCSS定義 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

slide-up アニメーション

/* globals.css */
.animate-slide-up {
  @apply animate-in slide-in-from-bottom-4 duration-500;
}

/* CSS定義版 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.5s ease-out forwards;
}

hover-lift エフェクト

/* カードなどのインタラクティブ要素に適用 */
.hover-lift {
  @apply transition-transform duration-300 ease-in-out
    hover:-translate-y-1 hover:shadow-lg;
}

/* 影の色もダークテーマに合わせる */
.hover-lift-glow {
  @apply transition-all duration-300 ease-in-out
    hover:-translate-y-1
    hover:shadow-lg hover:shadow-blue-500/20;
}

Intersection Observerによるスクロールアニメーション

画面内に要素が入ったタイミングでアニメーションを発火させるには、Intersection Observer APIを使います。

// hooks/useScrollAnimation.ts
"use client";
import { useEffect, useRef, useState } from "react";

export function useScrollAnimation() {
  const ref = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      },
      { threshold: 0.1 }
    );

    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return { ref, isVisible };
}
// コンポーネントでの使用例
function AnimatedSection({ children }) {
  const { ref, isVisible } = useScrollAnimation();

  return (
    <div
      ref={ref}
      className={`transition-all duration-700 ${
        isVisible
          ? "opacity-100 translate-y-0"
          : "opacity-0 translate-y-8"
      }`}
    >
      {children}
    </div>
  );
}

アクセシビリティ対応

ダークテーマでは、アクセシビリティへの配慮が特に重要です。

コントラスト比の確保

WCAG 2.1のAA基準では、通常テキストに4.5:1以上、大きなテキスト（18px以上の太字、または24px以上）に3:1以上のコントラスト比が求められます。当社サイトのカラーパレットは、すべてこの基準を満たしています。

  • text-white on gray-900 → 15.4:1（AAA準拠）
  • text-gray-300 on gray-900 → 10.4:1（AAA準拠）
  • text-gray-400 on gray-900 → 7.5:1（AA準拠）
  • text-blue-400 on gray-900 → 5.6:1（AA準拠）

reduced-motion 対応

前庭障害のあるユーザーに配慮し、アニメーションを無効化するメディアクエリに対応します。Tailwindのmotion-reduceプレフィックスを使います。

<div class="
  transition-transform duration-300
  hover:-translate-y-1
  motion-reduce:transition-none
  motion-reduce:hover:translate-y-0
">
  アニメーションが無効化される要素
</div>

フォーカスリングの視認性

キーボードナビゲーション時のフォーカスリングは、ダークテーマで特に見えにくくなりがちです。明るい色のフォーカスリングを設定します。

<button class="
  focus:outline-none
  focus-visible:ring-2 focus-visible:ring-blue-400
  focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900
">
  キーボードフォーカスが見やすいボタン
</button>

Tailwind Typography プラグインによるproseスタイリング

ブログ記事やドキュメントのようなリッチテキストコンテンツには、@tailwindcss/typographyプラグインのproseクラスが便利です。ダークテーマ用の設定を行います。

<!-- ダークテーマのproseスタイリング -->
<article class="
  prose prose-invert prose-lg
  prose-headings:text-white
  prose-p:text-gray-300
  prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline
  prose-strong:text-white
  prose-code:text-blue-300 prose-code:bg-gray-800 prose-code:rounded prose-code:px-1
  prose-pre:bg-gray-900 prose-pre:border prose-pre:border-gray-700
  prose-blockquote:border-blue-500 prose-blockquote:text-gray-300
  prose-li:text-gray-300
  max-w-none
">
  {/* 記事本文のHTML */}
</article>

shadcn/ui との統合パターン

shadcn/uiは、Radix UIをベースにしたコンポーネントライブラリで、Tailwind CSSとの親和性が非常に高いです。ダークテーマとの統合は以下のように行います。

// shadcn/ui のButtonコンポーネントをダークテーマでカスタマイズ
import { Button } from "@/components/ui/button";

// ダークテーマに最適化されたボタンバリエーション
<Button variant="default">
  プライマリ {/* bg-primary text-primary-foreground */}
</Button>

<Button variant="outline" className="border-gray-700 hover:bg-gray-800">
  アウトライン
</Button>

<Button variant="ghost" className="hover:bg-white/10">
  ゴースト
</Button>

// Cardコンポーネントをガラスエフェクト風にカスタマイズ
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

<Card className="bg-white/5 backdrop-blur-lg border-white/10">
  <CardHeader>
    <CardTitle className="text-white">サービス名</CardTitle>
  </CardHeader>
  <CardContent className="text-gray-400">
    サービスの説明文がここに入ります。
  </CardContent>
</Card>

実践的なレイアウト例: ダークテーマのランディングページ

最後に、ここまでのテクニックを組み合わせたランディングページのヒーローセクションの実装例を示します。

// components/hero.tsx
export function Hero() {
  return (
    <section className="
      relative min-h-screen flex items-center justify-center
      bg-gradient-to-br from-gray-900 to-black
      overflow-hidden
    ">
      {/* 背景のデコレーション */}
      <div className="absolute inset-0">
        <div className="
          absolute top-1/4 left-1/4 w-96 h-96
          bg-blue-500/10 rounded-full blur-3xl
        " />
        <div className="
          absolute bottom-1/4 right-1/4 w-96 h-96
          bg-purple-500/10 rounded-full blur-3xl
        " />
      </div>

      {/* コンテンツ */}
      <div className="relative z-10 text-center px-4 max-w-4xl">
        <h1 className="
          text-5xl md:text-7xl font-bold mb-6
          text-transparent bg-clip-text
          bg-gradient-to-r from-blue-400 to-purple-600
        ">
          ITソリューションで、
          <br />
          ビジネスを加速。
        </h1>
        <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
          アプリ開発、Web制作、AI開発、コンサルティング。
          テクノロジーの力で、ビジネスの成長を支援します。
        </p>
        <div className="flex gap-4 justify-center">
          <button className="
            bg-blue-500 hover:bg-blue-600
            text-white font-semibold
            px-8 py-3 rounded-lg
            transition-all duration-300
            hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/25
          ">
            お問い合わせ
          </button>
          <button className="
            bg-white/10 backdrop-blur-lg
            border border-white/20
            text-white font-semibold
            px-8 py-3 rounded-lg
            transition-all duration-300
            hover:bg-white/20
          ">
            サービス一覧
          </button>
        </div>
      </div>
    </section>
  );
}

まとめ

Tailwind CSSを使ったダークテーマWebサイトの構築では、以下のポイントが重要です。

  • カラーパレットの体系的な設計: CSS変数とTailwindの組み合わせで一貫性のあるテーマを実現
  • ガラスモーフィズムとグラデーション: ダークテーマに透明感と奥行きを与える効果的なテクニック
  • アニメーションの適度な使用: 静的になりがちなダーク背景にダイナミックさを加えつつ、reduced-motion対応も忘れない
  • アクセシビリティの確保: WCAG 2.1 AA基準のコントラスト比を全テキストで担保
  • コンポーネントライブラリとの統合: shadcn/uiなどのライブラリと統合し、開発効率とデザインの一貫性を両立

ダークテーマのデザインは、単に背景を暗くするだけではなく、色彩、透明度、アニメーション、アクセシビリティのすべてを考慮した総合的な設計が必要です。本記事のパターンを参考に、洗練されたダークテーマのWebサイトを構築してみてください。

Tailwind CSSを使ったWebサイト構築やダークテーマデザインについてのご相談は、お気軽にお問い合わせください。当社のコーポレートサイトで実践しているノウハウをもとに、最適な設計をご提案いたします。

Tailwind CSS
ダークテーマ
CSS
デザイン
アクセシビリティ
ブログ一覧へ戻る

関連記事

Claude CodeのGitHub Actions連携でコードレビューを自動化する

2026/2/8

Claude Agent SDKでカスタムAIエージェントを構築する実践ガイド

2026/2/8

Claude Opus 4.6とAgent Teams — AIマルチエージェント協調開発の新時代

2026/2/8