空状態 / エンプティステート 統一
空状態を 5 型に統一し、
全画面に同じ作法で流し込む
バラバラだった空状態(高UX / 汎用「データがありません」 / 欠落)を 5 型(A〜E)に分類し、型A(在庫0件)を「家のスタイル」の基準に全画面へ展開する。下は各型のリファレンスと、約 20 画面に文言を流し込んだ状態。こちらで文言・パターンをチェックするための一覧。
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 から移す
まだアイテムがありません
最初のアイテムを1つ追加すると、ここに在庫が並びます。
アイテムを追加
棚卸の対象がありません
アイテムを追加すると、ここで棚卸ができます。
アイテムを追加
B
絞り込み・検索で0件
「データが無い」ではなく「条件に合わない」。CTA 弱(outline)=条件をクリア。条件に合うアイテムがありません
検索や絞り込みの条件を見直すと、見つかるかもしれません。
絞り込みをクリア
条件に合うアイテムがありません
絞り込みを変えるか、クリアして全件を表示できます。
絞り込みをクリア
該当する項目がありません
条件を変えてお試しください。
CTA なし(軽量)
C
副次リスト未設定(管理系)
最初の1つを作る・招く。CTA 中〜強(teal)。メンバー招待は Path D 活性化に直結。メンバーはあなただけです
チームを招待すると、同じ在庫を一緒に管理できます。
メンバーを招待
取引先がまだありません
取引先を追加すると、入荷・出荷の相手として選べます。
取引先を追加
属性がまだありません
属性を追加すると、産地や賞味期限などの項目をアイテムに持たせられます。
属性を追加
お気に入りがまだありません
よく使うフォルダをお気に入りにすると、ここからすぐ開けます。
CTA なし(フォルダ側から登録)
まだ質問がありません
在庫のことを聞いてみましょう。
今月いちばん減ったアイテムは?在庫が少ないのは?
出荷・入荷の予定がありません
既存
TradeListEmptyState が模範(イラスト+tips+CTA)。家のスタイルの源。既存・高UX(文言だけ統一)
D
グラフ・期間データ無し
(a) その期間だけ0 → 期間を変える / (b) まだ記録なし → 記録が貯まると出る。CTA 弱〜無。この期間のデータがありません
上の期間を変えると、表示されるかもしれません。
CTA なし(期間タブで誘導)
まだ記録がありません
入出庫を記録すると、ここに推移が表示されます。
CTA なし(説明のみ)
まだ動きがありません
入出庫を記録すると、ここに履歴が表示されます。
CTA なし
E
設計上“空が正常”
空であること自体が良い状態。ニュートラル灰アイコン、静かに説明、CTA なし。ゴミ箱は空です
削除したアイテムは、ここに表示されます。元に戻すこともできます。
CTA なし
アラートはありません
在庫がしきい値を下回ると、ここに表示されます。
CTA なし
実装メモ
統一コンポーネント
バラバラな 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。