2026年5月1日

Tailwind CSS v4でネオブルータリズムなWebサイトを一から作る手順

Tailwind CSS v4を使って、完全なネオブルータリズムのWebサイトを一から作る方法を学びましょう。この実践的なチュートリアルでは、セットアップから設定、各コンポーネントの構築までを、コピー＆ペーストできるコード例とともに順を追って解説します。

Dov Azencot

@DovAzencot

X でシェア

さあ、開発者のみなさん。大胆な何かを作りましょう。

理屈はなし。無駄話もなし。あるのは、あなたと私、そしてターミナルだけです。このチュートリアルを終えるころには、Tailwind CSS v4で作った、完全に動作するネオブルータリズムのWebサイトが手に入ります。

今回のテーマはこれです。

太い黒のボーダー
くっきりとしたドロップシャドウ
鮮烈なイエローのアクセント
どっしりとしたタイポグラフィ
角丸ゼロ

これは「はい、コンポーネントです」で終わるチュートリアルではありません。ヒーローセクション、機能、料金、フッターまで、ランディングページをまるごと一から作ります。すべてのコードを解説し、すべてのデザイン上の判断に理由を示します。

コーヒーを手に取って。ターミナルを開いて。ブルータルにいきましょう。

What We're Building

始める前に、これから作るものを確認しておきましょう。

「BoldTask」という架空のSaaS製品のランディングページです。これは、ほかのどのプロジェクト管理ツールにも似ていない、プロジェクト管理ツールという設定です。

ページには次のものを盛り込みます。

CTA付きのヒーローセクション
機能カード
料金表
お客様の声セクション
フッター

すべてに、あの代名詞ともいえるネオブルータリズムの美学を効かせます。大胆で、高コントラストで、無視できない仕上がりです。

技術スタック:

Tailwind CSS v4（最新にして最高）
HTML（お好みでReact/Next.jsでも）
Google Fonts（Archivo Black + Space Grotesk）

所要時間: 手を動かしながら進めて45〜60分

Step 1: Project Setup (5 minutes)

ゼロから始めましょう。このチュートリアルではシンプルなHTML構成を使いますが、React、Next.js、その他どんなフレームワークにも簡単に応用できます。

Create Your Project

mkdir neobrutalism-website
cd neobrutalism-website

Initialize npm and Install Tailwind v4

npm init -y
npm install tailwindcss@next @tailwindcss/vite@next

補足: ここではTailwind v4をインストールしています（現在はベータ版ですが、本番でも使えるくらい安定しています）。@next タグでv4が手に入ります。

Create Project Structure

mkdir src
touch src/index.html src/styles.css

フォルダ構成は次のようになるはずです。

neobrutalism-website/
├── src/
│   ├── index.html
│   └── styles.css
├── package.json
└── node_modules/

Step 2: Configure Tailwind v4 (3 minutes)

Tailwind v4には、新しくすっきりとした設定システムがあります。tailwind.config.js の代わりに、すべてをCSS内で設定します。

Create Your Styles File

src/styles.css を開いて、次を追加します。

@import "tailwindcss";
 
/* Tailwind v4 Theme Configuration */
@theme {
  /* Fonts */
  --font-family-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-family-display: 'Archivo Black', ui-sans-serif, system-ui, sans-serif;
 
  /* Colors - Neobrutalist Palette */
  --color-brutal-yellow: #ffdb33;
  --color-brutal-pink: #ff006e;
  --color-brutal-cyan: #00f0ff;
  --color-brutal-black: #000000;
  --color-brutal-white: #ffffff;
  --color-brutal-gray: #e5e5e5;
 
  /* Border Radius - Zero for neobrutalism */
  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
 
  /* Border Widths - Thick */
  --border-width-default: 3px;
  --border-width-thick: 4px;
  --border-width-heavy: 6px;
 
  /* Shadows - Hard offset shadows (no blur) */
  --shadow-brutal-sm: 2px 2px 0 0 var(--color-brutal-black);
  --shadow-brutal: 4px 4px 0 0 var(--color-brutal-black);
  --shadow-brutal-md: 6px 6px 0 0 var(--color-brutal-black);
  --shadow-brutal-lg: 8px 8px 0 0 var(--color-brutal-black);
  --shadow-brutal-xl: 10px 10px 0 0 var(--color-brutal-black);
 
  /* Spacing adjustments */
  --spacing-brutal: 1.5rem;
}
 
