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

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

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

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

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

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

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

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

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

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

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

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

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

1. 重ねる

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

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

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

layer.jpeg
https://cmmnty.co

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

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

2. はみ出す

グリッドレイアウトでは、グリッドラインと呼ばれる見えない線を引いて、そこに要素をそろえて配置していく、というのが暗黙の了解でした。
しかし、文字どおり「一線を越えてみる」と、どうなるでしょうか。

イギリスの「Message In A Bottle」ページを見てみましょう。

whitespace.jpeg
https://www.sas.org.uk/messageinabottle/

ボトルを拾い上げている写真の左縁に対して、ロゴマークやヘッダーテキスト、CTAボタンなどが大きくはみ出していることが分かります。

ここでひとつポイントがあります。
それは、はみ出すためには余白が必要であるということです。
余白を大きくとっておけば、はみ出した部分が大きく目立ちますが、余白を十分にとっていないと、せっかくはみ出してもその部分があまり目立たなくなってしまいます。

3. 中に置く

一方、重ねたり、はみ出したりするのではなく、本来であれば外にある要素を完全にかぶせてしまう、という方法もあるようです。

クリエイティブエージェンシー「By Association Only」のホームページで確認してみましょう。

setapart.jpeg
http://byassociationonly.com

このホームページでは、ヒーロー動画の中にヘッダーテキストやパラグラフをずらして配置しています。
単に中に入れるだけではなく、すこしずらすことで、揃えたときとは違ったリズムが生まれます。

4. 円を使う

グリッドレイアウトが整って見えるのは、直線状にオブジェクトを配置していたからです。
それでは、あえて「直線的」ではないものをレイアウトに取り入れてみると、どうでしょうか。

ビジネス出張における場所のトラッキングと経費を管理するアプリ「Trippeo」のホームページを覗いてみましょう。

circle.jpeg
http://v1.trippeo.com

このホームページでは、中央に円形のタイムラインを設けて、崩したブロッグの上に重ねて表示しています。
グリッドレイアウトで使われる要素のほとんどは直線的であるので、曲線や円を取り入れると、その部分に視線を集めることができます。

5. ずらす

見えない線であるグリッドラインを作ったら、通常はそこにオブジェクトを揃えて配置をします。
しかし、そのラインとある要素の間にインデントのような空白を作ってリズムを崩してみる、というデザインもあります。

それが、次に紹介する「Marché Notre-Dame」のホームページです。

broken.jpeg
http://marchenotredame.com

ご覧いただいてお分かりの通り、本来であればそろっていてほしいラインのところであえて高さをそろえずにずらしています。
あえてリズムを崩すと、それによって生まれた空白部分や、はみだした部分に注目が集まります。

まとめ

グリッドレイアウトはたくさんの情報量があるホームページを綺麗に整理してくれますが、一方で場合によっては単調で面白みに欠けてしまうことがあります。
しかし、グリッドデザインのメリットを踏襲しながらも部分的に目立たせるブロークングリッドレイアウトを使えば、少しひねった大胆なデザインにすることができます。

ちなみに、グリッドを崩すためのCSSプロパティとして、「wrap-flow」というプロパティを使う方法があります。
下記の参考サイトで具体的なチュートリアルが解説されていますので、よろしければ一緒にご覧ください。

参考:
CSS Exclusions: Making Boring Layouts Less Boring