STYLE PROFILE
ネオブルータリスト・グラフィック
Neobrutalism
鮮やかな色、太い枠、硬い影で、簡単な図形を強く区切る表現。
ネオブルータリスト・グラフィックの代表配色例
| 色 | 役割 | 比 | 文字に使う目安 |
|---|---|---|---|
#181A1D | 文字と構造 | 15.25:1 | 本文の文字にも使える |
#F2CF45 | 主色 | 1.33:1 | 文字には向かない |
#78BBC5 | 強調色 | 1.89:1 | 文字には向かない |
比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。
ネオブルータリスト・グラフィックのプロンプト例
ネオブルータリスト・グラフィックでデザインしてください。太くはっきりした輪郭と枠、鮮やかな色面と強いコントラスト、ずらして付けた硬い影を取り入れてください。
ネオブルータリスト・グラフィックの主な視覚的特徴
- 太くはっきりした輪郭と枠
部品を太い枠で囲み、角ばった形と実線で画面を区切ります。グラデーションや影に頼らずに、線そのものでまとまりをつくるためです。
- 鮮やかな色面と強いコントラスト
原色のような鮮やかな色を、コントラストの強い組み合わせで使います。目を引く色で、大事な機能や部品を目立たせるためです。
- ずらして付けた硬い影
柔らかい影の代わりに、黒など1色の影を数ピクセルずらして付けます。むき出しの粗い見た目を保ったまま、奥行きを加えるためです。
ネオブルータリスト・グラフィックが向いている成果物
太い枠と硬い影で情報のまとまりを明快に区切り、鮮やかな色の中でも見出しや操作の位置を示せる。
ネオブルータリスト・グラフィックとは
ネオブルータリスト・グラフィックは、UIのビジュアルデザインの傾向「ネオブルータリズム」に当たる表現で、英語ではneubrutalismとも書かれます。従来のブルータリズムから発展したもので、洗練されたミニマルなデザインへの反動として現れました。
高いコントラスト、ブロック状の配置、鮮やかな色、太い枠、わざと「磨き上げない」要素を特徴とします。ブルータリズムに1990年代のグラフィックデザインを懐かしむ要素を合わせたもので、Webのブルータリズムより色が多く、整った画面になりやすい点が異なります。
影は柔らかく重ねたものではなく、たとえば4pxずらした黒一色の影のように、硬くはっきりしたものを使います。Windows 98風のボタンや等幅の書体など、初期のデジタル画面を思わせる要素を取り入れることもあります。
例として、Figmaのブランドの刷新や、独立したクリエイター向けのECプラットフォームGumroadが挙げられ、どちらも高いコントラストの鮮やかな色と粗い要素を取り入れています。
一方で、釣り合いを欠くと利用者を圧倒し、アクセシビリティを損なうことがあります。Nielsen Norman Groupは、文字のコントラストを基準に合わせること、色を2〜3色に絞ること、本文には癖のない読みやすい書体を使うことを勧めています。
見分けるときは、次の点を確かめてみてください。
- 部品が太くはっきりした輪郭や枠で区切られている
- 鮮やかな色面が強いコントラストで並んでいる
- ぼかしのない硬い影が、ずらして付けられている
これらが揃っていると、ネオブルータリスト・グラフィックの特徴を持っていると言えるでしょう。
色数を絞り、装飾をほとんど加えないものは、ブルータリスト・グラフィックに近い表現です。
実例を見る
Google画像検索で「ネオブルータリスト・グラフィック」を見る（新しいタブで開きます）検索結果の画像はこの図鑑には保存しません。出典
- Neobrutalism: Definition and Best Practices（新しいタブで開きます）Nielsen Norman Group
名称・説明・主な視覚的特徴と「ネオブルータリスト・グラフィックとは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集：小林 秀樹（セカヤサAIブログ）