/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: var(--font-family-sans);
  background-color: var(--color-brutal-white);
  color: var(--color-brutal-black);
  line-height: 1.6;
}
 
/* Custom Utility Classes */
.border-brutal {
  border: 4px solid var(--color-brutal-black);
}
 
.border-brutal-thick {
  border: 6px solid var(--color-brutal-black);
}
 
.shadow-brutal {
  box-shadow: var(--shadow-brutal);
}
 
.shadow-brutal-lg {
  box-shadow: var(--shadow-brutal-lg);
}
 
.shadow-brutal-xl {
  box-shadow: var(--shadow-brutal-xl);
}
 
/* Hover effect - shadow movement */
.btn-brutal {
  transition: all 0.15s ease;
}
 
.btn-brutal:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--color-brutal-black);
}
 
.btn-brutal:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 0 var(--color-brutal-black);
}

いま何をしたのでしょうか:

カスタムの配色（黒、白、イエロー、ピンク、シアン）を設定した
すべての border-radius の値をゼロにした（ネオブルータリズム＝シャープな角）
くっきりとしたシャドウのユーティリティを作った（ぼかしなしのオフセット）
シャドウが「押し込まれる」様子を模したカスタムのボタンホバー効果を追加した

Step 3: HTML Structure (5 minutes)

基本的なHTML構造を作ります。src/index.html を開いてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BoldTask - Project Management That Doesn't Suck</title>
 
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
 
  <!-- Tailwind CSS -->
  <link rel="stylesheet" href="/src/styles.css">
</head>
<body>
  <!-- Navigation -->
  <nav class="border-b-4 border-brutal-black bg-brutal-white">
    <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
      <div class="text-2xl font-display">BoldTask</div>
      <div class="hidden md:flex gap-8">
        <a href="#features" class="font-bold hover:text-brutal-pink transition-colors">Features</a>
        <a href="#pricing" class="font-bold hover:text-brutal-pink transition-colors">Pricing</a>
        <a href="#about" class="font-bold hover:text-brutal-pink transition-colors">About</a>
      </div>
      <button class="bg-brutal-yellow border-brutal shadow-brutal px-6 py-2 font-bold uppercase btn-brutal">
        Sign Up
      </button>
    </div>
  </nav>
 
  <!-- We'll add more sections here -->
 
  <main>
    <!-- Hero section will go here -->
    <!-- Features section will go here -->
    <!-- Pricing section will go here -->
    <!-- Testimonial section will go here -->
  </main>
 
  <!-- Footer will go here -->
 
</body>
</html>

Set Up Dev Server

作業をプレビューする手段が必要です。Viteを使いましょう。


pnpm add vite
npm install vite
yarn add vite
bun add vite

このスクリプトを package.json に追加します。

{
  "scripts": {
    "dev": "vite src"
  }
}

では実行します。


pnpm dev
npm run dev
yarn dev
bun dev

ブラウザで http://localhost:5173 を開いてください。BoldTaskのブランド名が入った、基本的なナビゲーションバーが表示されるはずです。

Step 4: Build the Hero Section (10 minutes)

さあ、主役の登場です。ヒーローセクションは大胆でなければなりません。

<main> タグのすぐ後ろに、これを追加してください。

