縁の下のUIデザイン―少しの工夫で大きな改善!

第15回 カードUIの向き不向き

この記事を読むのに必要な時間:およそ 2.5 分

スマートフォンUIのトレンドは,現実のものを模したデザイン(スキューモフィズム)からフラットなデザインとなりました。そんな中でもカードUIは,現実のもの(カード)を模したUIコンポーネントであり便利であるため,立体感や影などを付けながら使うこともあります。

カードUIはなんとなくとっつきやすく,エンジニアやデザイナーはよく使ってしまいがちなコンポーネントだと感じています。特にマテリアルデザインではガイドラインにCardsの項目がありAndroidアプリやGoogleのアプリケーションではよく利用されています。

そこで今回は,そんなスキューモフィズムのなごりが残るカードUIを利用する際に注意しないといけないケース,最近筆者が感じた迷いどころなどについて,実例を交えながら説明していきます。

カードUIが効果的な場面

カードUIは前述したとおり立体感や影などを付けて使うことから,フラットなデザインの中に用いると相対的にその要素に存在感を出すことができます。そのため,強弱の付いたデザインを作る目的で活用すると効果的な場面があります。

不均一な情報をきれいに整理する

カードUIは,不均一な情報の集まりをまとめることに適したコンポーネントだと言われています注1⁠。

図1のマネーフォワードのホーム画面は,高さが異なる情報がカードUIを利用して連続して並んでいます。このような場面でリストのコンポーネントを用いると,上下に関連性がある情報が並んでいると錯覚しやすいうえ,どこが切れ目かわかりにくくなってしまいます。

図1 マネーフォワード(Androidアプリ)

図1 マネーフォワード(Androidアプリ)

しかし,カードUIは「カードらしさ」を表現するために影を付けたり,余白,枠線,内側のコンテンツのための余白と,フラットなリストに比べてデザインに必要な要素が多くなってしまうため,ごちゃついた印象を与えてしまいかねないことも意識しておかなければいけません。

図2(a)は,カードUIの中にもう一つカードUIを使ってカルーセル注2を作っています。カードUIを多用しているため,余白が多くコンテンツの占める割合が小さくなり,複雑な印象を感じます。このような場合は,(b)のように外側の要素はカードUIを使わずに横幅いっぱいに要素を配置し,カードUIを利用する箇所を絞るとよいでしょう。

図2 カードUIを重複して利用した例(a)と内側のみに利用した例(b)

図2 カードUIを重複して利用した例(a)と内側のみに利用した例(b)

図3のGoogle Play MusicではカードUIを利用せず,連続するプレイリストの情報を画面いっぱいに表示して並べています。一見すると,1つずつの項目の高さが大きくカードUIにしてもよさそうです。しかし,カードUIを使わないことで,背景に敷いているプレイリストのイメージを幅いっぱいに大きく表示でき,全体的にダイナミックかつすっきりとした印象を与えられるため効果的に感じます。

図3 Google Play Music(Androidアプリ)

図3 Google Play Music(Androidアプリ)

注1)
たとえば,以下のWebサイトの記述が参考になります。
https://www.nngroup.com/articles/cards-component/
注2)
複数の情報を横に配置し,左右にフリックして見るUIのことです。

個々のコンテンツの主張を強くする

図4はTwitterのような,つぶやきを投稿するサービスを想定したタイムラインの事例です。それぞれ,リスト(a)とカードUI(b)の違いです。

図4 つぶやきにリスト(a)とカードUI(b)を用いた例

図4 つぶやきにリスト(a)とカードUI(b)を用いた例

つぶやきのような短文を想定した投稿では,1つ1つの投稿の重みよりも全体をザーッと見流しやすい体験が重要になります。そのため,(b)のようなカードUIの場合,1画面に収まる投稿数は少なくなるうえ,それぞれの投稿に目を向けすぎる印象に感じます。

