« ブログのトップページに戻る

今、ECサイトに効果的な「カード型デザイン」がトレンド

   投稿者 : 2015年6月26日 By

Webデザインは時代ごとに変化してきている。今やWebデザインはパソコンやタブレット、スマホなどたくさんのディバイスに対応するため、従来のサイドバーを活用したWebデザインよりシングルカラムのデザインが主流になりつつある。そして、2015年は特にレスポンシブに対応した「カード型デザイン」が注目されているようだ。
「カード型デザイン」とはトップページにカードを並べたようなグリッドレイアウトされたデザインである。FacebookやPinterestが有名なところであるが、トップページに整然と並べられた各「カード」は訪問者が次に何を見るかを選ぶうえでの選択肢であり、メニューデザインでもある。「カード」はクリックされた先のページに、どんなページが待っているかを魅力的なプレビュー画面としてで伝えるのがその役割だ。
また、この「カード型デザイン」はLive Commerceの6月24日から始まった新しいサービス「Discovery Japan」でも採用している。
今回は2015年のトレンドの一つになりつつあるこの「カード型デザイン」についてまとめた。

 

1.カード型デザインのメリット・デメリット

「カード型デザイン」はFacebookのタイムラインに代表される「カード」を基本としたグリッドベースのデザインのことである。各「カード」の内容が、コンテンツであり、「カード」はクリックした先のリンク先の内容を知ることができ、ユーザーにとって分かりやすい、ユーザービリティに優れたデザインでもある。下にメリット、デメリットを整理してみた。

 

メリット

  1. トップページに一度に多くの情報を提供できる。
  2. 整然としたレイアウトは印象に残る。
  3. コンテンツの一覧性が高い。
  4. 各「カード」内は画像とテキスト構成なので、興味を引きやすく、第2階層へ誘導しやすい。
  5. パソコン、タブレット、スマートホンなどのディバイスに制約されない。

 

デメリット

  1. ユーザーにトップページで見せる情報量が多く、戸惑う可能性が高い。
  2. 第2階層へ遷移した後、トップページに戻った場合、トップページでクリックした場所をみつけにくい。
  3. 同じサイズでカードをデザインした場合、情報に優先順位、差異化をつけられない。
  4. ある程度の量の情報量、コンテンツ量がないと成立しない。
  5. 画像が大量になるとトップページ表示時間を要する。

 

2.カード型デザイン事例

下に「カード型デザイン」の事例をいくつか取り上げた。用途してはECサイト、ギャラリーサイト、ブログや会社案内、ポートフォリオサイトなどにむいており、特に最初の事例の“Firebox”は商品一覧だけの表示ではなく、カテゴリーなどもカード化し、大きさに大小をつけることで商品をランクづけしている。
また、二番目の事例の鬼怒川温泉金谷ホテルのサイトも「カード型デザイン」で整然とレイアウトすることで、ユーザーにしっかりとした印象、信頼感を与えることに成功している。

 

カード型_01
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サイト最新トレンドレポート

関連する記事

色弱者に優しいWebサイトをデザインしよう... Webデザインにおいては、色は重要なデザイン要素でありメッセージ要素である。しかし、この色を認識するのが苦手という人、一般の人と色の認識が異なる人がいることをご存じだろうか?いわゆる色弱者と呼ばれる人である。色弱者は日本人では男性では20人に1人、女性では50人に1人いると呼ばれ、日本全体では3...
中国最大、モールサイト! T-mall(天猫)について調べてみた... 中国最大のインターネットショッピング・モールとして有名なのは、アリババグループの「T-mall(天猫)」である。アリババグループは2014年10月にニューヨーク証券取引所へ上場した。T-mallは7万を超える店舗、会員数6500万人、流通総額は8兆3325億と、その規模はとてつもない。 T-...
越境ECサイト・国内ECサイトのCMSを比べてみた... 経済産業省が発表した2017年の日本の国内BtoC市場は、16兆5,054億円と前年より9.1%上昇し、さらにEC化率も5.79%(物販分野)と伸長している。 しかし、EC化率(ECの売上が小売全体の売上に占める割合)は世界に比べるとまだまだ低いという現況がある。 ちなみに、EC化率の高...
FacebookはEC市場に変革をもたらすのか?... アメリカ、トランプ大統領のイスラム教7カ国からアメリカへの入国禁止したことは、各方面に大きな影響を及ぼしている。 そして、Google、Apple、Amazonなど、IT企業各社の代表も懸念を表明している。 Facebookの代表マーク・ザッカーバーグ氏もFacebookに投稿。「アメリ...
ECの巨人AmazonとZOZOTOWN 2018年も後半に入った。国内では、西日本を襲った記録的な豪雨による災害が相次いでいる。被害に遭われた方、避難を余儀なくされている方に心より、お見舞い申しあげる。 今回は昨年2017年のEコマースについてランキング資料をベースに振り返りつつ、昨年も他を大きく引き離し成長したECモール、「Am...
カゴ落ち対策を行っていますか? お店に買い物に行って、料理などのいろいろな食材をカゴに入れ、レジ並んでる間に気が変わって食材を棚に戻すことがある。ECサイトの場合は「カートに入れる」までは完了したが、決済や配送のステップで気が変わり、別のサイトに移ってしまう。 このようにカートに商品を入れたにもかかわらず、途中でページから...

タグ:

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

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。