グリッドレイアウトとは？特徴・作り方2パターン・参考サイトを解説

グリッドレイアウトとは格子状に要素を配置するデザインのこと

グリッドレイアウトとは、画面やページを方眼紙のように格子状に分割し、ブロックごとに要素を配置してレイアウトを作るデザイン手法です。グリッドデザインやグリッドシステムともいわれます。

グリッドラインと呼ばれる格子状の線に、構成要素の境界線が合うように持ってくることで、すっきり見やすいレイアウトを簡単に作成可能です。ブロックをつなぎあわせて長方形にしたりわざと余白を作ったりすることで、デザインに遊びを生み出して単調さをなくすこともできます。

そもそもグリッドレイアウトは、新聞や雑誌などの紙媒体で頻繁に使われてきました。現在ではWebデザインの基本となっており、必ず知っておきたい手法の1つです。

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

グリッドレイアウトのメリットを3つ紹介します。実際にグリッドレイアウトを利用するかどうか判断する際に、参考にしてください。

1. デザインに統一感が生まれる

グリッドレイアウトの1つ目のメリットは、デザインに統一感が生まれることです。グリッドレイアウトを用いてWebサイトを制作すると各要素が四角形に統一されるため、とりあえず配置するだけで見た目を整えられます。

全体の見せ方を工夫しなくてもまとまりが生まれ、手軽に洗練されたWebページを作れることがグリッドレイアウトの魅力です。

2. 多くの情報を見やすく表示できる

グリッドレイアウトでは多くの情報を見やすく表示できます。ブロックを並べていくスタイルであるため、さまざまな記事やコンテンツを表示させても「文字だらけで見にくい」となる心配はありません。クリックすべき場所もわかりやすいです。

WebメディアやECサイトなど多くのコンテンツ・アイテムを並列させるWebサイトには、特にグリッドレイアウトをおすすめします。

3. 情報を更新しやすい

情報を更新しやすい点もグリッドレイアウトのメリットです。型が決まっているため、どのようなコンテンツであってもレイアウトの崩れを気にせず簡単に更新できます。

ユーザーにとって最新情報がわかりやすいことも特徴の1つでしょう。「F型」や「Z型」と呼ばれる視線動線からもわかるように、ユーザーは左上からコンテンツを閲覧します。

新しいコンテンツが左上に配置されるように設計しておくことで、ユーザーが最新情報を認識しやすい状況にすることが可能です。

グリッドレイアウトの2つのデメリット

グリッドレイアウトには注意すべきデメリットが2つあります。制作後に修正を必要としないよう、あらかじめ確認しておきましょう。

1. ブロックサイズを同じにすると単調なイメージになる

グリッドレイアウトの1つ目のデメリットは、同じサイズのブロックを多用すると単調なイメージになる点です。

同じサイズの正方形を並べただけのサイトにはメリハリがなく、ユーザーはつまらないと感じやすくなります。サイズの異なるブロックを利用する、ページの一部にグリッドレイアウトを導入する、などの方法で単調なサイトにならないように工夫しましょう。

2. ブロックが多すぎると可読性が下がる

グリッドレイアウトでは、ブロックが多すぎると可読性が下がる点も注意が必要です。多くのブロックを配置すると、1つひとつのブロックが小さくなり文字や画像が見えにくくなります。

可読性が下がると、ユーザーがコンテンツを閲覧する順番に迷います。1ページのブロック数を減らす・ブロックのサイズやデザインを変えて重要なコンテンツを目立たせる、などの対策をすることで可読性を高める工夫をしましょう。

グリッドレイアウトのデザインを決める3つのポイント

グリッドレイアウトを用いたサイト制作において、デザインを決定するポイントは次の3つです。

下記でそれぞれのポイントを深掘りして解説します。

1. グリッドの数

グリッドレイアウトのデザイン制作では、まずグリッド数を決定します。最大ページ幅を想定し、そのなかでグリッドを何分割するかを決める流れです。

CSSフレームワークでは12分割もしくは16分割のデザインが一般的とされています。明確な方針が固まっていなければ、12分割か16分割のどちらかに仮決めして進めましょう。

2. ボックスの大きさ

グリッド数の次に決めるポイントは、ボックスの大きさです。グリッドレイアウトには、ボックスの大きさによって3つの型が存在します。

近年は、スマホではワンカラムの定形型、タブレットやパソコンでは可変型を利用するハイブリッド型が増えてきました。サイトの内容やユーザーの操作などにあわせて、柔軟にスタイルを決めましょう。

3. 表示ブラウザの大きさ

グリッドレイアウトのデザインを決める3つ目のポイントは、表示ブラウザの大きさにあわせた変更です。スマホとパソコンでまったく同じデザインにするとユーザビリティが下がるため、ブラウザサイズに応じて調整しなくてはなりません。

具体的には「リキッドレイアウト」「レスポンシブレイアウト」という2つの方法があります。

リキッドレイアウト

リキッドレイアウトは、ブロックの大きさを自動でブラウザの領域にあわせて表示させる方法です。リキッドレイアウトを用いることでグリッドやブロックの大きさを固定せずに済みます。

