Googleも利用するカード型グリッドレイアウトについて

昔からある（らしい）「グリッドレイアウト」というWebデザイン。
グリッドレイアウト・グリッドシステムと呼ばれるようです。

グリッドレイアウト

グリッドと言う通り、一定のルールがあるマスに合わせてコンテンツを配置していくというものですね。

フラットデザイン・レスポンシブデザインの普及・流行もありまたよく見かけるようになってきた気がします。

レスポンシブデザインの特徴であるシンプルさを表現しやすく、シンプルにしてもある程度UIも損なわないので相性がいいのではないでしょうか。
また、レスポンシブデザインにとっても、スマホ時にコンテンツごとにカラムを調節しやすく重宝されそうです。

写真も大きく見せられるので最近の、文章が少なくなってきたWebサイトにはいいと思います。

CSSフレームワークの影響

弊社でもたまに利用するBootstrapをはじめ、
Foundation　Material-UI　Semantic UI　という様々なフレームワークが利用されています。

Bootstrapもグリッドレイアウトが利用されています。
CSSフレームワークはグリッドレイアウトを用いているところも多いのではないでしょうか？

Googleにも利用されてきました

こちらはGoogleマイビジネスの管理画面です。
カード型のグリッドレイアウトになっています。

以前はリストの形でしたが、最近いろいろとUIのリニューアルが多くいつのまにかマイビジネスも変わっていました。

カード型デザインも特にこれと定義は決まっているわけではないようですが多いのは写真＋テキストタイプ。
それをまとめて枠で囲みます。

カードが並べられているようなデザインが特徴です。
写真を大きく見せることができ、ページのイメージを整列・統一できるというメリットがあります。

その分、情報に優劣が付けられなかったり、一度にたくさんの情報が目にはいるためごちゃごちゃしていて見づらいという問題もあります。

シンプルに、使いやすく。

スマートフォンでWebサイトを閲覧することも多くなり、通信料の都合でWebデザインはシンプルに。
指で操作しやすいように余白も大きくとられるようになってきました。

そんな中、ディズニーの公式サイトが素敵だと思いました。

美女と野獣｜映画｜ディズニー公式

映画なので動画・画像は大きくみせられるように。
見てほしい更新情報やキャンペーンも写真付きで、ついつい目を引きつけられます。
画像の高さ、コンテンツの高さを揃えられており見やすいです。

白ばかりはなく、グレーで区別したり、リンク関連は水色でまとめられています。
シンプルを追求しすぎてスカスカだったり、コンテンツの区切りがわかりにくくなってしまうことも多いですが個人的にはこのサイトはそんなことがないように感じました。

素敵なデザインのサイトは見ているだけでわくわくしてきますね。
私もWebデザインをもっと学びたいです。