最近のWebを象徴するカード型コンポーネントをデザインする時のポイントまとめ
Post on:2017年3月24日
sponsors
ここ1, 2年で、カードのコンポーネントを採用しているWebサイトは非常に増えました。レスポンシブとも相性がよく、情報を分かりやすく整理でき、テキストや画像だけでなく、動画などのマルチメディアも要素として配置することができます。
プロのデザイナーが実践している、カードをデザインする時のポイントを紹介します。
Design Better Cards
by Andrew Coyle
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
カードのコンポーネントとは
カードは、より詳細な情報への入り口として機能するユーザーインターフェイスのコンポーネントです。さまざまな情報を管理することができ、ユーザーに届けることができます。このことは、現在のメディア環境を反映しています。
さまざまなスクリーンサイズの普及、HTML5とCSS3の登場により、カードのデザインは形を成してきました。Facebook、Twitter、Pinterestなどのソーシャルメディアサイトが主流になった新しいWebの代名詞と言えるでしょう。Webはこれまで以上にパーソナライズ（個人化）、アグリゲーション（集約化）、ソーシャライズ（社会化）を目の当たりにしました。カードはそれらを提供する容器です。
カードは思考やアイデア、そして短い時間で注目を得る画像など、小さな記事をユーザーに瞬時に提供できます。
参考: Microsoft Attention Spans Research Report(PDF)
カードの形
カードはグループ内のさまざまなコンテンツのピースを提供します。ビジターは情報の概要を迅速に把握し、その全体を見ることができます。
カード内の情報はすべて、等しい階層です。これにより、ユーザーは実際の店舗で棚を見る時と同じように、コンテンツを閲覧することができます。ユーザーはアクションを実行する前に、各カードを評価します。
カードのさまざまな形
カードは柔軟性があるため、レスポンシブWebデザインに適しています。Media Queriesを使用することで、カードはあらゆるスクリーンに合うように配置することができます。この順応性が高いということはビジュアル言語を可能にし、ユーザーエクスペリエンスをデバイス間で統一することができます。
カードの構成要素
より良いカードをデザインするためには、その構成要素を理解する必要があります。
カードには、見出し、小見出し、要約テキスト、マルチメディア、イメージ、ビデオ、グラフ、コメント、アクションが含まれます。アクションは通常限られており、多くの場合、カード全体が単一のリンクとして機能します。
カードの構成要素
カードは個別にタイムラインやギャラリーやダッシュボードを構成するなど、さまざまな方法で提示されます。
カードをデザインする時の5つのポイント
左のレッドが悪いデザイン、右のグリーンが良いデザインです。
数が少なく同種のコンテンツを表示する場合は、リストを使用します。これにより、コンテンツをより速く理解することができます。
余分なボーダーやドロップシャドウは必要ありません。視覚的に気を散らせるだけです。
参考: Unbox the Web!
1つのカードに複数のアイデアを配置しない。その代わりに、それぞれのアイデアごとに1つのカードとして用意します。
カード内のコンテンツに視覚的な階層を提供することで、カードのフォーカスと読みやすさを向上させます。
インラインのリンクは含めない。カードはそれ自体が1つのリンクであるか、またはアクションボタンだけを含めるようにします。
カードをデザインする時に参考になるリソース
sponsors
