建設現場デジタルサイネージの「モニたろう」と「モニすけ」ブログ

建設現場に大型LEDビジョンや液晶ディスプレイで現場のICT化を促進する提案を行うヤマト広告公式ブログ

ヤマト広告公式ブログ
大型LEDビジョンモニたろうや液晶モニターモニすけなど
デジタルサイネージ提案で建設現場のICT化を促進します!

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

f:id:yamato-ugaki:20170602120858j:plain


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

グリッドレイアウト

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

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

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

f:id:yamato-ugaki:20170602122413j:plain

f:id:yamato-ugaki:20170602122458j:plain


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

CSSフレームワークの影響

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

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


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

f:id:yamato-ugaki:20170602123222j:plain

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

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

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

f:id:yamato-ugaki:20170602123111j:plain

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

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

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

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

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


f:id:yamato-ugaki:20170602124954p:plain
美女と野獣|映画|ディズニー公式


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


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


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

ページトップ