INSPIRATION

【Web デザイン】境界線をあえて外す「ブロークングリッドレイアウト」の参考サイト

雑誌では昔からよく使われていた境界線をあえて外す「ブロークングリッドレイアウト」。ここ最近のWebサイトの表現手法として、多くのWebサイトで取り入れられるようになってきました。

今回は、印象的でオリジナリティーも出しやすい、「ブロークングリッドレイアウト」のサイトを集めましたので、ぜひデザインの参考にしてください。
 

目次

  1. ブロークングリッドレイアウトとは?
  2. ブロークングリッドレイアウトの特徴

    1. 画像に重ねる
    2. ブロック要素からはみ出す・ずらす

 

ブロークングリッドレイアウトとは?

「グリッドレイアウト」というレイアウト手法を聞いたことがある方は多いと思いますが、レイアウトする際、決められたグリッドに沿って要素を整列して配置することで、とても見やすいデザインが可能です。

しかし規則正しく並べられた要素は見やすい反面、単調になりがちです。

「ブロークングリッドレイアウト」は、正しい規則の境界線をポイントであえて外すことで、ユーザーの視線を惹きつけ、印象的なデザインを作り出します。
 

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

ではブロークングリッドレイアウトにはどんな特徴があるのでしょうか?大きく2つに大別しました。
 

画像に重ねる

ファーストビューではメインビジュアルに大きなキャッチコピーを重ねているデザインをとてもよく見かけます。画像に要素を重ねてしまうと一見、見辛くなってしまいそうですが、ユーザーの視線を引きつけキャッチコピーを際立たせます。メインビジュアルとキャッチコピーを重ねるので、両者のコントラストをはっきりさせ、可読性を下げないようにするのがポイントです。
 

ポート株式会社


 

TAMAKI HOME


 

ハウスM21


 

the ringo


 

ブロック要素からはみ出す・外す

こちらも多くのサイトで取り入れられているレイアウトです。参考サイトを見ていただくのが早いですが、背景にあるブロックからはみ出したり、位置を外して配置している要素は単調にならずとても印象的です。ポイントはやりすぎないこと、そして外す上でも、一定の規則は持たせることです。
 

POGG


 

株式会社GA technologies


 

デザミス株式会社


 

採用情報 | 株式会社リブセンス


 

BEYOND CAFE


 

第一高周波工業


 

当サイトのギャラリーで「ブロークングリッドレイアウト」のサイトを集めていますので、その他の秀逸サイトもぜひご覧ください。

まとめ

「ブロークングリッドレイアウト」のサイトいかがだったでしょうか?個人的には、見ているとレイアウトセンスがどんどん磨かれていくような、とてもエキサイティングなデザインの手法です。

何ごともやりすぎは禁物ですが、「デザインがパッとしない」と思ったらぜひポイントで「ブロークングリッドレイアウト」にチェレンジしてみてください。

それでは良いWEBデザイン日和を!Have a nice WEBDESIGNDAY!
 

Googleマップをレンスポンシブに対応する方法
PREVIOUS INSPIRATION