<!-- Hero Section -->
<section class="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
  <div class="max-w-6xl w-full">
    <div class="grid md:grid-cols-2 gap-12 items-center">
 
      <!-- Left Column - Text -->
      <div>
        <h1 class="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
          Task Management That Doesn't Bore You to Death
        </h1>
        <p class="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
          Stop using the same gray dashboard as everyone else.
          BoldTask gives you project management with personality.
        </p>
 
        <!-- CTA Buttons -->
        <div class="flex flex-col sm:flex-row gap-4">
          <button class="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Start Free Trial →
          </button>
          <button class="bg-brutal-white border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Watch Demo
          </button>
        </div>
 
        <!-- Social Proof -->
        <div class="mt-12 flex items-center gap-8">
          <div class="text-center">
            <div class="text-4xl font-display">10K+</div>
            <div class="text-sm font-bold">Active Users</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">4.9★</div>
            <div class="text-sm font-bold">User Rating</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">24/7</div>
            <div class="text-sm font-bold">Support</div>
          </div>
        </div>
      </div>
 
      <!-- Right Column - Visual Element -->
      <div class="relative">
        <!-- Main Card -->
        <div class="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
          <div class="bg-brutal-pink h-4 w-20 mb-4"></div>
          <div class="h-3 bg-brutal-gray mb-2"></div>
          <div class="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
          <!-- Task Items -->
          <div class="space-y-3">
            <div class="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
              <div class="w-5 h-5 border-brutal bg-brutal-black"></div>
              <div class="h-2 bg-brutal-black w-full"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-4/5"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-3/4"></div>
            </div>
          </div>
        </div>
 
        <!-- Floating accent card -->
        <div class="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                    shadow-brutal-lg p-6 w-40 text-center">
          <div class="text-3xl font-display mb-2">+47</div>
          <div class="text-xs font-bold">Tasks Done Today</div>
        </div>
      </div>
 
    </div>
  </div>
</section>

何を作ったのでしょうか:

全画面のイエロー背景（一瞬でインパクト）
Archivo Blackを使った巨大な見出し
太いボーダーとくっきりしたシャドウのコンテンツボックス
ホバー効果付きのCTA（ホバーするとシャドウが動く）
信頼性を示す実績値
製品のビジュアルモックアップ（抽象的な表現）
奥行きを出すためのフローティングアクセントカード

デザイン上の判断:

イエロー背景＝高いエネルギー、無視できない
白のコンテンツボックス＝コントラストと階層を生む
イエロー上の黒いCTA＝最大限の視認性
フローティングのシアンカード＝非対称性を加える（ネオブルータリズムの原則）

Step 5: Features Section (10 minutes)

機能カードを作りましょう。ヒーローセクションの後ろに、これを追加してください。

<!-- Features Section -->
<section class="bg-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Why BoldTask?
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-3xl mx-auto">
        Because your productivity tool shouldn't put you to sleep
      </p>
    </div>
 
    <!-- Feature Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Feature 1 -->
      <div class="bg-brutal-pink text-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">⚡</div>
        <h3 class="font-display text-2xl uppercase mb-4">Lightning Fast</h3>
        <p class="font-bold">
          No lag. No loading. No waiting. Your tasks appear instantly
          because we don't bloat our code with unnecessary animations.
        </p>
      </div>
 
      <!-- Feature 2 -->
      <div class="bg-brutal-cyan border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🎨</div>
        <h3 class="font-display text-2xl uppercase mb-4">Actually Unique</h3>
        <p class="font-bold">
          Tired of boring dashboards? We built something you'll actually
          want to open. Bold colors, zero BS.
        </p>
      </div>
 
      <!-- Feature 3 -->
      <div class="bg-brutal-yellow border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🔒</div>
        <h3 class="font-display text-2xl uppercase mb-4">Privacy First</h3>
        <p class="font-bold">
          Your data stays yours. No tracking. No selling. No corporate
          surveillance. Just your tasks, secured.
        </p>
      </div>
 
      <!-- Feature 4 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">📱</div>
        <h3 class="font-display text-2xl uppercase mb-4">Mobile Ready</h3>
        <p class="font-bold">
          Works on your phone, tablet, or desktop. Same bold design,
          same fast performance everywhere.
        </p>
      </div>
 
      <!-- Feature 5 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🤝</div>
        <h3 class="font-display text-2xl uppercase mb-4">Team Friendly</h3>
        <p class="font-bold">
          Invite your team. Assign tasks. Track progress. All without
          the corporate bloat of "enterprise" tools.
        </p>
      </div>
 
      <!-- Feature 6 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">💰</div>
        <h3 class="font-display text-2xl uppercase mb-4">Fair Pricing</h3>
        <p class="font-bold">
          No hidden fees. No "contact sales." Just honest pricing that
          makes sense. Pay for what you use.
        </p>
      </div>
 
    </div>
  </div>
