ブロークングリッドレイアウトの魅力とは？

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

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

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

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

目次

・marchenotredame（海外サイト）

・frame optik（海外サイト）

・第一高周波工業 コーポレートサイト

・LION 採用サイト

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）」。
ポイントさえしっかりと抑えていれば、個性あるステキなサイトができそうですね。

執筆者：株式会社ゴマシオカンパニー 代表取締役　山崎準也

ゴマシオカンパニーは、採用広報支援を目的としたクリエイティブを得意とする企画制作オフィスです。この分野で20年以上実績を積み上げてきた代表を中心に、様々な分野のクリエイティブを得意とするスタッフが、日々アイデアを出し合い、お客さまの採用課題解決に尽力しています。

採用サイト制作・採用動画制作・採用パンフレット制作なら、ゴマシオカンパニーにお任せください