カード型デザインとはその名のとおり、カードの様な四角形を並べたグリッドレイアウトされたデザインです。すっきり整理され美しい印象を与えることができます。FacebookやPinterestが有名ですね。
目次
そもそもグリッドレイアウトとは何でしょうか。
グリッドとは「格子状の」という意味で、グリッドレイアウトは画面を縦と横で分断した方眼のブロックを組み合わせ、コンテンツを配置していくという手法です。画像や文章などの要素を、各グリッドにきっちりと配置することで、マージンを統一して各要素の大きさが多少違っていても、きっちりと整列された印象を与えることが可能になります。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
カード型デザインのメリット・デメリットをまとめてみました。
[auth]
【メリット】
- コンテンツの一覧性が高い。
- どんなデバイスにも適応させやすい。
- 興味を引けるから、次のページにいかせやすい。
- 一度にたくさんの情報を見せれる。
【デメリット】
- 情報量が多く、戸惑う可能性がある。
- 一度離れて再度そのサイトを訪れたとき、どこに情報があったか見つけにくい。
- 同じサイズのカードが並んでいる場合、情報に優先順位をつけられない。
カード型デザインを作るときのコツ
実際に作るにあたって注意すべきとこはどこなのでしょう。いろいろなサイトを周って共通する部分がありました。
1.余白をとる
カード型デザインのサイトを閲覧していると、狭い・広いの違いはあれど基本的に余白はあいております。
http://www.alectia.com/en/
カード同士、またカード内のコンテンツに余白をとらないと、きっちり並べられるはずのカードもごちゃごちゃして見にくい印象になってしまいます。なのできちんと余白は同じ幅であいているか確認しながらデザインしなければいけません。
2.見せたい画像を決める
カード型デザインで一番目に付くところは画像です。カードの半分以上を画像が占めることもあります。一目で内容が分かる画像やクオリティの高い画像を選びましょう。
http://www.nationaltraveller.com/
また、画像にタイトル文字を入れるのもやめたほうが無難です。遠くから見るとごちゃごちゃしてしまいます。
3.シンプルに
だらだらと長い説明を書いてもわかりにくいだけです。画像と簡潔な文で抑えましょう。シンプルだと読み手も読みやすいページになると思います。
まとめ
いかがでしたでしょうか？カード型デザインとはどんなものか理解いただけたでしょうか？この記事を読んで少しでもデザインに興味を持っていただけると嬉しいです。
[/auth]
マーケティングでお悩みでしたら、
Bigmacにお任せください。
