カードUIとコンテンツのパッケージング

小さなパッケージとしてのカード

前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。

カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。こうした、たくさんの『カード』を一望できるという利便性だけでなく、カードひとつひとつスキミングがしやすかったのも評価が高かった理由なのかもしれません。

カード UI は情報をコンパクトにパッケージングできるだけでなく、マルチデバイスの対応もしやすいところも魅力です。Pinterest は、デバイスごとにカードの構成が異なるものの、それぞれのデバイスで似たような形状をしたカードデザインが採用されています。

ある Web アプリケーションを設計する際に作った、カードパターン（一部）

その後、Google Now や、 Twitter Card のようにパターン言語化されたカードも登場して、より複雑な情報を『小さなパッケージ』にして配信するという手法が生まれました。

カードを使うという行為

カード UI の利点は、「カード」という実世界にあるオブジェクトをメタファとして利用できるところ。カードのような形状をもつことで、利用者に「これは実世界のカードのように操作できる」ことを暗示しています。マルチタッチデバイスを対象としたアプリでは、カード UI で様々な操作を実現しています。

カードの見た目と使い勝手を活かした Jelly の UI

折り畳む

カードを広げて詳細をみたり、次の画面（カード）へ移動ができる

裏返す

詳細情報や、操作 UI を見せることができる

重ねる

複数のカードを積み重ねてグループ化したり、情報の省略化ができる

投げる・渡す

カードを別の場所へ置いたり、他のデバイスへ送ることができる

実世界のカードが出来ることを UI デザインに取り込むことで、情報量を変えたり、複雑な操作が導入しやすくなります。さらに、デジタルならではのカード表現も生まれています。その代表的な例として「拡大・縮小」があります。

YouTube のモバイルアプリでは、観覧中の動画を小さなカードのようにして一旦下に置くという操作ができます。今年登場した Facebook Paper では、下に並んでいる小さなカードが、そのまま全画面に拡大して内容を読むことができるようになっています。実世界のカードではありえない表現ですが、デジタル製のカードであれば考えられる動きです。

トレーディングカードゲーム（TCG）も、デジタルになると特有の表現や操作ができるようになります。
カード内にどのようにコンテンツを表記し、表現するのかという意味で、デジタル TCG は参考になります。

実世界とデジタル UI の関係

ここ 1, 2 年で実世界の質感を模擬する Skeuomorphism ではなく、無駄な装飾を排除したフラットデザインが注目されるようになりました。私のなかでカード UI は、2つの表現の中間のような存在であると思っていて、フラットな見た目でも担保しておきたい最低限の表現バランスを示しているのではと考えています。

フラットデザインは、操作を暗示させる形跡が少なすぎて難易度が高くなることがあります。Google Now をはじめとした、最近のカード UI の興味深いところは、「これはカードである」と分かるギリギリの表現を残しつつ、全体として『フラット』にまとめている点。マルチタッチが一般の方に使われるようになって数年しか経っていない今は、実世界のオブジェクトと連想させた表現は、ある程度必要とされているのかもしれません。Skeuomorphism の復権ではなく、抽象化していくデザインのなかで、いかにして実世界とリンクさせるのかが課題といえるでしょう。

カードの他にも、実世界のオブジェクトがデジタルの UI になるものは幾つかあるはずです。バインダー、スティッキーズ、ステーショナリー、巻物など、様々なオブジェクトが私たちの身の回りにあります。我々は、それらをどのように触れたり動かしたりしているでしょうか。触ることができるマルチタッチだからこそ、指で触れているオブジェクトへの注視は、デザインの糧になります。