2019年大注目！ノングリッドレイアウトwebサイトのデザインのコツ
2018.12.28
webサイトのレイアウトは、揃っている事が良しとされている時代が長かったように思います。それはコーディングをする上でも揃っている方が効率が良いですし、かつてのtableコーディングだった時代においてもそうであったからではないでしょうか。
しかし最近は”あえて揃っていない”自由なレイアウトのWEBサイトをよく目にするようになりました！どうやらノングリッドレイアウトやブロークングリッドデザインと呼ばれているようです。今回はそんな2019年大注目のノングリッドレイアウトについてご紹介していきます！
ノングリッドレイアウトとは？
画面を規則的に分割し画像やテキストを配置していくレイアウト方法がグリッドデザインと言われますが、そうではない、ノングリッドレイアウトを一言で言えば「グリッドにとらわれない自由なレイアウト」になります。
それではノングリッドレイアウトを採用する為に、その魅力や効果、デザインのコツなどをみていきましょう！
揃っていないという魅力
揃っているが良しと言われる事が多かったWEBサイトにおいて、この”揃っていない”ノングリッドレイアウトには大きく2つの魅力があります！
自由で開放的
まるで白い紙に自由に写真やテキストを置いているようなデザインは、グリッドデザインには出せないような開放感が生まれます。
http://jibun-pharmacy.com/
グリッドレイアウトの整頓されたデザインはユーザーに安心感を与えますが、ノングリッドレイアウトでは余白の部分の風通しの良さが安心感を与えるのだと感じます。
オリジナリティ
ノングリッドレイアウトが増えてきたワケの1番の理由はオリジナリティが出せるところではないでしょうか。
いい感じのテンプレートで溢れるデザイン市場において、画像を変えているだけのような”他と差別化しずらい”WEBサイトを多く見ます。
効率化や量産というものは時には良いですが、やはりオリジナリティを求めているクライアント様が多いのも現状で、オリジナリティを出すという事はWEBデザインにおいて大きなトレンドでもあります。ノングリッドレイアウトはテンプレートはありません。他社のサイトと差別化したい場合に大変有効的な手法だと言えるでしょう。
画一的になりがちなモバイルサイトにこそ！
「画面幅のあるPCサイトでは自由なレイアウトもしやすいかもしれないけど、モバイルファースト時代にノングリッドってどうなの？」と思われがちです。しかしスマホサイトでも効果的にノングリッドレイアウトを使えます。
むしろどうしても画一的で退屈になりがちなスマホサイトデザインにこそ、ノングリッドレイアウトを積極的に取り入れてみましょう。
http://the-ringo.jp/
一見、スタイリッシュでミニマムなデザインですが、要素を少しずつ重なったりずらしたりすることで動きのあるレイアウトになっています。モバイルサイトにしても単純に縦に画像が並べなかったり、背景に淡い背景を置いたりする事でリズム感を壊すことのないデザインです。
ノングリッドレイアウトのデザインのコツ
それでは実際にデザインに取り入れるにあたり、いくつかコツをご紹介します。
見せたい画像の周りに余白をつくる
http://rijp.eng.nagasaki-u.ac.jp/japan/
見せたい画像の周りに余白を広めにとることで遊べる部分が増えて自由にレイアウトすることが出来ます。近年のWEBサイトでよく見るような存在感のあるフォントを使うとジャンプ率も上がり、より目のいくデザインになります。
切り抜き画像を使ってみる
https://sankoudesign.com/contentpage/hidariuchiwa/
https://yohobrewing.com/
背景を切り抜く事でモチーフが際立ってスッキリと見えます。さらに画像の大きさにジャンプ率をつけたり、それを自由に配置することで、見ていて楽しいなと感じるデザインになりますね！
あまり要素を詰め込まない
あまり画像やテキストを詰め込むと、ユーザーはどこにフォーカスすれば良いのかわからず疲れてしまいます。
もちろん賑やかさを狙うデザインであれば、話は別ですが。
グリッドレイアウトのように規則的に並ぶ事で得られる安心感がないからこそ、ノングリッドでは余白をしっかりと確保し、ゆとりがあり、見せたい情報を際立たせるようなデザインが必要になってきます。
まとめ
いかがでしたか？2019年大注目のノングリッドレイアウトについて実例を踏まえながらご紹介しました。
ランディングページはもちろん、プロモーションサイトやブランディングサイトにも採用されているのが多く見られました。類似商品・サービスとの差別化を図るのに適したレイアウト方法である事は間違いありません！
テンプレート感のない完全にオリジナルデザインを求められる時には、是非このノングリッドレイアウトを採用してみてはどうでしょうか。
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
