こんにちは、NET SANYOのK2です。
2017年ごろからWebデザインのトレンドとなっている「ブロークングリッドレイアウト」。

要素を格子状に並べた「グリッドレイアウト」はWebデザインの定番ですが、これをあえて崩したデザインを「ブロークングリッドレイアウト」と言います。
グリッドレイアウトのルールを元にしながらも、あえて外れた部分を作り出すことで、ユニークでクールな印象を与えます。

ファッションでも同じですよね。綺麗に整った服装は素敵ですが、それを個性的に着崩した服装は更におしゃれだと感じるのではないでしょうか？

今回は、そんなブロークングリッドレイアウトを取り入れたサイトをご紹介いたします。

ブロークグリッドレイアウトの魅力的なサイト10選

1.Agnes Lloyd-Platt

写真の上に、文字や別の写真を重ねています。要素同志を「重ねる」のはブロークングリッドレイアウトで良く行われるテクニックです。
シンプルなデザインですが、要素を普通に並べるのではなく崩すことで、凄くおしゃれなサイトになっています。

2.KYOTO GRAPHIE

こちらも「重ねる」テクニック。赤×黒という珍しい色の組み合わせということもあり、個性的でアーティスティックな印象を与えています。

3.KOMINKAN – コーミンカン

4.A-dam Underwear

要素同志をずらして配置するのも、ブロークングリッドレイアウトで良くみられるテクニックです。動画の動きも加えることで、視覚的に面白いサイトとなっています。

5.Agence Digitale Belle Epoque

6.ESTYLE,Inc.

7.三井アウトレットパーク木更津

8.Trippeo

9.STINE GOYA

10.URBAN TUBE

まとめ

以上、ブロークングリッドレイアウトの魅力的な事例でした。

ブロークングリッドレイアウトのサイトを作るうえで大事なのは、「揃える」と「崩す」のバランスではないでしょうか？

グリッドレイアウトの基本を踏襲した、整った美しさ。あえて崩すことで生まれた、個性的な美しさ。この2つが共存しているのが優れた事例の特徴かと思います。

ではでは、K2でした！