ネオブルータリズムとは？UIでダサく見せない配色・影の設計ルール5選

こんにちは！UIデザイナーのYunyです。

整然としたミニマルデザインが定着した一方で、「どのWebサイトも同じように見えてしまう」という課題を感じる場面が増えています。
差別化を図るひとつのアプローチとして、太い枠線やビビッドな配色が目を引くネオブルータリズムを取り入れる事例を、個人的にも目にする機会が増えてきた印象です。

しかし、単にパーツの周りに黒い枠線を引いただけでは、昭和の古いWebページのような野暮ったい印象に陥りがちです。
ネオブルータリズムを洗練されたモダンUIに昇華させるには、計算された余白や影の角度、配色の規律が欠かせません。

1. ネオブルータリズム（Neo-Brutalism）とは？建築思想から現代UIへの進化

1-1. 本家ブルータリズムとネオブルータリズムの違い

ネオブルータリズムのルーツは、1950年代に生まれた建築様式「ブルータリズム（Brutalism）」にあります。
フランス語の「ベトン・ブリュット（生のコンクリート）」を語源とし、装飾を排除して素材のありのままの質感や構造をむき出しにする思想でした。

この思想は1990年代から2000年代にかけて、初期のインターネット空間において「Webブルータリズム」として現れました。
スタイルシートを適用しない生HTMLやプレーンテキスト、意図的な崩しなど、あえて使いやすさを無視した実験的な表現が多く見られました。

一方、現代の「ネオブルータリズム（Neo-Brutalism）」は、かつての荒削りな質感を受け継ぎながらも、現代の使いやすさ（UX）やアクセシビリティを損なわないよう洗練させた進化形です。
※一部では「ネオブュータリズム」と表記されるケースもありますが、デザイン用語としてはネオブルータリズムが正確な呼称です。

1-2. なぜ今、ネオブルータリズムが注目されているのか？

近年、ネオブルータリズムが大きな支持を集めている背景には、「過度に整いすぎたミニマリズムへの飽き」があります。
フラットデザインやグラスモーフィズムが普及した結果、清潔感はあるものの、どのプロダクトも似通った無難な印象を与えるようになりました。

そこに強烈なインパクトをもたらしたのが、デジタルコンテンツ販売プラットフォームGumroad（ガムロード）の大胆なリブランディングでした。
鮮明な太枠とビビッドな配色、ぼかしのない影を組み合わせた画面は、クリエイターエコノミーの熱量と見事に合致し、世界中のデザイナーに衝撃を与えました。

さらにデザインツール大手のFigmaも、キャンペーンサイトや各種コミュニティ施策においてネオブルータリズムの要素を積極的に採用しています。
情報の境界線をはっきりと示しつつ、どこか親しみやすいレトロフューチャーな質感を生み出せる点が、先進的なテック企業で選ばれる理由です。

2. 「単に黒い太枠をつけただけ」がダサくなる3つの原因

ネオブルータリズムの流行を見て、とりあえず黒い太枠や原色を取り入れたものの、「なぜか素人が作ったような野暮ったいデザインになってしまう」と悩むケースは少なくありません。
魅力的な作例とダサく見えてしまうUIの間には、決定的な構造上の違いが存在します。

2-1. 原因1：内側余白（Padding）の不足による窮屈さ

ネオブルータリズムを取り入れようとして最も多い失敗が、コンポーネントの内側余白が狭すぎることです。
太い黒枠は、通常の境界線（1pxの薄いグレー線）に比べてはるかに強い視覚的な重み（質量）を持っています。

通常のUIと同じ感覚で内側余白を設定してしまうと、文字やアイコンが太枠に押し込められたように見えてしまいます。
その結果、モダンな抜け感が消え去り、昭和時代の印刷物や古いHTMLテーブルのような窮屈さが強調されてしまいます。

2-2. 原因2：彩度100%の原色同士が画面内で衝突している

2つ目の原因は、画面全体に派手な原色を無秩序に散りばめてしまうことです。
ネオブルータリズムの作例で見かける蛍光イエローやシアン、ピンクを一度に画面へ配置すると、重大な視線誘導の崩壊を招きます。

有彩色の主張が強すぎると、ユーザーは何を最初に見ればよいのか判断できなくなり、視界全体がチカチカして強い疲労感を与えてしまいます。
すべてを強調しようとした画面は、結果として何も強調されていない画面と同じになり、本来押してほしいボタンが埋もれてしまいます。

2-3. 原因3：影（オフセットシャドウ）の向きと距離の不一致