</section>

何を作ったのでしょうか:

レスポンシブなグリッドに並んだ6枚の機能カード
視覚的な面白さのためのカラーブロッキング（ピンク、シアン、イエロー、白）
絵文字のアイコン（シンプルで遊び心があり、ブランドにも合う）
ホバー効果（ホバーするとカードが持ち上がる）
一貫した太いボーダーとくっきりしたシャドウ

デザインパターン: 最初の3枚のカードがアクセントカラー（ピンク、シアン、イエロー）を使い、下の3枚が白を使っているのに気づきましたか？これで視覚的な階層が生まれます。上の行のほうが、より注目を集めるのです。

Step 6: Pricing Section (12 minutes)

料金表は重要です。見逃しようがないものにしましょう。

<!-- Pricing Section -->
<section id="pricing" class="bg-brutal-black text-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Simple Pricing
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        No tricks. No hidden costs. Just pick a plan and start shipping.
      </p>
    </div>
 
    <!-- Pricing Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Free Plan -->
      <div class="bg-brutal-white text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2 text-gray-600">For Individuals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Free</h3>
          <div class="text-5xl font-display mb-2">$0</div>
          <div class="text-sm font-bold text-gray-600">Forever free</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Up to 10 projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Team collaboration</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-white border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Start Free
        </button>
      </div>
 
      <!-- Pro Plan (Highlighted) -->
      <div class="bg-brutal-yellow text-brutal-black border-brutal-thick shadow-brutal-xl p-8
                  relative transform md:-translate-y-4">
        <!-- Popular Badge -->
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-brutal-pink text-brutal-white
                    border-brutal px-6 py-2 font-bold uppercase text-sm">
          Most Popular
        </div>
 
        <div class="mb-6 mt-4">
          <div class="text-sm font-bold uppercase mb-2">For Professionals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Pro</h3>
          <div class="text-5xl font-display mb-2">$12</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Team collaboration (5 members)</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Pro →
        </button>
      </div>
 
      <!-- Team Plan -->
      <div class="bg-brutal-cyan text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2">For Teams</div>
          <h3 class="font-display text-4xl uppercase mb-4">Team</h3>
          <div class="text-5xl font-display mb-2">$29</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Everything in Pro</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited team members</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Advanced analytics</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Custom integrations</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">24/7 priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-cyan border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Team
        </button>
      </div>
 
    </div>
 
    <!-- Money Back Guarantee -->
    <div class="mt-16 text-center">
      <div class="inline-block bg-brutal-yellow text-brutal-black border-brutal-thick
                  shadow-brutal-lg px-8 py-4 font-bold text-lg">
        💰 30-Day Money Back Guarantee - No Questions Asked
      </div>
    </div>
 
  </div>
</section>

何を作ったのでしょうか:

明確に差別化された3つの料金プラン
カラーコーディング（白＝無料、イエロー＝人気、シアン＝プレミアム）
真ん中のカードを一段高く大きく（おすすめプランに注目を集める）
Proプランに付けた「Most Popular」バッジ
明快さのための機能チェックマーク（✓ と ✗）
信頼を得るための返金保証

デザイン戦略:

黒の背景が、色付きのカードをぐっと引き立てる
真ん中のカードを少し持ち上げて視覚的な階層を作る
CTAの配置を統一して比較しやすくする
カードの背景色に合わせて、CTAの色を変える

Step 7: Testimonial Section (8 minutes)

社会的証明はものを言います。お客様の声を追加しましょう。

<!-- Testimonial Section -->
<section class="bg-brutal-gray py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        People Love It
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        Don't take our word for it. Here's what actual users say.
      </p>
    </div>
 
    <!-- Testimonials Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
 
      <!-- Testimonial 1 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Finally, a task manager that doesn't look like it was designed
          by accountants. BoldTask actually makes me WANT to check my tasks."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-pink border-brutal"></div>
          <div>
            <div class="font-bold">Sarah Chen</div>
            <div class="text-sm text-gray-600">Product Designer</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 2 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "I switched from Asana and never looked back. BoldTask is faster,
          cleaner, and way more fun to use. Plus it's actually affordable."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-cyan border-brutal"></div>
          <div>
            <div class="font-bold">Marcus Rodriguez</div>
            <div class="text-sm text-gray-600">Startup Founder</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 3 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Our whole team uses it now. The bold design actually helps us
          stay focused. Weird but true."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-yellow border-brutal"></div>
          <div>
            <div class="font-bold">Priya Kapoor</div>
            <div class="text-sm text-gray-600">Engineering Manager</div>
          </div>
        </div>
      </div>
 
    </div>
  </div>
