ネオブルータリズムとは？ブルータリズムとの違い・デザイン・CSS実装【2026年】

この記事の対象: 新しいデザインスタイルを取り入れたいWebデザイナー・フロントエンドエンジニア
読了時間: 約12分

太い黒枠、ぼかしゼロのソリッドシャドウ、目が覚めるようなビビッドカラー。この3要素を見たら、それがネオブルータリズムです。ミニマルで「整った」デザインの対極にあるこのスタイルは、テック系やクリエイティブ系のWebサイトを中心に採用が広がっています。

この記事では、建築のブルータリズムからWebのネオブルータリズムに至る歴史的な流れを押さえたうえで、5つの視覚的特徴、参考サイト事例、向き不向きの判断基準を整理します。記事後半では、CSSだけで実装できるカード・ボタン・フォームの3パターンをコピペ可能なコード付きでまとめています。

ブルータリズムとは──建築からWebデザインへの系譜

「ネオブルータリズム」を正確に理解するには、その源流にある建築のブルータリズムを知っておくと全体像がつかみやすくなります。名前だけ似ている別物ではなく、思想として地続きのスタイルです。

建築のブルータリズム──”生のコンクリート”の思想

ブルータリズム（Brutalism）はフランス語の「béton brut（打ち放しコンクリート）」に由来する建築思想です。1950〜1970年代にかけて世界中で広まりました。

装飾を排し、コンクリートの素材感をそのまま見せる。構造体が露出した重厚で無骨な外観が特徴です。ル・コルビュジエのユニテ・ダビタシオンや、日本では丹下健三の代々木体育館などが代表例として知られています。

根底にあるのは「美しく整えること」よりも「素材と構造を正直に見せること」を優先する姿勢です。この考え方が数十年の時を経て、Webデザインにも持ち込まれます。

Webブルータリズム──反・洗練のデザイン

2010年代後半、Web上で「Webブルータリズム」と呼ばれるデザイン潮流が現れました。装飾的なグラデーション、微妙なシャドウ、滑らかなアニメーション——当時主流だった「洗練された」UIの真逆を意図的にやるスタイルです。

システムフォントのまま、レイアウトは崩れ気味、色は原色そのまま。商業的なWebデザインに対するカウンターカルチャーとして注目を集めましたが、読みにくさすら許容するアート寄りのアプローチだったため、実用的なサイトへの採用はごく一部に限られました。

ネオブルータリズム──”使える”ブルータリズム

ネオブルータリズム（Neo-Brutalism）は、Webブルータリズムの「崩し」の美学を引き継ぎつつ、ポップな色使いとUIとしての操作性を両立させた進化形です。

「粗削りで生々しい」という根底の思想は残しながら、ユーザーが迷わず操作できる。ここが旧来のブルータリズムとの決定的な違いです。

ネオブルータリズムは「見た目のインパクト」と「実用性」の間を取ったスタイルです。この両立こそが、SaaS系のプロダクトサイトや制作会社のポートフォリオで採用が広がっている理由になっています。

ネオブルータリズムの5つのデザイン特徴

「ネオブルータリズムっぽさ」を生み出す視覚要素は、大きく5つに分類できます。

1. 太いボーダーとソリッドシャドウ

最大の識別ポイントです。要素を囲む2〜4pxの黒い枠線と、ぼかし値ゼロのソリッドなドロップシャドウがセットで使われます。

通常の box-shadow はぼかし（blur）を入れて自然な影を作りますが、ネオブルータリズムではぼかしをゼロにします。影が「塗り」のようにくっきり出るため、要素が画面から切り抜かれたような存在感が生まれます。

CSSで書くと box-shadow: 6px 6px 0 #000; のように、3番目の値（blur-radius）を 0 にするだけ。特別なテクニックは不要で、この1行だけでネオブルータリズムの空気が出ます。

2. ビビッドカラーの大胆な配色

パステル〜高彩度のカラーを広い面積で使います。定番のカラーパレットは次のとおりです。

背景色をセクションごとに切り替えて、スクロールするたびに色が変わるダイナミックな構成もネオブルータリズムの定番パターンです。

ポイントは背景がビビッドでもテキストは黒にすること。黄色やライムグリーンの上に白文字を載せるとコントラスト比が不足し、読めなくなります。

3. モノスペース（等幅）フォント

見出しや本文にCourier、JetBrains Mono、Space Monoなどの等幅フォントを使うケースが多いです。テック感と「粗削りな手作り感」を同時に演出できます。

日本語サイトで取り入れる場合は、英字部分だけにモノスペースフォントを適用し、日本語は通常のゴシック体を使うのが実用的です。全文をモノスペースにすると日本語の可読性が大幅に下がるので注意してください。

