Webブルータリズムは、2010年代中頃に注目を集めたデジタルデザインのカウンターカルチャーです。1950〜70年代の建築様式「ブルータリズム」の武骨で生（なま）な精神をWebに投影し、装飾を排した生のHTML的外観、等幅フォント、原色の衝突を特徴とします。均質化する洗練されたUIへの反発として生まれ、現在もクリエイティブ系サイトやZ世代向けブランドで強い存在感を放っています。
Webブルータリズムとは？
Webブルータリズムは、2014年にスイス人デザイナーのPascal DevilleがBrutalist Websitesを通じてブルータリスト的デザインの収集・公開を始めたことで広く知られるようになったデジタルデザインの潮流です。名称の由来はブルータリズム建築の語源であるフランス語のbéton brut（生のコンクリート）。1950〜70年代に西洋建築で隆盛した、装飾を一切排した生の構造をそのまま見せる建築哲学を、Webの文脈で再解釈したものです。
思想の核心は「機能＞美観」。スタイルシート（CSS）を最小限に抑え、HTMLが生み出す素朴な構造をそのまま晒す姿勢は、フラットデザインやマテリアルデザインが支配するWebの均質化へのカウンターカルチャーです。青いアンダーラインのリンク、等幅フォント、白黒に原色を差し込んだ配色、意図的な非対称レイアウトが典型的な表現。UXよりもビジュアルインパクトと誠実さを優先する姿勢が際立っています。現在は「ネオ・ブルータリズム（Neo-Brutalism）」と呼ばれるより洗練された派生形へと進化しながらも、クリエイティブ系ポートフォリオやZ世代向けブランドで根強い影響力を保っています。
Webデザインにおけるブルータリズムは、2010年代半ばに主流となったWebデザインの均一化やユーザーフレンドリーなアプローチに対する反発として生まれたスタイルである。1950年代のブルータリズム建築からインスピレーションを得ており、意図的な未完成さ、粗さ、あるいは実用主義的な視覚表現を特徴とする。
主な視覚的特徴
- 色デフォルトのリンク色を想起させる青や蛍光色・原色、あるいは白と黒のみのモノクロ配色。グラデーションを排したソリッドな色使い
- 形装飾のない直角・鋭利なコーナー、要素を区切る太い黒の境界線。余計なシェイプを一切加えないシンプルな幾何学構造
- 構図グリッドを無視した要素の衝突・重複、意図的な非対称レイアウト。過密または過剰な余白も辞さない「崩し」の構成
- 書体Times New RomanなどのシステムセリフやMonospace（等幅フォント）を多用。文字サイズを意図的に破格化し、視覚的インパクトを優先する
- テクスチャテクスチャはほぼ皆無。プレーンテキスト、青いアンダーラインのデフォルトリンク、Web初期を想起させる素朴なUI要素
- インタラクションホバー時の過激な色反転、あるいはアニメーションの意図的な省略。UX（使いやすさ）よりも視覚的インパクトと表現力を優先する姿勢
配色パレット
このスタイルを象徴するカラーパレットです。実際のWebデザインやグラフィック制作の参考にお役立てください。
代表的なアーティスト・デザイナー
Pascal Deville（パスカル・ドヴィル）
スイス人デザイナー。2014年にBrutalist Websitesを立ち上げ、ブルータリスト的デザインの収集・公開を通じてWebブルータリズムという概念を初期に整理・発信した人物。同サイトで関連作品を多数収集・公開していた。
このスタイルを採用したブランド・作品
- WebCraigslist（クレイグスリスト） / 1995年創設のクラシファイド広告サイト。HTMLリンクと列で構成されたシンプルな構造はブルータリズムの古典的な実例として繰り返し参照される
- WebBalenciaga（バレンシアガ） / かつてのECサイトUIにシステムフォントと無機質なリスト配置が用いられており、ブルータリズム的な表現が見られる事例として語られることがある
- 音楽Kanye West（カニエ・ウェスト） / アルバム『Yeezus』（2013）のアートワークに、粗削りで装飾を排したブルータリスト的な美学が見出せると評されることがある
AI生成プロンプト
このスタイルのビジュアルをAIで生成するためのプロンプトです。英語版はMidjourney・Stable Diffusion向け、日本語版はGemini・Adobe Fireflyで使いやすい形式になっています。そのままコピーしてお使いください。
英語プロンプト
日本語プロンプト
Webデザインへの応用ヒント
Webブルータリズムはクリエイティブ系ポートフォリオ、現代アート・ファッションブランド、音楽レーベル、前衛的なイベント特設サイトと相性の良いスタイルです。ただし可読性やアクセシビリティが著しく低下しやすく、コンバージョン重視の一般的なECサイトやコーポレートサイトでは離脱率を高める原因になります。全面適用は難易度が高いため、見出し書体や太い境界線など一部の要素に絞ったアクセント使いがオススメ。組み合わせるならグランジやフラットデザインとの親和性が高いです。
