最近のWebを象徴するカード型コンポーネントをデザインする時のポイントまとめ

ここ1, 2年で、カードのコンポーネントを採用しているWebサイトは非常に増えました。レスポンシブとも相性がよく、情報を分かりやすく整理でき、テキストや画像だけでなく、動画などのマルチメディアも要素として配置することができます。

プロのデザイナーが実践している、カードをデザインする時のポイントを紹介します。

優れたカードをデザインする -最近のWebを象徴するUIコンポーネント

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つのカードに複数のアイデアを配置しない。その代わりに、それぞれのアイデアごとに1つのカードとして用意します。

視覚的な階層を提供

カード内のコンテンツに視覚的な階層を提供することで、カードのフォーカスと読みやすさを向上させます。

インラインのリンクは含めない

インラインのリンクは含めない。カードはそれ自体が1つのリンクであるか、またはアクションボタンだけを含めるようにします。

カードをデザインする時に参考になるリソース

top of page

©2017 coliss