neobrutalist-web-designer

ネオブルータリズムのWebデザイナー

本格的なネオブルータリズムの美学を取り入れた、モダンな2026年のWebアプリケーションを作成します。ブルータリズム建築を再現するのではなく、SaaS製品、Eコマース、インディークリエイター向けプラットフォーム、そして際立つ必要のあるスタートアップのMVPなど、現代のデジタル環境にネオブルータリズムを応用します。

使用する場面

以下の場合に使用してください：

• 大胆な差別化が必要なSaaSダッシュボード（Gumroad、Figma風）
• 印象に残る、飾らない美学を備えたEコマース（Tony's Chocolonely風）
• インディークリエイター向けプラットフォームやポートフォリオ
• スタートアップのランディングページやMVP
• 親しみやすさと大胆さを求める教育プラットフォーム
• 音楽、アート、ソーシャルメディアのアプリ
• 控えめではなく「声を張り上げる」必要のあるあらゆるUI

以下の場合には使用しないでください：

• グラスモーフィズム／ぼかし効果 → vaporwave-glassomorphic-ui-designerを使用
• Windows 3.1風のレトロデザイン → windows-3-1-web-designerを使用
• Windows 95風のレトロデザイン → windows-95-web-designerを使用
• ソフトシャドウ／ニューモーフィズム → native-app-designerを使用
• 控えめな企業向けデザイン → web-design-expertを使用
• グラデーションを多用する美学 → ネオブルータリズムではありません

ネオブルータリズムと類似スタイルの違い

特徴	ネオブルータリズム	グラスモーフィズム	ニューモーフィズム	Win31/95
シャドウ	硬い（ぼかしなし）	柔らかな光彩	控えめな内側の影	面取り
境界線	太い黒の線	控えめ／なし	なし	面取り
色	鮮やかな原色	すりガラス／パステル	落ち着いた色	システムグレー
背景	単色でフラット	ぼかし／透明	柔らかなグラデーション	単色
哲学	飾らず、むき出し	幻想的、隠す	リアル	機能的

---

コアデザインシステム

ネオブルータリズムを支える3つの柱

1. ハードシャドウ - ずらして配置し、ぼかしなし。通常は黒
2. 太い境界線 - 太さ2～4pxの黒い線
3. 高いコントラスト - ニュートラルな背景に原色を配置

カラーパレット

色	Hex	CSS変数	用途
黒	#000000	--neo-black	境界線、シャドウ、テキスト
白	#FFFFFF	--neo-white	背景、コントラスト
クリーム／ベージュ	#F5F0E6	--neo-cream	柔らかな背景の代替色
赤	#FF5252	--neo-red	危険、強調
黄	#FFEB3B	--neo-yellow	ハイライト、警告
青	#2196F3	--neo-blue	リンク、主要アクション
ピンク	#FF4081	--neo-pink	アクセント、遊び心
緑	#4CAF50	--neo-green	成功状態
オレンジ	#FF9800	--neo-orange	CTA、注目喚起
紫	#9C27B0	--neo-purple	クリエイティブ、プレミアム

カラーのルール：

• ✅ 彩度の高い鮮やかな原色
• ✅ 最大限のコントラストを生む黒と白
• ✅ 柔らかさを加えずに温かみを出すベージュ／クリーム色
• ❌ グラデーションは禁止（フラットカラーのみを使用）
• ❌ 透明度は禁止（不透明に保つ）

特徴的なハードシャドウ

ネオブルータリズムを定義する要素 - ぼかしゼロのオフセットシャドウ：

.neo-shadow {
  /* THE neobrutalist shadow formula */
  box-shadow: 4px 4px 0 #000000;
}

.neo-shadow--deep {
  box-shadow: 8px 8px 0 #000000;
}

.neo-shadow--subtle {
  box-shadow: 2px 2px 0 #000000;
}

/* Hover: shadow grows */
.neo-shadow:hover {
  box-shadow: 6px 6px 0 #000000;
  transform: translate(-2px, -2px);
}

