以前にWEBデザインの最新トレンドについて触れましたが、今回はその中の1つである
「ブロークングリッドレイアウト（Broken Grid Layout）」をピックアップしてみました。

“あえて崩す”ことで個性を出し、魅力的なサイトに変えるこの手法。
レイアウトを崩すといっても、ただ無秩序にグリッドを壊すわけではありません。
機能性を失わないように、全体のバランスを見ながらデザインをしていきます。

ポイントは、揃えるところは揃えて、強調したいところは主張させること。
大きくしてみたり、重ねてみたり、ずらしてみながら、ジャンプ率を上げてみましょう。
あくまでもルールがある上で少し外すのが、大事なポイント！
次に具体例を紐解きながら、ブロークングリッドレイアウトの魅力に迫りたいと思います。

ここでは単調になりがちなサイトを魅力的に生まれ変わらせた、ステキな事例をご紹介。
サイトを作る際に、ぜひ参考にしてみてください。

marchenotredame

http://marchenotredame.com/

こちらは海外のカフェのサイト。
規則性を保ちつつ、ほどよい崩しによって動きのあるレイアウトになっています。
余白を上手く活かして抜け感を出すのも、ブロークングリッドレイアウトの特徴。
全体的に余裕があり、お店の雰囲気が伝わってきますね。

frame　optik

https://frame-optik.de/

こちらのサイトは、海外のメガネフレームのメーカーさん。
文字と写真のバランスが絶妙で、視覚的にも情報がスッと入ってくる印象です。
伝えたい情報が多すぎると文字が詰まって見えがちですが、
十分な余白をあけることでストレスのなく読めるように計算されています。

第一高周波工業

http://www.dhf.co.jp/

こちらはセクションごとに左右に振り分けられているレイアウト例。
オレンジのグラデーションで統一感を出しているので、まったく違和感を感じません。
余白が均等というところから、グリッドを意識したルール化をされているのがわかります。

LION

https://www.lion.co.jp/ja/company/recruit/graduate/

最後にご紹介するのが、LIONさんの採用サイト。
文字、写真、ボタン、背景などを重ねてズラして、奥行きを出しています。
写真と文章の程よい距離が、ユーザーにとって心地良いですね。
自由さを感じられつつ、全体のバランスも良い。ぜひ参考にしたいサイトです。

採用サイトでも多く取り入れられている「ブロークングリッドレイアウト（Broken Grid Layout）」。
ポイントさえしっかりと抑えていれば、個性あるステキなサイトができそうですね。