font-family の指定で英字フォントを先に書き、日本語フォントをフォールバックに置くだけで実現できます。

font-family: 'JetBrains Mono', 'Noto Sans JP', sans-serif;

4. 余白の極端な緩急

ネオブルータリズムでは余白のサイズに大きな緩急をつけます。セクション間は広く空けて余裕を持たせる一方、テキストがボーダーぎりぎりに詰められていたりします。この「余白のメリハリ」が、整然としたグリッドデザインとの印象差を生む要因です。

5. 不揃い・重なりのあるレイアウト

グリッドに厳密に従わず、カードが少しだけ傾いていたり、要素同士が重なり合ったりする配置です。堅い印象になりがちなUIに人間味と遊び心を加える要素で、ネオブルータリズムの「計算された崩し」を象徴しています。

ただし「崩す」にはベースとなるグリッドが先に必要です。整った骨格の上で意図的に外すからこそ「計算された崩し」になるのであって、最初から無秩序に配置すると単に散らかった印象になります。

ネオブルータリズムの参考サイト事例

ネオブルータリズムが実際のWebサイトでどう使われているか、用途別に見ていきます。

SaaS・プロダクト系サイト

テック系スタートアップのプロダクトサイトで、ネオブルータリズムの採用が目立ちます。太い黒枠のカードで機能一覧を見せ、ソリッドシャドウのCTAボタンで「押せる感」を演出する構成が定番です。

この手法がSaaS系で好まれるのは競合との差別化が目的です。ほとんどのSaaSサイトが採用するミニマルなUIとは明確に印象が異なるため、ファーストビューの時点で記憶に残ります。ヘッダーのナビゲーションにもソリッドシャドウのボタンを配置し、サイト全体でスタイルを統一しているケースが多いのも特徴です。

デザインスタジオ・制作会社

制作会社のポートフォリオやスタジオ紹介にネオブルータリズムを使うと、「攻めたデザインができるチーム」という印象を直接伝えられます。

黄色×黒のハイコントラスト配色にモノスペースフォントを組み合わせ、実験的な姿勢を視覚で表現するパターンが代表的です。実績紹介のカードにソリッドシャドウを付け、ホバーで影が動くインタラクションを加えると、デザイン力の証明にもなります。

制作会社サイト全般のデザインポイントについては以下の記事でも解説しています。

リニューアルガイド コーポレートサイトの参考事例8選｜デザインと構成のポイント【2026年】 コーポレートサイトを作り直したい。でも自社にどんなデザインが合うのか、構成はどこまで必要なのか、判断材料が少ない——こんな状態で制作会社に相談しても、提案の…

個人ポートフォリオ

デザイナーやエンジニアのポートフォリオで採用するケースも増えています。テンプレートの既視感を避けつつ、採用担当者やクライアントの記憶に残ることを狙えるスタイルです。

背景色をセクションごとにビビッドに切り替え、プロジェクト紹介のカードにホバーアニメーションを付ける構成が多く見られます。ポートフォリオはデザイナー自身のブランディングでもあるため、サイトの方向性を決める前にブランディング設計を整理しておくと、スタイルの選択に一貫性が出ます。

エンタメ・ゲーム系

ゲームやエンタメ系のランディングページでも親和性が高いスタイルです。ピクセルアートやレトロゲーム風のイラストとネオブルータリズムのUIを組み合わせると、ターゲットとなる若い世代に刺さるポップさを出せます。

ネオブルータリズムを取り入れたWebサイトの実例は、Soreiine!!ギャラリーで確認できます。

費用・相場 ノーコードなら安い？ホームページ制作会社との費用の違い【2026年】 StudioやWix、Shopifyといったノーコードツールが広く使われるようになり、「コードを書かなくてもホームページが作れる」時代になった。制作会社に頼…

ネオブルータリズムが向くサイト・向かないサイト

ネオブルータリズムはインパクトのあるスタイルですが、万能ではありません。業種・ターゲット・コンテンツの性質に合わせた判断が必要です。

向いているサイト

向かないサイト

金融や医療では「信頼感」がデザインの最優先事項です。これらの業種に適したデザインについては「医療・クリニックのホームページ制作事例と必須コンテンツ【2026年版】」で紹介しています。

判断に迷ったときは、ターゲットユーザーの年齢層と業界が求めるトーンの2軸で考えてください。若年層向け×カジュアルな業界ならネオブルータリズムは有力な選択肢になります。

可読性とアクセシビリティの落とし穴

ネオブルータリズムを採用する際に見落とされがちなのが、可読性とアクセシビリティへの影響です。見た目のインパクトを優先するあまり、ユーザビリティを犠牲にしてしまうケースがあります。

