webデザインの業界で、最近はデザイン手法にもトレンドがあります。
その時々によって、全体構想が変わったり、アニメーションを加えたりなどの流行があります。今回は、カードなどのブロック要素を用いたデザイン手法であるグリッドレイアウトについて紹介していきます。
ちなみに本格的にデザインについて学ぶなら、筆者も受講したwebデザインスクールの受講がおすすめです。
＼ Twitterでも口コミ良好！ ／
2021年5月31日にリリースされた、エックスサーバーのシステムをベースにしたシン・レンタルサーバー！
月額料金がスタンダードプランで1,540円〜（税込）なので、コスパよく爆速なサイト運営が可能に！
管理画面はエックスサーバーと同じで使いやすくなっているので、これからサイト運営をする方にはおすすめです！
CONTENTS
グリッドレイアウトとは？リキッドレイアウトとは？
グリッドレイアウト
まず、グリッドレイアウトとは、サイトの幅と高さから、デザインの大枠を「四角形(格子)」に分解して構成したレイアウト手法です。Googleの提唱しているマテリアルデザインで使われている「カード」の概念とも、非常に相性が良いと言えます。
リキッドレイアウト
続いて、リキッドレイアウトとは、画面の表示幅に応じて相対的に指定したり、レイアウトの配置を変えたりするレイアウト手法です。とはいえ、これでは覚えにくいので、他のレイアウト手法とは「幅をパーセントで指定する」という点が違うと考えてください。
グリッドレイアウトの事例
具体的なイメージを掴んでいただくために、ここからはグリッドレイアウトの例を紹介していきます。これを見ると、なんとなく見たことがあるなという感じになると思います。
RECRUIT
URL：https://r.recruit-jinji.jp/
ここでは、余白が無いグリッドレイアウトが使われていますね。
カントリーマアム
URL：https://www.fujiya-peko.co.jp/countrymaam/
このサイトでは、グリッドレイアウトの中にスライドショーが埋め込まれています。
劇団四季
このサイトでは、グリッドレイアウトの中に横幅いっぱいの使い方を取り入れています。
ちなみに、この記事を書いた時点での、このサイトのトップページのデザインもグリッドレイアウトを導入しています。
グリッドレイアウトのメリットとデメリット
グリッドレイアウトの細かい作成方法に入る前に、これを使うメリットとデメリットを知っておきましょう。
グリッドレイアウトを利用するメリット
- 同じようなコンテンツを配置しやすい
- レスポンシブ対応が非常に楽
- 画像メインなのでアニメーションとの相性が良い
- マテリアルデザインが導入しやすい
とにかく、四角形が使いやすいのが特徴でしょう。レスポンシブ対応しやすかったり、アニメーションとの相性が良いというメリットがあります。
グリッドレイアウトを利用するデメリット
- 画像が重要になる
- 上手くテキストが入れられないと、何のコンテンツか分からない
とにかく、画像がメインになるので、いい画像が準備できないと全体的にダサく見えます。あとは、最初からテキストが記載されていたりしないと、そのコンテンツが何を意図したものなのかが伝わりにくいです。
グリッドレイアウトの作成方法
それでは、実際のグリッドレイアウトの作成方法です。
最後のCSSで各部分は省略してしまってますが、現在はdisplay:gridを使った方法などもいろんな方が紹介されています。
1. 縦横をグリッド(格子)で区切る
まずは、縦幅と横幅をグリッド(格子)で区切りましょう。「縦幅」「横幅」「縦の格子数」「横の格子数」を決めると自然と決まってきます。
2.グリッドを使いたいサイズで結合する
次は、グリッドを結合していきます。
人によっては、ひとつも結合しないで使いたいという場合もあるかと思いますので、その場合は次に進んでください。
3.余白を揃える
次は、余白を揃えましょう。もちろん、くっつけて表現したい場合は、余白を0pxに指定していくと良いです。
この時、横幅は%指定がしやすいので楽なのですが、縦幅は%指定がしにくいので大変です。個人的なオススメとしては、余白だけはpx指定をしてしまう方がいいかなと思っています。
例えば、
- width:%指定
- height:px指定
- margin:px指定
このような感じでしょうか？
もっと良い方法があればコメント欄で教えてください。
4.CSSで実装する
最後に、ここまで決まったらCSSで実装をしていきます。
具体的な記述は省略しますので、以下の方々の素晴らしい記事を参考にしてみてください。
筆者はdisplay:gridが上手く使いこなせない時があるので、半ば無理矢理CSSで組むことがあります。
グリッドレイアウトに関するオススメ本
7日間でマスターするレイアウト基礎講座
まず「7日間でマスターするレイアウト基礎講座」です。こちらの本はグリッドレイアウトに限らず、レイアウト全般について学べる本です。さらっと読めますので、レイアウトについて学びたい方にはおすすめです。
CSSグリッドレイアウトデザインブック（追記）
続いてグリッドレイアウトに特化した本が良い方には、「CSSグリッドレイアウト デザインブック」がおすすめです。あまり特化した本が今までなかったのですが、
ちなみにデザインについて本格的に学んでいきたい方には、筆者も受講したデザインスクールがおすすめです。
【参考】完全オンラインのプログラミングスクールTechAcademy
まず、筆者が受講したの完全オンラインのプログラミングスクールのです。
TechAcademyは上場企業が運営するプログラミングスクールで、これまでに法人では600社、のべ3万人以上の受講実績がある大手のプログラミングスクールです。デザイン以外にもさまざまなプログラミングコースを提供しており、筆者の場合はWebデザイン＋WordPressコースを受講しました。
TechAcademyは完全にオンラインのため、オンラインテキストを自分で学習して進めていき、都度わからないところがあればSlackでメンターに質問する形式です。課題を提出して現役エンジニアやデザイナーにレビューしてもらい、その課題をクリアすると次の課題に進むことができますので、着実にスキルが身につきます。
Webデザインコース
Webデザインコースでは、デザインの基礎から実際にコーディングをしてデザインを作っていくまでの一通りを学ぶことができます。
また、TechAcademyは週2回ほどオンライン面談が30分ほどあり、現役デザイナー・エンジニアからフィードバックをもらえます。その場で疑問に思っていることを聞いてみたりすることで不安が解消されたり、定期的にオンライン面談があることでモチベーション維持にも繋がります。
課題を解くことで次に進める形式
筆者も一歩一歩着実に課題をクリアしていったことで、デザインの基礎を習得することができました。
上記のように課題をクリアすると次に進むことができるようになりますので、他のプログラミングスクールとは異なりかなり着実にスキルが身につきます。ちなみにWordPressとデザイン両方を学びたい方は、Webデザイン＋WordPressの12週間コースがおすすめです。
合計費用は、早割プランで申し込めば社会人が360,800円、学生が316,800円です。ある程度まとまった時間が取れそうな、お盆期間の夏休みや年末年始の冬休みなどに合わせて受講されてみるのも良いでしょう。
なお、TechAcademyは無料体験レッスンを提供していますので、詳細がきになる方は無料体験を受講されるのが一番おすすめです。
筆者も受講前はいくつかプログラミングスクールの無料体験を受講してから決めましたので、おすすめはいくつかの無料体験を受講して一番自分にあったスクールを選ばれることです。
以上、いかがでしたか？ 今回は、リキッドレイアウトの中で、最近のトレンドを抑えたレイアウト手法の「グリッドレイアウト」を紹介しました。 このレイアウトはすぐに実装できるようになると、どんな場面でも使いやすいですし、レスポンシブ対応もスムーズにできます。また、マテリアルデザインとの相性も良いです。 色々と便利な手法かと思いますので、参考にしてみてくださいね。最後まで読んでいただき、ありがとうございました。グリッドレイアウトに関するまとめ
