【webデザイン制作に役立つ】グリッドサイトって?実際にグリッドデザインを取り入れているサイトを調べてみた!

グリッドデザインって?

2021年のwebデザインのトレンドを調べていると「グリッドデザイン」を見かけますよね。

グリッド(英: Grid)とは、デザインする画面を水平線と垂直線で分断し、格子状または方眼状の線(ブロックライン)を組み合わせたものを指します。
グリッドをベースにデザインを検討していくデザイン手法を「グリッドレイアウト(グリッドデザイン、グリッドシステム)」と呼び、グリッドを組み合わせて、要素や余白のレイアウトを構成していきます。配置される要素が、格子状の見えない線にすべて揃えられて配置するため、すっきりと見やすく整理された構成にすることが可能です。
Webデザインや紙面デザインの現場で、グリッドレイアウトの手法は定番としてよく使われています。

https://school.dhw.co.jp/course/graphic/contents/w_grid.html

おしゃれだな〜と思いながらも、なかなか使えそうな案件がない気がして遠ざけていましたが、改めてどんなデザインがあるのか気になったので調べてみることに。

参考サイト①

これぞ「グリッドデザイン」と感じるサイトですね。

白と黒のみのシンプルな配色とグリッドデザインがとてもマッチしていてカッコいいですね。

参考にしたサイト

(THISIS)SHIZEN
(THISIS)SHIZEN(ディス イズ シゼン)は、「Nature, Craft, Art」をコンセプトに、自然の恵みと人の手が生み出す形と食を提供するショップです。2020年春、京都・新風館にオープン。


参考サイト②


スライダー下のメインキャッチで大まかな解説を載せ、その周辺に関連するコンテンツを綺麗に配置していますね。

関連性が分かりやすく、とても目を引くレイアウト・デザインだなと感じます。

参考にしたサイト

HOTEL GRAPHY NEZU | ホテルグラフィ根津
下町の情緒あふれる谷根千の一角にひっそりと佇むHOTEL GRAPHY NEZU。ホテルでありながら、みんなで集まって楽しいホステルのようなワクワク感を感じることのできる場所です。東京の中心にありながら、街の喧騒から離れた静かなひと時をお過ごしください。


参考サイト③

こちらは海外のサイトなんですが、ヘッダーを白色のグリッドデザインにしている点がとても素敵です。

ファッションや美容系のサイトだからこそ「しっくり」くる印象があります。

白色にすることでサイトの世界観を壊さず、マッチしてくれますね。

参考にしたサイト

Aroz Jewelry / Handmade jewelry - Designed in Brussels & Handmade in Portugal
Discover our handmade jewelry on our online store. International Shipping - Returns and Secure Payments - Warranty.


まとめ

今回は気になっていたグリッドデザインを調べてみました!

なかなか取り入れずらそう…と思っていましたが、グリッドデザインといっても色々あるんだなと勉強になりました。

レイアウトも、それぞれの関連性が分かりやすかったので参考にしたいと思います。

コメント

タイトルとURLをコピーしました