カードUIデザイン：情報の階層、操作、レスポンシブ対応

カードは、関連する項目を一覧で確認し、その中から開く・保存する・比較する・操作する項目を選ぶ必要があるときに役立ちます。情報をすべて角丸の枠に入れればよいわけではありません。よいカードは、項目ごとの識別しやすさ、読み進める順序、次に取る行動を明確にします。

Pixsoでカードコンポーネントをデザインするときは、影や角丸を整える前に、情報の優先順位とレスポンシブ状態を決めます。画像が読み込めない、タイトルが折り返す、操作が使えないといった場合でも、同じカードが内容を説明できることが大切です。

カードが支える判断から始める

カードの役割を「テンプレートを比較する」「チームメンバーがファイルを開く」「対応が必要なタスクを示す」のように一文で書きます。異なる役割がいくつも含まれるなら、パターンを分けましょう。コンテンツカード、選択可能な検索結果、操作を促すダッシュボードタイルは同じ面を使えても、同じ操作の契約にはなりません。

読みやすい階層を作る

視線の流れを、識別情報、判断に役立つ補足、最後に操作という順序にそろえます。一般的なカードには、画像またはアイコン、短いタイトル、補足文、所有者や日付などのメタデータ、主要アクションを一つ置けます。すべての行を太字にせず、太さと余白で重要度を示してください。

1. 識別情報：隣の項目と区別できるタイトルを使います。
2. コンテキスト：ステータス、形式、最終更新など、判断を変えるメタデータだけを加えます。
3. 操作：次の行動を明示します。カード全体をクリック可能にする場合は、フォーカスやホバーでその挙動がわかるようにします。

目的に合うカードパターンを選ぶ

多くの項目を素早く比較するなら、コンパクトな行を使います。画像そのものが意味を持つ場合はメディアカードを使い、タイトルを下へ押し下げるだけの装飾画像は避けます。状態や傾向を示すことが主目的ならステータスカード、次の行動が主目的ならアクションカードを選びます。長い説明が必要な場合は、文字を小さくしてカードを段落にするのではなく、詳細画面へ誘導します。

現実のコンテンツの揺れを想定する

短いタイトル、2行に折り返すタイトル、メタデータがない状態、長い翻訳ラベル、画像の読み込み失敗を少なくとも一度ずつ確認します。意味を損なわない場合だけタイトルに上限を設け、そうでなければカードを伸ばすか全文を詳細画面へ移します。操作ラベルはカードの外でも意味が伝わるよう、「表示」より「プロジェクトを開く」のように具体的にします。

レスポンシブ状態を明示する

広い画面ではグリッドに複数のカードを並べられます。狭い画面では、文字を読めなくする前に列数を減らします。識別情報と主要アクションを残し、補助メタデータは隠すか別の場所へ移します。横長の行に変わる場合も、タップ領域と読み上げ順を一貫させます。各ブレークポイントでキーボードのフォーカス、タッチ領域、スクリーンリーダーの名前を確認してください。見た目のグリッドだけではレスポンシブ仕様になりません。

読み込み中・空・エラーをモデル化する

リクエストが成功したときだけ表示されるカードにも、他の結果に対する計画が必要です。読み込み中はおおよその形を保ち、準備ができたように見せないようにします。空の状態では、何がないのかと次にできることを説明します。エラーでは、何が失敗し、周囲のコンテキストを失わずに再試行する方法を示します。これらを同じコンポーネントセットにまとめ、最後に追加するのではなくパターンの一部としてレビューしましょう。

主要アクションは一つにする

カードが散らかるのは、可能な操作をすべて同時に見せるからです。主要アクションを一つ選び、使用頻度の低い操作は、明確な名前のオーバーフローメニューへ移します。カード自体がリンクの場合、特別な理由がない限り、その中に複数のリンクを入れないでください。入れ子のターゲットはキーボードとタッチの挙動を予測しにくくします。破壊的な操作には結果を確認し、取り消せる場合は復元手段を用意します。

再利用する前にパターンをレビューする

新しいページにカードを追加する前に、タスク、情報量、状態、レスポンシブ挙動を既存コンポーネントと比べます。共有コンポーネントは、繰り返し発生する判断を簡単にするためのもので、関係のない内容を同じテンプレートへ押し込むものではありません。Pixsoで構造と操作状態を記録し、主要画面をプロトタイプでつなぎ、実装前にチームへ共有しましょう。

Pixsoでカードの状態をデザインする