members

members

2019年注目!ノングリットレイアウトとは?

Tweet

webサイトのレイアウトは、整っている事が良いとされてきました。
それはコーディングをする上でも揃っている方が効率的である点と、tableコーディングが主流だった時代においてもそれが良しとされていたというのが大きいかと思います。

しかし最近は「不揃い」、まるで雑誌の切り抜きのような「自由なレイアウト」のWEBサイトをよく目にするようになりました。
これらは、ブロークングリッドレイアウトノングリッドレイアウトと呼ばれ、2019年大注目されています。

ノングリッドレイアウト

ブロークングリットレイアウトとは、要素をあえてずらしたり、重ねたりすることによってデザインに遊びを取り入れるデザイン手法です。
崩れたレイアウトにすることによって新鮮なデザインを表現することができます。
ノングリットレイアウトとは、このブロークングリッドレイアウトよりもさらに自由度が高く、
レイアウトに規則性や法則性を持たせずにそれぞれの要素を配置するデザイン手法です。
自由が高く型にはまらないページが作れるため、企業のオリジナリティを表現でき他サイトと差別化を図ることができます。

今回はこのノングリットレイアウトを取り入れる際のポイントと注意点をご紹介します。
ノングリットデザイポイント見出し背景

引用元:https://www.coperni.co/en

【ポイント(1)】余白に遊びをもたせる

ポイント背景
引用元:https://www.abcd-architecture.fr/
上記のサイトは上下左右に遊びをもった余白を持たせ、変化をつけています。左右に余白をつけるだけでは、レイアウトの整った印象を取り除くことはできません。上下の配置にも変化をつけメリハリを付けることでノングリッドデザインの良さがさらに引き立ちます。また、見せたい画像の周りには広めに余白をとりましょう。遊べる部分が増えて自由にレイアウトすることが出来ます。タイポグラフィやインパクトあるフォントを使うとジャンプ率も上がり、より目のいくデザインになります。

【ポイント(2)】要素は最小限に絞る

ノングリットデザインポイント要素
引用元:http://www.sss-s.jp/
あれもこれもと多くの画像やテキストを詰め込むと、ユーザーはどこにフォーカスすれば良いのかわからず離脱率をあげる原因を作ってしまいます。余白をしっかりと確保し、見せたい情報を際立たせるようにします。

【ポイント(3)】背景は一色に

ノングリットデザインポイント背景一色
引用元:https://dschool.stanford.edu/
内容のまとまりを表現するために背景色を変えると、ノングリッドデザインの良さを上手く魅せることが難しくなります。例えば、イメージは真っ白なキャンバスに自由に絵を描くように要素を配置すること。背景色はつけずに、テキストの色やサイズを変えるなど、要素に演出を加えていくことを推奨します。

【注意点】

自由度が高いからといって何も考えずに配置すると、規則性が無いためユーザビリティの低いサイトになってしまいます。そのためデザイナーの経験値が必要で、難易度も高めですので、しっかりと全体のバランスや余白の取り方など、慎重に構成を考える必要があります。

【まとめ】

ノングリットレイアウトはwebサイトのサービスや商品をより魅力的に演出することが可能ですのでランディングページやブランドサイト、メディアサイト(オウンドメディア含む)で使用するのが効果的です。
デザイン的な優秀さだけではなく、UXの視点からもレイアウトを自由に決められる分、ユーザーを目的場所へ誘導しやすくなるメリットもあります。
従来のルールは一旦忘れて、ノングリッドデザインが生み出す開放感やオリジナリティを活用しながら、サイトパフォーマンス向上を図ってみてはいかがでしょうか。

 

佐藤 友紀(SATO YUKI)
2016年入社。​第4ビジネスユニット アカウントサービス10グループに所属。
ECサイト運用を担当するディレクター。超感覚人間の自由人。ヨガインストラクター。
過去のコラム「今年の流行色」って、いったい誰が決めてるの?!

 

 

END