図5は宿泊施設のレビューリストの事例です。宿泊施設に点数を付け,感想も書き,写真も投稿すると投稿者の負荷もかかってしまいますが,ユーザーによってはしっかりと読み応えのある内容のコンテンツになる可能性もあります。個々のコンテンツをちゃんと読んでほしいという思想が必要な場合はカードUIが有効です。

図5 レビューにカードUIを用いた例

図5 レビューにカードUIを用いた例

テーブルをカードUIに置き換えるときの注意点

カードUIは不均一な情報の集まりをまとめることに適したコンポーネントと前述しましたが,データを整理して表示するような画面にも有効です。PCではテーブルを使ってデザインすることが適している場合が多いですが,スマートフォンでは横幅に制限があるため,カードUIに置き換えて使うこともよくあります。

しかし,これにはメリットとデメリットそれぞれあることから,注意が必要です。

レスポンシブデザインを作りやすい

テーブルレイアウトを利用するとスマートフォンでのユーザビリティを確保するのが難しいため,レスポンシブデザインを採用しているWebサイトにおいては,PC,スマートフォンともにテーブルを用いずにカードUIを利用するケースも増えています。

図6は,スタッフ名簿をスマートフォンでテーブルで表示した場合(a)と,カードUIで表示した場合(b)の違いです。少し極端な例ですが,テーブルの場合は1行の情報は横に伸びるため,画面の一部分を横にスクロールすることになります。一方でカードUIの場合は,情報を柔軟にレイアウトしやすいため,縦に積み重ねることができユーザーが操作しやすくなります。

図6 スマートフォンで同じ情報をテーブルレイアウト(a)とカードUI(b)で比較した例

図6 スマートフォンで同じ情報をテーブルレイアウト(a)とカードUI(b)で比較した例

情報の比較がしにくくなる

画面の収まりはカードUIが良いですが,使い勝手に関しては注意が必要です。

図7もスタッフ名簿をテーブルで表示した場合(a)とカードUIで2カラムで表示した場合(b)の違いですが,今度はPCを想定しています。テーブルのほうが2カラムのカードUIに比べて上下に情報を比較検討しやすくなります。カードUIの場合は,まず写真を手がかりに探索し,それに対して名前やメールアドレスなどを確認するような体験には向いていますが,各要素を比較するのには不向きです。

図7 PCで同じ情報をテーブルレイアウト(a)とカードUII(b)で比較した例

図7 PCで同じ情報をテーブルレイアウト(a)とカードUII(b)で比較した例

そのため,もともとテーブルで表示していた情報をスマートフォン対応するためにカードUIに置き換える場合は,これらのUIの持つ特性をちゃんと意識していなければ,ユーザーの使い勝手を低下させる恐れがあるのです。

今回は,カードUIに関して触れました。カードUIは多様性があり,なんとなく好んで使ってしまいがちなコンポーネントとも言えます。しかし目的を明確に持たないと,その良さを引き出すことができません。そのため,今回の事例のように同じ情報でも,異なるコンポーネントでデザイン案を作ってみることで,思想に合うものがどれかの判断がしやすくなると思います。

WEB+DB PRESS

本誌最新号をチェック!
WEB+DB PRESS Vol.113

2019年10月24日発売
B5判/160ページ
定価(本体1,480円+税)
ISBN978-4-297-10905-9

  • 特集1
    接続エラー,性能低下,権限エラー,クラウド障害
    AWSトラブル解決
    原因調査・対応・予防のノウハウ
  • 特集2
    Ruby書き方ドリル
    要点解説と例題で身に付く!
  • 特集3
    体験
    ドメイン駆動設計
    モデリングから実装までを一気に制覇
  • 一般記事
    FigmaによるUIデザイン
    デザイナーとエンジニアがオンラインで協業できる!
  • 一般記事
    入門
    SwooleによるPHP非同期処理
    高速化のための並列実行はどのように書くのか

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/