</section>

何を作ったのでしょうか:

スタイルを統一した3枚のお客様の声カード
星評価（イエロー＝注目）
ユーザーアバター（写真の代わりに抽象的な色付きの正方形）
信頼性のための名前と肩書き

なぜ抽象的なアバターなのか？ 実際の写真は、企業的に感じられることがあります。色付きの正方形なら、遊び心のある幾何学的なネオブルータリズムの美学を保てます。

Step 8: Footer (5 minutes)

どんなWebサイトにもフッターは必要です。私たちのものは大胆にいきましょう。

<!-- Footer -->
<footer class="bg-brutal-black text-brutal-white border-t-4 border-brutal-white py-12 px-6">
  <div class="max-w-7xl mx-auto">
 
    <div class="grid md:grid-cols-4 gap-12 mb-12">
 
      <!-- Brand -->
      <div>
        <div class="font-display text-3xl mb-4">BoldTask</div>
        <p class="font-bold text-gray-300">
          Project management that doesn't suck.
        </p>
      </div>
 
      <!-- Product Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Product</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Features</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Pricing</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Roadmap</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Changelog</a></li>
        </ul>
      </div>
 
      <!-- Company Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Company</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">About</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Blog</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Careers</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Contact</a></li>
        </ul>
      </div>
 
      <!-- Newsletter -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Stay Updated</h4>
        <p class="font-bold mb-4 text-gray-300">Get updates about new features.</p>
        <div class="flex gap-2">
          <input
            type="email"
            placeholder="Your email"
            class="flex-1 bg-brutal-white text-brutal-black border-brutal px-4 py-2
                   font-bold placeholder:text-gray-400"
          />
          <button class="bg-brutal-yellow text-brutal-black border-brutal shadow-brutal
                         px-4 py-2 font-bold uppercase btn-brutal">
            →
          </button>
        </div>
      </div>
 
    </div>
 
    <!-- Bottom Bar -->
    <div class="border-t-2 border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
      <div class="font-bold text-gray-400">
        © 2026 BoldTask. All rights reserved.
      </div>
      <div class="flex gap-6">
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Privacy</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Terms</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Twitter</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">GitHub</a>
      </div>
    </div>
 
  </div>
</footer>

何を作ったのでしょうか:

4カラムのフッターレイアウト
ブランド、ナビゲーション、ニュースレター登録
ホバー効果（リンクがイエローに変わる）
ブルータルなスタイリングのメール入力欄
下部の著作権バー

Step 9: Adding Polish and Interactions (5 minutes)

サイトを洗練された印象に仕上げるための、最後の仕上げをいくつか加えましょう。

Smooth Scrolling

これを src/styles.css に追加してください。

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}
 
/* Custom scrollbar (optional but on-brand) */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background: var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb {
  background: var(--color-brutal-black);
  border: 2px solid var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brutal-yellow);
}

このJavaScriptを、閉じる </body> タグの前に追加してください。

<script>
  // Mobile menu toggle
  const mobileMenuButton = document.createElement('button');
  mobileMenuButton.className = 'md:hidden border-brutal bg-brutal-yellow px-4 py-2 font-bold';
  mobileMenuButton.textContent = 'MENU';
 
  const nav = document.querySelector('nav > div');
  const navLinks = nav.querySelector('.hidden');
 
  // This is a simple example - you'd want to make this more robust
  mobileMenuButton.addEventListener('click', () => {
    navLinks.classList.toggle('hidden');
    navLinks.classList.toggle('flex');
  });
 
  // Add button to nav (you'd do this more elegantly in production)
</script>

Performance Optimization

これらのメタタグを <head> に追加してください。

<!-- Preload critical fonts -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap">
 
