あえて壊す？思わず視線が奪われる「ブロークングリッドレイアウト」とは

更新日: 2018年01月31日

デザイン

グリッドレイアウトを採用するホームページが増えてきて、もはやWebの世界におけるレイアウトの定番といっても過言ではなくなりました。
グリッドレイアウトは、情報をまとめてスッキリ・コンパクトに見せることができるので、情報量の多いホームページではしばしば活用されている手法です。

しかし、グリッドレイアウトは非常に多くのホームページが採用しており、情報が整理されており真面目な印象を受けるので、ユニークさや面白さが出ないのも事実です。
そこで登場したのが、グリッドレイアウトのよさを継承しながらも、あえてルールをはみ出すデザイン手法である*「ブロークングリッドレイアウト」*(Broken Grid Layout)です。

今回は、思わず視線が奪われてしまう「ブロークングリッドレイアウト」の基本的な概念から使用ポイントをまとめました。
まわりとはちょっと違ったホームページを作りたい、そんなときにブロークングリッドレイアウトが役に立つはずです。
従来のグリッドレイアウトとは、一体どこが違うのでしょうか。

参考：
今さら聞けない！Webデザインの定番とも呼べるレイアウト方法「グリッドレイアウト」の基本

思わず視線が奪われる「ブロークングリッドレイアウト」とは

グリッドレイアウト(グリッドデザイン、グリッドシステム)は、ページの最大幅を決めて、その最大幅を何分割のグリッド(カラム)にするかを決め、そのカラム上にさまざまなオブジェクトを配置していくレイアウト手法です。

もともとこのようなレイアウト手法は、新聞や雑誌などの印刷物でよく見られるものです。
グリッドラインはレイアウトの決定時に仮に引かれる線なので、実際のデザイン上は実線として表示されるわけではありませんが、ラインに沿って配置していくので、整っていてまとまりやリズム感が生まれます。

しかし、グリッドレイアウトでは、ブロックの大きさが同じだとコンテンツごとの重要度が出しづらかったり、アクセントとなるコンテンツが目立ちにくいというデメリットも抱えています。

配置する画像に個性をもたせたり、ちょっと変わった配色を使ったりして克服するという方法もありますが、ここであえて*「従来型のグリッドレイアウトから脱却しよう」*という動きが出現しはじめました。

それが、*「ブロークングリッドレイアウト」*です。

このレイアウト手法は、従来のグリッドレイアウトと違って単にでたらめにオブジェクトを配置する、という手法ではありません。
グリッドレイアウトでデザインするのと同じように、縦横に見えないグリッドラインを引いて、整えたり揃えたりしつつ、あえていくつかの要素をルールから外して目立たせていく、という手法なのです。

ブロークングリッドレイアウトの特徴

それでは、グリッドレイアウトの基本ルールを守りながらも、あえて部分的にルールを外して目立たせていく「ブロークングリッドレイアウト」を実現するには、具体的にどうすればいいのでしょうか。
ポイントだけでは分かりにくいと思うので、実例も交えて紹介してみましょう。

1. 重ねる

要素をブロックのように配置しながらも、「ガーター」と呼ばれるマージンを作って要素同士を切り離し、並べていくのが一般的なグリッドレイアウトの手法です。
そのため、要素同士は基本的に切り離され、その結果余白を生んでリズムをつけていくのが、美しいデザインとされていました。

ところが、この「切り離す」というルールを破ってみたら、どうでしょうか。
例えば、これまで切り離していたものを、あえて*「重ねる」*ように配置してみるとどうなるでしょう。

イングランドのファッションブランド*「CMMNTY」*のホームページを見てみましょう。

https://cmmnty.co

ヒーロー画像と「Create」の文字を重ねていますね。
普通にコーディングしてデザインしていけば、「Create」の文字は自動的にマージンをとって画像の下に配置されます。
そこをあえてネガティブマージン(マイナスの値をマージンに指定すること)にすることで、レイヤーのように重なったレイアウトになっています。

これは「重ねる」のほんの一例です。
画像同士を重ねたり、動画と画像、文字を重ねてみたりしても面白いかもしれません。