はじめに

ネオブルータリズムとは何でしょうか？#

ネオブルータリズムとは、フラットでミニマルなデザインの画一性への反動として、2010年代後半に登場したウェブデザインのスタイルです。ブルータリズム建築の持つ「ありのままの素材」や「構造の露出」といった荒削りな特徴を取り入れ、大胆な色彩や遊び心のある幾何学模様を用いて、それを画面上に表現しています。

以下の5つの特徴から、それを見分けることができます：

• 太い枠線 — すべての要素に、通常は黒の塗りつぶしで枠線が引かれています。
• ハードシャドウ — ぼかしを一切加えないフラットなオフセットで、要素がページ上で物理的に積み重なっているように見えます。
• 派手な色 — コントラストが高く、彩度の高い塗りつぶし。グラデーションやグラスモルフィズムは使用しません。
• 角ばった角と太字——空間を詫びるのではなく、堂々とその存在感を主張する幾何学的なデザインです。
• 触覚的なインタラクション — ボタンをクリックすると、ボタンが影の部分に目に見えるほどへこみます。

浮き上がったり、ぼやけたり、隠れたりすることはありません。Gumroadが2021年に実施したデザイン刷新により、このスタイルは主流となりました。現在では、デフォルトではなく、意図的にデザインされた印象を与えたい製品にとって、定番の選択肢となっています。

Neobrutalism.comとは何ですか？#

Neobrutalism.com これは、React にスタイルをもたらすデザインシステムであり、shadcn/ui と同じレジストリモデルに基づいて構築されています。パッケージをインストールする必要はありません。shadcn（CLI）を実行すると、各コンポーネントのソースコードがプロジェクトにコピーされ、それ以降はあなたのコードとなります。

内容：

• コンポーネント — 1つのデザインガイドラインに基づいて統一されたフルセットで、枠線、影、文字のスタイルが互いに調和しています。
• ブロック — 既成のセクション：ヒーローセクション、価格表、認証画面、ダッシュボードなど。
• テンプレート — 完成済みのサイトと管理パネル。
• テーマ — プリセットを共有できるテーマビルダーです。
• Figma kit — デザイナー向けの同じシステムです。
• MCP サーバー — Claude Code や Cursor などの AI エディタでは、名前を指定してコンポーネントを追加することができます。

2つのプリミティブ、1つのスタイル#

各コンポーネントには2つのバリエーションが用意されています。インストール時にコンポーネントごとに選択してください。インストールURLによって、どちらが適用されるかが決まります：

• Radix UI — ほとんどのshadcnプロジェクトがすでに動作している基本機能です。
• Base UI — Radixおよび「MUI」チームによる、最新のプリミティブです。

外観も、エクスポート機能も、APIもすべて同じです。アクセシビリティ（フォーカス、キーボード操作、スクリーンリーダーなど）は、その基盤となるプリミティブ機能によって実現されています。

ぜひお試しください#

1つのコマンドで、設定は不要です：

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json
コピー

その後、「インストール」ページに進んでフォントやテーマトークンをインストールするか、まずはコンポーネントを閲覧してください。