表示
表示の概要
表示系コンポーネントは、情報の構造、人物、状態、メディアを読み取りやすく整理するための部品です。まず用途を俯瞰し、必要な個別コンポーネントへ移動できます。
構造を見せる
情報を折りたたむ、カード化する、一覧として並べるための表示コンポーネントです。
4.5
campaign_visual.png
1200 x 900 / PNG 1.2MB / 2026-05-18
AssetCard
メディアや制作物の単体カード選択、お気に入り、評価、プレビュー操作を持つ素材カード。
4.5
campaign_visual.png
1200 x 900 / PNG 1.2MB / 2026-05-18
3.5
product_square.png
1200 x 900 / PNG 1.2MB / 2026-05-18
story_mock.png
1200 x 900 / PNG 1.2MB / 2026-05-18
AssetGrid
アセットカードのレスポンシブ一覧メディアライブラリや制作物一覧をグリッドで確認する時。
表示系の共通ルール
意味がある情報はテキストでも伝え、装飾だけに頼らない。表示密度は用途に合わせて揃えます。
状態色だけで意味を伝えず、ラベルや補助テキストを併用します。
カードやグリッドは、タイトル、メタ情報、操作の位置を揃えます。
迷いやすい使い分け
似ている表示コンポーネントは、情報の単位と操作の有無で選びます。
メディア単体は AssetCard、複数一覧は AssetGrid を使います。
人物単体は Avatar、参加者のまとまりは AvatarGroup を使います。