グリッドレイアウトとは?作り方やデザインの学び方を解説

webデザインの業界で、最近はデザイン手法にもトレンドがあります。

その時々によって、全体構想が変わったり、アニメーションを加えたりなどの流行があります。今回は、カードなどのブロック要素を用いたデザイン手法であるグリッドレイアウトについて紹介していきます。

ちなみに本格的にデザインについて学ぶなら、筆者も受講したwebデザインスクールの受講がおすすめです。

グリッドレイアウトとは?リキッドレイアウトとは?

socialmedia 952091 640 530x354 - グリッドレイアウトとは?作り方やデザインの学び方を解説

グリッドレイアウト

まず、グリッドレイアウトとは、サイトの幅と高さから、デザインの大枠を「四角形(格子)」に分解して構成したレイアウト手法です。Googleの提唱しているマテリアルデザインで使われている「カード」の概念とも、非常に相性が良いと言えます。

リキッドレイアウト

続いて、リキッドレイアウトとは、画面の表示幅に応じて相対的に指定したり、レイアウトの配置を変えたりするレイアウト手法です。とはいえ、これでは覚えにくいので、他のレイアウト手法とは「幅をパーセントで指定する」という点が違うと考えてください。

グリッドレイアウトの事例

具体的なイメージを掴んでいただくために、ここからはグリッドレイアウトの例を紹介していきます。これを見ると、なんとなく見たことがあるなという感じになると思います。

RECRUIT

recruit - グリッドレイアウトとは?作り方やデザインの学び方を解説

URL:https://r.recruit-jinji.jp/

ここでは、余白が無いグリッドレイアウトが使われていますね。

カントリーマアム

gridrayout2 - グリッドレイアウトとは?作り方やデザインの学び方を解説

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

このサイトでは、グリッドレイアウトの中にスライドショーが埋め込まれています。

劇団四季

gridrayout3 - グリッドレイアウトとは?作り方やデザインの学び方を解説

URL:https://www.shiki.jp/

このサイトでは、グリッドレイアウトの中に横幅いっぱいの使い方を取り入れています。

ちなみに、この記事を書いた時点での、このサイトのトップページのデザインもグリッドレイアウトを導入しています。

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

balance 2108024 640 530x318 - グリッドレイアウトとは?作り方やデザインの学び方を解説

グリッドレイアウトの細かい作成方法に入る前に、これを使うメリットとデメリットを知っておきましょう。

グリッドレイアウトを利用するメリット

  • 同じようなコンテンツを配置しやすい
  • レスポンシブ対応が非常に楽
  • 画像メインなのでアニメーションとの相性が良い
  • マテリアルデザインが導入しやすい

とにかく、四角形が使いやすいのが特徴でしょう。レスポンシブ対応しやすかったり、アニメーションとの相性が良いというメリットがあります。

グリッドレイアウトを利用するデメリット

  • 画像が重要になる
  • 上手くテキストが入れられないと、何のコンテンツか分からない

とにかく、画像がメインになるので、いい画像が準備できないと全体的にダサく見えます。あとは、最初からテキストが記載されていたりしないと、そのコンテンツが何を意図したものなのかが伝わりにくいです。

グリッドレイアウトの作成方法

それでは、実際のグリッドレイアウトの作成方法です。

最後のCSSで各部分は省略してしまってますが、現在はdisplay:gridを使った方法などもいろんな方が紹介されています。

1. 縦横をグリッド(格子)で区切る

grid - グリッドレイアウトとは?作り方やデザインの学び方を解説まずは、縦幅と横幅をグリッド(格子)で区切りましょう。「縦幅」「横幅」「縦の格子数」「横の格子数」を決めると自然と決まってきます。

2.グリッドを使いたいサイズで結合する

grid2 - グリッドレイアウトとは?作り方やデザインの学び方を解説次は、グリッドを結合していきます。

人によっては、ひとつも結合しないで使いたいという場合もあるかと思いますので、その場合は次に進んでください。

3.余白を揃える

次は、余白を揃えましょう。もちろん、くっつけて表現したい場合は、余白を0pxに指定していくと良いです。

この時、横幅は%指定がしやすいので楽なのですが、縦幅は%指定がしにくいので大変です。個人的なオススメとしては、余白だけはpx指定をしてしまう方がいいかなと思っています。

例えば、

  • width:%指定
  • height:px指定
  • margin:px指定

このような感じでしょうか?

もっと良い方法があればコメント欄で教えてください。

4.CSSで実装する

最後に、ここまで決まったらCSSで実装をしていきます。

具体的な記述は省略しますので、以下の方々の素晴らしい記事を参考にしてみてください。

筆者はdisplay:gridが上手く使いこなせない時があるので、半ば無理矢理CSSで組むことがあります。

グリッドレイアウトに関するオススメ本

7日間でマスターするレイアウト基礎講座