<!-- Meta tags for SEO and social -->
<meta name="description" content="BoldTask - Project management that doesn't suck. Bold design, fast performance, fair pricing.">
<meta property="og:title" content="BoldTask - Project Management That Doesn't Suck">
<meta property="og:description" content="Stop using boring task managers. BoldTask gives you project management with personality.">
<meta property="og:image" content="/og-image.png">
<meta name="twitter:card" content="summary_large_image">

では、Webサイトをテストしましょう。

Responsive Testing

DevTools（F12）を開いて、次のブレークポイントをテストします。

モバイル（375px）
タブレット（768px）
デスクトップ（1280px）

次の点を確認してください。

すべてのサイズでテキストが読める
モバイルでボタンがタップできる（高さ44px以上）
グリッドレイアウトが正しく折り返される
小さな画面でシャドウが切れない

Accessibility Check

このチェックリストを確認しましょう。

すべてのインタラクティブ要素がキーボードで操作できる（Tabでページを移動）
色のコントラストがWCAG AAの基準を満たしている（黒地に白 ✓、白地にイエロー ✓）
画像に代替テキストがある（今回はdivを使いましたが、画像を追加する場合は代替テキストを付ける）
フォーム入力にラベルがある
フォーカス状態が見える

Performance Check

Chrome DevToolsでLighthouseを開いて監査を実行します。次のような結果になるはずです。

Performance: 90+（最小限のCSS、重いフレームワークなし）
Accessibility: 90+（高コントラスト、セマンティックなHTML）
Best Practices: 90+
SEO: 90+

スコアが低い場合、よくある対処法は次のとおりです。

画像に width と height を追加する
本番ではCSSをminifyする
キャッシュヘッダーを有効にする
画像を圧縮する

Bonus: Converting to React/Next.js

これをReactアプリで使いたいですか？ヒーローセクションを変換する方法はこうです。

// components/Hero.tsx
export default function Hero() {
  return (
    <section className="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
      <div className="max-w-6xl w-full">
        <div className="grid md:grid-cols-2 gap-12 items-center">
 
          {/* Left Column */}
          <div>
            <h1 className="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
              Task Management That Doesn't Bore You to Death
            </h1>
            <p className="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
              Stop using the same gray dashboard as everyone else.
              BoldTask gives you project management with personality.
            </p>
 
            <div className="flex flex-col sm:flex-row gap-4">
              <button className="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Start Free Trial →
              </button>
              <button className="bg-brutal-white border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Watch Demo
              </button>
            </div>
 
            {/* Social Proof */}
            <div className="mt-12 flex items-center gap-8">
              <div className="text-center">
                <div className="text-4xl font-display">10K+</div>
                <div className="text-sm font-bold">Active Users</div>
              </div>
              <div className="h-12 w-1 bg-brutal-black"></div>
              <div className="text-center">
                <div className="text-4xl font-display">4.9★</div>
                <div className="text-sm font-bold">User Rating</div>
              </div>
            </div>
          </div>
 
          {/* Right Column - Visual */}
          <div className="relative">
            <div className="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
              {/* Task mockup */}
              <div className="bg-brutal-pink h-4 w-20 mb-4"></div>
              <div className="h-3 bg-brutal-gray mb-2"></div>
              <div className="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
              <div className="space-y-3">
                <div className="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
                  <div className="w-5 h-5 border-brutal bg-brutal-black"></div>
                  <div className="h-2 bg-brutal-black w-full"></div>
                </div>
                <div className="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
                  <div className="w-5 h-5 border-brutal"></div>
                  <div className="h-2 bg-brutal-gray w-4/5"></div>
                </div>
              </div>
            </div>
 
            <div className="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                          shadow-brutal-lg p-6 w-40 text-center">
              <div className="text-3xl font-display mb-2">+47</div>
              <div className="text-xs font-bold">Tasks Done Today</div>
            </div>
          </div>
 
        </div>
      </div>
    </section>
  );
}

続いて、tailwind.config.ts にこう書きます。

import type { Config } from 'tailwindcss'
 
