はじめに

UIを選定する際、特にテーブルUIとカードUIのどちらを採用すべきか迷う場面は少なくありません。筆者自身も、要件に応じたUIの選択に頭を悩ませた経験があります。そして、筆者の中には「テーブルUIは古くてレガシー、カードUIは新しくてモダン」といった漠然とした印象が存在しています。これは、筆者がHTML黎明期にデザイン要素の配置にテーブルUIを用いていた時代からWeb制作に携わってきた中で自然に培われた感覚であり、容易には変えられません。

このような印象は微細ながら判断に影響を及ぼしており、UIの選定において純粋に機能面の比較ではなく、主観的な「なんとなく」の感覚に頼ってしまっていたことを、過去の自分の選択から見つけることがあります。もっとも、こうした主観的判断は自身の経験の蓄積に基づく直感でもあり、必ずしも誤った選択につながるわけではありません。しかし、課題解決を目的としたUI選定においては、やはり客観的な視点に立った使い勝手の評価が重要であるとも感じています。

仮に、UIデザイナーとして自身の「ふんわりなんとなく」で決定したUIが、後のユーザー体験に微妙な悪影響を及ぼしていたとしたら、それはどこか後味の悪い結果となってしまうでしょう。だからこそ、主観と経験に頼るだけではなく、構造的な違いや用途をしっかり理解し、適切な判断を下す必要があります。

そのUIが持つ本質的な用途の違いを理解していれば、構造的なメリットを損なうことなく、視覚的にも情報伝達を補助するための装飾を付け加えることが自然と行えるようになります。

本記事では、テーブルUIとカードUIそれぞれの特徴や利点・欠点を客観的に整理し、要求されている課題に対して最適なUIを選択できるようになることを目指します。

テーブルUIとカードUI

まずはこのテーブルUIとカードUIの表層的な見た目から得られる特徴の理解から進めます。

テーブルUI

いわゆる「表組み」のUIです。表組みには次のような特徴があります。

• 情報の全体集合をテーブルと呼んでいる
• 要素は「見出し」と「値」に分けられる
• 縦にも横にも「値」を読み進めることが可能
• 見かけ的なグループの概念が希薄
• グループは希薄だが、値ごとの境界は非常に明確
• 「値」に視覚的な優劣が少ない
• いわゆるマス目状な見た目となることがほとんど
• 表組みという単位を、より小さく分割することが困難

これらの特徴をみてみると、表組みの表現は比較的フラットで値に強弱が少なく平易であることが読み取れます。値の集合を表すグループの概念も、データ的には存在するものの、そこに行や列といったラインがグループの概念を持っているという前提知識がなければ、見かけからグループというものを感じることは困難です。また、表組みは「表」というものが提供する情報の最小単位となっており、行や列、値といった小さな単位に分離された状態では、価値のある内容として成り立たせることが難しい構成となっています。

カードUI

続いて、カードUIの見た目には次のような特徴があります。

• 情報のひとまとまりを「カード」と呼んでいる
• その情報のひとまとまりは「グループ」になっている
• グループの概念が強力に提供されている
• グループが連続することで並列の情報であることを表現している
• グループ内へ設置された要素には視覚的な優劣が存在する
• グループ内への要素配置の自由度は高い
• グループ単位で情報の分離が可能

こちらをみてみると、カードUIは複数の情報を1つにまとめた「グループ」という単位が強調されているUIであることが読み取れます。そして、グループの内側であれば、各要素の配置や目立ち具合の序列をコントロールするための強弱設定といった、デザイン的な自由度が確保されている点も特徴です。

このようなグループという単位で規則化された情報が繰り返し配置されることで、各グループが並列化された情報であることの概念を提供しています。また、カードUIはグループという単位に着目したものなので、テーブルUIとは違い情報が小さくまとめられています。要するに、グループという単位でもって1つの情報のまとまりとして完結しているということです。

2つのUIの比較

それでは、これまでに挙げた特徴を使って、テーブルUIとカードUIを比較してみましょう。

対象範囲の違い

まず、大きな違いとして目立ったのが、そのUIを名指しした場合の対象範囲の違いです。

