変なUIトレンドBrutalismの調査
皆さん、こんにちは！Design Switchです 🦊 。前回は「フューチャリスティックデザインに挑戦してみた ✏️ 」について紹介しました。まだ前の記事を読んでいない方はこちらからどうぞ。
みなさんは、普段UIをデザインするときにユーザーフレンドリーなUIであることを第一に考えるのではないでしょうか？そこでこのサイトをみてください。
どうでしょうか？「あまりユーザーフレンドリーではないUIだな、どこに何があるか分からないし、そもそもに何のサイトだ？」と思ったのではないでしょうか？これは、BrutalismというUIトレンドの一つです。
今回は、使いにくい、見にくいUIであるBrutalismがどうしてUIトレンドの一つとして近年扱われているのかを調査をしたいと思います。
Brutalismとは
まず、Brutalismのサイトとはどのような特徴があるのか調べてみました。すると、Brutalismでは、CSSをしっかり当てていないHTMLの出力結果のような部分がたくさんあると感じました。例えば、実装時にHTMLでテキストリンクを作成すると必ず青色のテキストに青色の下線がつきます。Brutalismでは、これを良しとし、そのままデザインとして使用していました。
また、The Creative Momentum(アメリカのクリエイティブエージェンシー)のクリエイティブディレクターのMatt Stewartは以下のようなルールがあるといっています。この中のいくつか当てはまれば、Brutalismの可能性があるそうです。
1. 黒か白の背景
2. グラデーションや影がない
3. 要素が重なっている
4. シンメトリーでない
5. スペースが少なく詰まったようなデザインである
6. 情報や要素に優先度がない
7. 等幅のフォントを使用している
8. 一種類のフォントが使われ続ける
9. コントラスト差のあるカラーパレットを使用している
10. アニメーションが少ない
11. 画像がまばらに置かれている
12. シンプルなナビゲーションもしくは、ナビゲーションがない
13. webサイトが１ページであること
また、Brutalismとは、brutalistwebsites.com というbrutalismのwebサイトをまとめたサイトの創設者であるPascal Devilleによってweb業界にやってきた言葉で、Pascal Devilleは、Brutalismを以下のように定義しています。
“ Brutalismとは、荒々しく洗練されていないものであり、ユーザーが快適に操作できるようにするということを全く考えられていないデザインである。しかし、若い世代にとっては今日のwebデザインの中でも陽気で楽しいサイトであると認識されている。”
彼は、Brutalismは使いやすさなどを考慮していないと断言していますが、一方で、一部のターゲットユーザーによって好かれているといっています。では、どうしてBrutalismのサイトは使いにくいサイトであるのに、一部のユーザーにとっては好かれるのでしょうか？その訳を簡単にBrutalismの歴史を混ぜてみてみましょう！
Brutalismの語源と歴史
Brutalismとは、元々は建築業界の言葉で、第二次世界大戦後、破壊された建物を再建築するために当時有り余った資源であったコンクリートと鋼鉄を使用して建てられた建築物のことを指します。
また、Brutalismの元々の語源は、フランス語からきており、”生のコンクリート”という意味です。Brutalismの建物の特徴は、語源通り、建築材料を加工することなくそのまま使用します。代表的な建物として、ロンドンのNational Theatreがあります。
このような建物は、多くの人にとって綺麗な建物ではないと思われたり、廃墟のようで怖いと思われる傾向にあります。しかし、ここ最近、Brutalismの本が多くでていたり、Brutalismの建築物を取り上げるinstagramアカウントのフォロワーが20万人いたりとBrutalismに人気が出ているのです。
なぜでしょうか？その理由として、Brutalismの建築物は壊したり、再建築するのに膨大なお金がかかるため、そのまま置いておくケースが多く、そういった中で、周りには似通った現代的な建物が並び、そのおかげでBrutalismの建築物は一際目立つようになっています。こういった状況のおかげで人々の注目が集まっていると考えられます。
BrutalismのUI効果
では、Webの話に戻りましょう！まず、UIとしてのBrutalismとは、HTMLで実装した時にそのまま表示された文字などの要素を使用しているという話をしたと思います。これは、先程のBrutalismの語源である”生のコンクリート”からもわかるように、そのままの素材をそのまま使うといった意味から、Brutalismの大きな特徴の一つだと言えますね。
また、そういったUIは多くの人にとって使いにくいと感じるものとなっています。この特徴も、綺麗な建物ではないと思われやすいBrutalismの建築物と似ていますね。では、Brutalismの建築物と同じようにBrutalismのUIはweb上で一際目立つでしょうか？答えはYESです！
近年、ユーザーフレンドリーを意識した似通ったデザインが多い中で、webサイトの使いやすさを犠牲にすることで、話題性のある尖ったデザインになっています。このようなサイトは、特に若い世代の中で話題になります。この話題性が、BrutalismのUIとしての大きな効果と言えるでしょう。この効果を利用して、ブランドとしての価値観や雰囲気を全面的にアピールするサイトも少なくないように思えます。その例を次に紹介していきたいと思います。
Brutalismのwebサイトの例
そのwebサイトとは、POPEYEというファッション雑誌の公式サイトです。
雑誌自体は、昔からあるのですが、2021年3月9日にwebで情報を発信し始めたみたいです！このサイトでは、POPEYEの雑誌の雰囲気を維持することを一番大事としています。POPEYE読者にとっては雑誌でしか味わえなかった雰囲気をweb上でも味わえて嬉しいものとなっているでしょう。
このサイトを文頭の13個のルールに当てはめてみると、情報が混雑している部分や、要素同士が大胆に重なっている部分が多いなど、他にも7個ほどのルールが当てはまります。また、所々にHTMLで実装した時にそのまま表示されたテキストリンクを使用している部分からも、このサイトがBrutalismであることがわかります。
決して、ユーザーにとって使いやすい、見やすいサイトではありませんが、サイトには独特な世界観があります。このようにサイト内での使いやすさをほぼ無視することによって、雑誌そのものがweb上の画面で再現されているかのような世界観を表現していると言えます。
まとめ
🔳 Brutalismは、CSSをしっかり当てていないHTMLの出力結果のようなUIのモジュールがたくさんある。
🔳 Brutlismを生み出す13個のルールがあるが、必ずしも全てのルールを守らなくてもよい。
🔳 Brutalismは語源と歴史との結びつきが大きく、その語源や歴史を辿るとどうしてBrutalismと呼ばれるトレンドがあるのかわかる。
🔳 Brutalismは、使いやすさなどを犠牲にすることで他のwebサイトよりもより目立つ雰囲気を作ることができる。
🔳 Brutalismによって、 ブランドの世界観をweb上でも壊すことなく伝えているサイトが存在している。
今回、Brutalismの調査をして、必ずしもユーザーフレンドリーを優先しなくても、目的に合わせてBrutalismのようなデザインをすることもありなんだと感じたのではないでしょうか？ユーザー視点でUIを考えるとどうして流行っているのかわからないUIトレンドが他にもあると思います。
しかし、デザイン自体はもっと自由なもので、必ずUIがユーザーフレンドリーである必要もありません。視点を変えてトレンドを再確認することでどうしてそのUIが流行っているのかもっとわかってくるようになるのではないでしょうか？デザインは、縛られるものではないので、目的に合わせてさまざまなデザインを楽しんでみましょう！
さて次回は「PC版フォントルールの決め方について」ご紹介します。是非ご覧ください！😃
▼ 次の記事
🌟 現在ARCHECOではUIデザイナーを募集しています。ご興味のある方は是非こちらからご応募ください！お待ちしております。
🌟 Design Switchを運営している UX/UIデザイン会社 ARCHECOについて
この記事が気に入ったらサポートをしてみませんか？