q? encoding=UTF8&MarketPlace=JP&ASIN=4881081438&ServiceVersion=20070822&ID=AsinImage&WS=1&Format= SL160 &tag=webcode06 22 - グリッドレイアウトとは?作り方やデザインの学び方を解説ir?t=webcode06 22&l=am2&o=9&a=4881081438 - グリッドレイアウトとは?作り方やデザインの学び方を解説

まず「7日間でマスターするレイアウト基礎講座」です。こちらの本はグリッドレイアウトに限らず、レイアウト全般について学べる本です。さらっと読めますので、レイアウトについて学びたい方にはおすすめです。

「7日間でマスターするレイアウト基礎講座」はこちら

CSSグリッドレイアウトデザインブック(追記)

q? encoding=UTF8&MarketPlace=JP&ASIN=4839966338&ServiceVersion=20070822&ID=AsinImage&WS=1&Format= SL160 &tag=webcode06 22 - グリッドレイアウトとは?作り方やデザインの学び方を解説ir?t=webcode06 22&l=am2&o=9&a=4839966338 - グリッドレイアウトとは?作り方やデザインの学び方を解説
続いてグリッドレイアウトに特化した本が良い方には、「CSSグリッドレイアウト デザインブック」がおすすめです。あまり特化した本が今までなかったのですが、ir?t=webcode06 22&l=am2&o=9&a=4839966338 - グリッドレイアウトとは?作り方やデザインの学び方を解説2018年にグリッドレイアウトに特化した本が出ましたので、紹介させていただきます。

「CSSグリッドレイアウト デザインブック」はこちら

ちなみにデザインについて本格的に学んでいきたい方には、筆者も受講したデザインスクールがおすすめです。

【参考】完全オンラインのプログラミングスクールTechAcademy

e5a8872eafd46a0abb15ca131ccbd483 530x205 - グリッドレイアウトとは?作り方やデザインの学び方を解説

まず、筆者が受講したの完全オンラインのプログラミングスクールのTechAcademyです。

TechAcademyは上場企業が運営するプログラミングスクールで、これまでに法人では600社、のべ3万人以上の受講実績がある大手のプログラミングスクールです。デザイン以外にもさまざまなプログラミングコースを提供しており、筆者の場合はWebデザイン+WordPressコースを受講しました。

TechAcademyは完全にオンラインのため、オンラインテキストを自分で学習して進めていき、都度わからないところがあればSlackでメンターに質問する形式です。課題を提出して現役エンジニアやデザイナーにレビューしてもらい、その課題をクリアすると次の課題に進むことができますので、着実にスキルが身につきます。

Webデザインコース

TechAcademy 530x229 - グリッドレイアウトとは?作り方やデザインの学び方を解説
Webデザインコースでは、デザインの基礎から実際にコーディングをしてデザインを作っていくまでの一通りを学ぶことができます。

また、TechAcademyは週2回ほどオンライン面談が30分ほどあり、現役デザイナー・エンジニアからフィードバックをもらえます。その場で疑問に思っていることを聞いてみたりすることで不安が解消されたり、定期的にオンライン面談があることでモチベーション維持にも繋がります。

課題を解くことで次に進める形式

fa3417c80e23d5ead72ee25606703162 530x264 - グリッドレイアウトとは?作り方やデザインの学び方を解説

筆者も一歩一歩着実に課題をクリアしていったことで、デザインの基礎を習得することができました。

上記のように課題をクリアすると次に進むことができるようになりますので、他のプログラミングスクールとは異なりかなり着実にスキルが身につきます。ちなみにWordPressとデザイン両方を学びたい方は、Webデザイン+WordPressの8週間コースがおすすめです。

9bc44b9e9bab2d35e594176d04e5a364 530x250 - グリッドレイアウトとは?作り方やデザインの学び方を解説

合計費用は、早割プランで申し込めば社会人が248,000円、学生が188,000円です。ある程度まとまった時間が取れそうな、お盆期間の夏休みや年末年始の冬休みなどに合わせて受講されてみるのも良いでしょう。

なお、TechAcademyは無料体験レッスンを提供していますので、詳細がきになる方は無料体験を受講されるのが一番おすすめです。

筆者も受講前はいくつかプログラミングスクールの無料体験を受講してから決めましたので、おすすめはいくつかの無料体験を受講して一番自分にあったスクールを選ばれることです。

>>TechAcademyの詳しい口コミはこちら

グリッドレイアウトに関するまとめ

design 3372889 640 530x353 - グリッドレイアウトとは?作り方やデザインの学び方を解説

以上、いかがでしたか?

今回は、リキッドレイアウトの中で、最近のトレンドを抑えたレイアウト手法の「グリッドレイアウト」を紹介しました。

このレイアウトはすぐに実装できるようになると、どんな場面でも使いやすいですし、レスポンシブ対応もスムーズにできます。また、マテリアルデザインとの相性も良いです。

色々と便利な手法かと思いますので、参考にしてみてくださいね。最後まで読んでいただき、ありがとうございました。

おすすめの記事