グリッドレイアウトとは？メリット・デメリットや作り方2パターンを解説

グリッドレイアウトとは

グリッドレイアウトとは、格子状のマス目をベースに、CSSでWebサイトにレイアウトする方法です。グリッドに沿って画像や文字を配置することで、規則性が生まれて情報を見やすくする効果があります。

新聞や雑誌で古くから使われており、縦横自在に2次元レイアウトが可能です。レスポンシブデザインとの相性がいいことが知られており、現在も注目のレイアウト方法といえます。

グリッドレイアウトとフレックスボックスとの違い

フレックスボックスは、グリッドレイアウトの2次元レイアウトとは異なり、1次元レイアウトです。横方向のみにレイアウトされ、コンテンツ幅の端で折り返し、改行後再び横方向へレイアウトされます。

グリッドレイアウトはあらかじめレイアウトを決めて要素を割り当てていくため、要素の増減に柔軟な対応が難しいです。フレックスボックスは横並びにどんどん追加できるため、要素の増減に柔軟に対応でき、増減が多いセクションに向いています。

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

グリッドレイアウトのメリットは、以下の4つです。

グリッドレイアウトは1度に多くの情報を見せられ、デザインを統一しやすいメリットがあります。制作時間を短縮できるため更新がしやすく、レスポンシブデザインとの相性が抜群です。

1度に見せられる情報量が多い

グリッドレイアウトは、1度に多くの情報を見せられます。格子状のマス目をベースに、情報を整理できるためです。Excelの表に情報をまとめていくイメージで、サイトをデザインできます。

コンテンツ一覧ページや商品一覧ページなど、情報が多いWebサイトに使うことが多いです。多くの要素を並べても、区切り目がわかりやすいためごちゃごちゃすることはありません。

Webサイト上のデザインを統一しやすい

グリッドレイアウトは、Webサイト上のデザインを統一しやすいです。格子状のマス目をベースにしており、表と同じようにまとめられます。コンテンツを整理でき、各コンテンツがまとまりやすくなるでしょう。

各要素を縦横に並べられるため、ページごとに同じデザインにしやすいです。Webサイトのデザインに統一感を出したい場合に向いています。

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

グリッドレイアウトは、レスポンシブデザインとの相性がいいです。ブロックごとの区切りがわかりやすいため、カラム落としやリキッドレイアウトと組みあわせられます。レスポンシブデザインの調整がしやすいです。

レスポンシブデザインとは、Webサイトのデザインを「ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザイン」を指します。近年はスマホやタブレットでインターネットを利用するユーザーが多く、パソコンだけではなくさまざまなデバイスへの対応が求められます。

制作時間を短縮でき更新しやすい

グリッドレイアウトは、制作時間を短縮でき、更新しやすい特徴があります。それぞれの要素がグリッドで区切られているためです。

新しい要素を追加した際に、グリッドのルールに沿って簡単に調整できます。デザイン制作・情報更新の時間を大幅に削減できるでしょう。

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

グリッドレイアウトのデメリットは、以下の3つです。

グリッドレイアウトは統一感のあるデザインが可能ですが、どの要素も同じように並べられるため閲覧順や重要度がわかりにくいです。更新性が高く、頻繁に情報を更新できるため、過去の記事や目当ての記事が見つけにくくなっています。

ブロックの閲覧順がわかりにくい

グリッドデザインは、ブロックの閲覧順がわかりにくいです。ブロックを均等にデザインできるため、どのブロックを優先して読むべきか迷う可能性があります。

コンテンツ量が多くなる場合は、時系列やジャンル別のメニューを作り、ページをわけてコンテンツをまとめると迷いにくいです。見やすさ・読みやすさを考慮して、ブロックの数を検討するといいでしょう。

ブロックの重要度がわかりにくい

グリッドデザインは、ブロックの重要度がわかりにくいです。各ブロックの大きさを均等にできるため、強弱がわかりにくくなります。ブロックのサイズや背景色に変化をつけて、強調したい部分を意図的に作リましょう。

過去の記事・目当ての記事を見つけにくい

グリッドレイアウトは、過去の記事・目当ての記事を見つけにくいです。更新しやすいデザインのため、更新頻度が高くなると見つけにくくなるでしょう。

過去の記事・目当ての記事を見つけやすくするには、サイト内検索機能がおすすめです。ユーザーに検索してもらい、目当てのページに辿り着く仕組みを作りましょう。

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

グリッドレイアウトの作り方は、以下の2パターンです。

グリッドレイアウトは自分でCSSを記述するか、CSSのフレームワークを用いるかの2択です。CSSの知識がない場合は、フレームワークを利用するといいでしょう。

