今回はWEBサイトのグリッドレイアウトについて紹介します。

グリッドレイアウトは2012年頃から非常に人気が出てきたレイアウトで、多くのWEBサイトが取り入れている基本レイアウトです。もし、WEBデザインなどの仕事をしているのであれば、しっかりと押さえておくべきデザイン手法です。

グリッドレイアウトではWEBサイトに必要なパーツを格子（グリッド）状に並べて画面を設計します。「正方形や長方形の方眼状のブロックを組み合わせる」様にしてデザインしていくので、デザインをする側にとっても手順が分かりやすく、アイデアを落とし込み易い手法です。

ここからグリッドレイアウトを使用するメリットや参考になるサイトについて具体的に解説をしていきます。

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

グリッドレイアウトを活用する事で、どの様なメリットがあるのでしょうか？

綺麗に整った印象のサイトになる

冒頭でもお伝えした様に格子（グリッド）を組み合わせて画面のデザインを行います。ある程度決められた形のブロックが並ぶ様な印象になりますので、非常に整った印象のサイトになります。

元々は雑誌で使われていたレイアウト手法でもあるので、見ている人にとっても、分かりやすいサイトになります。

発信したい情報、最新の情報、それ以外の情報などの切り分けがしやすいバランスの良い手法です。

更新・編集がしやすい

格子状にブロックを組み合わせる様にデザインするので、更新・編集がしやすいです。情報の追加があったら、一部分の内容を入れ替えるだけでも成立してしまいます。

全体的なレイアウトを変更する際にも、グリッド⇒グリッドへの変更であれば、変更は非常に簡単です。

時代の流れに左右されない普遍性がある。

上述した様に、元々は雑誌で使用されていた手法（今も使われている）であるため、多くの人に対して馴染みがあり、時代の流れに左右されないデザインになります。迷ったらとりあえずグリッドデザインにする、というデザイナーも結構います（後々で手を加えるんですが、、）。

レスポンシブ・ウェブデザインの考え方と相性が良い。

最近は当たり前の様に言われる様になった「レスポンシブ・ウェブデザイン」。

各デバイスの画面の大きさに合わせて、最適なレイアウト表示をする手法ですが、このレスポンシブ・ウェブデザインとグリッドレイアウトは非常に相性が良いです。

基本的にはグリッドの位置を変更するだけでも成立してしまうので、どんなデバイスでも最適なレイアウトをする事ができます。

グリッドレイアウトの実装

グリッドレイアウトの実装には以下の様なものを使うのか一般的です。

  • Flexbox（Flexible Box Layout Module）
  • CSSグリッド（CSS Grid Layout）
  • グリッドレイアウト用のフレームワーク

※使い方の詳細については別の記事で詳しく紹介します。

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

ここでグリッドレイアウトを使用した参考になるサイトを紹介します。

マイフェイバリット関西

非常に分かりやすいグリッドレイアウトのサイトです。旅行系のサイトですが、グリッドの中身もカラフルで「旅行に行きたい！」と思わせる様な印象を受けます。

個々の画像も綺麗に作られており、女性向けのサイトとしては非常に良い見本になるサイトだと思います。
※グリッドレイアウトでWEB制作する場合は個々の画像を別々の担当者が作成しやすいメリットもあります。

https://www.my-fav.jp/

スーパーマリオメーカー

ゲームを紹介するサイトはグリッドレイアウトと非常に相性が良いです。

特に2Dのゲームはブロックを組み合わせる様にして画面が作られるので、グリッドレイアウトは2Dゲームのイメージとも良く合います。

https://www.nintendo.co.jp/wiiu/amaj/index.html

ニンテンドースイッチ

こちらもニンテンドーの人気ハード「スイッチ」のサイトです。2Dのキャラではありませんが、グリッドレイアウトを使用しています。

https://www.nintendo.co.jp/hardware/switch/

東京メトロ「Find my Tokyo」

東京メトロの「Find my Tokyo」でもグリッドレイアウトが使用されています。非常に分かりやすいデザインで、まさに綺麗に整ったサイトだと思います。

カーソルを当ててみるとアニメーションが走るのが分かります。
※タイルの様に分けられた一つ一つの画像やアニメーションに意味があります

http://findmy.tokyo/

小笠原商店

香川県でそうめん等を販売している「小笠原商店」のサイトです。

