「カード」とは、画像やテキストなどの情報が書かれた下図のようなデザインのことをいいます。カードは、シンプルな使いやすさとデザイン性とのバランスを重視する際にはもっともよく使われる手法となりました。PinterestやFacebookのようなサービスで使われはじめ、現在では多岐にわたる企業で使用されています。
Pinterestは１つのトピックに関連するほぼすべての情報を１つの容れ物で表現するというアイデアを紹介しました。
カードを正しく実践すれば、アプリ内のUXを向上させることができます。今回の記事では、カード型デザインの実践に使える５つの有効なテクニックと例を紹介していきたいと思います。
１. １つのカードに１つのコンセプト
カード内にあるコンテンツは、すべて１つのアイデアだけに関連するべきです。 カードは１つに複数の要素を含むことができますが、それぞれのカードごとに１つの情報かコンテンツを載せるべきです。そうすることにより、ユーザーがコンテンツを利用したり、シェアをしやすくなります。
１つのブロック（もしくはカード）は一塊のユーザーインタラクションを含んでいる。
２. カード全体をクリック可能にする
フィッツの法則に従って、テキストや画像だけでなくカードのすべての部分をクリック、タップできるようにしましょう。タッチゾーンを大きくすると、PCとタブレットの両方のデバイスにおいてユーザビリティの向上が期待できます。
ヒント：カードに薄い影をつけて奥行きを出すと効果的です。これはクリック可能なことを示す視覚的サインです。
薄い影を使い、カード全体がクリック可能であることを知らせています。引用元：nngroup
３. 魅力的な見た目にする
カードのデザイン性とユーザビリティの質を上げると、カードをより効果的に使うことができます。カードの見ためを魅力的にすれば、親しみやすくクリエイティブになります。
引用元：Piper Lawson
実際にカードをデザインする際には、以下のような点に注意する必要があります。
画像
カードベースのデザインは画像に力を入れられることが強みです。研究によると、画像はデザイン性を高めると言われています。よって、画像を強調したカードベースのデザインは、ユーザーにとってより魅力的になります。
引用元：Dave Gamache
影とグラデーション
影とグラデーションは、ユーザーにカードを現実のもののように感じさせる上で効果があります。しかし使い方には注意が必要です。なぜなら、影を要素の角と側面すべてに付けてしまうと、カードの立体感が台無しになってしまうからです。
角丸のカードデザインは、視覚的にトランプのカードのようです。引用元：Material Design
タイポグラフィ
テキストを活用することでも、ユーザーの注目を集めることができます。カードデザインのテキストは、ユーザーにとって読みやすく、かつわかりやすくあるべきです。よって読みやすさを最大限にするデザインをする必要があります：
- シンプルな書体と読みやすい色を組み合わせましょう。（テキストとのコントラストの比率を十分に持ったソリッドカラーの背景が、一番読みやすくなります。）
- 使用する書体の種類に制限を設けると良いでしょう。ほとんどのカードでは１つで十分です。
ヒント：カード内の文章は、通常の太さのサンセリフ体が良いでしょう。
引用元：maconprinting
４. コンテンツの量を制限する
カードは通常、簡潔にまとめられていて、より詳しい内容を知るための入り口となるものです。そのため、カードそのものがすべての内容を提供するべきではありません。カードにコンテンツの詳細まで詰め込もうとすると、コンテンツがある一定量を超えたとき幅が広くなってしまうか長くなりすぎてしまいます。そしてカード本来の特徴を失ってしまうのです。
以下はカードベースのUIの一例です。中央にあるカードに注目してください。このカードの問題点は、情報過多で見づらくなっている点です。
引用元：Piotr Adam Kwiatkowski
５. アニメーションとムーブメントを活用する
アニメーションを正しく使うことでユーザー体験を改善することができます。カードがユーザーにとって使いやすくなります。また、ユーザーがカードに慣れやすくなり、カードの状態が変化したとき、カード同士の関係性が一目でわかるようになります。
ビジュアルヒント
ビジュアルヒントはユーザーがUIをわかりやすく使うためのサポートを行います。下のようなタイプのアニメーションは、ある機能がどのように動かくかを見せたいときに使用します。
ナビゲーション機能を見せるためのヒント 引用元：Barthelemy Chalvet
ビジュアルフィードバック
ビジュアルフィードバックはUIデザインにおいてとても重要です。なぜなら、ユーザーの「確認したい」という自然な欲求に訴える効果があるからです。実際の生活の中では、物質は私たちのインタラクションに反応を示し、どんな人でも反応を予測できます。
デスクトップアプリやWebサイトでは、ホバーエフェクトというものを使うことによりその要素がインタラクティブであることを示すことができます。ホバーアニメーションはインタラクティブであることをわかりやすくすると同時に、ユーザーの体験をより楽しいものにします。
ホバーアニメーションをカードに使ってみましょう。引用元：uxpin
ホバーエフェクトは幅広く活用できます。下の例では、ホバーエフェクトによって、ユーザーは色によるタグ付けや返信、削除ができることを理解できます。
引用元：Roman Shkolny
ズームイン
下のようなアニメーションは、プレビューから詳細なビューへの移り変わりを表示してくれます。つまり、ユーザーがアイテム（カード）を選択すると直ちに選択されたアイテム（カード）と関連する詳細を表示してくれる、というものです。このような機能を使う上で難しい点は、ビューが移り変わっていても、ユーザーにまだそのコンテクスト内にいると感じさせられることができるか、という点です。
アニメーションはサムネイルとその詳細なビューを結びつける役割を果たしてくれます。引用元：Charles Patterson
まとめ
カードは最新の「クリエイティブなキャンバス」です。カードは見た目以上に、充実したコンテンツ体験を生み出すためのもっとも柔軟性のあるレイアウトの１つなのではないでしょうか。