コントラスト比の問題。ビビッドなカラーを背景に使うと、テキストとのコントラスト比がWCAG基準（4.5:1以上）を下回ることがあります。黄色（#fef08a）やライムグリーン（#a3e635）の上に白文字を載せると確実にコントラスト不足です。ネオブルータリズムでは背景がどんなに明るくても文字色は黒が原則です。

フォーカスインジケータの消失。outline: none でデフォルトのフォーカスリングを消す実装をよく見かけますが、代替の視覚フィードバックがなければキーボード操作のユーザーがフォーカス位置を見失います。ソリッドシャドウの変化や背景色の切り替えなど、ネオブルータリズムらしい方法でフォーカス状態を示せるので、必ず代替を用意してください。

長文コンテンツとの相性。モノスペースフォントや極端な余白は、ボタンやカードといった短いUIテキストには効果的ですが、ブログ記事やドキュメントのような長文では読み疲れの原因になります。本文エリアは通常のフォントと余白に戻し、ネオブルータリズムのスタイルはUI要素（カード・ボタン・ナビゲーション）に限定するのが実用的な落としどころです。

ネオブルータリズムをCSSで実装する方法

ネオブルータリズムの基本スタイルは、特別なライブラリなしでCSSだけで実装できます。カード・ボタン・フォームの3パターンを、そのままコピーして使える形で紹介します。

共通の設計方針

3パターンに共通するポイントを先に整理します。

• border: 2〜4pxの黒い実線
• box-shadow: ぼかし（blur）は 0、オフセット4〜8px
• border-radius: 0（角丸なし）
• font-family: モノスペースフォントを指定
• ホバー/フォーカス時: シャドウを縮めつつ transform: translate で同量ずらす

この5つを揃えるだけで、どの要素にもネオブルータリズムの質感が出ます。色やシャドウのサイズはCSS変数（カスタムプロパティ）で一括管理すると、テーマカラーの変更が楽になります。

:root {
  --neo-border: 3px solid #000;
  --neo-shadow: 6px 6px 0 #000;
  --neo-shadow-hover: 2px 2px 0 #000;
  --neo-font: 'JetBrains Mono', 'Noto Sans JP', monospace;
  --neo-yellow: #fef08a;
  --neo-green: #a3e635;
  --neo-pink: #f472b6;
}

カードコンポーネント

<div class="neo-card">
  <h3 class="neo-card__title">カードの見出し</h3>
  <p class="neo-card__text">説明文が入ります。太い黒枠とソリッドシャドウで存在感を出します。</p>
</div>

