Webデザイン

グリッドレイアウトの作り方!リキッドレイアウトにおすすめ

grid2 - グリッドレイアウトの作り方!リキッドレイアウトにおすすめ

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

その時々によって、全体構想が変わったり、アニメーションを加えたりなどの流行があります。

今回は、カードなどのブロック要素を用いたデザイン手法を紹介していきます。

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

まず、グリッドレイアウトとは、サイトの幅と高さから、デザインの大枠を「四角形(格子)」に分解して構成したレイアウト手法です。

Googleの提唱しているマテリアルデザインで使われている「カード」の概念とも、非常に相性が良いと言えます。

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

続いて、リキッドレイアウトとは、画面の表示幅に応じて相対的に指定したり、レイアウトの配置を変えたりするレイアウト手法です。

とはいえ、これでは覚えにくいので、他のレイアウト手法とは「幅をパーセントで指定する」という点が違うと考えてください。

グリッドレイアウトの例

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

これを見ると、なんとなく見たことがあるなという感じになると思います。

RECRUIT

recruit - グリッドレイアウトの作り方!リキッドレイアウトにおすすめURL:https://r.recruit-jinji.jp/

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

カントリーマアム

gridrayout2 - グリッドレイアウトの作り方!リキッドレイアウトにおすすめURL:https://www.fujiya-peko.co.jp/countrymaam/

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

劇団四季

gridrayout3 - グリッドレイアウトの作り方!リキッドレイアウトにおすすめURL:https://www.shiki.jp/

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

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

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

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

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

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

とにかく、四角形が使いやすいのが特徴でしょう。

レスポンシブ対応しやすかったり、アニメーションとの相性が良いというメリットがあります。

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

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

とにかく、画像がメインになるので、いい画像が準備できないと全体的にダサく見えます。

あとは、最初からテキストが記載されていたりしないと、そのコンテンツが何を意図したものなのかが伝わりにくいです。

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

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

最後の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日間でマスターするレイアウト基礎講座」はこちら

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グリッドレイアウト デザインブック」はこちら

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

以上、いかがでしたか?

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

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

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