3.グリッドレイアウト

Webページを縦横に分裂する直線で格子状に分割して、コンテンツの要素の大きさや配置などを構成していくデザインです。
もともとは、新聞や雑誌などの紙媒体で採用されていましたが、Webページにおいても採用されるようになってきました。
架空の格子状の部ブロックにコンテンツが配置されていくので、整然としたイメージのあるレイアウトを作成することができます。

しかし、シンプルであるがゆえに、このレイアウトが取り入れられているWebサイトは、どれも似たようなイメージになりがちです。
少しでも差別化を図ることを考えるなら、色使いやコンテンツの中身などで勝負することも重要となってきます。

最近では、カード型グリッドデザインという、カードを整列させたようなデザインを目にします。
一度にたくさんの情報を提示することができるので、少しでも多くのコンテンツをユーザーに届けることが可能ですが、裏を返すと、どこから見たらいいのか戸惑ってしまう可能性もあります。

4.可変グリッドレイアウト

グリッドレイアウトの特徴と、リキッドレイアウトの特徴を合わせたデザインです。
グリッドレイアウトでは、ベースの単位がpxですが、これを％に帰ることでグリッドを可変レイアウトにできる、というものです。
ウィンドウのサイズに合わせて可変的に動くだけではなく、整然とコンテンツの要素が整ったデザインになるので、UXの高い見やすいWebサイトになります。

グリッドレイアウトを採用しているWebデザイン 40【国内】

3
http://www.nxworld.net/inspiration/japan-grid-layout-web-design-showcase.html

国内の、グリッドデザインが採用されているWebサイトが紹介されているWebサイトです。
可変グリッドレイアウトはもちろん、上記で紹介したグリッドレイアウトも含まれています。
シンプルなものはもちろん、特徴のあるものも紹介されていますので、ぜひ参考にしてみてください。

5.固定幅レイアウト

幅が固定されているデザインです。
どのデバイスで見ても、制作者が作成時に意図したデザインで表示されますが、幅が不変なことから、例えば制作者が自分のパソコンに合わせた横幅のWebサイトを作成した場合、それより横幅の狭いスマートフォンを閲覧すると、横スクロールバーが表示されてしまいます。

逆に制作者が想定しているWebブラウザよりも大きなブラウザで閲覧すると、不自然な空白ができてしまいます。

6.エラスティックレイアウト

Webページに含まれるコンテンツの要素を、em単位で指定するデザインです。
em単位とは、1文字分の幅のことを指します。
文字の拡大や縮小に伴い、Webページのレイアウト幅が同じ比率で変化するので、ユーザーが文字の大きさを変更しても、レイアウトが崩れないままで閲覧することが可能になります。

しかし、px単位の要素が混在してしまうとサイト設計のコントロールが難しくなってしまうため、現在ではなかなか使われなくなってきているようです。

まとめ

今回はWebデザインを行う際によく使われるデザイン(手法)6選を、事例とともに紹介しました。
デザインの知識は難しいこともありますが、概要を理解して、デザイナーの方と共通言語を増やすことは重要です。

最近ではGoogleがモバイルフレンドリーを推奨していることもあり、どのデバイスでもユーザーが閲覧しやすいWebサイトが求められるようになっています。

今回ご紹介したレイアウトの手法を複数組み合わせて、情報を分かりやすくまとめ、閲覧しやすいWebサイトを設計することが大切です。

このニュースを読んだあなたにオススメ

LPOとは
Webデザインに役立つ無料のツール・デザイン集まとめ
これだけ読めば大丈夫！デザインの基礎が学べる厳選5記事