.neo-card {
  background: var(--neo-yellow, #fef08a);
  border: var(--neo-border, 3px solid #000);
  box-shadow: var(--neo-shadow, 6px 6px 0 #000);
  padding: 24px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.neo-card:hover {
  box-shadow: var(--neo-shadow-hover, 2px 2px 0 #000);
  transform: translate(4px, 4px);
}

.neo-card__title {
  font-family: var(--neo-font);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px;
}

.neo-card__text {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

実装のポイント: ホバー時にシャドウを小さくしつつ transform: translate で要素を同じ量だけ移動させると、カードが「押し込まれる」触感になります。シャドウの減少分（6→2で4px）とtranslateの移動量（4px）を一致させるのがコツです。ずれると影の端が飛び出して不自然になります。

ボタンコンポーネント

<button class="neo-btn">送信する</button>
<button class="neo-btn neo-btn--pink">詳しく見る</button>

.neo-btn {
  background: var(--neo-green, #a3e635);
  color: #000;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 12px 28px;
  font-family: var(--neo-font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.neo-btn:hover {
  box-shadow: 1px 1px 0 #000;
  transform: translate(3px, 3px);
}

.neo-btn:active {
  box-shadow: 0 0 0 #000;
  transform: translate(4px, 4px);
}

.neo-btn--pink {
  background: var(--neo-pink, #f472b6);
}

:active 状態でシャドウを完全に消し、ボタンが完全に「押し切られた」状態を作ります。物理的なボタンを押したときの手応えを画面上で再現する仕組みです。色違いのバリエーションは修飾クラスで管理すると、色数が増えても一貫性を保てます。

フォーム（入力フィールド＋テキストエリア＋送信ボタン）

カードやボタン単体ではなく、フォーム全体をネオブルータリズムで統一した例です。お問い合わせフォームやサインアップフォームにそのまま使えます。

<form class="neo-form">
  <label class="neo-form__label" for="name">お名前</label>
  <input class="neo-form__input" type="text" id="name"
         placeholder="山田 太郎">

  <label class="neo-form__label" for="email">メールアドレス</label>
  <input class="neo-form__input" type="email" id="email"
         placeholder="mail@example.com">

  <label class="neo-form__label" for="message">メッセージ</label>
  <textarea class="neo-form__input neo-form__textarea"
            id="message" rows="4"
            placeholder="お問い合わせ内容"></textarea>

  <button class="neo-btn" type="submit">送信する</button>
</form>

.neo-form {
  max-width: 480px;
}

.neo-form__label {
  display: block;
  font-family: var(--neo-font);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.neo-form__input {
  width: 100%;
  background: #fff;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 12px 16px;
  font-family: var(--neo-font);
  font-size: 1rem;
  outline: none;
  margin-bottom: 20px;
  box-sizing: border-box;
  transition: box-shadow 0.15s, transform 0.15s;
}

.neo-form__input:focus {
  box-shadow: 2px 2px 0 #000;
  transform: translate(2px, 2px);
  background: #fef9c3;
}

.neo-form__textarea {
  resize: vertical;
}

アクセシビリティの注意: outline: none を指定しているため、背景色の変化（白→淡い黄色）とシャドウの動きでフォーカス状態を視覚的に示しています。この2つの代替フィードバックがなければ、キーボードユーザーがどのフィールドを選択しているかわからなくなります。outline: none を書くなら代替は必須です。

対応ブラウザ

上記のコードは box-shadow、transform、transition、CSS変数のみで構成しています。Chrome、Firefox、Safari、Edgeの現行バージョンであれば問題なく動作します。CSS変数を使わない書き方（値を直接指定）にすれば、より古いブラウザにも対応可能です。

実装Tips

border-radius は使わないのがネオブルータリズムらしさを保つコツです。角丸を入れると一気にソフトな印象になり、ネオブルータリズムの「硬さ」が消えます。意図的に border-radius: 0 にしておきましょう。

レイアウトを組むときはCSS Gridの実践パターンをベースにしつつ、一部のカードだけ transform: rotate(-2deg) で傾ける、要素同士を margin のマイナス値で重ねるといった「崩し」を足すと、ネオブルータリズムらしい不揃いさが出ます。

ネオブルータリズムのカードを並べるとき、コンテンツ幅を広めに取ると余白の緩急が活きやすくなります。最大幅1280px程度を基準に、セクションごとに背景色を全幅で切り替えると、ダイナミックな構成を作れます。

よくある質問

ネオブルータリズムとブルータリズムの違いは？

ネオブルータリズムは、Webブルータリズムの「粗削りな美学」を引き継ぎつつ、ポップな色使いとUIとしての操作性を両立させたスタイルです。ブルータリズムが読みにくさすら許容するアート寄りのアプローチだったのに対し、ネオブルータリズムはユーザーが迷わず操作できることを前提にしています。

ネオブルータリズムのCSSの書き方は？

基本は3つのプロパティです。border: 3px solid #000 で太い黒枠、box-shadow: 6px 6px 0 #000 でぼかしゼロのソリッドシャドウ、border-radius: 0 で角丸なし。ホバー時にシャドウを縮めて transform: translate で同量ずらすと、押し込まれるような操作感も再現できます。

ネオブルータリズムはどんなサイトに向いている？

テック系・SaaS、デザインスタジオ、個人ポートフォリオ、若年層向けサービス、ゲーム・エンタメ系との相性が良いスタイルです。「革新的」「遊び心がある」という印象を視覚で伝えたいサイトに向いています。

ネオブルータリズムが向かない業種は？

金融・保険、医療・クリニック、高級ブランド、行政・官公庁には向きません。これらの業種では信頼性・安心感・エレガンスがデザインの最優先事項であり、ネオブルータリズムのポップで粗削りな印象とは方向性が合いません。

ネオブルータリズムでアクセシビリティを確保するには？

ビビッドな背景色の上には黒文字を使い、WCAGが定めるコントラスト比4.5:1以上を確保してください。outline: none でフォーカスリングを消す場合は、背景色やシャドウの変化で代替のフォーカスインジケータを用意します。モノスペースフォントは長文には使わず、ボタンやカードなどのUI要素に限定するのが実用的です。

まとめ

ネオブルータリズムの要点を整理します。

• 建築のブルータリズムを源流に持ち、Webブルータリズムを「使える」方向に進化させたデザインスタイル
• 太い黒枠 × ソリッドシャドウ × ビビッドカラーが3大要素
• テック系・クリエイティブ系・個人ポートフォリオとの相性が良い
• 金融・医療・高級ブランドなど信頼性重視の業種には向かない
• コントラスト比・フォーカスインジケータ・長文の可読性は要注意
• CSSの border・box-shadow・transform だけで基本スタイルは実装可能
• border-radius: 0 と blur: 0 がネオブルータリズムらしさを保つ鍵

デザインの参考事例はSoreiine!!ギャラリーで探せます。