Web制作者なら一度は聞いたことがあるでしょう、グリッドレイアウト。
目次
グリッドレイアウトって？
Webでは「フラットデザイン」や「レスポンシブWebデザイン」と同様の比較的ここ近年で出てきたデザイン手法ですが、もともとは「グリッドシステム」や「グリッドレイアウト」と呼ばれ、印刷物などの紙媒体でごく当たり前に使われていた手法でした。具体的には、画面やページ上で、縦方向、横方向に渡る直線（グリッドライン）で格子状に分割し、それらを組み合わせて共通のマージンを用い、ブロック内の要素サイズや配置を決定し、多少サイズ感が違ってもきちんと配置された印象を与えるデザインとなります。
通常の1〜3カラム程度のサイトデザインに飽きたデザイナーやユーザーには、うってつけのWebデザインと言えるでしょう。とはいっても・・なにそれ？というノンデザイナーの方、いくつか参考サイトデザインを挙げてみましょう。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
グリッドレイアウトのWEBサイトをご紹介
TEAM BEYOND
https://www.para-sports.tokyo/
SUPER ME INC.
http://superme.jp/
LaSalle Logiport REIT
http://lasalle-logiport.com/
なんとなく掴めていただけましたでしょうか？レイアウト自体はとても整然としているのに、テイスト次第ではぐんと前衛的で遊び心のあるサイトデザインに仕上がったりもし、人気があります。
グリッドレイアウトのメリットとデメリット
メリット
- ぱっと一瞬で多くの情報で訴えることができ、一覧性が高く、情報を見つけやすい。
- コンテンツが多いサイトでも、全体のデザインが統一されやすい
- コンテンツの変更時も、配置などに構わず更新でき、効率的
デメリット
- 一度に視覚に訴える情報量が多くなり、見る順番に迷いやすい
- 更新頻度が高いサイト程、過去の目当ての記事を見つけにくい
- 全体的な統一感があだとなり、コンテンツごとの重要度がわかりにくくなる
といった一長一短の面を持っております。そのWebサイトに本当にグリッドレイアウトが向くのかを見極め、取り掛かる前に次にご紹介するタイプの中でどちらにすべきかをきちんと見極めてからデザインしましょう。
タイプ別グリッドレイアウト
グリッドレイアウトは、大きく分けて2種に分類されます。ひとつづつ見てみましょう。
カード型グリッドデザイン
カードを複数並べたように見えるデザインです。幅が固定になるため、コンテンツの重要度が次に紹介するものよりもわかりづらくなり、ポートフォリオサイトや順位付けをしたくないコンテンツサイトに向いていると言えます。有名なピンタレストもこちらのデザインを採用していますね。
CHECK IT OR KYOTO
http://www.checkitorgo.com/kyoto/
Pintarest
https://www.pinterest.jp/
可変グリッドデザイン
ブラウザ幅に応じて、コンテンツの幅や配置を変幻自在に操るデザインです。レスポンシブデザインとの相性がよく、どんなデバイスやブラウザ幅で閲覧しても、常に最適なサイズで見せられます。また、コンテンツごとの高さだけでなく幅も数パターン用意することで、カード型グリッドレイアウトよりも重要度を視覚的に訴えやすくなります。そのかわりデメリットもあり、可変なため位置を固定できず、コンテンツの再配置によりひとつひとつの位置・時にはサイズも変えてしまうのは、ユーザビリティに悪影響であるという意見もあります。
HAKUHODO i-studio
https://www.i-studio.co.jp/index.html
大阪工業技術専門学校
https://www.oct.ac.jp/
さて、グリッドレイアウトでサイト構築をする場合、「レスポンシブデザイン（レスポンシブレイアウト）」と「リキッドデザイン（リキッドレイアウト）」を紐解く必要があります。
レスポンシブデザイン（レスポンシブレイアウト）
Googleが推奨しているレシポンシブレイアウトの方から解説しましょう。ひとつのHTMLを閲覧者のデバイスやブラウザ幅に合わせて適切なサイズで表示させるデザインを、レスポンシブデザインとされています。メディアクエリ（Media queries）で構築する場合、ブレークポイント（Break point）はスマホ（640px〜750pxなど）、タブレット（960px〜1,024pxなど）、それ以上のPC（1,024px以上など）を指す3つで指定されています。
しかし、デバイスのサイズや画素は常に流動的で、度重なる規格変動により少し前のサイトでもレイアウトが崩れる、などの問題点がよく出てきてしまいます。また、複数のブラウザ幅やデバイスにきちんと応じたデザインにしがたいため、どうしても一部の端末で表示が崩れたりすることを避けられません。全機種、全デザバイスは検証しようもありませんからね。
リキッドデザイン（リキッドレイアウト）
それに反して、リキッドデザインは、ブラウザの横幅に合わせて各コンテンツの表示サイズを動的に変更させることができるので、きちんと組まれていれば常識的な花幅であればほぼ一般的なブラウザ幅・端末でレイアウトが崩れません。数年前まではスマホ・タブレット・パソコンの3サイズのみへの対応で良かったのが、各社いろんな端末やデバイス幅を市場に投入してきていて、タブレット並みに大きいスマホや、パソコン並みに大きいタブレットなど、メディアクエリでいざブレークポイントを設定しようとした時に、その境界の数値があいまいになりがちです。リキッドデザインはそういった時代の流れにフィットしたレイアウト手法と言えます。
また、リキッドデザインにはフレキシブルデザインも一部含まれるでしょうか。しかしフレキシブルデザインは、完全に100%の横幅ではなく、たとえばPC程度以上のブラウザ幅で閲覧すると、サイト幅が960pxに固定されるなど、最大値や最小値を設定することができます。いろいろあって難しいですね。結局、どっちがいいんだ！という方に、それぞれの利点・欠点をお伝えします。
レスポンシブデザインとリキッドデザインのメリット・デメリット
ふたつに共通するメリット
- HTMLが1つ（ワンソース）で済むため、制作や更新、運用に至っての手間が1回きり
- ブラウザ幅を自動取得し、表示領域や画像を適切な幅に変更できるように組める
ふたつに共通するデメリット
- パソコン用のHTML・CSSを一気に読む込むため、基本的に表示速度が全端末で遅くなりがち
レスポンシブデザインのメリット
- 各デバイスに応じ、不必要な要素を自由に非表示にしたり部分的に変更したりなど出来る
- レイアウトを各ブレイクポイント間で最適化できる
レスポンシブデザインのデメリット
- レスポンシブは特にスタイルを強く上書き・打ち消していくように書き足していくため、構築に工数や時間がかかる
リキッドデザインのメリット
- 各コンテンツを画面やデバイスのブラウザ幅や横幅にに合わせて、相対的に可変に出来る
- 多少の規格変動になら更新なしで対応出来る
リキッドデザインのデメリット
- 組み方の使用上、可能なデザインに限りがある（枠にはまったデザインになりがち）
- コンテンツが長くなりがちで、読みにくいケースが多い
レスポンシブデザインやリキッドレイアウトをグリッドレイアウトに応用する
いろいろな情報を一気にご紹介したので、「結局グリッドレイアウトって・・！？」と悩んでしまったWebデザイナーのあなた。要は、いくつかの手法を比較検討し、その時の案件に応じたものをセレクトすればいいのです。
おそらく「レスポンシブ＋グリッドレイアウト」「リキッド＋グリッドレイアウト」「フレキシブル＋グリッドレイアウト」など、複数の展開が思い浮かぶことでしょう。
ユーザーを飽きさせないためにあらゆる策を講じる1手段としてグリッドレイアウト、ぜひwebサイトに取り入れてみませんか？
マーケティングでお悩みでしたら、
Bigmacにお任せください。
