Reactプロジェクトを10分でネオブルータリズムに変える方法
退屈なReactアプリを大胆に生まれ変わらせたいですか。Neobrutalismを使って、どんなReactプロジェクトもたった10分で目を奪うネオブルータリズムデザインに変える方法を、before/afterの例とともに手順を追って解説します。
Dov Azencot
@DovAzencot正直に言いましょう。あなたのReactアプリは、たぶん世の中のほかのReactアプリと同じ見た目をしています。きれい？もちろん。プロっぽい？間違いなく。記憶に残る？まったく残りません。
でも、もし私が「たった10分で、そのありきたりなプロジェクトを、個性が叫び出すようなものに変えられる」と言ったらどうでしょう。人に「うわっ、なにこれ？」と言わせるようなものに。
それがネオブルータリズムの力です。大胆で、物おじせず、無視できないデザインスタイル。そしてNeobrutalismを使えば、Reactプロジェクトの変身は拍子抜けするほど簡単です。
コーヒー（エナジードリンクでも構いません、とやかく言いません）を手に取って、あの味気ないアプリをピリッとしたものに変えていきましょう。
What the Heck is Neobrutalism Anyway?
本題に入る前に、認識をそろえておきましょう。ネオブルータリズムは、1950年代の生々しくコンクリートを多用したブルータリズム建築から着想を得て、それをモダンでデジタルな形に落とし込んだデザインムーブメントです。
こんなイメージです。
- あらゆる要素に効かせた太い黒のボーダー
- くっきりとしたシャドウ（あの柔らかいぼかしとは無縁）
- 黒、白、ネオンイエローのような高コントラストの配色
- 角丸ゼロ（シャープで角ばっている、これが命）
- グリッドを崩す非対称のレイアウト
これは反・完璧主義です。反抗的です。役員会議に革ジャンを着ていくようなデザイン版とでも言いましょうか。そして、ちゃんと機能します。
Why Neobrutalism?
ネオブルータリズムのコンポーネントを一から作ることもできますが、Neobrutalismがあるのに、なぜ車輪を再発明するのでしょうか。Neobrutalismは、ネオブルータリズムのために作られたReact UIライブラリで、次のような特徴があります。
- あの独特のブルータルな美学をまとった、作り込み済みのコンポーネント
- CLIによる簡単なインストール
- Tailwind CSSで完全にカスタマイズ可能
- Next.js、Vite、Remixなど、基本的にあらゆるReact構成で動作
しかも、無料でオープンソースです。さっそく始めましょう。
Step 1: Set Up Your Project (2 minutes)
まず最初に。既存のReactプロジェクトで作業しているなら、あなたはすでに一歩リードしています。そうでなければ、手早くNext.jsアプリを立ち上げましょう（ただし、これはどんなReactフレームワークでも通用します）。
プロンプトが出たら、TypeScriptとTailwind CSSに「yes」と答えてください。どちらも必要になります。
ViteやCreate React Appを使っている場合も大丈夫です。セットアップはほとんど同じです。
Step 2: Install Neobrutalism (1 minute)
さあ、ここからが魔法です。shadcn（Neobrutalismは内部でこれを使っています）を初期化し、Neobrutalismのユーティリティをインストールする必要があります。
次のコマンドを実行してください。
いくつかのプロンプトが表示されます。次のように選ぶとよいでしょう。
- Style: Default
- Base color: Slate（あとで上書きするので、あまり重要ではありません）
- CSS variables: Yes
次に、Neobrutalismのutilsをインストールします。
これで完了です。以上。これでブルータルなインターフェースを構築する土台が整いました。
Step 3: Add the Neobrutalist Theme (2 minutes)
ここから変身が本格的に始まります。global.css ファイル（通常は app/globals.css または src/index.css）を開き、テーマ変数をNeobrutalismの代名詞ともいえるブルータルなテーマに置き換えます。
このCSSを貼り付けてください。
@theme {
--font-head: var(--font-head);
--font-sans: var(--font-sans);
--radius: 0;
--shadow-xs: 1px 1px 0 0 var(--border);
--shadow-sm: 2px 2px 0 0 var(--border);
--shadow: 3px 3px 0 0 var(--border);
--shadow-md: 4px 4px 0 0 var(--border);
--shadow-lg: 6px 6px 0 0 var(--border);
--shadow-xl: 10px 10px 0 1px var(--border);
--shadow-2xl: 16px 16px 0 1px var(--border);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-border: var(--border);
}
:root {
--radius: 0;
--background: #fff;
--foreground: #000;
--primary: #ffdb33;
--primary-foreground: #000;
--secondary: #000;
--secondary-foreground: #fff;
--border: #000;
}
.dark {
--background: #1a1a1a;
--foreground: #f5f5f5;
--primary: #ffdb33;
--primary-foreground: #000;
--secondary: #3a3a3a;
--secondary-foreground: #f5f5f5;
--border: #3a3a3a;
}いま何が起きたのでしょうか？
- すべての border-radius を消しました（もう角丸はありません！）
- 柔らかいシャドウを、くっきりとオフセットしたシャドウに入れ替えました
- 黒・白・イエローの大胆な配色を設定しました
- ダークモード対応を追加しました（私たちは野蛮人ではないので）
もうすでに、アプリの見た目が変わり始めています。でも、まだ終わりではありません。
Step 4: Install Your First Components (2 minutes)
実際のコンポーネントをいくつか手に入れましょう。まずは基本から。Button、Card、Inputです。
これらのコマンドを1つずつ実行してください。
各コンポーネントは components/neobrutalism/ フォルダに追加され、すぐに使える状態になります。CSSを1行も書く必要はありません。
Step 5: Swap Out Your Components (2 minutes)
さあ、お楽しみの時間です。古くて退屈なコンポーネントを、新しいブルータルなものに置き換えていきましょう。
Before:
// Your old, generic button
<button className="bg-blue-500 text-white px-4 py-2 rounded">
Click Me
</button>After:
import { Button } from "@/components/neobrutalism/Button";
<Button>Click Me</Button>たったこれだけで、太い黒のボーダーと、くっきりとしたシャドウ、そしてあの代名詞ともいえるネオブルータリズムの雰囲気をまとったボタンが手に入ります。
カードでも同じことをやってみましょう。
Before:
<div className="bg-white shadow-lg rounded-lg p-6">
<h2 className="text-2xl font-bold">My Card</h2>
<p className="text-gray-600">Some generic content here.</p>
</div>After:
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/neobrutalism/Card";
<Card>
<CardHeader>
<CardTitle>My Card</CardTitle>
<CardDescription>Now with 100% more attitude.</CardDescription>
</CardHeader>
<CardContent>
Some bold content here.
</CardContent>
</Card>構造は同じ、でも雰囲気はまるで別物です。カードはシャープな角、大胆なボーダー、そしてページから浮き上がるように見せるくっきりとしたシャドウを手に入れました。
Step 6: Add Neobrutalist Fonts (1 minute)
ネオブルータリズムにおいて、タイポグラフィはとてつもなく重要です。デフォルトのシステムフォントでは物足りません。Neobrutalismは、見出しに Archivo Black、本文に Space Grotesk を推奨しています。
Next.jsを使っているなら、app/layout.tsx に次を追加してください。
import { Archivo_Black, Space_Grotesk } from "next/font/google";
const archivoBlack = Archivo_Black({
subsets: ["latin"],
weight: "400",
variable: "--font-head",
display: "swap",
});
const spaceGrotesk = Space_Grotesk({
subsets: ["latin"],
weight: "400",
variable: "--font-sans",
display: "swap",
});
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
{children}
</body>
</html>
);
}これで見出しはどっしりと大胆に、本文はすっきりと読みやすくなります。
Step 7: Fine-Tune and Customize (Optional)
この時点でほぼ完成ですが、さらにカスタマイズしたい場合、Neobrutalismならそれも簡単です。
アクセントカラーを変えたい？ CSSの --primary 変数を変更しましょう。
:root {
--primary: #ff006e; /* Hot pink instead of yellow */
}もっと柔らかいシャドウがいい？ シャドウの変数を調整しましょう。
--shadow: 2px 2px 0 0 var(--border); /* Smaller offset */もっとコンポーネントを追加したい？ neobrutalism.com/docs/components でライブラリの全容を確認してください。input、badge、dialog、tableなど、どれもあのブルータルな美学でスタイリングされています。
Before and After: The Transformation
さて、違いを見てみましょう。シンプルなランディングページが、ネオブルータリズム化の前後でどう変わるかをご覧ください。
Before: Generic React App
export default function GenericLanding() {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="max-w-md bg-white shadow-lg rounded-lg p-8">
<h1 className="text-3xl font-bold text-gray-900 mb-4">
Welcome to My App
</h1>
<p className="text-gray-600 mb-6">
This is a clean, minimal design that looks like every other React app.
</p>
<input
type="email"
placeholder="Enter your email"
className="w-full px-4 py-2 border border-gray-300 rounded mb-4"
/>
<button className="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Get Started
</button>
</div>
</div>
);
}これの何が問題なのでしょうか？
技術的には何も問題ありません。ちゃんと機能します。きれいです。でも同時に、まったく記憶に残りません。これを100人に見せたら、みんな今週見た十数個のほかのサイトと混同してしまうでしょう。
After: Neobrutalist Makeover
import { Button } from "@/components/neobrutalism/Button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/neobrutalism/Card";
import { Input } from "@/components/neobrutalism/Input";
export default function BrutalLanding() {
return (
<div className="min-h-screen bg-[#ffdb33] flex items-center justify-center p-4">
<Card className="max-w-md w-full">
<CardHeader>
<CardTitle className="text-4xl font-head uppercase">
Welcome to My App
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-lg font-sans">
This is a bold, memorable design that actually stands out.
</p>
<Input type="email" placeholder="Enter your email" />
<Button className="w-full">Get Started</Button>
</CardContent>
</Card>
</div>
);
}何が変わったのでしょうか？
- 背景: 退屈なグレーから、鮮烈なイエローへ
- タイポグラフィ: Archivo Blackを使った、大胆で大文字の見出し
- ボーダー: あらゆる要素に太い黒のボーダー
- シャドウ: 柔らかいぼかしではなく、くっきりとオフセットしたシャドウ
- 角: border-radius ゼロ。シャープで角ばった仕上がり
- 雰囲気: 「企業パンフレット」から「気概のあるインディースタートアップ」へ
コンポーネントの構造もレイアウトも同じなのに、まるで別物に感じられます。これなら人々の記憶に残ります。
Another Example: Dashboard Widget
もう少し複雑な例を見てみましょう。ダッシュボードの統計カードです。
Before: Bland Dashboard
export default function GenericStats() {
return (
<div className="grid grid-cols-3 gap-4">
<div className="bg-white rounded-lg shadow p-6">
<p className="text-gray-500 text-sm">Total Users</p>
<p className="text-3xl font-bold text-gray-900">1,284</p>
<p className="text-green-500 text-sm">+12% from last month</p>
</div>
<div className="bg-white rounded-lg shadow p-6">
<p className="text-gray-500 text-sm">Revenue</p>
<p className="text-3xl font-bold text-gray-900">$52,340</p>
<p className="text-green-500 text-sm">+8% from last month</p>
</div>
<div className="bg-white rounded-lg shadow p-6">
<p className="text-gray-500 text-sm">Active Now</p>
<p className="text-3xl font-bold text-gray-900">127</p>
<p className="text-red-500 text-sm">-3% from last hour</p>
</div>
</div>
);
}After: Brutal Dashboard
import { Card, CardContent } from "@/components/neobrutalism/Card";
export default function BrutalStats() {
return (
<div className="grid grid-cols-3 gap-6">
<Card className="bg-[#ffdb33]">
<CardContent className="pt-6">
<p className="text-sm font-bold uppercase mb-2">Total Users</p>
<p className="text-5xl font-head mb-2">1,284</p>
<p className="text-sm font-bold">▲ 12% from last month</p>
</CardContent>
</Card>
<Card className="bg-white">
<CardContent className="pt-6">
<p className="text-sm font-bold uppercase mb-2">Revenue</p>
<p className="text-5xl font-head mb-2">$52,340</p>
<p className="text-sm font-bold">▲ 8% from last month</p>
</CardContent>
</Card>
<Card className="bg-black text-white">
<CardContent className="pt-6">
<p className="text-sm font-bold uppercase mb-2">Active Now</p>
<p className="text-5xl font-head mb-2">127</p>
<p className="text-sm font-bold">▼ 3% from last hour</p>
</CardContent>
</Card>
</div>
);
}何が違うのでしょうか？
- カラーブロッキング: 各カードに、はっきり異なる背景色（イエロー、白、黒）
- 大胆なタイポグラフィ: 数字は特大で、ディスプレイフォントを使用
- 高コントラスト: 黒地に白の文字が、一瞬で視覚的な階層を生む
- 大文字のラベル: すべてが意図的で大胆に感じられる
- 色ではなく矢印: 明快さのために ▲ と ▼ の記号を使用
同じデータでも、見せ方はまるで違います。ブルータルなバージョンは、ただ寄せ集めたのではなく、自信をもってデザインされたように感じられます。
Pro Tips for Neobrutalist Design
基本を押さえたところで、この美学を本当に自分のものにするためのコツをいくつか紹介します。
1. Embrace Asymmetry
グリッドを崩すことを恐れないでください。要素をずらし、ボーダーを重ね、不ぞろいに余白を取りましょう。完璧さは退屈です。
2. Use Color Intentionally
ネオブルータリズムは、高コントラストの配色を好みます。黒と白をベースにして、そこにアクセントカラーをひとつかふたつ（イエロー、ピンク、シアン）加えましょう。虹色にはしないこと。ひとつの雰囲気を決めて、そこにコミットするのです。
3. Go Big on Typography
見出しは特大にしましょう。本文は普通で構いませんが、H1は人目を引くべきです。強く主張したいときは、太くて大文字の文字を使いましょう。
4. Add Micro-Interactions
ブルータルとは、静止しているという意味ではありません。ボタンがわずかにずれたり、シャドウが大きくなったりするホバー効果を加えましょう。さりげなく、でも気づけるくらいに。
<Button className="hover:translate-x-1 hover:translate-y-1 transition-transform">
Click Me
</Button>5. Don't Overdo It
すべての要素に太いボーダーが必要なわけではありません。すべてのセクションに明るい背景が必要なわけでもありません。バランスは依然として重要です。ただ、その天秤を大胆さのほうへ少し傾けるだけです。
What to Do Next
おめでとうございます！たった10分ほどで、Reactプロジェクトのビジュアルを丸ごと刷新しました。ここから先にできることを紹介します。
Explore More Components
Neobrutalismには、badge、dialog、table、tabsなど、充実したコンポーネントライブラリがあります。コンポーネントドキュメント をのぞいて、ほかに何を追加できるか見てみましょう。
Customize Your Theme
CSS変数をいじって、ブランドに合わせましょう。アクセントカラーを変えたり、シャドウの強さを調整したり、余白を微調整したりして、自分のものにしていくのです。
Build Something Cool
アプリがありきたりな見た目でなくなったのですから、ぜひ見せびらかしましょう！Twitterでシェアしたり、Redditに投稿したり、ポートフォリオに加えたり。ネオブルータリズムは人の目に留まります。
Join the Community
Neobrutalismには、デザイナーと開発者がプロジェクトを共有し、質問し合い、ブルータルなデザインについて熱く語る活発なDiscordがあります。飛び込んで挨拶してみてください。
Final Thoughts
ほとんどのReactアプリが同じ見た目なのは、ほとんどの開発者が同じツールに手を伸ばすからです。Material UI、Bootstrap、デフォルト設定のshadcn。これらが悪いわけではありません（どれも素晴らしいものです！）。でも、それらは目立つ助けにはなりません。
ネオブルータリズムは、個性への近道です。大胆で、記憶に残り、そして適切なツールがあれば驚くほど簡単に実装できます。Neobrutalismは、一から作り直すことなく乗り換えるために必要なものを、すべて用意してくれます。
たった10分で、あなたは「ありふれたReactアプリ」から「待って、なにこれ？」へと駆け上がりました。そして正直なところ、それはとても強力なことなのです。
さあ、あなたのアプリを、無視できないものにしてしまいましょう。
それでは、外に出て、ブルータルな何かを作りに行きましょう。🚀