テーブルUIを指す場合は情報の集合全体を指しているのに対して、カードUIの場合は、カード単体を指しています。"そういうもの"として捉えてしまえばそれまでなのですが、ここには、それぞれのUIがどの単位で完結したUIとして成り立っているかの違いが存在していると筆者は感じています。

もう少し詳しく解説すると、テーブルUIを構成している値は、一定の条件でグループされた情報が整然とリスト化されています。そして、複数のグループを寄せ集めたもの全体をテーブルと呼んでいます。

一方でカードUIはどうでしょう。カードUIのユースケースを見てみると、グループを複数並べてリスト化している部分はテーブルUIと同様です。しかし、カードUIはリスト化されたグループ集合全体をカードUIとは呼びません。あくまでもグループ単体をカードUIとして呼んでいます。

さらに、各UIが指し示す対象範囲の違いは、そのUIが、自身の役割を完結させるために必要とする情報集合の単位と一致しています。テーブルUIは複数グループの集合があることを前提としていますし、カードUIは、グループが複数あることを前提としていません。

自由度の違い

次にレイアウトや要素の強弱の自由度の違いです。

テーブルUIは行と列のどちらの視点からも情報を読取ることができるUIですので、「縦にも横にも読み取り可能にする」ということを考えると、要素の配置に自由度がほぼありません。各値の強弱についても平易に扱われることがほとんどで、意図的に要素へ序列を与えないことが多いです。

一方でカードUIはレイアウトや強弱に柔軟です。カードUIはグループという単位が認識さえできれば、UIとして成り立たせることが可能なため、グループの内側に対するデザイン的な制限が発生しません。グループ内の要素配置を横長にすることも可能ですし、罫線や囲み、要素同士を重ねるといった装飾的な要素を追加することも可能です。

さらに、グループ内へ配置する要素の序列も意図的にコントロールすることができます。一番目立たせたい値を強調して、そうではないものを弱くするといったように、情報提供側が利用者の情報読み取り順序に意図をもたせられます。

グループ概念の違い

続いて、グループの概念の違いです。

テーブルUIはグループの概念が希薄であることは前述した通りです。なぜ希薄かと言うと、テーブルUIは縦にも横にも情報を読み取ることができるからです。その時に、閲覧者が望んでいる向きでグループを捉えることが可能になります。行の方向で値を見たければ、該当行に注目しつつ横方向に視線を移動することで、行にグループを作ることができます。そして、列の方向で見たければ、縦方向に視線を移動すれば列にグループが作れるわけです。

このように利用者の意思でもってグループを切り替えることができるため、行もしくは列といった感じで一方向に強いグループを発生させるような見かけにはなっていないことが一般的です。

一方、カードUIはグループが固定されています。そもそも、カードUIはカード単体を1つの単位として指していますので、グループの単位が変化するような横断的な要素が対象になっていません。

2つのUIの共通点

ここまで、それぞれの差異について解説してきましたが、一方でこの2つのUIには共通点もありました。それは、より集めた情報の断片をグループとして取り扱っている部分です。前述したように表現の自由度にこそ違いはありますが、取り扱う情報自体は2つのUIで非常に似通っています。この共通点は具体的な情報でもって比べてみるとわかりやすいです。ユーザー情報を例にしてみましょう。どちらのUIも次のようなユーザー情報という情報の断片が寄り集まったグループを画面上に表現することが可能です。

ユーザー情報

• ID
• 表示名
• メールアドレス
• 生年月日
• アバター画像

このように2つのUIが非常に似通った情報の構成を表現可能にしているからこそ「どちらのUIを利用すべきか」というような、UI選定側の迷いが発生する原因にもなっていると言えそうです。

ここまでのまとめ

こうしてテーブルUIとカードUIの表層的な特徴や構造的な違いを比較してみると、両者には明確な設計思想の違いがあることが見えてきました。また、似通った情報の構成を表現可能であることから、UI選定において迷いが生じることも理解できました。

次回は、「使い方」の観点からそれぞれの得意・不得意を掘り下げ、UI選定の判断材料をさらに深めていきます。