Blog ブログ

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

WEB デザイン

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

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

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

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

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

1.Agnes Lloyd-Platt

Agnes
https://agneslloydplatt.com/

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

2.KYOTO GRAPHIE

Kyoto Graphie
https://www.kyotographie.jp/

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

3.KOMINKAN – コーミンカン

コーミンカン
http://ko-minkan.jp

4.A-dam Underwear

アダムアンダーウェア
https://www.adamunderwear.com/

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

5.Agence Digitale Belle Epoque

agence belle epoque
https://agence-belle-epoque.fr/

6.ESTYLE,Inc.

ESTYLE
https://estyle-inc.jp/

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

三井アウトレットパーク木更津
http://www.31op.com/kisarazu/special/1min/

8.Trippeo

trippeo
http://v1.trippeo.com

9.STINE GOYA

stine goya
https://stinegoya.com/

10.URBAN TUBE

https://www.urban-tube.com

まとめ

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

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

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

ではでは、K2でした!

WRITER

K2

印刷物・Web・動画制作会社「NET SANYO」の中の人です。Perfumeにドはまりしている息子(3歳)により、一緒に歌う際のっち役をするよう命じられました。頑張ろうと思います。