表示

表示の概要

表示系コンポーネントは、情報の構造、人物、状態、メディアを読み取りやすく整理するための部品です。まず用途を俯瞰し、必要な個別コンポーネントへ移動できます。

構造を見せる

情報を折りたたむ、カード化する、一覧として並べるための表示コンポーネントです。

Accordion

縦積みの開閉セクション

FAQ、設定項目、長い説明を段階的に見せたい時。

詳細を見る
設定

AccordionGroup

全展開操作付きの開閉グループ

設定項目やFAQをまとめ、すべて展開・すべて閉じる操作を付けたい時。

詳細を見る
2 / 2 件を表示
All

SearchableAccordion

検索とカテゴリ付きの開閉リスト

FAQ やヘルプ項目を検索・カテゴリで絞り込みたい時。

詳細を見る
campaign_visual.png
4.5
campaign_visual.png
1200 x 900 / PNG 1.2MB / 2026-05-18

AssetCard

メディアや制作物の単体カード

選択、お気に入り、評価、プレビュー操作を持つ素材カード。

詳細を見る
campaign_visual.png
4.5
campaign_visual.png
1200 x 900 / PNG 1.2MB / 2026-05-18
product_square.png
3.5
product_square.png
1200 x 900 / PNG 1.2MB / 2026-05-18
story_mock.png
story_mock.png
1200 x 900 / PNG 1.2MB / 2026-05-18

AssetGrid

アセットカードのレスポンシブ一覧

メディアライブラリや制作物一覧をグリッドで確認する時。

詳細を見る
campaign_visual.png

ImagePreview

枠付きの画像プレビュー面

アセットカードや選択ダイアログで画像面だけを再利用したい時。

詳細を見る

人物や状態を見せる

ユーザー、参加者、分類、状態を短く伝えるためのコンポーネントです。

GU

Avatar

ユーザー画像とフォールバック

プロフィール、担当者、コメント投稿者を表す時。

詳細を見る
AK
ST
YY
+1

AvatarGroup

複数ユーザーの重なり表示

参加者、共同編集者、担当チームを省スペースで示す時。

詳細を見る
有効
デザイン
P2

Badge

状態、分類、タグの短いラベル

状態、重要度、カテゴリ、フィルター条件を小さく表示する時。

詳細を見る

Icon

アイコンのサイズと線幅の統一

アイコンを GunjoUI の共通ルールで表示する時。

詳細を見る

表示系の共通ルール

意味がある情報はテキストでも伝え、装飾だけに頼らない。表示密度は用途に合わせて揃えます。

状態色だけで意味を伝えず、ラベルや補助テキストを併用します。

カードやグリッドは、タイトル、メタ情報、操作の位置を揃えます。

迷いやすい使い分け

似ている表示コンポーネントは、情報の単位と操作の有無で選びます。

メディア単体は AssetCard、複数一覧は AssetGrid を使います。

人物単体は Avatar、参加者のまとまりは AvatarGroup を使います。