Webデザインは時代ごとに変化してきている。今やWebデザインはパソコンやタブレット、スマホなどたくさんのディバイスに対応するため、従来のサイドバーを活用したWebデザインよりシングルカラムのデザインが主流になりつつある。そして、2015年は特にレスポンシブに対応した「カード型デザイン」が注目されているようだ。
「カード型デザイン」とはトップページにカードを並べたようなグリッドレイアウトされたデザインである。FacebookやPinterestが有名なところであるが、トップページに整然と並べられた各「カード」は訪問者が次に何を見るかを選ぶうえでの選択肢であり、メニューデザインでもある。「カード」はクリックされた先のページに、どんなページが待っているかを魅力的なプレビュー画面としてで伝えるのがその役割だ。
また、この「カード型デザイン」はLive Commerceの6月24日から始まった新しいサービス「Discovery Japan」でも採用している。
今回は2015年のトレンドの一つになりつつあるこの「カード型デザイン」についてまとめた。
1.カード型デザインのメリット・デメリット
「カード型デザイン」はFacebookのタイムラインに代表される「カード」を基本としたグリッドベースのデザインのことである。各「カード」の内容が、コンテンツであり、「カード」はクリックした先のリンク先の内容を知ることができ、ユーザーにとって分かりやすい、ユーザービリティに優れたデザインでもある。下にメリット、デメリットを整理してみた。
メリット
- トップページに一度に多くの情報を提供できる。
- 整然としたレイアウトは印象に残る。
- コンテンツの一覧性が高い。
- 各「カード」内は画像とテキスト構成なので、興味を引きやすく、第2階層へ誘導しやすい。
- パソコン、タブレット、スマートホンなどのディバイスに制約されない。
デメリット
- ユーザーにトップページで見せる情報量が多く、戸惑う可能性が高い。
- 第2階層へ遷移した後、トップページに戻った場合、トップページでクリックした場所をみつけにくい。
- 同じサイズでカードをデザインした場合、情報に優先順位、差異化をつけられない。
- ある程度の量の情報量、コンテンツ量がないと成立しない。
- 画像が大量になるとトップページ表示時間を要する。
2.カード型デザイン事例
下に「カード型デザイン」の事例をいくつか取り上げた。用途してはECサイト、ギャラリーサイト、ブログや会社案内、ポートフォリオサイトなどにむいており、特に最初の事例の“Firebox”は商品一覧だけの表示ではなく、カテゴリーなどもカード化し、大きさに大小をつけることで商品をランクづけしている。
また、二番目の事例の鬼怒川温泉金谷ホテルのサイトも「カード型デザイン」で整然とレイアウトすることで、ユーザーにしっかりとした印象、信頼感を与えることに成功している。
http://firebox.com
http://www.kinugawakanaya.com
http://www.beautyandyouth.jp/special/christmas2011/index.html
http://www.faebric.com/
http://rmd.quadro-web.com
3.まとめ：ECサイト最新トレンドレポートより
株式会社 久は6月22日、日本のECサイトの売上上位300社を対象にサイト幅のトレンドを調査し、ECサイト最新トレンドレポートとして公開した。それによると、売れてるECサイトのサイト幅は「980pxから990px」であり、売れてるサイトの4割がこの幅で運用されていると公表した。
「カード型デザイン」でECサイト構築の際は、このトレンドレポートを参考にサイト幅を設定すると良いかもしれない。
また、「カード型デザイン」はECサイト構築に適しているデザインフォーマットといえ、利点としては、多品種のディバイスに対応している点や、商品を一覧でき、訴求力があり、美しくまとまり、ユーザービリティが高いという点である。
今年はさらにこの「カード型デザイン」が盛りあがりを見せそうである。
タグ: ECサイト
