ブロークングリッドデザインを成功させるために。
簡単！6つのポイント

「ブロークングリッドデザイン（レイアウト）」は、規則性のある境界線で構成されたレイアウトを一部分くずしたレイアウトのことです。数年前からじわじわ出現し、今年もデザインの一手法としてメジャーな存在であり続けることは必至です。効果としては、不規則な部分を意図的に作り出し、ユーザーの視線を惹きつけ、面白い（興味をそそったり、遊びの感覚を与える）デザインを作り出します。
というとで、今回はブロークングリッドレイアウトを成功させるための6つのポイントをご紹介します。

１：まずはグリッドデザインを理解する

グリッドデザインとは画面を縦横に分断する直線（ガイド）で格子状に分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法です。利点としては、情報がまとまりユーザーに分かり易いレイアウトが容易になる。サイト内のデザインに一貫性をもたせられる。デザインする側もユーザーも簡単で理解しやすい優れたレイアウトですが、見た目の印象に変化がつけにくく、他サイトとの差別化も難しくなります。そうしたことから、部分的にグリッドをくずして、サイトデザインに表情を与えることが出来るブロークングリッドレイアウトが登場しました（多分）。
実際にデザインを仕事にしていると、こうした流れは非常に自然で、面白いものです。ちょっと話はずれますが、紙媒体のデザインがウェブデザインに取り入れられているのもこうした流れの一貫なのでしょう。

２：レイヤーを作る

普通のレイアウト

レイヤーを用いたレイアウト

レイヤーとは要素を重ね合わせることです。
グリッドから要素がずれていても、要素と要素が接点を持っているので、同じ情報がまとまっているという印象を持ちます。

３：余白を活かす（意図的に余白を作り出す）

１の例と同じですが、ロゴの扱いを変えました。左上のロゴはとても小さいですが、余白があるおかげで、それがロゴであることが認識できます。要素がいたるところに散らばっていては、ユーザーは必要な情報を認識できません。
この例ではレイヤーで要素の関連性を保ち、余白で他の情報との関連性を区別しています。更に、余白は見た目の美しさにも多大な影響を与えます。
こちらはブリークングリッドレイアウトではありませんが余白の重要性と美しさがわかるサイトです。
https://nspc.co.jp/

４：要素を塊でレイアウト

情報をひとかたまりのボックスに入れたデザイン

バラバラの要素を一つの要素の中に入れます。すると、グリッドを無視したレイアウトでもぐちゃぐちゃに見えません。情報の関連性を保つということで上述の2つのポイントと通じています。
これは、グリッドとか関係ないレアウトなのでは？というご意見もあるかもしれませんが、写真の外の要素はグリッドのライン上に配置されて整理された印象なのに、写真内のレイアウトを自由にすることで全体的に抜け感のあるデザインになっています。

では、背景の写真がないとどうなるでしょう？

情報が固まっていないデザイン

これは要素をおさめている鯉の背景画像を取ったものです。
これだと、ナビやSNSボタンの規則性が認識しづらくユーザビリティ的にも問題があります。

鯉の画像内にコンテンツを収め、白い部分にナビやSNSボタンなどの機能要素とまとめることで見た目もすっきり、ユーザビリティも向上します。

５：部分的にあそびの要素を入れる

ブロークングリッドレイアウトのポイントを説明していますが、グリッドは非常に重要です。
基本的にユーザーは見えないラインを感じながら、情報の塊を識別しています。ですから、ウェブデザインにグリッド感は必要な要素なのです。
そこで手っ取り早くグリッド感を壊すなら、部分的な遊びを入れることです。四角い画像の上からレイヤーで要素を重ね、目に留まる色や形、太字などグリッドを解除するモチーフを足します。上の図のArticlesの下の四角いスペースの右上に青いラインがあります。これは新着を示すアイキャッチとして置かれました。それと同時に、グリッドの水平ラインを壊し、画面に変化を与えています。

６：グリッドを崩しているようにみせかける

こちらのデザインは不規則に写真が並べられているように見えます。
しかし、バラバラな感じにはみえません。

このように、グリッドに沿ってレイアウトされていますが
写真の形や配置位置をずらすことで堅苦しいを避け、明るく楽しい印象になりました。

まとめ

ということで、ブロークングリッドデザインは平坦な印象のグリッドデザインから一歩抜け出す有効なデザイン方法です。
最近はノングリッドデザイン（例 https://www.coperni.co/en）や、ランダムグリッドデザイン（例 https://rutbryk.jp/）などデザインのカテゴリーも広がりつつあります。オリジナリティや芸樹性はグンと高まりますが、企業のサイトをデザインするときには、採用しにくい奇抜さがあるのも事実です。
今回ご紹介したブロークングリッドデザインは比較的、取り入れやすく、今までとはちょっと変化を出したいときなど取り入れやすいデザイン手法です。

最後に再度強調しますが、
情報をまとめ、余白を活かすこと。

この2つに注意すればブロークングリッドデザインは成功です。
参考サイト

WEBデザイナー ／ Y.E