3つ目の原因は、カードやボタンごとに落ちている影の向きや距離がバラバラになっていることです。
一般的なぼかしのある柔らかいドロップシャドウであれば、多少のズレがあっても自然な奥行きとして馴染みます。

しかし、ネオブルータリズムで用いる「ぼかしゼロの硬い影（Hard Shadow）」は、境界線がシャープなため光源の矛盾が瞬時に目立ちます。
あるカードは右下に影が落ち、別のボタンは真下に落ちているといった状態になると、画面全体の整合性が一瞬で損なわれます。

3. 洗練されたネオブルータリズムに仕上げる「5つの設計ルール」

ネオブルータリズムを現代のプロダクトとして成立させるためには、感覚的なデザインではなく「明確な数値基準」を設けることが不可欠です。
ここでは、破綻を防ぎながら洗練された質感を生み出すための5つの基本ルールを解説します。

3-1. ルール1：枠線の太さをプロダクト全体で統一し、角丸ポリシーを固定する

画面をスタイリッシュに引き締める第一の基準は、画面全体の枠線の太さをソリッドブラックで統一することです。
WebやUIの実務では、線が埋もれず主張しすぎない目安として2px〜3px程度が採用されるケースが多く見られます。太さが画面内でバラバラになると一気に雑然とした印象を与えるため、主要パーツの線幅は厳格に揃えます。

また、枠線と同じくらい重要なのが角丸（Corner Radius）のポリシーを1つに固定することです。
完全な直角にして硬派な建築美を強調するか、あえて小さな角丸をつけて親しみやすいポップさを出すか、プロダクト全体で統一します。

/* 直角スタイルのカード枠線 */
.brutal-card-sharp {
  border: 3px solid #000000;
  border-radius: 0px;
}

/* ポップスタイルのカード枠線 */
.brutal-card-rounded {
  border: 3px solid #000000;
  border-radius: 12px;
}

3-2. ルール2：ぼかしゼロのオフセットシャドウで光源を統一する

ネオブルータリズムの立体感を象徴するのが、ぼかし（Blur）を一切入れないオフセットシャドウです。
一般的な設定例としては、横方向・縦方向にそれぞれ4px程度オフセットさせ、ぼかしを0pxにするソリッドブラック指定がよく使われます。

すべてのコンポーネントで「左上から光が当たり、右下へ一定の距離だけずれた影が落ちる」という物理法則を揃えます。
これにより、切り絵をペタペタと貼り合わせたような心地よい立体感が画面全体に宿ります。

/* 基準となるネオブルータリズムのオフセットシャドウ */
.brutal-shadow {
  box-shadow: 4px 4px 0px #000000;
}

/* ホバー時にさらに浮き上がる強調シャドウ */
.brutal-shadow:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000000;
}

3-3. ルール3：60-30-10の法則で組む「ペーパー地 × アクセント」配色

画面の散らかりを防ぐ鍵は、配色の面積比率を厳密にコントロールすることです。
背景に完全な純白（#FFFFFF）を使うと黒枠のコントラストが強すぎて目が痛くなるため、ベースには淡いクリーム系のペーパーカラーを採用します。

配色の黄金比率として知られる「60-30-10の法則」をネオブルータリズムに応用すると、以下のようなバランスになります。
アクセントカラーは複数の色を混ぜず、1〜2色に厳選して最も重要なCTAボタンやバッジだけにピンポイントで使用します。

• ベースカラー（60%）: 生成り色や淡いペーパーカラー（#FDFBF7、#F5F5ED など）
• サブカラー（30%）: カード背景の白（#FFFFFF）や枠線・文字の黒（#000000）
• アクセントカラー（10%）: 鮮やかなイエロー（#FFE600）やライム、パープルなどの高彩度色

UIにおける配色のバランスや有彩色・無彩色の使い分けについては、こちらの記事でも詳しく解説しています。

【60-30-10の法則】アクセントカラーの使いすぎを防ぐUI配色の黄金比率

UIデザインで「色が多すぎて散らかる」「どこを目立たせればいいか迷う」悩みを解消する60-30-10の配色黄金ルールを解説します。

3-4. ルール4：ジャンプ率を高めた幾何学的タイポグラフィ

ネオブルータリズムの太い枠線に負けないためには、フォントの太さとジャンプ率（見出しと本文のサイズ比率）を大胆に設定します。
見出しには骨太なジオメトリック・サンセリフ（InterのBlackやPlus Jakarta Sans、Dela Gothic Oneなど）を選定し、圧倒的な存在感を持たせます。