/* Active: shadow shrinks (pressed) */
.neo-shadow:active {
  box-shadow: 2px 2px 0 #000000;
  transform: translate(2px, 2px);
}

太い境界線のシステム

.neo-border {
  border: 3px solid #000000;
}

.neo-border--thick {
  border: 4px solid #000000;
}

.neo-border--thin {
  border: 2px solid #000000;
}

/* Colored borders for emphasis */
.neo-border--accent {
  border: 3px solid var(--neo-pink);
}

タイポグラフィ

用途	推奨フォント	代替フォント	スタイル
見出し	Archivo Black	Impact, sans-serif	太字、コンデンス
本文	Space Grotesk	Arial, sans-serif	すっきり、幾何学的
アクセント	Lexend Mega	Trebuchet, sans-serif	ワイド、太字
等幅	JetBrains Mono	Courier New	コード、レトロ
ディスプレイ	Bebas Neue	Impact	大文字、インパクト重視

タイポグラフィのルール：

:root {
  --font-neo-display: 'Archivo Black', 'Impact', sans-serif;
  --font-neo-body: 'Space Grotesk', 'Arial', sans-serif;
  --font-neo-accent: 'Lexend Mega', sans-serif;
  --font-neo-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* Headlines are BOLD and often oversized */
h1 {
  font-family: var(--font-neo-display);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Body maintains readability */
body {
  font-family: var(--font-neo-body);
  font-size: 1.125rem;
  line-height: 1.6;
}

---

現代的な応用

SaaSダッシュボード：Gumroadのパラダイム

SaaS向けのネオブルータリズムでは、装飾より機能を重視します。

┌────────────────────────────────────────────────────────┐
│ ██████████████████████████████████████████████████████ │
│ █ DASHBOARD                              [?] [⚙] [👤] █│
│ ██████████████████████████████████████████████████████ │
├────────────────────────────────────────────────────────┤
│ ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│ │ ████████████ │  │ ████████████ │  │ ████████████ │  │
│ │ REVENUE      │  │ CUSTOMERS    │  │ PRODUCTS     │  │
│ │ ════════════ │  │ ════════════ │  │ ════════════ │  │
│ │ $12,450      │  │ 1,234        │  │ 12           │  │
│ │ ↑ 23%        │  │ ↑ 15%        │  │ → 0%         │  │
│ └──────────────┘  └──────────────┘  └──────────────┘  │
│                                                        │
│ ┌────────────────────────────────────────────────────┐│
│ │ RECENT SALES                              [View All]││
│ │ ════════════════════════════════════════════════════││
│ │ ▓ Product A          $49.00         Jan 31, 10:23  ││
│ │ ▓ Product B          $29.00         Jan 31, 09:45  ││
│ │ ▓ Product A          $49.00         Jan 31, 08:12  ││
│ └────────────────────────────────────────────────────┘│
└────────────────────────────────────────────────────────┘

主なパターン：

• ハードシャドウ付きのカード
• 太字のセクション見出し
• コントラストの高いデータ表示
• あらゆる要素に黒い境界線
• フラットで単色の背景

Eコマース：飾らないショッピング体験

.neo-product-card {
  background: var(--neo-white);
  border: 3px solid var(--neo-black);
  box-shadow: 6px 6px 0 var(--neo-black);
  padding: 0;
  overflow: hidden;
}

.neo-product-card:hover {
  box-shadow: 8px 8px 0 var(--neo-black);
  transform: translate(-2px, -2px);
}

.neo-product-card__image {
  border-bottom: 3px solid var(--neo-black);
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.neo-product-card__content {
  padding: 1rem;
}

.neo-product-card__price {
  font-family: var(--font-neo-display);
  font-size: 1.5rem;
  background: var(--neo-yellow);
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--neo-black);
}

.neo-add-to-cart {
  width: 100%;
  background: var(--neo-black);
  color: var(--neo-white);
  border: 3px solid var(--neo-black);
  padding: 0.75rem;
  font-family: var(--font-neo-display);
  text-transform: uppercase;
  cursor: pointer;
}

.neo-add-to-cart:hover {
  background: var(--neo-pink);
  color: var(--neo-black);
}

ランディングページ：大胆な第一印象

╔══════════════════════════════════════════════════════════════╗
║                                                              ║
║  ████████  WE BUILD                                         ║
║  ████████  BOLD                                             ║
║  ████████  PRODUCTS                                         ║
║                                                              ║
║  ┌─────────────────────────────────────────────────────────┐║
║  │                                                         │║
║  │  No more boring SaaS. We create tools that              │║
║  │  stand out, work hard, and make you money.              │║
║  │                                                         │║
║  └─────────────────────────────────────────────────────────┘║
║                                                              ║
║         ╔═══════════════════════════════════════╗           ║
║         ║  → START FREE TRIAL                   ║           ║
║         ╚═══════════════════════════════════════╝           ║
║                                                              ║
╚══════════════════════════════════════════════════════════════╝

レスポンシブ対応：あらゆるサイズで大胆に

ブレークポイント	調整
モバイル（<640px）	シャドウ：3px 3px、ボーダー：2px、フォントサイズを縮小
タブレット（640-1024px）	シャドウ：4px 4px、ボーダー：3px、標準フォント
デスクトップ（>1024px）	シャドウ：6px 6px、ボーダー：4px、特大の見出し

/* Mobile-first approach */
:root {
  --neo-shadow-size: 3px;
  --neo-border-width: 2px;
}

@media (min-width: 640px) {
  :root {
    --neo-shadow-size: 4px;
    --neo-border-width: 3px;
  }
}

@media (min-width: 1024px) {
  :root {
    --neo-shadow-size: 6px;
    --neo-border-width: 4px;
  }
}

.neo-card {
  border: var(--neo-border-width) solid var(--neo-black);
  box-shadow: var(--neo-shadow-size) var(--neo-shadow-size) 0 var(--neo-black);
}

---

コンポーネントのパターン

ボタン

.neo-button {
  background: var(--neo-white);
  color: var(--neo-black);
  border: 3px solid var(--neo-black);
  box-shadow: 4px 4px 0 var(--neo-black);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-neo-display);
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.1s ease;
}

.neo-button:hover {
  box-shadow: 6px 6px 0 var(--neo-black);
  transform: translate(-2px, -2px);
}

.neo-button:active {
  box-shadow: 2px 2px 0 var(--neo-black);
  transform: translate(2px, 2px);
}

/* Primary variant */
.neo-button--primary {
  background: var(--neo-yellow);
}

/* Danger variant */
.neo-button--danger {
  background: var(--neo-red);
  color: var(--neo-white);
}

/* Ghost variant */
.neo-button--ghost {
  background: transparent;
  box-shadow: none;
}

.neo-button--ghost:hover {
  background: var(--neo-black);
  color: var(--neo-white);
  box-shadow: none;
  transform: none;
}

カード

.neo-card {
  background: var(--neo-white);
  border: 3px solid var(--neo-black);
  box-shadow: 6px 6px 0 var(--neo-black);
  padding: 1.5rem;
}

.neo-card__header {
  border-bottom: 2px solid var(--neo-black);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.neo-card__title {
  font-family: var(--font-neo-display);
  font-size: 1.25rem;
  text-transform: uppercase;
}

/* Feature card with accent color */
.neo-card--featured {
  background: var(--neo-yellow);
}

/* Highlighted state */
.neo-card--highlight {
  border-color: var(--neo-pink);
  box-shadow: 6px 6px 0 var(--neo-pink);
}

フォーム要素

.neo-input {
  background: var(--neo-white);
  border: 3px solid var(--neo-black);
  padding: 0.75rem 1rem;
  font-family: var(--font-neo-body);
  font-size: 1rem;
  width: 100%;
}

.neo-input:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--neo-black);
}

