STYLE PROFILE

ブルータリスト・グラフィック

Brutalist Graphic Design

大きな文字とむき出しの構造を使い、加工を抑えた直接的な見た目にする表現。

見本はこの図鑑のためにAIで生成した画像です。

ブルータリスト・グラフィックの代表配色例

色コードと役割をまとめてコピーできます。

背景（`#F3F2ED`）とのコントラスト比
色	役割	比	文字に使う目安
`#161719`	文字と構造	16.00:1	本文の文字にも使える

比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。

ブルータリスト・グラフィックのプロンプト例

ブルータリスト・グラフィックでデザインしてください。大きく強調した文字、装飾を抑えて露出させた構造、少ない色で組む簡素な版面を取り入れてください。

ブルータリスト・グラフィックの主な視覚的特徴

大きく強調した文字
太い大文字の見出しを積み重ねるなど、文字の扱いを強く強調します。NN/gが例に挙げるDrudge Reportも、画像を最小限にし、文字組みを強く打ち出しています。
装飾を抑えて露出させた構造
CSSによる装飾を抑え、HTMLの素の部品や表組みの配置をそのまま見せます。素材を隠さない建築のブルータリズムにならい、コードを飾らずに示す考え方です。
少ない色で組む簡素な版面
白黒や限られた色だけで、簡素な画面を組みます。青いリンクと単色の文字だけのページは、1990年代初めのWebサイトを思わせます。

ブルータリスト・グラフィックが向いている成果物

大きな文字と露出した構造で情報を直接見せ、飾りすぎない強い告知や作品紹介を作れる。

ブルータリスト・グラフィックとは

ブルータリスト・グラフィックは、1950年代の建築のブルータリズムに着想を得た、Webを中心とするグラフィックデザインの傾向です。ウェブ・ブルータリズムとも呼ばれ、2010年代半ばに始まったとする見方があります。

わざと粗く、整えず、飾らないように見せる表現で、1990年代初めのWebサイトを思わせます。CSSによる装飾を抑え、素材であるコードを純粋なまま見せる点が、建築との最も明らかな共通点の一つとされます。

建築と同じく、作り物めいた見た目や軽さへの反発とみなされ、支持者はその正直さと大胆さを評価します。土台にあるのは、テンプレートによる型どおりのサイトから離れ、Webを正直にありのまま見せたいという考え方です。

例として、Nielsen Norman Group（NN/g）は、骨組みだけのHTML、等幅の見出し、表組みの硬い配置を持つDrudge Reportを挙げています。作例を集めたBrutalist Websitesは、この呼び名を生んだ1人とされるパスカル・デビルによるものです。その50サイトを分析した2019年の研究では、半数がポートフォリオでした。

一方で、この語は、わざと醜く混乱させる画面にも使われるようになりました。NN/gはこれを「アンチデザイン」と呼んで区別し、ブルータリズムは見た目にとどめ、情報の階層やナビゲーションを崩さないよう勧めています。

見分けるときは、次の点を確かめてみてください。