Webサイトの基本形であるグリッドレイアウト。
格子状に揃えられた要素は、整然と、かつ読みやすさといった印象をサイト閲覧者に与えます。
しかし近年では、あえて要素を揃えず自由で動きのあるレイアウト「ノングリッドデザイン（レイアウト）」が急速な広まりを見せています。
Webサイトの常識を壊し、高いオリジナリティを発揮するノングリッドデザインは、特にベンチャー企業やブランディングサイトなどに多く取り入れられており、特に自由な若者に対して好まれるようです。
この記事では、ノングリッドレイアウトがWebサイトにどのような影響をもたらすのかについて、ご紹介していきます。
ノングリッドデザインについて
冒頭で少し説明しましたが、Webサイトの基本形は格子状に要素が整列され、読みやすさや綺麗さを優先したグリッドレイアウトです。
それに対してノングリッドデザインでは格子状に要素を整列させる事にこだわらず、テキストや写真を自由に配置し、サイト閲覧者に開放的・自由な印象を持たせるWebデザインの事を指します。
やや擬似のデザインとしてブロークングリッドレイアウトも挙げられますが、こちらはグリッドレイアウトをベースにワンポイントだけ「はずし」をするのに対し、ノングリッドデザインはグリッドの概念を捨て、完全に不規則な配置となります。
しかし要素の配置は単純なランダムとするのではなく、ある程度の規則性やデザイン的考証・裏付けが必要であり、製作者はWebデザイナーとしての高いスキルを要求されます。
ノングリッドデザインの例
実際にノングリッドデザインの例を見てみましょう。
グリッドレイアウトは各要素が格子状に配置されており、非常に閲覧しやすいですね。ブログやコーポレートサイトなど、Webページ内の要素数が多いサイトに有効です。
ブロークングリッドレイアウトでも格子状に要素の配置が行われていますが、センターラインからややはみ出したメインビジュアルやキャッチコピーなど、ワンポイントに絞ったはずし要素が見られます。
一方でノングリッドデザインは以下の参考サイトのように、要素が画面全体に散りばめられ、とても開放的な印象を受けます。
こちらのサイトはドレスシューズのブランディングサイトですが、ドレスシューズというフォーマルな印象を、ノングリッドデザインによるサイト構成で「若者にも気軽に履いて欲しい」というメッセージを感じられますね。
参考にしたいノングリッドデザインのWebサイト
ここからはWeb制作の際に参考にしたい、ノングリッドデザインを取り入れたWebサイトをご紹介していきます。
同じノングリッドデザインとは言え、Webサイトそれぞれによって与える印象・効果も異なりますので、是非参考にしてみてくださいね。
シンプル・スタイリッシュなノングリッドデザイン
まずはシンプル・スタイリッシュなノングリッドデザインから。
こちらはヘアアイロン・ドライヤー・ブラシ・美顔器など、女性向けの美容家電を取り扱うブランドのWebサイトです。
美容・女性向けということもあり、白を基調としたシンプルかつスタイリッシュな印象を持たせていますが、商品写真やテキストをノングリッドデザインとすることで、まるで浮遊しているかのような軽やかさも感じさせてくれます。
上品・高級感のあるノングリッドデザイン
引用：VNTUS | by envie – ヴァニタス コンタクトレンズ
ファーストビューいっぱいに広げられた高品質な動画をベースに、画面全体に様々なコンテンツが散りばめられており、なおかつ可読性も意識した読みやすいWebサイトです。製作者の高い技量を感じます。
美しく上品なグラデーションをあしらったタイポグラフィと、女性モデルの写真。それらをノングリッドデザインで配置、かつパララックスエフェクトを付与で独特な風合いを醸し出しています。
思わず「キレイ」と口にしてしまいそうなWebサイトですね。
かっこいいノングリッドデザイン
引用：雑誌連動『FOOD: re-generative 地球のためのガストロノミー』特集｜WIRED.jp
黒とビビッドグリーンのサイケデリックな印象のあるWebサイトです。
ガストロノミー（食事・料理と文化の関係を考察すること）に関する特集サイトですが、このような特徴的な配色となったのは、近未来的な発表内容を反映してのことでしょうか。
ほんの少しパララックスエフェクトも採用されており、宇宙的な浮遊感もある面白いWebサイトです。
ファーストビューからの多数の写真がスクロールされる部分に集中してノングリッドデザインが採用されており、そのランダムな配置を見た読者に「何が起こるんだろう」というワクワク・ドキドキ感を与えてくれます。
清潔感・信頼感のあるノングリッドデザイン
引用：日本エアフィルター
こちらは空調設備などのエアフィルターの開発・製造を行なっている企業のコーポレートサイトです。「おいしい空気」の名の通り、ファーストビュー下に展開されるノングリッドデザインがその清潔感と、企業としての信頼感を演出しています。
ここまではブランディングサイトを中心に若者向けのWebサイトを取り上げてきましたが、コーポレートサイトでも親和性が高いことが分かる良い例と言えますね。
個性的なノングリッドデザイン
引用：タイポグラフィもグラフィックも全てが個性的なこちらのWebサイト。
それら個性的な要素を、ノングリッドデザインで画面全体に散りばめており、非常にアーティスティックな印象を感じさせてくれます。
いかにも若者向けのデザインで、その独特な世界観の表現にはまさにノングリッドデザインが最適だと言える良い例だと思います。
下北村山への移住を考えている人向けのメディアサイトです。
爽やかなブルーと、自然・そこに住まう人々の写真が美しいですね。
自由で豊かな暮らしというテーマ性を、ノングリッドデザインの絶妙なバランスで表現しています。
爽やかな印象と自由なレイアウト、それでも可読性を意識したコンテンツ配置で、まさにお手本のようなノングリッドデザインと言えます。
まとめ
いかがでしたでしょうか。
ノングリッドデザインは若者向けのブランディングサイト・メディアサイトは元より、コーポレートサイトやそれ以外のジャンルでも、幅広く応用できることが分かりました。
2018年ごろから急速な広まりを見せているノングリッドデザイン。その汎用性とオリジナリティから、2021年も大ブームとなりそうです。
皆さんもWebサイト制作の際に、積極的に取り入れてみてはいかがでしょうか。
優れた採用サイトが作れるWebデザイナーになりたい方へ
この記事でご紹介した優れた採用サイトを作れるWebデザイナーになるには、信頼できるWebデザインスクールに通うことをおすすめします。
以下の記事では、Webデザインスクールの厳選３校をご紹介しています。
是非参考にしてみてくださいね。
実践的なWebデザインが学べる！
デジタルハリウッドSTUDIO by LIG