さらに、補足テキストやステータスラベルの一部に等幅フォント（Monospace）を組み合わせると、開発者ツールのような知的で無骨なスパイスが加わります。
本文のフォントサイズが16pxであれば、大見出しは40〜48px以上に設定し、一目で階層が分かるコントラストを作ります。

3-5. ルール5：太枠の圧迫感を逃がす「通常より一段広い余白」

太枠の圧迫感を解消する決定打が、通常UIの1.3〜1.5倍程度を目安に広げた贅沢な余白設計です。
自分自身、初めてネオブルータリズムでカードを組んだときは、文字が黒枠に触れそうなほど窮屈になって失敗しました。

通常のカードUIで内側パディングを設定している場合、ネオブルータリズムでは思い切って一段階広く余白を取る（例: 16pxなら24px程度へ拡大）ことが推奨されます。
周囲の余白を十分に確保することで、太い線が「邪魔な枠」から「要素を際立たせるフレーム」へと役割を変え、洗練された開放感が生まれます。

4. Figmaで組むネオブルータリズムUIの実践ステップ

4-1. Auto LayoutとStroke（線の位置）の初期設定

Figmaでネオブルータリズムのコンポーネントを作成する際は、Auto Layoutのプロパティ設定から始めます。
新しいフレームを作成し、Auto Layoutを適用した上で、以下の数値を割り当てます。

• Padding（内側余白）: 左右28px / 上下20px（ボタンなら左右24px / 上下14px）
• Gap（要素間余白）: 16px
• Stroke（線）: 太さ 3px、カラー #000000、位置は必ず Inside に指定

線の位置を Outside や Center にしてしまうと、Auto Layoutのバウンディングボックスの外側に線がはみ出し、隣り合う要素との位置合わせがずれる原因になります。
常に Inside を指定しておくことで、CSSの box-sizing: border-box; と一致した破綻のない実装連携が可能になります。

4-2. Drop Shadow効果のスタイル登録

次に、要素に硬い影を付加します。
Figmaの右側パネルにある「Effects」から「Drop Shadow」を追加し、設定アイコンをクリックしてぼかし（Blur）を0にします。

• X（水平方向）: 4
• Y（垂直方向）: 4
• Blur（ぼかし）: 0
• Spread（拡大）: 0
• Color: #000000、不透明度 100%

この設定をエフェクトスタイル（またはFigma Variables）に「Elevation/Hard-4px」として保存しておけば、チーム全体で統一した影を即座に呼び出せます。

4-3. ホバー・アクティブ時の押し込みインタラクション設計

ネオブルータリズムの真骨頂は、ボタンを押したときの「物理的な押し込み感（Click/Press）」です。
Figmaのコンポーネントバリアントを使って、3つの状態（Default, Hover, Active）を作成します。

ボタンを押した瞬間に「影が消え、影のオフセット量と同じ距離だけボタン本体が右下へ移動する」ように数値を設計します（影が4pxなら移動量も4px）。
これにより、まるで本物のプラスチック製スイッチを指先でカチッと押し込んだような、小気味よいフィードバックが完成します。

ボタンのサイズ基準やタップ領域のアクセシビリティについては、こちらのガイド記事もあわせて参考にしてください。

ボタンのUIデザイン設計ガイド｜Primary・Secondary優先度と44pt基準

UIボタンの優先度設計から44ptのタップ領域基準、ホバー・アクティブ等の状態管理までを体系的にまとめた実践ガイドです。

5. ネオブルータリズムの適正判断｜どこに使い、どこで避けるべきか？

5-1. 効果的なプロダクトと領域

ネオブルータリズムは強烈な個性を放つため、ブランドの世界観や差別化が成果に直結する領域で絶大な効果を発揮します。
以下のようなシーンでは、退屈な競合サービスを一歩リードする強力な武器になります。

• クリエイターエコノミー・クリエイティブ系SaaS: Gumroadのように、自由で実験的な空気感を好むユーザー層に強く刺さります。
• ポートフォリオサイト: デザイナー自身の個性や遊び心をアピールし、採用担当者の記憶に強く残せます。
• 開発者向けツール・テック系コミュニティ: 無骨な等幅フォントや構造むき出しのスタイルが、エンジニア文化と親和性を持ちます。
• イベントLP・キャンペーンサイト: タイムライン上でスクロールするユーザーの手を止め、高いクリック率を生み出します。

5-2. 避けるべきプロダクトと領域