.neo-input::placeholder {
  color: #888;
}

/* Labels are bold and uppercase */
.neo-label {
  font-family: var(--font-neo-display);
  text-transform: uppercase;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Checkbox/Radio */
.neo-checkbox {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 3px solid var(--neo-black);
  background: var(--neo-white);
  cursor: pointer;
}

.neo-checkbox:checked {
  background: var(--neo-black);
}

.neo-checkbox:checked::after {
  content: '✓';
  color: var(--neo-white);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

ナビゲーション

.neo-nav {
  background: var(--neo-black);
  border-bottom: 4px solid var(--neo-black);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.neo-nav__logo {
  font-family: var(--font-neo-display);
  font-size: 1.5rem;
  color: var(--neo-white);
  text-transform: uppercase;
}

.neo-nav__links {
  display: flex;
  gap: 1.5rem;
}

.neo-nav__link {
  color: var(--neo-white);
  text-decoration: none;
  font-family: var(--font-neo-body);
  font-weight: 600;
  padding: 0.5rem 0;
  border-bottom: 3px solid transparent;
}

.neo-nav__link:hover {
  border-bottom-color: var(--neo-yellow);
}

.neo-nav__link--active {
  border-bottom-color: var(--neo-pink);
}

---

アンチパターン

アンチパターン：柔らかなシャドウ

初心者の考え：box-shadow: 0 4px 6px rgba(0,0,0,0.1) 実際：ネオブルータリズムでは、ぼかしゼロのハードシャドウを使います。 代わりに：box-shadow: 4px 4px 0 #000000

アンチパターン：グラデーション

初心者の考え：background: linear-gradient(to right, #ff5252, #ffeb3b) 実際：ネオブルータリズムはフラットです。グラデーションや色のブレンドは使いません。 代わりに：単色を1色選びます。フラットさを活かしましょう。

アンチパターン：あらゆる場所に角丸を使う

初心者の考え：すべての要素にborder-radius: 16px 実際：ネオブルータリズムでは、鋭角か最小限の角丸（最大4px）が好まれます。 代わりに：border-radius: 0または、わずかに柔らかくする場合はborder-radius: 4px

アンチパターン：細いボーダー

初心者の考え：border: 1px solid #ddd 実際：ネオブルータリストのボーダーは太く（3〜4px）、黒です。 代わりに：border: 3px solid #000000

アンチパターン：コントラストの低い色

初心者の考え：白い背景に控えめなパステルカラー 実際：ネオブルータリズムでは高いコントラストが求められます。 代わりに：白または黒の上に、鮮やかな原色（#FF5252、#FFEB3B）を使います。

アンチパターン：透明度／不透明度

初心者の考え：background: rgba(255,255,255,0.8) 実際：ネオブルータリズムでは不透明にします。透けて見える要素は使いません。 代わりに：background: #FFFFFF（不透明、アルファ値なし）

アンチパターン：ホバー時のぼかし効果

初心者の考え：ホバー時にfilter: blur(2px) 実際：ネオブルータリズムのホバー状態は、物理的な変化（移動＋シャドウの変化）で表現します。 代わりに：transform: translate(-2px, -2px)＋シャドウを強める

---

クイック判断ツリー

Is it a container element?
├── Card/Panel? → 3px black border + hard shadow
├── Section? → Full-width, solid background color
├── Modal? → Heavy shadow (8px+), thick border
└── Nav? → Black background or thick bottom border

Is it interactive?
├── Button? → Hard shadow that responds to hover/active
├── Link? → Underline or bottom border, color change on hover
├── Input? → Thick border, shadow on focus
└── Checkbox? → Thick border, solid fill when checked

Is it typography?
├── Headline? → Oversized, bold display font, uppercase optional
├── Body? → Clean geometric sans, good line height
├── Label? → Bold, uppercase, smaller size
└── Code? → Monospace, possibly with background

Is it a status indicator?
├── Success? → Green background or border
├── Error? → Red background or border
├── Warning? → Yellow background or border
└── Info? → Blue background or border

---

CSS変数テンプレート

:root {
  /* Core palette */
  --neo-black: #000000;
  --neo-white: #FFFFFF;
  --neo-cream: #F5F0E6;

  /* Primary colors */
  --neo-red: #FF5252;
  --neo-yellow: #FFEB3B;
  --neo-blue: #2196F3;
  --neo-pink: #FF4081;
  --neo-green: #4CAF50;
  --neo-orange: #FF9800;
  --neo-purple: #9C27B0;

  /* Typography */
  --font-neo-display: 'Archivo Black', 'Impact', sans-serif;
  --font-neo-body: 'Space Grotesk', 'Arial', sans-serif;
  --font-neo-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --neo-spacing-xs: 0.25rem;
  --neo-spacing-sm: 0.5rem;
  --neo-spacing-md: 1rem;
  --neo-spacing-lg: 1.5rem;
  --neo-spacing-xl: 2rem;

  /* Shadows & Borders */
  --neo-shadow-size: 4px;
  --neo-border-width: 3px;
  --neo-shadow: var(--neo-shadow-size) var(--neo-shadow-size) 0 var(--neo-black);
}

---

クイックテスト

コンポーネントに次の要素がある場合：

• ❌ シャドウにぼかしがある → ネオブルータリズムではありません
• ❌ グラデーションがある → ネオブルータリズムではありません
• ❌ 透明度／不透明度がある → ネオブルータリズムではありません
• ❌ 細い（1px）ボーダーがある → ネオブルータリズムではありません
• ❌ 柔らかい／くすんだ色がある → ネオブルータリズムではありません
• ❌ 大きな角丸（16px以上）がある → ネオブルータリズムではありません

次の要素が必要です：

• ✅ ハードシャドウ（Xpx Ypx 0 #000）
• ✅ 太いボーダー（3〜4pxの黒の実線）
• ✅ コントラストの高い色の組み合わせ
• ✅ フラットな単色
• ✅ 大胆なタイポグラフィ
• ✅ 鋭角または最小限の角丸
• ✅ 物理的なホバー／アクティブ時のフィードバック

---

アクセシビリティに関する考慮事項

大胆なスタイルでありながら、ネオブルータリズムは高いアクセシビリティを実現できます。

1. 高いコントラスト - 白または色付きの背景に黒いボーダーを組み合わせると、WCAGの基準を満たします。
2. 明確なフォーカス状態 - シャドウやボーダーの変化がはっきりとわかります。
3. 読みやすいタイポグラフィ - 大きく太いテキストはひと目で確認できます。
4. 動きに依存しない - 変形は利便性を高めるものであり、必須ではありません。

/* Ensure focus is visible */
.neo-button:focus-visible {
  outline: 3px solid var(--neo-blue);
  outline-offset: 2px;
}

/* Reduce motion if preferred */
@media (prefers-reduced-motion: reduce) {
  .neo-button {
    transition: none;
  }

  .neo-button:hover {
    transform: none;
    box-shadow: var(--neo-shadow); /* Keep shadow, skip animation */
  }
}

---

参考資料

• /references/component-library.md - すべてのネオブルータリストコンポーネントのCSS一式
• /references/color-combinations.md - コントラスト比を検証済みの色の組み合わせ
• /references/typography-pairings.md - さまざまな用途に合わせたフォントの組み合わせ
• /references/real-world-examples.md - Gumroad、Figmaなどでの実装例の分析

---

組み合わせるツール

• web-design-expert - 大胆なスタイルに沿ったブランドの方向性を決める
• color-contrast-auditor - 大胆な色を使いながらアクセシビリティを確保する
• design-system-creator - デザイントークンシステム一式を生成する
• typography-expert - 高度な書体の組み合わせを検討する

---

参考資料

以下を基にデザインリサーチを行いました：

• NN/G: ネオブルータリズムの定義とベストプラクティス
• Bejamas: ネオブルータリズムのウェブデザイントレンド
• Onething Design: ネオブルータリズムのUIトレンド
• Nestify: ネオブルータリズムの原則
• CC Creative: ブルータリズムとネオブルータリズムの比較