ブルータリズムWebサイトを見ていると、ときどき「ネオブルータリズム」という言葉に出会います。
私はこれまでブルータリズムをかなり見てきましたが、ネオブルータリズムについては、正直なところ曖昧なままでした。
実際に調べて最初に感じたのは、
思っていたより、ずっとポップ。
ということ。
太い境界線、鮮やかな色、くっきりとした影、大きなボタン。
私がブルータリズムという言葉から想像していた、無骨で荒々しいWebサイトとはかなり違って見えます。
では、ネオブルータリズムとは何なのでしょうか。
今回はブルータリズムとの違いを決めるのではなく、まずネオブルータリズムそのものを調べてみます。
ネオブルータリズムとは
ネオブルータリズム（Neo-Brutalism / Neubrutalism）は、近年のWebデザインやUIデザインで使われているスタイルのひとつです。
特徴的なのは、一般的なWebデザインなら少し馴染ませたり、柔らかく見せたりする部分を、かなりはっきりと見せることです。
UIの輪郭を隠さない
カードならカード。
ボタンならボタン。
入力欄なら入力欄。
ネオブルータリズムでは、それぞれの要素が太い境界線などによって明確に区切られているデザインをよく見かけます。
背景に溶け込ませるのではなく、「ここにこの要素があります」と輪郭をはっきり見せる。
立体感を作る場合も、自然な光を再現したような柔らかい影ではなく、形のある影をそのまま横へずらしたような表現があります。
洗練させて存在感を消すというより、UIそのものをグラフィックとして見せているようです。
ネオブルータリズムでよく見られる特徴
実例を見ていくと、ネオブルータリズムと呼ばれるデザインには、いくつか繰り返し登場する表現があります。
ただし、これらをすべて使えばネオブルータリズムになる、というチェックリストではありません。
あくまで、よく見られる視覚的な傾向として整理します。
太い境界線
まず目につくのが、太くはっきりとした境界線です。
カード、ボタン、画像、テキストエリアなどを黒い線で囲み、それぞれの領域を明確に分けます。
境界を曖昧にしないため、画面全体がブロックを組み合わせたように見えることもあります。
ぼかさないハードシャドウ
もうひとつ印象的なのが、影です。
一般的なUIでは、ぼかした影を使って自然な奥行きを表現することがあります。
ネオブルータリズムでは反対に、ぼかしの少ない、あるいはまったくない影を大きくずらす表現がよく見られます。
影なのに自然に見せようとしていない。
むしろ「影を付けています」と分かるくらいはっきりしています。
鮮やかで強い色
黄色、青、赤、ピンク、緑。
ネオブルータリズムでは、高彩度でコントラストの強い色を使ったデザインをよく見かけます。
淡く馴染ませるより、色同士をそのままぶつけるような配色です。
太い黒線との組み合わせによって、画面はさらにグラフィカルに見えます。
大胆なタイポグラフィ
文字も控えめではありません。
太い書体や大きな文字など、存在感の強いタイポグラフィが使われることがあります。
ただ情報を読ませるだけでなく、文字そのものが画面を構成する要素として扱われます。
このあたりは、先に調べたブルータリズムのタイポグラフィとも重なる部分がありそうですが、今はまだ同じものとしてまとめず、別々に見ておきたいと思います。
なぜこんなにポップに見えるのか
ネオブルータリズムを調べ始めたとき、私が一番驚いたのはここでした。
思っていた以上に、かわいくてポップです。
「Brutalism」という名前から想像していたものとは、かなり印象が違いました。
強いのに、親しみやすい
太い黒線。
強い色。
大きな文字。
どれもかなり主張の強い表現です。
ところが、それらを四角いカードやボタンのような単純な形に落とし込むことで、どこかステッカーや玩具のようにも見えます。
影もリアルな立体感ではなく、紙を少しずらして重ねたような見え方です。
だから視覚的にはかなり強いのに、怖さよりも楽しさや親しみやすさを感じるデザインが多いのかもしれません。
「整っている」のに強い
もうひとつ気になったのが、ネオブルータリズムは派手でも、UIとしてはかなり整理されて見えることです。
カードの境界が分かる。
ボタンも見つけやすい。
どこに何があるのかも比較的把握しやすい。
見た目は大胆なのに、構造まで壊しているとは限りません。
むしろ、境界を強調することで構造が分かりやすくなっている場合さえあります。
ここは、ネオブルータリズムを単に「派手で乱暴なデザイン」と考えると見落としてしまいそうな部分です。
ネオブルータリズムは一つの型なのか
ここまで特徴を並べると、
太い黒線。
ハードシャドウ。
鮮やかな色。
大胆な文字。
これを使えばネオブルータリズムが作れるように思えてきます。
でも、少し実例を見ただけでも、それほど単純ではなさそうです。
特徴は似ていても、使い方は違う
色の使い方も違えば、影の強さも違います。
すべてを太い線で囲むサイトもあれば、一部のUIだけに特徴を取り入れているものもあります。
ポップなものもあれば、もう少し無機質なものもあります。
そのため「この要素があるからネオブルータリズム」と一つずつ判定するより、複数の特徴がどのように組み合わされているのかを見る必要がありそうです。
私自身、まだネオブルータリズムについては勉強を始めたばかりです。
だから今は、無理に境界線を引くよりも、実際のサイトをたくさん見ながら「何がネオブルータリズムらしさを作っているのか」を観察していきたいと思います。
【まとめ】まずはネオブルータリズムそのものを見る
ネオブルータリズムについて調べてみると、太い境界線、ハードシャドウ、鮮やかな色、大胆なタイポグラフィなど、特徴的な表現が見えてきました。
そして私が最初に持った印象は、やはり**「思っていたよりポップ」**です。
強い。
派手。
でも、意外と親しみやすい。
しかも、UIの構造そのものは分かりやすい場合があります。
ただ、今回調べたのはまだ入口です。
どこからがネオブルータリズムなのか。
なぜ「Brutalism」という名前を持っているのか。
実際のWebサイトでは、これらの特徴がどのように使われているのか。
まだ分からないことがあります。
だから、ここで分かったつもりにはならず、もう少し実物を見ていきます。
まず定義を知る。そして、実例を見る。
ネオブルータリズムについては、ここから研究を始めます。