一方で、ネオブルータリズムの強いコントラストやポップさは、「心理的な安心感」や「極端な情報密度」が最優先されるサービスには適していません。
デザインシステムによってはアクセント程度に導入されるケースもありますが、基本的には無彩色を中心とした落ち着いた設計が推奨されます。

• 金融・証券・保険サービス: ユーザーが自分のお金を預ける場面では、実験的な楽しさよりも「堅実さ」と「絶対的な信頼」が求められます。
• 医療・ヘルスケアアプリ: 不安を抱えた患者や高齢者が利用するため、強い黒枠や原色は刺激が強すぎて不快感を与えるリスクがあります。
• 高密度なBtoBデータテーブル・業務基幹システム: 1画面に数百行のデータを凝縮して表示する画面では、太い枠線と硬い影が視覚的ノイズになり、業務効率を低下させます。

プロダクトの目的やユーザー心理を冷静に見極め、「機能性を損なわない範囲でどこまで崩せるか」を判断することが大切です。

6. 優れた活用事例とインスピレーション

6-1. FigmaのプロモーションUIとコミュニティ

UIデザイナーにとって最も身近で見覚えがある代表例が、デザインツール大手のFigmaです。
Figmaは、年次カンファレンス「Config」の特設サイトや公式ブログ、コミュニティページなどのマーケティング領域において、ネオブルータリズムの要素を巧みに取り入れています。

ツール本体のキャンバスやエディタ画面は、作業の邪魔にならないよう極めてクリーンなミニマルUIを貫く一方で、イベントやプロモーションの場では太い黒枠や鮮やかなカラー、硬い影を大胆に活用してブランドの熱気と遊び心を伝えています。
このように、「作業ツール本体」と「マーケティング・コミュニティ領域」でトーンを意図的に切り分けるアプローチは、実務で自社プロダクトにネオブルータリズムを取り入れる際にも大いに参考になります。

6-2. Gumroad（ガムロード）

ネオブルータリズムを現代の代表的UIスタイルとして世界に定着させた原点とも言えるのが、クリエイター向け決済プラットフォームのGumroadです。
創業者のSahil Lavingia氏が公開した公式アナウンス「Introducing the new Gumroad」（2021年11月）を皮切りに、同社は従来の無難なSaaSデザインから、太い黒枠と硬い影、鮮やかなネオンカラーを前面に押し出した大胆なリブランディングを敢行しました。

現在稼働しているGumroad公式サイトでも、ボタンやカードの「ソリッドな黒枠」「ホバー時の押し込み移動（translate）と硬い影（shadow）」の実装を直接体験できます。
単なる奇抜さにとどまらず、購入フローやダッシュボードの数値確認は極めてスムーズに行えるよう情報設計が徹底されており、「個性的でありながら、決済時の迷いを生じさせない」という実用ネオブルータリズムの教科書的な成功事例です。

次のステップ：あわせて深掘りしたい知見

ネオブルータリズムのように、既存の枠組みに囚われない独自の世界観を設計する上では、他のデザイントレンドや設計理論の知見も役立ちます。
現代のWeb/UIトレンドを多角的に把握するために、以下の記事もぜひあわせてご覧ください。

設計図のような緻密な構造美を表現するブループリントデザインの設計手法については、こちらの記事で体系的にまとめています。

【2026年最新】ブループリントデザイン（Blueprint Design）とは？設計図風UIの特徴・作り方と活用事例

WebやUIで注目されるブループリントデザインの特徴、グリッド設計、配色パターン、実務での活用事例を徹底解説します。

2000年代初頭のポップカルチャーを現代のUIへと再解釈するY2Kデザインの作り方については、こちらで詳しく紹介しています。

【2026年最新】Y2Kデザインとは？特徴・素材・フォントと現代UX/UIでの作り方

Y2Kデザインの歴史的背景から、特徴的なグラフィック素材、配色、フォント選定、現代のUX/UIでの取り入れ方までを解説します。

7. まとめ：秩序ある設計原則がネオブルータリズムの実用性を支える

ネオブルータリズムは、一見すると直感的でラフなスタイルに見えますが、その実態は「緻密な余白計算と徹底した配色のコントロール」によって支えられています。
単に奇抜さを狙うのではなく、統一された太枠、光源の揃った硬い影、そして十分な内側余白を確保することで、視覚的なインパクトと高い操作性を両立できます。

まずはプロトタイプやサイドプロジェクトのボタン1つから、ぼかしゼロの影とシンプルな黒枠を取り入れ、プロダクトの世界観に合わせた最適なバランスを検証してみてください。