カード一覧
案件、商品、予約枠、記事などをカード形式で見やすく並べます。
カード一覧は、1件ごとの要点を枠でまとめ、画像、ステータス、担当者、期限、操作ボタンなどを一覧しやすくするUIです。Roundtableでは、何をカードの主情報にするか、カード内に置く操作はどこまでにするか、テーブル一覧と使い分けるかを先に決めておくと、画面の目的が揃いやすくなります。
この機能でできること
案件、商品、予約枠、記事、タスクなどを、1件ずつ見やすいカードとして並べられます。タイトル、説明、画像、状態、日付、担当者、金額、件数、主要操作を同じ枠にまとめることで、一覧を見ながら次に扱う対象を選びやすくします。
表よりも「1件ごとの中身」を見せたい一覧に向いています。
列で比較するより、概要、状態、写真、次の操作をまとめて見せたい場合に使います。
よくある利用場面
案件・タスク一覧
案件名、ステータス、担当者、期限、次アクションをカード内で確認します。
商品・記事一覧
写真やサムネイル、公開状態、カテゴリ、編集ボタンをまとめて表示します。
予約枠・候補一覧
日時、空き状況、場所、担当者、予約操作を利用者が選びやすい形にします。
プロンプト例
「一覧をカード形式にしたい」だけではなく、カードに表示する項目、並び順、押せる操作、スマホ時の見え方をセットで伝えます。
プロンプト
案件一覧をカード形式で表示してください。各カードには案件名、ステータス、担当者、期限、次の対応メモ、詳細ボタンを出してください。ステータスごとに色付きチップを表示し、スマホでは1列、PCでは3列で並べてください。重要度が高い案件を上に表示できるようにしてください。
この機能を使うときのポイント
カードの主情報タイトル、写真、状態、期限など、一覧で最初に見せたい情報を絞ります。
操作の数詳細、編集、予約、公開切替など、カード内に置く操作を増やしすぎないようにします。
並び順と絞り込み新着順、期限順、優先度順、カテゴリ別など、探し方に合う並びと検索条件を決めます。
表示件数カードは情報量が多いため、ページングや追加読み込みで画面が重くならないようにします。
この機能を実装するときのコツ
管理側では、一覧データを取得してテンプレート側でカードに展開し、権限や状態によって表示するボタンを切り替えます。公開側では、画像の有無、表示件数、スマホ幅での1列表示、リンク先、公開してよい項目を確認します。テーブル一覧より比較が弱くなるため、件数が多い業務では検索フォーム、ステータスチップ、ページングと組み合わせると使いやすくなります。