Reports
nanco — 空状態カタログ 5 型統一 × 全画面 流し込み(2026-06-18)/ MARK-1(型A)+ MARK-91(5型統一)

空状態 / エンプティステート 統一

空状態を 5 型に統一し、
全画面に同じ作法で流し込む

バラバラだった空状態(高UX / 汎用「データがありません」 / 欠落)を 5 型(A〜E)に分類し、型A(在庫0件)を「家のスタイル」の基準に全画面へ展開する。下は各型のリファレンスと、約 20 画面に文言を流し込んだ状態。こちらで文言・パターンをチェックするための一覧。

対応: MARK-1(型A)/ MARK-91(5型統一) SoT: sessions/2026-06-18-empty-state-design/empty-state-analysis.md 判断: decision-log/2026-06-18-empty-state-5type-system.md 設計実物: claude.ai/design「nanco Design System (Copy)」

TL;DR 空状態を 5 型(A〜E)に統一。型A(手描き箱イラスト)+ 型B〜E を確定し、約 20 画面に文言を流し込んだ。各カードは 見出し → サブ → CTA の共通構造。CTA の強さは型ごと(A強 / B弱 / C中強 / D無 / E無)、イラストは型A のみ。

5 型システムと「家のスタイル」

すべての空状態は アイコン → 見出し(いまの状態)→ サブ(なぜ/どうすれば)→ CTA(型による) の同じ構造。トークンは admin web(primary teal #2c7873)、lucide アイコン、絵文字なし、Noto Sans JP、です・ます、用語は アイテム / フォルダ / 属性。静か・等身大・大げさにしない(見出し 16〜18px / 本文 13〜14px)。

A 初回・データ未作成 B 絞り込み・検索0件 C 副次リスト未設定 D グラフ・期間データ無し E 空が正常
イラストは型A だけ。 ヒーローの型A は手描き箱イラスト、B〜E は lucide アイコン1個(一貫性+大げさ回避)。
CTA の強さを型ごとに変える。 A=強(teal) / B=弱(outline) / C=中〜強(teal) / D=弱〜無 / E=無。主CTAの teal は「本当の次の一手」がある型だけ。
A と B を必ず区別。 「データが無い(初回)」と「条件に合わない(絞り込み)」は別物。同じ画面で混ぜない。
「〜がありません」で止めない。 いまの状態+次の一手をセットで。型E だけは「空=正常」を静かに肯定。
A

初回・データ未作成

オンボ直結・74%離脱の本丸。CTA 強(teal)+手描き箱イラスト。TTV 直結。
空の箱
まだアイテムがありません
最初のアイテムを1つ追加すると、ここに在庫が並びます。
アイテムを追加
業種のサンプルを入れる(30秒)Excel・CSV から移す
アイテム一覧(フォルダ直下)確定
src/pages/folder/component/EmptyList.tsx
Before: 「アイテムを登録しましょう!」+別イラスト → 確定版(静かなミニマル+箱)に置換
空の箱
まだアイテムがありません
最初のアイテムを1つ追加すると、ここに在庫が並びます。
アイテムを追加
フォルダ フラット一覧(未作成面)P0
src/pages/folder/view/FolderFlatView.tsx
Before: 「アイテムがありません」。A/B 分岐あり(B面は型B へ)
棚卸の対象がありません
アイテムを追加すると、ここで棚卸ができます。
アイテムを追加
棚卸タスク チェック表P2
src/pages/tasks/check/CheckTaskTable.tsx
Before(バグ): 「出荷記録がありません」(棚卸画面なのに出荷文言)→ 要修正
B

絞り込み・検索で0件

「データが無い」ではなく「条件に合わない」。CTA 弱(outline)=条件をクリア。
条件に合うアイテムがありません
検索や絞り込みの条件を見直すと、見つかるかもしれません。
絞り込みをクリア
検索結果確定
src/pages/search/SearchItemGrid.tsx
Before: 「該当するアイテムはありません」+説明(CTA なし)
条件に合うアイテムがありません
絞り込みを変えるか、クリアして全件を表示できます。
絞り込みをクリア
フォルダ フラット一覧(絞り込み面)P0
src/pages/folder/view/FolderFlatView.tsx
Before: 「条件に合う…」。A面と分岐済 → CTA を明示化
該当する項目がありません
条件を変えてお試しください。
CTA なし(軽量)
属性フィルタ / 取引先ツリー検索P2
AttributeFilter / BulkFolderTree
Before: 「該当なし」「見つかりませんでした」→ 軽量でOK
C

副次リスト未設定(管理系)

最初の1つを作る・招く。CTA 中〜強(teal)。メンバー招待は Path D 活性化に直結。
メンバーはあなただけです
チームを招待すると、同じ在庫を一緒に管理できます。
メンバーを招待
メンバー一覧P1確定
pages/[companyShortId]/settings/member.tsx
Before: 欠落(空時UIなし)→ 新規。Path D 活性化に直結
取引先がまだありません
取引先を追加すると、入荷・出荷の相手として選べます。
取引先を追加
取引先一覧P2
pages/[companyShortId]/settings/client/all.tsx
Before: 欠落 → 新規
属性がまだありません
属性を追加すると、産地や賞味期限などの項目をアイテムに持たせられます。
属性を追加
属性設定 一覧P2
pages/[companyShortId]/settings/itemAttribute/index.tsx
Before: 欠落 → 新規(業種プリセット導線も検討)
お気に入りがまだありません
よく使うフォルダをお気に入りにすると、ここからすぐ開けます。
CTA なし(フォルダ側から登録)
お気に入り 一覧 / グリッドP1
tasks/favorite/all.tsx / FavoriteGrid.tsx
Before: List版にはあるが Grid版に欠落 → 同内容を Grid にも
まだ質問がありません
在庫のことを聞いてみましょう。
今月いちばん減ったアイテムは?在庫が少ないのは?
レポートチャットP2
src/pages/reports/ReportChat.tsx
Before: 「メッセージがありません」→ 質問例で最初の一歩を作る
出荷・入荷の予定がありません
既存 TradeListEmptyState が模範(イラスト+tips+CTA)。家のスタイルの源。
既存・高UX(文言だけ統一)
出荷 / 入荷タスク一覧模範
src/pages/tasks/shared/TradeListEmptyState.tsx
Before: すでに高UX → 他の型A/C をこの温度に合わせる
D

グラフ・期間データ無し

(a) その期間だけ0 → 期間を変える / (b) まだ記録なし → 記録が貯まると出る。CTA 弱〜無。
この期間のデータがありません
上の期間を変えると、表示されるかもしれません。
CTA なし(期間タブで誘導)
在庫トレンドグラフ((a) 期間0)確定
src/pages/reports/InventorySummaryTrend.tsx
Before: 「データがありません」→ グラフ軸を残し overlay で文脈保持
まだ記録がありません
入出庫を記録すると、ここに推移が表示されます。
CTA なし(説明のみ)
アイテム在庫グラフ / ログ((b) 記録なし)P2
LogCountAreaGraph.tsx / ItemLogHistoryPopover.tsx
Before: 「データがありません」→ 記録が貯まると出る旨
まだ動きがありません
入出庫を記録すると、ここに履歴が表示されます。
CTA なし
アクティビティP1
pages/[companyShortId]/activity.tsx
Before(欠落): 0件時に何も出さない(Web/Mobile 両方)→ 新規・同文言
E

設計上“空が正常”

空であること自体が良い状態。ニュートラル灰アイコン、静かに説明、CTA なし。
ゴミ箱は空です
削除したアイテムは、ここに表示されます。元に戻すこともできます。
CTA なし
ゴミ箱確定
pages/[companyShortId]/folder/trash.tsx
Before: 「ゴミ箱にアイテムはありません」
⚠ 実装注意: 既存の注記「※ 30日を過ぎたアイテムは自動的に削除されます」は実際には自動削除されないため、本確定(数字なし)に合わせて softening する
アラートはありません
在庫がしきい値を下回ると、ここに表示されます。
CTA なし
アラート(アイテム)P2
src/pages/item/ItemAlertPanel.tsx
Before: 欠落 → 「無し=正常」を静かに。設定導線も検討

実装メモ

統一コンポーネント バラバラな 3 パターンを単一 <EmptyState variant="A|B|C|D|E" icon title description primaryAction secondaryAction /> に統合。既存 3 テーブル(data-table / virtualized-grid-table / sortable-data-table)の emptyText(汎用文字列)を emptyContent に置換すると、汎用「データがありません」8 箇所が一掃される。
ゴミ箱 30日 の整合(必須) 現行 pages/[companyShortId]/folder/trash.tsx L187 は「30日で自動削除」を断定。本確定の型E(数字なし)と矛盾するので、実装時に L187 も自動削除を断定しない表現へ揃える(実装するか文言を softening するかは別判断、未実装なら後者)。
横断バグ CheckTaskTable が棚卸画面なのに「出荷記録がありません」と表示(型A 修正と同時に直す)。
Web ↔ Mobile 一貫性 型A は Web EmptyList.tsx ↔ Mobile EmptyItems(welcome) を完全一致(TTV 直結)。モバイルは別途「揃える+穴埋め(活動ログ)+底上げ」。詳細は empty-state-analysis-flutter.md。

※ このページはレビュー用カタログ。各画面の最終実装・最新状態は実装時に grep で再確認(worktrees 除外)。型・文言の正本は decision-log/2026-06-18-empty-state-5type-system.md と empty-state-analysis.md。