Web制作の現場において、グリッドレイアウトを使ったWedサイトはレイアウトの定番であるというくらい多くなってきました。
格子状のグリッドをベースにデザインを行い、情報をまとめてスッキリと見せることのできる人気のグリッドレイアウトですが、様々なページで採用されているのでユニークさや目新しさが出ないのも事実です。2017年頃から増えてきている「ブロークングリッドレイアウト」はご存知でしょうか？
今回は、通常のグリッドレイアウトとは一味違った「ブロークングリッドレイアウト」について、紹介していきたいと思います。もくじ
◆ブロークングリッドレイアウトとは
ファッションやインテリアでも、きっちりと整った見た目は真面目な印象を与えますが、あえて少し崩したほうがおしゃれに見えることがあります。
そのような考え方から生まれたのがブロークングリッドレイアウトです。
あえてレイアウトを崩すことで、オリジナリティを演出し、より魅力的に見せるWebデザインの手法になります。
しかし、ブロークングリッドレイアウトはただ単に好きなようにオブジェクトを配置するという手法ではなく、グリッドレイアウトデザインと同じように、縦横に見えないグリッドラインを引き、揃えるべきところは揃え、極端に大きくしたり、重ねたり、はみ出させたり、あえていくつかの要素をルールから外して目立たせていきます。
◆ブロークングリッドレイアウトのメリット
・個性を出しやすい
グリッドレイアウトは見た目が美しく、情報も分かりやすいというメリットがありますが、要素が綺麗に整っているためインパクトが少なく、個性を出すことが難しいです。
その反面、ブロークングリッドレイアウトは、綺麗な状態からあえてレイアウトを崩すことにより、見る人に違和感を感じさせるため、個性のあるデザインを作ることができます。
・おしゃれ
正しく綺麗に並べられたグリッドレイアウトは、カチッとした真面目で硬い印象を受けます。
少し崩してみるとそこに微妙な空間ができ少し肩の力を抜いたようなおしゃれな印象になります。
◆ブロークングリッドレイアウトの特徴
・重ね合わせる
・はみ出させる
・円や曲線を使用する
・オブジェクトをずらす
上下や左右のマージンを調整し、一部を重ね合わせたり、あえてはみ出して表示することによって、誰もが思わず見てしまうような、興味をそそるデザインに仕上げることができます。
ネガティブマージン(マイナスの値をマージンに指定すること)を使うと、レイヤーのように重なったレイアウトに見せることができます。
あえて「直線的」ではないものをレイアウトに取り入れてみるのもブロークングリッドレイアウトのデザインテクニックの一つです。
◆まとめ
一見すると自由にレイアウトしているように見えるブロークングリッドレイアウトですが、無秩序なデザインにしないというということがブロークングリッドレイアウトをデザインする上では重要になります。
まずはグリッドレイアウトの基本をしっかりと押さえて、写真や画像素材をたくさん活用する際にはブロークングリッドレイアウトでデザイン性と個性のあるWebサイトを作成してみましょう。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