グリッドレイアウトは数々のWebサイトで採用されており、人気の高いデザイン手法です。

とてもシンプルなデザインの方法ですが、それぞれの要素のデザインやマージン(余白)の取り方などで与えられる印象がガラッと変わります。

今回は、グリッドレイアウトの特徴やメリット、参考になるWEBサイトをご紹介したいと思います。

スポンサーリンク

グリッドレイアウトとは


グリッドレイアウトはグリッドデザインやグリッドシステムとも呼ばれ、それぞれの要素をグリッド(格子)のように並べることで、ユーザーに整った印象を与えることのできるWEBデザインの手法です。

シンプルなデザインのため様々なサイトで使うことができ、それぞれの要素のデザインや内容、またマージン(余白)の取り方によって見る人に与えられる印象も変わります。

雑誌などの印刷物では狭いスペースに多くの情報を詰め込む必要があるため、整った印象を与えられるグリッドレイアウトがよく使われていますが、WEBデザインにおいてもグリッドレイアウトはよく採用されています。

グリッドレイアウトのメリット

情報を整理して見せることができる

グリッドレイアウトは多くの要素を並べた時に、それぞれがどこで区切られているのかを分かりやすく伝えることができるため、整った印象を与えることができます。

そのため、多くの情報を詰め込んでもきちんと整理することができるので、写真や制作事例、記事など多くのものを並べて表示しても分かりやすく見せることができます。

更新性に優れている

記事や写真、制作事例などは日々追加する必要があります。グリッドレイアウトであれば一番上に新しく要素を追加するだけで情報を追加することができるため、更新性に優れています。

また、無意識に一番左上が最新の情報だということが認識できるので、アクセスした人にも最新の情報をしっかりと分かりやすく伝えることができます。

レスポンシブデザインとの相性がいい

2017年はGoogleがモバイルファーストインデックスへの移行を予定しているなど、モバイル端末でのWEBサイト表示に対する重要度が高まっている中、様々なデバイスで共通のデザインを使うことのできるグリッドレイアウトに注目が集まっています。

本サイトのトップページに表示されている記事一覧もグリッドレイアウトで構成されていますが、画面の幅に合わせてグリッドが自動で整列するようになっており、どんなデバイスでも最適なデザインで表示されるようになっています。

web design trendsのトップページ

モバイルファーストインデックスによってスマホ用ページが必須になると思われますが、レスポンシブデザインにしておけば影響は無いと言われているため、グリッドレイアウトでサイトを作っておけば安心できそうです。

※モバイルファーストインデックスに関してはこちらをご覧ください。

モバイルファーストインデックスに向けてやっておきたいSEO対策まとめ

グリッドレイアウトの参考になるサイト

グリッドレイアウトが効果的に使われていて、参考になりそうなWEBサイトをいくつか集めてみました。どのページも魅力的なページとなっているので、ご紹介したいと思います。

NSSG

京都にあるデザイン会社の制作実績ページです。一切テキストを表示せず、画像だけを並べているため作品展を見ているかのような印象を受けます。ページを表示したときにパラパラと要素が現れてくるアニメーションもおしゃれです。

カントリーマアム

みなさん大好きなカントリーマアムのページもグリッドレイアウトで作られています。こちらはそれぞれの要素をぴったりと敷き詰めており、統一感がしっかりと取れています。画面の幅を変えると自動的にグリッドのサイズが調整されるレスポンシブデザインになっています。要素にマウスを合わせた時のアニメーションが楽しげな印象を与えていますね。

BASEMENT FACTORY PRODUCTIONS

東京にある制作会社の制作実績ページです。何スクロール分もびっしりとグリッドレイアウトで実績が並んでおり、多くの実績を持っている事がよくわかります。このサイトもレスポンシブデザインに対応しており、画面幅を変えると要素が整列するようになっています。

DAC

広告会社DACのホームページです。最近ではコーポレートページのトップにグリッドレイアウトを採用している企業も増えており、その1つがこちらのサイトです。ニュースリリースもただ並べるだけではなくて、デザインを整えて表示することで読んでもらえる機会が増えるのではないでしょうか。

MagaCafe

こちらはWEBマガジンにグリッドレイアウトが採用されているサイトです。記事一覧で画像をしっかりと見せたいメディアの場合は、グリッドレイアウトを採用すると画像を大きく表示できるので相性がいいですね。WEBサイトなのに雑誌を読む感覚で楽しむことができます。

Pinterest

Pinterestは有名なSNSですが、このWEBページでもグリッドレイアウトが使われています。Pinterestも画像がメインのSNSなので、グリッドレイアウトとの相性は抜群です。自分のピンをまとめたページでは、自分のお気に入りの画像や作品がびっしりと並んだページになるため、見ているだけで楽しくなってしまいます。

NASA

NASA(米国航空宇宙局)のWEBサイトでもなんとグリッドレイアウトが使われています。宇宙をイメージした色合いのページにはニュース、画像、動画、ツイートなど色々な要素が整理してまとめられています。グリッドレイアウトの下に「MORE STORIES」というボタンがあり、押すと表示される要素が下側に追加されます。これもグリッドレイアウトが使われているWEBサイトではよく見られるデザインです。

WEBデザインの最新トレンドはこちら

グリッドレイアウトの他にも流行のWEBデザインをまとめています。ぜひ参考にしてみてください。

2017年を先取り!WEBデザインの最新トレンドまとめ

まとめ

グリッドレイアウトは昔から馴染みのあるデザインですが、スマホやタブレットの普及によって様々なデバイスが登場している昨今、改めて注目を集めているデザインとなっています。

初心者の方がページを作るときにも、比較的簡単に作ることができますし、応用を聞かせると見る人に与える印象もガラッと変えることができます。

グリッドレイアウトの基本をWEBデザインに取り入れて、おしゃれなWEBサイトを作ってみてください!

スポンサーリンク

おすすめの記事