レスポンシブデザインと相性がいいカード型デザインとは?

カード型デザインとはその名のとおり、カードの様な四角形を並べたグリッドレイアウトされたデザインです。すっきり整理され美しい印象を与えることができます。FacebookやPinterestが有名ですね。

そもそもグリッドレイアウトとは何でしょうか。

グリッドとは「格子状の」という意味で、グリッドレイアウトは画面を縦と横で分断した方眼のブロックを組み合わせ、コンテンツを配置していくという手法です。画像や文章などの要素を、各グリッドにきっちりと配置することで、マージンを統一して各要素の大きさが多少違っていても、きっちりと整列された印象を与えることが可能になります。

カード型デザインのメリット・デメリットをまとめてみました。

【メリット】

  • コンテンツの一覧性が高い。
  • どんなデバイスにも適応させやすい。
  • 興味を引けるから、次のページにいかせやすい。
  • 一度にたくさんの情報を見せれる。

【デメリット】

  • 情報量が多く、戸惑う可能性がある。
  • 一度離れて再度そのサイトを訪れたとき、どこに情報があったか見つけにくい。
  • 同じサイズのカードが並んでいる場合、情報に優先順位をつけられない。

カード型デザインを作るときのコツ

実際に作るにあたって注意すべきとこはどこなのでしょう。いろいろなサイトを周って共通する部分がありました。

1.余白をとる

カード型デザインのサイトを閲覧していると、狭い・広いの違いはあれど基本的に余白はあいております。
http://www.alectia.com/en/

カード同士、またカード内のコンテンツに余白をとらないと、きっちり並べられるはずのカードもごちゃごちゃして見にくい印象になってしまいます。なのできちんと余白は同じ幅であいているか確認しながらデザインしなければいけません。

2.見せたい画像を決める

カード型デザインで一番目に付くところは画像です。カードの半分以上を画像が占めることもあります。一目で内容が分かる画像やクオリティの高い画像を選びましょう。
http://www.nationaltraveller.com/

また、画像にタイトル文字を入れるのもやめたほうが無難です。遠くから見るとごちゃごちゃしてしまいます。

3.シンプルに

だらだらと長い説明を書いてもわかりにくいだけです。画像と簡潔な文で抑えましょう。シンプルだと読み手も読みやすいページになると思います。

まとめ

いかがでしたでしょうか?カード型デザインとはどんなものか理解いただけたでしょうか?この記事を読んで少しでもデザインに興味を持っていただけると嬉しいです。

このエントリーをはてなブックマークに追加

筆者

Y.Morishita

Bigmac inc. 制作部所属 所属。2017年4月にBigmac inc.に入社。 主にコーディングを担当しています。 一人前にはまだまだ程遠いひよっこですが、早く一人前になるために勉強の日々です。 これからもっともっと知識を増やし、周りに頼られるような存在になりたいです。 趣味は、音楽鑑賞でライブやフェスが生きがいです。 この前行ったフェスでは、左足を負傷したけどとても充実した二日間でした。漫画も大好きです。

筆者が最近執筆した記事