const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-space-grotesk)', 'sans-serif'],
        display: ['var(--font-archivo-black)', 'sans-serif'],
      },
      colors: {
        'brutal-yellow': '#ffdb33',
        'brutal-pink': '#ff006e',
        'brutal-cyan': '#00f0ff',
        'brutal-black': '#000000',
        'brutal-white': '#ffffff',
        'brutal-gray': '#e5e5e5',
      },
      boxShadow: {
        'brutal-sm': '2px 2px 0 0 #000',
        'brutal': '4px 4px 0 0 #000',
        'brutal-lg': '6px 6px 0 0 #000',
        'brutal-xl': '8px 8px 0 0 #000',
      },
      borderWidth: {
        'brutal': '4px',
        'brutal-thick': '6px',
      },
    },
  },
  plugins: [],
}
 
export default config

Common Mistakes and How to Avoid Them

数十ものネオブルータリズムサイトを作ってきた経験から、もっともよく見かける落とし穴を紹介します。

1. Inconsistent Border Widths

間違い: ある要素には2pxのボーダー、別の要素には5px、また別のところには3px、というふうにばらばらに使うこと。

対処法: ボーダー幅を2〜3種類に決めて（たとえば標準3px、強調4px、主要な要素6px）、全体で一貫して使い続けましょう。

2. Forgetting Mobile Shadow Offsets

間違い: モバイルで10pxのシャドウオフセットが切れてしまったり、横スクロールを生んだりすること。

対処法: レスポンシブなシャドウユーティリティを使いましょう。

.card {
  box-shadow: 4px 4px 0 0 #000;
}
 
@media (min-width: 768px) {
  .card {
    box-shadow: 8px 8px 0 0 #000;
  }
}

3. Too Many Accent Colors

間違い: 「多いほどブルータル」と思い込んで、5色以上を使うこと。

対処法: 黒＋白＋アクセントカラーは多くても2〜3色に抑えましょう。今回のパレットはイエロー、ピンク、シアンを使っていますが、これでもすでにぎりぎりです。

4. Neglecting Accessibility

間違い: 白背景にイエローの文字（読めない）、フォーカス状態なし、コントラスト不足。

対処法: 必ずコントラストをテストしましょう。イエローや白の背景には黒い文字、黒や暗い背景には白い文字を使いましょう。

5. Soft Shadows Sneaking In

間違い: うっかりTailwindのデフォルトシャドウ（shadow-lg）を使ってしまい、ぼかしが入ること。

対処法: カスタムのシャドウユーティリティを作り、必要ならデフォルトのシャドウを無効にしましょう。

Next Steps and Resources

おめでとうございます！完全なネオブルータリズムのWebサイトを、一から作り上げました。

What to Do Next

1. Deploy It

# Build for production
npm run build
 
# Deploy to Vercel, Netlify, or wherever

2. Add Functionality

ニュースレターフォームをサービス（ConvertKit、Mailchimp）に接続する
料金のCTAをStripeで実装する
アナリティクス（Plausible、Fathom）を追加する

3. Expand the Design System

さらにコンポーネントを作る（modal、dropdown、tooltip）
ページを追加する（about、blog、contact）
ダークモードを加える（ネオブルータリズムはダークモードでも見事に映えます）

4. Optimize Further

CSSとHTMLをminifyする
画像最適化を加える
キャッシュ戦略を実装する
さらなるパフォーマンス向上のために静的サイトジェネレーターを検討する

Helpful Resources

Design Inspiration:

Brutalist Websites - 厳選されたコレクション
Gumroad - ネオブルータリズムのお手本
Feastables - 遊び心のあるネオブルータリズムのeコマース

Tools:

Neobrutalism - 作り込み済みのネオブルータリズムコンポーネント
Tailwind CSS v4 Docs - 公式ドキュメント
Google Fonts - 無料フォント（Archivo Black、Space Grotesk）

Color Palette Generators:

Coolors - 配色を生成する
Adobe Color - カラーホイールとパレットのツール

Final Thoughts

あなたはネオブルータリズムのWebサイトを、ゼロからデプロイまで、1時間もかからずに作り上げました。これは本当に見事なことです。

要点のまとめ:

ネオブルータリズム＝太いボーダー＋くっきりしたシャドウ＋大胆な色＋border-radiusゼロ
Tailwind v4の @theme ディレクティブが、カスタマイズをすっきりさせてくれる
一貫性が肝心（ボーダー幅、シャドウ、色）
アクセシビリティは依然として重要（高コントラストが役立つ）
まずしっかりしたデザインシステムから始め、それからコンポーネントを作る

このサイトは単なるデモではありません。実際のプロジェクトに応用できるテンプレートです。色を変え、フォントを差し替え、シャドウを調整して、自分のものにしてください。

ネオブルータリズムの一番いいところは何か。それは寛容なことです。不完全さは、この美学の一部なのです。ほんの少しずれたボーダーや、中心から外れた要素？それはバグではなく、味なのです。

さあ、みんなのポートフォリオやSaaSやランディングページと似ていない、大胆な何かを作りに行きましょう。

いいものづくりを。🚀

質問はありますか？ コメントを残すか、Twitterで声をかけてください。このスタイルでみなさんが何を作るのか、見るのが大好きです。

完全なコードが欲しいですか？ 完成版のHTMLファイルは GitHub Gist で公開しています（リンクはコメント欄に）。

役に立ちましたか？ 退屈なデザインの罠から抜け出したい開発者に、ぜひシェアしてください。

← 記事一覧へ戻る

Tailwind CSS v4でネオブルータリズムなWebサイトを一から作る手順

What We're Building

Step 1: Project Setup (5 minutes)

Create Your Project

Initialize npm and Install Tailwind v4

Create Project Structure

Step 2: Configure Tailwind v4 (3 minutes)

Create Your Styles File

Step 3: HTML Structure (5 minutes)

Set Up Dev Server

Step 4: Build the Hero Section (10 minutes)

Step 5: Features Section (10 minutes)

Step 6: Pricing Section (12 minutes)

Step 7: Testimonial Section (8 minutes)

Step 8: Footer (5 minutes)

Step 9: Adding Polish and Interactions (5 minutes)

Smooth Scrolling

Mobile Menu Toggle

Performance Optimization

Responsive Testing

Accessibility Check

Performance Check

Bonus: Converting to React/Next.js

Common Mistakes and How to Avoid Them

1. Inconsistent Border Widths

2. Forgetting Mobile Shadow Offsets

3. Too Many Accent Colors

4. Neglecting Accessibility

5. Soft Shadows Sneaking In

Next Steps and Resources

What to Do Next

Helpful Resources

Final Thoughts

ネオブルータリズムの配色パレット20選（HEXコード付き・コピペ可）

Reactプロジェクトを10分でネオブルータリズムに変える方法

ネオブルータリズム vs ミニマリズム: いつ使い、いつ避けるべきか

Tailwind CSS v4でネオブルータリズムなWebサイトを一から作る手順

What We're Building

Step 1: Project Setup (5 minutes)

Create Your Project

Initialize npm and Install Tailwind v4

Create Project Structure

Step 2: Configure Tailwind v4 (3 minutes)

Create Your Styles File

Step 3: HTML Structure (5 minutes)

Set Up Dev Server

Step 4: Build the Hero Section (10 minutes)

Step 5: Features Section (10 minutes)

Step 6: Pricing Section (12 minutes)

Step 7: Testimonial Section (8 minutes)

Step 8: Footer (5 minutes)

Step 9: Adding Polish and Interactions (5 minutes)

Smooth Scrolling

Mobile Menu Toggle

Performance Optimization

Step 10: Testing and Refinements (5 minutes)

Responsive Testing

Accessibility Check

Performance Check

Bonus: Converting to React/Next.js

Common Mistakes and How to Avoid Them

1. Inconsistent Border Widths

2. Forgetting Mobile Shadow Offsets

3. Too Many Accent Colors

4. Neglecting Accessibility

5. Soft Shadows Sneaking In

Next Steps and Resources

What to Do Next

Helpful Resources

Final Thoughts

関連記事

ネオブルータリズムの配色パレット20選（HEXコード付き・コピペ可）

Reactプロジェクトを10分でネオブルータリズムに変える方法

ネオブルータリズム vs ミニマリズム: いつ使い、いつ避けるべきか