以前、「2017年上半期に取り入れたい5つのWebデザイントレンド」でもご紹介させていただいたように、「ブルータリズム」と呼ばれるWebデザインのトレンドが注目を集めています。

ブルータリズム(Brutalism)とは、もともと1950年代から見られるようになった建築の形式で、荒々しさを残した打放しコンクリートなどを用いた表現を特徴としています。
「Brutal」とは冷酷で厳しい野生のさまを意味する形容詞で、「生身」(raw)を意味するフランス語に由来しています。

私たちが普段よく見るような、なめらかで繊細なデザインを使ったモダンなホームページとは対照的に、非常に大胆で野生的な印象を持ちます。
また、Webサイトによっては、奇抜でありながらも、1990年代中頃を想起させるようなラフなデザインを採用している場合もあります。

しかし、ブルータルなデザインというのに決まった形式はなく、あくまでも全体的な方向性にしかすぎません。
今回は、「ブルータル」なWebデザインを取り入れたホームページをご紹介します。
実際に実例を見ながら、奇抜で斬新な「ブルータリズム」を体感していきましょう。

ブルータリズムとはどのようなものか？

ブルータリズムは、もともと露出したコンクリートを特徴に持つ、1950年代から90年代に見られるような建築様式を指して使われる言葉でした。

Wasington Post によれば、いわゆる「Webブルータリズム」なる考え方が広まったのは、スイス・チューリッヒ在住のクリエイティブディレクターPascal Deville氏が始めた原点回帰的なホームページを集めたBrutalist Websitesが始まりだと言います。
ブルータリズムは、こんにちの心地のよいホームページとは対照的に、とにかく荒々しく主張の強いのが特徴です。
それはまるで、20年前のYahoo!ジオシティーズが流行していたときのような、「とにかく作ってみる」という作風を思い出させます。

abe.jpg
http://abehiroshi.la.coocan.jp/
▲ 俳優・阿部寛さんのホームページは、20年前の「ジオシティーズ」時代を思い出させてくれるホームページとして現在もよく取り上げられています。

ブルータルなホームページは、とにかく表現方法が自由なので、「Webブルータリズム」を明確に定義することはできません。
時には絵文字を並べてみたり、現在では廃止されているBlinkタグを使って見たり、デザイン的にはタブーとされている表現をあえて使ってみたりと、かなり実験的な表現方法が採用されています。

斬新すぎる「ブルータル」なWebデザインを取り入れたホームページ

1. MASSA

01.jpg

ウクライナのキエフで活動するビジュアルアーティストのMASSAさんのホームページです。

1990年代後半を思わせるような構成のホームページですが、作品の中には超現実主義シュルレアリスムを思わせるような不思議で不気味な作品もあります。

括弧の中に作品を並べるという発想も奇抜です。

2. [Brute]

02.jpg

[Brute]はフランスのTwistudioが手がける「ホエイ」や「プロテイン」といった名前のファッションアイテムを販売するオンラインサイトです。

ハンバーガーメニューや大胆なサイズのメニューを取り入れながらも、画像をむき出しにして表示し、荒々しい雰囲気を表現しています。

3. [Relevant]

03.jpg

[Relevant]はいわゆる「アルゴリズムによる弾圧」(AIが人間を支配して抑圧する支配)に対抗するための思想家コミュニティです。
前衛的でポスト・モダンなブルータリズムが、「アルゴリズムによる弾圧」というテーマとマッチングしています。

UIに使われている青色は「エレクトリック・ブルー」と呼ばれ、報道機関Bloombergのホームページなどでも使われています。

4. Badesaison

04.jpg

Badesaisonはスイスのチューリッヒに2014年に作られたグラフィックデザインスタジオのホームページです。

トップページを訪れるとアイコンが爆弾マークになり、クリックすると作品を盛大に壊すエフェクトを楽しむことができます。
右にある「ENTER」をクリックすると、グラフィックデザインスタジオで作られた作品集を閲覧することができます。

5. [Hermicity]

05.jpg

[Hermicity]はイーサリアムのブロックチェーンを使って、できるだけ社会的組織に属さずに生きていく隠遁的ライフスタイルを提唱しているVitalik Buterin氏の理想郷を紹介しているホームページです。
まさにテーマ自体がある種の反社会性をはらんでいるので、ブルータルなホームページとマッチしています。

ページのトップでドローンが水や食料を運んでくれているアニメーションがとても印象的です。

6. Juice Box

06.jpg

Juice Boxはコネチカット州ニューヘイヴンにある天然の食材を使ったレストランです。
縦型のメニューが非常に印象的で、マウスカーソルがくだものに変身します。
素材をそのまま使ってみるという点では、ブルータリズムに通じるところがあります。

7. [the loop of sense]

07.jpg

[the loop of sense]はさまざまなGIFアニメーションが配信されていますが、なんとページ下部ではGIFアニメーションがプラカードを持って抗議をしており、肝心の中身が読みにくいという自由なホームページになっています。

本文の前にあるカードはドラッグアンドドロップで動かすことができるので、うまく動かすことができれば、詳細説明を読むことも可能です。

8. Armin Unruh

08.jpg

Armin Unruhはドイツ・ベルリン在住のWebサイトデベロッパーであるArminさんのポートフォリオサイトです。
中央にある立方体のようなものを上下に動かすことで、作品を見ることができるというユニークな閲覧方法になっています。

実際に触ってみて体感するという点も、ブルータルなWebサイトによく見られる特徴です。

9. 水曜日のカンパネラ

09.jpg

水曜日のカンパネラは2012年の夏にYouTube配信から音楽デビューしたユニットです。
公式ホームページでは、油絵のような独特な筆使いと、福笑いのような切り絵が印象的に配置されています。

ナビゲーションをトップに置き、ユーザビリティを残しつつ、マウスを動かすと絶妙なエフェクトが入る、かなり実験的なページとなっています。

10. きゃりーぱみゅぱみゅ

10.jpg

きゃりーぱみゅぱみゅさんのホームページでは、PV自体にブルータルな作風を持たせ、全画面で動画を再生しています。

スクロールするごとに色が変わるグラデーションレイヤーを重ねるなど、他のサイトには見られないユニークなデザインが特徴的です。

11. やくしまるえつこ

11.jpg

歌手・作詞・作曲家のやくしまるえつこさんのホームページも、非常に実験的なホームページであると言えるでしょう。

独特なペン画がアニメーションになっており、マウスカーソルを動かして初めて何ができるかが分かるようになっており、ユーザビリティの観点で言えば決して素晴らしいとは言い切れませんが、世界観の演出がうまくできている例だと言えるでしょう。

まとめ

画像やテキストなどの素材を、そのままの形で活かす「ブルータリズム」という表現方法は、近年の美しく洗練されたホームページへのアンチテーゼとして、これからも注目が集まります。

日本においてはミュージシャンのホームページを中心に前衛的で自由な表現をするホームページを垣間見ることができます。
一度、想像力を解放して、ブルータルなホームページを作ってみるのも面白いかもしれません。