東京メトロのサイトともよく似ていますが、トップページから１カラムの商品の紹介ページなどにも飛ぶ事ができます。トップページのグリッドレイアウトだけではなく、他のレイアウトで作成した個別のページを上手く組み合わせてサイトを作っています。

http://shodoshima-s.jp/

ふじや「カントリーマアム」

お菓子を紹介するサイトもグリッドレイアウトによく合います。お菓子が箱に詰められているイメージとも重なります。

色合いや文字フォント等を見ると、非常に女性らしさがあり、デザイン性を感じるサイトです。他のグリッドレイアウトデザインのサイトとは細かい部分が違っているので、ぜひ見てみて下さい。

https://www.fujiya-peko.co.jp/countrymaam/

グリッドレイアウトに関連するレイアウト

グリッドレイアウトはWEBの世界では今や定番のレイアウトになりました。

だからこそ、関連するデザイン手法もたくさん存在します。ここではそのレイアウト手法をご紹介します。

リキッドレイアウト

ウェブブラウザの表示領域に合わせて、サイトのデザインが変更されるレイアウトをリキッドレイアウトと呼びます。ブラウザの大きさを狭くしたり、広くしたりすると、その大きさに応じて、サイト内のコンテンツの大きさも変化します。また、サイトの幅は相対値（パーセンテージ）で指定します。

レスポンシブレイアウトとも似ていてよく混同されます。

※レスポンシブレイアウトとは、そもそもの考え方や目的が少し違います。ただし結果的に同じ様なデザインになる事はあります。

可変グリッド・レイアウト

可変グリッド・レイアウトというのは、WEBの閲覧画面（ブラウザ）の幅を変更した際、その幅に合わせて、グリッドの位置を最適化するレイアウトになります。

最近はグリッド・レイアウトのWEBサービスが非常に増えてきており、ユーザの画面に合わせてグリッドの位置を変更させるというのは当然と言えば当然のレイアウト方法になります。こちらも、レスポンシブ・ウェブデザインと非常に相性が良いレイアウトです。

ブロークングリッドレイアウト

グリッドレイアウトを基本にしながらも、名前の通り、あえてそれを壊していく様なレイアウト手法です。あまりにもグリッドレイアウトが増えてきたからこそ生まれたレイアウトと言えるかもしれません。

とはいえ、雑誌の世界では昔から使われていたレイアウト手法であり、今後のWEBデザインの世界でも定番的なレイアウトになるのでは？とも言われています。

整った印象のサイトが増えている中で、少し奇抜な印象を与えたりする事ができるため、上手に使えば非常にオシャレなサイトに仕上げる事ができます。

グリッドレイアウトを使う上で覚えておきたいデザイン手法

ノングリッドデザイン

簡単に言えばグリッドデザインを使わないデザインです。

グリッドデザインが主流になり、綺麗に整理されたWEBサイトが増えてきた中で、オリジナリティを追求するために、あえて整頓されたイメージの配置をしないデザインです。

ブロークングリッドレイアウトもこのデザイン手法に含まれるという考え方がありますが、実際は少し違っています。

ブロークングリッドレイアウトは一度グリッドレイアウトで作った形を壊すという流れで作れる事が多いのに対して、ノングリッドデザインは、そもそもグリッドレイアウトを全く意識しないデザイン手法と言えます。

非常にデザインスキルが問われる手法になりますが、イメージがハマればかなりオシャレで効果的なサイトデザインになります。

レスポンシウェブデザイン

文中でも既にお伝えしているレスポンシウェブデザインは、ＰＣ、スマホ、タブレットなどの画面の大きさに合わせてサイトコンテンツの大きさや配置を変更します。HTMLファイルは1つだけですが、CSSの設定でデバイス毎のレイアウトを変更するのです。

スマホの普及に伴って、WEBのデザイン手法も大きく変わりました。各デバイスの画面の大きさに合わせて、レイアウトを自動で変更させるデザイン手法は必須と言えます。

今は、サイトを作る時は必ずデバイス毎のデザインをするのが当たり前の時代になっているので、基本的な作業工程とも言えます。

まとめ

さて、今回はグリッドレイアウトについてご紹介しました。

今や定番のレイアウト手法なので、関連したデザイン手法や・派生した手法なども続々と出現しています。今は、このグリッドレイアウトからいかに新しいレイアウトに移行するかという思考錯誤がされている様に感じます。

基本的なレイアウト手法としてしっかりと押さえておきましょう。