Blog ブログ

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

WEB デザイン

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

まとめ

いかがでしたでしょうか?

「ブロークン」とはいえ、無秩序になってしまっては魅力的に見せることはできません。

グリッドレイアウトの基本を踏襲して揃えるところは揃え、バランスよく崩しているのがこれらの事例の特徴です。

ではでは、K2でした!

WRITER

K2

子ども(一歳8か月)がスーパーの肉を「パパ!」って呼んでた。