Webデザインでは、揃えることが基本です。
左端を揃える。余白を揃える。一定のグリッドに収める。情報のまとまりを作る。
そうすることで画面は整理され、閲覧者は情報を追いやすくなります。
ところがブルータリズムWebサイトを見ていると、ときどきその原則から大きく外れたレイアウトに出会います。
文字が妙な位置にある。
画像が揃っていない。
余白の量がバラバラ。
要素同士が重なっている。
それなのに、なぜか「崩れている」だけには見えない。
今回は、ブルータリズムのレイアウトは、なぜ整っていないのに成立するのかを考えます。
ブルータリズムは、グリッドを壊すデザインではない
最初に切り分けておきたいのが、ブルータリズムだからレイアウトを崩さなければならないわけではない、ということです。
実際には、かなり規則的なグリッドを使ったブルータリズムWebサイトもあります。
整っているブルータリズムもある
画像が等間隔に並んでいる。
文字の開始位置がきれいに揃っている。
左右のカラムが明確に分かれている。
そんなブルータリズムもあります。
それでも一般的なWebサイトとは違って見えることがある。
つまり、ブルータリズムらしさは**「グリッドを壊したかどうか」だけでは決まりません。**
重要なのは、グリッドに従うか、外れるかではなく、レイアウトをどのように扱っているかです。
整列させてもいい。
崩してもいい。
必要なら途中でルールから外れてもいい。
セオリーに従わないことを、セオリーにしない。
ブルータリズムのレイアウトを見るとき、この距離感はかなり重要だと思います。
不揃いでも、すべてがバラバラなわけではない
一見すると自由に配置されているようなWebサイトでも、しばらく眺めていると何らかの共通点が見えてくることがあります。
完全な無秩序ではありません。
どこかに基準が残っている
文字サイズはバラバラでも、フォントには共通性がある。
画像位置は揃っていなくても、一定の間隔が繰り返されている。
要素が重なっていても、同じ重なり方が別の場所にも現れる。
左右は崩れていても、縦方向には一定のリズムがある。
すべてを揃えるのではなく、一部の規則を残しながら、別の規則から外れる。
だから不揃いでも、完全にバラバラには見えないのかもしれません。
逆に、位置もサイズも色も余白も文字も、すべてに関連性がなければ、そこから構造を読み取るのは難しくなります。
自由なレイアウトと無秩序は、同じではありません。
はみ出し・重なり・ズレは何をしているのか
ブルータリズムでは、一般的なレイアウトなら修正したくなるような状態が、そのまま残されていることがあります。
文字が画面からはみ出す。
画像と文字が重なる。
要素が少しズレる。
余白が極端に広い、あるいは狭い。
では、なぜそれを残すのでしょうか。
「きれいに収める」以外の選択
Webデザインでは、要素がきれいに収まっていると安心して見ることができます。
一方、少しはみ出したり重なったりすると、そこに緊張感が生まれます。
「ここにあるはず」という予測から、少しだけ外れるからです。
そのズレによって、文字が情報ではなく形として強く見えたり、画像同士の関係が変わったり、画面に独特のリズムが生まれたりします。
つまり、崩れそのものが目的なのではなく、崩すことで別の見え方を作っている。
だから「普通と違う位置に置けばブルータリズムになる」という話ではありません。
そのズレによって何も生まれていなければ、ただズレているだけです。
整っていないことと、雑なことは違う
ここが一番難しいところです。
ブルータリズムのレイアウトを表面的に真似すると、簡単に「雑なサイト」になってしまいます。
偶然を、そのまま放置しない
制作中には、予定していなかったズレや崩れが起きることがあります。
CSSを書いていたら、思っていた場所とは違うところに要素が出た。
文字が予想以上に大きくなった。
画像が少しはみ出した。
そこで「失敗した」と直すこともできます。
でも、見た瞬間に「このほうが面白い」と思うこともあります。
そのとき重要なのは、偶然起きたことではありません。
それを見つけて、残すと決めたことです。
偶然から始まってもいい。
ただし、その偶然をデザインとして採用するなら、その後は選択になります。
偶然 → 発見 → 選択。
不揃いなレイアウトが成立するかどうかは、この「選んでいる感じ」が画面に残っているかにも関係しているのではないかと思います。
【まとめ】整っていないのではなく、整え方が違う
ブルータリズムのレイアウトには、はみ出し、重なり、不揃いな余白、極端なサイズ差など、一般的なWebデザインでは避けられる表現が見られます。
でも、ブルータリズムだからグリッドを壊さなければならないわけではありません。
きれいに整列したブルータリズムもあります。
大切なのは、整っているか、崩れているかという二択ではないのでしょう。
何を揃えるのか。
何を揃えないのか。
どこまで規則を残すのか。
どこでその規則から外れるのか。
それを選ぶことで、レイアウトに独自のリズムが生まれます。
だから、ブルータリズムのレイアウトは「適当に置いていい」という自由ではありません。
むしろ、普通なら直す場所まで含めて、自分で判断しなければならない。
整っていないのではなく、整え方が違う。
そう考えると、ブルータリズムの不揃いな画面が、なぜただの崩れとは違って見えるのかが少し分かる気がします。