分スマートフォンUIのトレンドは,現実のものを模したデザイン(スキューモフィズム)からフラットなデザインとなりました。そんな中でもカードUIは,現実のもの(カード)を模したUIコンポーネントであり便利であるため,立体感や影などを付けながら使うこともあります。カードUIはなんとなくとっつきやすく,エンジニアやデザイナーはよく使ってしまいがちなコンポーネントだと感じています。マテリアルデザインではガイドラインにCardsの項目があり,AndroidアプリやGoogleのアプリケーションではよく利用されています。そこで今回は,そんなスキューモフィズムのなごりが残るカードUIを利用する際に注意しないといけないケース,最近筆者が感じた迷いどころなどについて,実例を交えながら説明していきます。カードUIが効果的な場面カードUIは前述したとおり立体感や影などを付けて使うことから,フラットなデザインの中に用いると相対的にその要素に存在感を出すことができます。そのため,強弱の付いたデザインを作る目的で活用すると効果的な場面があります。不均一な情報をきれいに整理するカードUIは,不均一な情報の集まりをまとめることに適したコンポーネントだと言われています(注1⁠)⁠。図1のマネーフォワードのホーム画面は,高さが異なる情報がカードUIを利用して連続して並んでいます。このような場面でリストのコンポーネントを用いると,上下に関連性がある情報が並んでいると錯覚しやすいうえ,どこが切れ目かわかりにくくなってしまいます。マネーフォワード(Androidアプリ)しかし,カードUIは「カードらしさ」を表現するために影を付けたり,余白,枠線,内側のコンテンツのための余白と,フラットなリストに比べてデザインに必要な要素が多くなってしまうため,ごちゃついた印象を与えてしまいかねないことも意識しておかなければいけません。図2(a)は,カードUIの中にもう一つカードUIを使ってカルーセル(注2)を作っています。カードUIを多用しているため,余白が多くコンテンツの占める割合が小さくなり,複雑な印象を感じます。このような場合は,(b)のように外側の要素はカードUIを使わずに横幅いっぱいに要素を配置し,カードUIを利用する箇所を絞るとよいでしょう。MusicではカードUIを利用せず,連続するプレイリストの情報を画面いっぱいに表示して並べています。一見すると,1つずつの項目の高さが大きくカードUIにしてもよさそうです。カードUIを使わないことで,背景に敷いているプレイリストのイメージを幅いっぱいに大きく表示でき,全体的にダイナミックかつすっきりとした印象を与えられるため効果的に感じます。Music(Androidアプリ)注1)たとえば,以下のWebサイトの記述が参考になります。https://www.nngroup.com/articles/cards-component/注2)複数の情報を横に配置し,左右にフリックして見るUIのことです。個々のコンテンツの主張を強くする図4はTwitterのような,つぶやきを投稿するサービスを想定したタイムラインの事例です。それぞれ,リスト(a)とカードUI(b)の違いです。つぶやきにリスト(a)とカードUI(b)を用いた例つぶやきのような短文を想定した投稿では,1つ1つの投稿の重みよりも全体をザーッと見流しやすい体験が重要になります。そのため,(b)のようなカードUIの場合,1画面に収まる投稿数は少なくなるうえ,それぞれの投稿に目を向けすぎる印象に感じます。図5は宿泊施設のレビューリストの事例です。宿泊施設に点数を付け,感想も書き,写真も投稿すると投稿者の負荷もかかってしまいますが,ユーザーによってはしっかりと読み応えのある内容のコンテンツになる可能性もあります。個々のコンテンツをちゃんと読んでほしいという思想が必要な場合はカードUIが有効です。レビューにカードUIを用いた例テーブルをカードUIに置き換えるときの注意点カードUIは不均一な情報の集まりをまとめることに適したコンポーネントと前述しましたが,データを整理して表示するような画面にも有効です。PCではテーブルを使ってデザインすることが適している場合が多いですが,スマートフォンでは横幅に制限があるため,カードUIに置き換えて使うこともよくあります。これにはメリットとデメリットそれぞれあることから,注意が必要です。レスポンシブデザインを作りやすいテーブルレイアウトを利用するとスマートフォンでのユーザビリティを確保するのが難しいため,レスポンシブデザインを採用しているWebサイトにおいては,PC,スマートフォンともにテーブルを用いずにカードUIを利用するケースも増えています。図6は,スタッフ名簿をスマートフォンでテーブルで表示した場合(a)と,カードUIで表示した場合(b)の違いです。極端な例ですが,テーブルの場合は1行の情報は横に伸びるため,画面の一部分を横にスクロールすることになります。一方でカードUIの場合は,情報を柔軟にレイアウトしやすいため,縦に積み重ねることができユーザーが操作しやすくなります。情報の比較がしにくくなる画面の収まりはカードUIが良いですが,使い勝手に関しては注意が必要です。図7もスタッフ名簿をテーブルで表示した場合(a)とカードUIで2カラムで表示した場合(b)の違いですが,今度はPCを想定しています。テーブルのほうが2カラムのカードUIに比べて上下に情報を比較検討しやすくなります。カードUIの場合は,まず写真を手がかりに探索し,それに対して名前やメールアドレスなどを確認するような体験には向いていますが,各要素を比較するのには不向きです。PCで同じ情報をテーブルレイアウト(a)とカードUII(b)で比較した例そのため,もともとテーブルで表示していた情報をスマートフォン対応するためにカードUIに置き換える場合は,これらのUIの持つ特性をちゃんと意識していなければ,ユーザーの使い勝手を低下させる恐れがあるのです。今回は,カードUIに関して触れました。カードUIは多様性があり,なんとなく好んで使ってしまいがちなコンポーネントとも言えます。目的を明確に持たないと,その良さを引き出すことができません。そのため,今回の事例のように同じ情報でも,異なるコンポーネントでデザイン案を作ってみることで,思想に合うものがどれかの判断がしやすくなると思います。カードUI著者プロフィール池田拓司(いけだたくじ)デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。