自動でブロックのサイズを適応させるため、デバイスサイズごとの設定が必要ない点が魅力です。

レスポンシブレイアウト

レスポンシブレイアウトとは、デバイスごとのCSSを記述し、読み取ったブラウザサイズに合ったデザインを表示させる方法です。

スマホやタブレット、パソコンなどの端末が違えば、ユーザーの目的やページ内での行動が異なる場合もあります。単にデザインを端末に適応させるだけではなく、ユーザーにあわせた導線設計ができる点がメリットです。

デバイスごとの記述が必要となりますが、多くの企業がレスポンシブレイアウトを取り入れています。

グリッドレイアウトの作り方【2パターン】

グリッドレイアウトの作り方は主に次の2パターンです。

それぞれのやり方を下記で詳しく解説します。

1. CSSフレームワークを用いる

CSSフレームワークを活用することで、工数を圧縮しながらグリッドレイアウトを制作できます。使いやすくおすすめなフレームワークを2つ紹介するので、参考にしてください。

Foundation｜グリッドレイアウトの定番フレームワーク

参照：Foundation

Foundationは定番のCSSフレームワークで、12カラムのグリッドレイアウトに対応しています。定形型のグリッドレイアウトを採用しようと思っている場合におすすめです。

Sassにも対応しているため、カスタマイズも難しくありません。

Masonry｜可変型グリッドレイアウトにおすすめのフレームワーク

参照：Masonry

MasonryはjQueryを利用しているCSSフレームワークです。ブラウザサイズにあわせてデザインが変わるため、可変型のグリッドレイアウトを検討している方におすすめします。デザインが変わる際には要素がアニメーションで動き、見ていて楽しい点も特徴の1つです。

ブロックのサイズを変えずに余白や位置でグリッドを作成できます。JavaScriptの特徴を最大限発揮するフレームワークといえるでしょう。

2. CSSを自分で記述する

フレームワークを用いずに、自分でCSSを記述してグリッドレイアウトを作成することも可能です。簡単なデザインであればコーディング量も多くありません。

CSSでグリッドレイアウトを実現する場合は「CSS Grid」もしくは「Flexbox」のどちらかの方法を利用します。一長一短あるため、場面に応じて使い分けましょう。

近年は、少し扱いが難しいもののシンプルな記述で複雑なデザインを実装できるCSS Gridが主流です。CSS Gridを用いてグリッドレイアウトを実現する方法の例は下記のとおりです。

グリッドレイアウトのサンプル・参考サイト3選

最後に、グリッドレイアウトを用いて構築しているサイトを3つ紹介します。デザインを考える際の参考にしてください。

1. STAYFUL LIFE STORE

参照：STAYFUL LIFE STORE

「STAYFUL LIFE STORE」は日用雑貨やコーヒーなどを扱うECサイトです。トップページやカテゴリーページで、グリッドレイアウトを用いて商品を一覧表示しています。

複数のコンテンツをタイル形式で表示できるグリッドレイアウトと、さまざまな商品を扱うECサイトの特徴が噛み合った好例です。ブロックのサイズを変えることで、単調さをなくすだけではなく目玉商品をアピールすることもできます。

2. OHArchitecture

参照：OHArchitecture

建築設計・デザイン事務所「OHArchitecture | オーエイチアーキテクチャー」のホームページです。事例やイベントなどを紹介するコラム記事を、グリッドレイアウトで表示しています。

落ち着いたグレーをベースにし、ブロックの大きさにバリエーションを持たせることで、洗練されたイメージを演出しているページです。スタイリッシュなブランディングが求められる建築設計・デザイン事務所業態とマッチしています。

3. ウルカモ

参照：ウルカモ

「ウルカモ」は中古マンション売買のマッチングサービスです。あえてブロックの大きさを統一することで、シンプルながらユーザーの見やすさ・使いやすさを追求しています。

パソコンでは3カラムの中央にグリッドレイアウトを採用している形式ですが、スマホでは物件のみが表示されるように調整されています。

グリッドレイアウトのまとめ

グリッドレイアウトの基礎と使い方を理解することで、すっきりと整理整頓された見やすいWebサイトを作成可能です。さまざまな情報をwebサイト上に載せたいと思っている場合は、積極的にグリッドレイアウトを活用しましょう。

グリッドレイアウトの実現には少なからずCSSの知識が求められます。複数デバイスへの対応にはJavaScriptやjQueryも必要となるため、不安であればWeb制作会社に依頼しましょう。

ホームページ制作会社を探している方は、ぜひ「比較ビズ」を利用してください。2分程度の簡単な入力で経験豊富な制作会社を探せます。

代表取締役 佐藤靖将

監修者

株式会社セルリア

大学卒業後、Webコンサルティング企業で2年ほどセールス兼コンサルタントに従事。その後フリーランスに転身し総合広告代理店、Webシステム開発会社、クリエイティブエージェンシーなどの企業で主にプロジェクトマネージャーとして顧客のデジタル関連プロジェクトを支援する。それらの経験から、総合的かつ一気通貫のデジタルソリューションを提供したいと考え株式会社セルリアを設立。以降、クライアントの課題解決に邁進する日々を送る。

この監修者の記事一覧

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。