アセットカードAssetCardExperimental
メディアライブラリや制作物一覧で使う、選択・お気に入り・スコア表示付きのアセットカードです。
プレビュー
4.5
Instagram_Story_v2.png
1920 x 1080 / JPG 1.4MB / 2026-05-12
状態とバリエーション
選択中
選択中のアセットは枠線、リング、チェックで示し、クリックまたはキーボード操作で切り替えます。
4.5
Instagram_Story_v2.png
1920 x 1080 / JPG 1.4MB / 2026-05-12
コンパクト
サイドパネルや小さいグリッドでは、compact variant で余白と文字サイズを抑えます。
thumbnail_square.png
1920 x 1080 / JPG 1.4MB / 2026-05-12
全体確認
標準は画像面を枠いっぱいに見せます。バナーや縦長素材の全体を確認したい時は imageFit="contain" を使います。
4.5
full_asset_preview.jpg
1920 x 600 / JPG 1.4MB / 2026-05-12
画像なし
画像がないアセットでも、形式やタイトルで内容が判断できるようにします。
プレビュー画像がありません
brief_document.pdf
1920 x 1080 / PDF 1.4MB / 2026-05-12
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| asset | AssetCardAsset | - | カードに表示するメディア項目です。 |
| selected | boolean | - | 選択中の枠線とリングを表示します。 |
| selectionMode | "single" | "multiple" | "none" | "single" | 選択インジケータの表示方法を指定します。 |
| imageFit | "cover" | "contain" | "cover" | 画像面を枠いっぱいに見せるか、全体確認用に収めるかを指定します。 |
| asset.rating | number | - | メディアワークフローとインスペクター編集で使う任意の 0-5 点評価です。 |
| asset.score | string | number | - | 旧形式の代替表示です。メディアライブラリの評価表示には asset.rating を優先します。 |
| noImageLabel | string | "Preview image not found" | プレビュー画像がないアセットで ImagePreview に渡すラベルです。 |
| onSelect | (asset) => void | - | カードクリック、またはキーボード操作時に呼び出されます。 |
| onPreview | (asset) => void | - | 画像エリアにプレビュー操作ボタンを追加します。 |
| portalContainer | HTMLElement | null | - | 擬似ブラウザや入れ子のプレビュー内にツールチップを閉じ込める表示先です。 |
| renderMeta | (asset) => ReactNode | - | 寸法・形式・日付のメタ情報行を差し替えます。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。JSX を返すため serializable な代替は無く、RSC からは "use client" ラッパーで包む。(#338) |
使い方
import { AssetCard } from "@gunjo/ui";
const asset = {
id: "hero",
title: "Instagram_Story_v2.png",
src: "/assets/campaign-hero.jpg",
width: 1920,
height: 1080,
type: "JPG",
size: "1.4MB",
isFavorite: true,
rating: 4.5,
};
export function CampaignAssetCard() {
return (
<AssetCard
asset={asset}
selected
onSelect={() => {}}
onPreview={() => {}}
/>
);
}設計の判断
- 画像の比率を固定して、揃うのは枠のほうにした。資料は「画像は比率を固定してグリッドのガタつきをなくす」を挙げています。GUNJO は
ImagePreviewに比率を持たせ、写真が縦でも横でも枠の大きさが変わらないようにしました。imageFitで「切り抜く（cover）」か「収める（contain）」かを選べます。素材の管理画面では、切り抜かれると困る絵があるためです。 - お気に入りのボタンだけはカードの中に置いた。資料は「カード全体を押せるようにするなら、中にボタンを入れない」を挙げています。この部品はカード全体が
role="button"ですが、お気に入りだけは例外として中に置き、クリックの伝播を止めて選択と切り分けています。一覧のまま星を付ける操作を、詳細を開かずに済ませたいからです。 - 選択の印は色ではなく形で出す。選ばれたカードは枠の色だけでなく、右上に丸のチェックが出ます。
selectionModeがmultipleのときは、選ばれていなくても空の丸を先に出して「ここは複数選べる」を見せます。
一般のカードの設計は UIXHERO の「カード」にあります。
使用コンポーネント
関連コンポーネント
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。