表示

表示の概要

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

構造を見せる

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

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 を使います。