1. CSSを自分で記述する

自分でCSSを記述してグリッドレイアウトを作成できます。簡単なデザインの場合は、コーディング量が多くありません。

CSSでグリッドレイアウトを実現する場合は「CSS Grid」もしくは「CSS Flexbox」のどちらかの方法を利用します。近年は、少し扱いが難しいもののシンプルな記述で複雑なデザインを実装できるCSS Gridが主流です。

CSS Grid

CSS Gridは、2次元レイアウトを可能にしたCSSの機能です。シンプルなコーディングで、グリッドレイアウトをベースとした配列ができます。複雑なレイアウトに向いており、CSS初心者にはやや難しい機能といえるでしょう。

CSS Flexbox

CSS Flexboxは、要素を横並びにしたりグリッドレイアウトを制作したりするときによく用いられる機能です。レスポンシブデザインに対応したレイアウトを簡単にコーディングできるため、多くのユーザーに利用されています。コーディング初心者は、CSS Flexboxがおすすめです。

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

CSSフレームワークを用いることで、工数を圧縮しながらグリッドレイアウトを制作できます。使いやすくおすすめなフレームワークは「Masonry」「Foundation」の2つです。

Masonry

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

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

Foundation

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

Sassにも対応しているため、カスタマイズも難しくありません。Sassとは、より効率的に記述できるようにCSSの機能を拡張した言語です。

グリッドレイアウトの参考サイト3選

グリッドレイアウトの参考サイト3選は、以下のとおりです。

グリッドレイアウトは、多くのWebサイトで活用されています。制作前にどのようなデザインになるのか、参考サイトで確認するといいでしょう。

1. Pinterest

Pinterestは、インターネット上にある画像・動画を集めてコレクションにし、シェアできるWebサービスです。サイトデザインのヒントに訪れる人も少なくありません。Pinterestのサイトはグリッドレイアウトで作られています。

画像がメインのWebサイトのため、グリッドレイアウトとの相性がばっちりです。ウィンドウのサイズを変更する際に画像の表示数も変化するため、Pinterestを開きながら作業する際も便利です。

2. NSSG

NSSGは、東京にあるデザイン会社の「過去の作品の紹介ページ」です。デザインを閲覧できるページのため、グリッドレイアウトを活用して画像と文字がバランスよく配置されています。ギャラリーで作品を見ている感覚になるでしょう。

3. カントリーマアム

カントリーマアムは、洋菓子メーカー「不二家」の人気商品で、商品紹介ページがグリッドレイアウトで作られています。カントリーマアムの画像と文字列をグリッドレイアウトでうまく配置している点が特徴です。商品画像が目に飛び込んでくるため、商品を印象付けられ「つい食べたくなる」作品です。

まとめ

グリッドレイアウトとは、格子状のマス目をベースにしたサイトデザインです。CSSでレイアウトする際に用いられる手法で、グリッドに沿って文字や画像を配置できるため規則性のあるレイアウトを作れます。

多くの情報をうまくまとめられるため、画像を紹介するページや多くの情報を提供するWebサイトに向いています。CSSの知識がなくてもフレームワークを利用することで簡単に作れるでしょう。レスポンシブデザインとの相性が抜群です。

比較ビズでは、多数のシステム開発会社のなかから気になる業者を無料で比較できます。グリッドレイアウトでサイト制作を外注したい方は、ぜひ比較ビズを利用してください。

監修者のコメント

株式会社セルリア

代表取締役 佐藤靖将

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

詳しく見る

グリッドレイアウトといっても馴染みのない方からするとよくわからないかもしれませんが、ホームページを方眼紙のように捉え、それぞれのブロックに何を配置するか、といった形でレイアウトを決めていくイメージで捉えていただけたらと思います。

こういった考え方でデザインするので情報は整理されやすく、幾何学的で見やすいデザインになります。また、ユーザーの方が使っているPCやスマートフォンの画面幅に合わせて、ブロックを横幅いっぱいに表示するか、もしくは折り返すといったこともデザインできるため、いろんなデバイスに対応しなければならない場合に重宝します。

ホームページ全体をグリッドレイアウトのみで構成するとなると少し柔軟性に乏しい印象になってしまうかもしれませんので、独自性のあるデザインにこだわりたい箇所はそのようなデザインを施し、部分的に利用していくのも良いかと思います。

最近ではグリッドレイアウトにこだわって制作するといったシーンはあまりありませんが、PCとスマートフォンどちらにも対応することはユーザーに使っていただく以上必ず求められるかと思いますので、ホームページを作成される際は少なくともこの点は押さえて計画されるのをおすすめします。

執筆者

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