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

グリッドレイアウトとは、ウェブサイト内の要素を垂直水平方向に格子のように分割することで、ウェブサイトをデザインするためのマージンやスペース、カラム(列）を正確に分けるレイアウト手法です。

グリッドレイアウト

グリッドレイアウトは、以前から雑誌や新聞などにも利用されているレイアウト手法です。
ウェブサイトにおいては、パソコン、スマートフォン、タブレットに対応させるレスポンシブデザインと相性が良く、分割幅を固定サイズにせずパーセンテージで分割することで、ブラウザ幅によってコンテンツの幅が可変する手法「可変グリッドレイアウト」が、現在の最も一般的なレイアウトトレンドです。

可変グリッドレイアウト

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

昨年あたりからは、グリッドレイアウトをあえて崩す「ブロークングリッドレイアウト」という手法もよく目にするようになりました。

ブロークングリッドレイアウトは、整った状態からあえてデザインを崩すことにより、ある種の違和感や引っ掛かりをユーザーに与え、新鮮味があってオリジナリティが溢れるデザインを作り出すことができます。

ブロークングリッドレイアウト：グリッド（水色ラインの格子）にとらわれないデザインになっています

ブロークングリッドレイアウト：グリッド（水色ラインの格子）にとらわれないデザインになっています