表示項目ボタン — デザインパターン比較

BB予約管理ゲスト一覧の「表示項目」ボタンの見せ方を比較。現状の8/14列表示を想定。

Pattern A
現状(そのまま)
アイコン + テキストのみ。カスタマイズ可能だと気づかないユーザーがいる。
Pattern B
カウンター付き(8/14)
非表示列がある時だけカウンター表示。全表示時はカウンター消える。
← 全表示時(カウンター非表示)
Pattern C
非表示数バッジ
非表示の列数だけをバッジで強調。「6件隠れてる」と直感的。全表示時はバッジ消える。
← 全表示時(バッジなし)
Pattern D
Airtable風「非表示あり」ラベル
非表示がある時だけ黄色い警告ピルを表示。Airtableの「Hide fields」と同じアプローチ。
参考: Airtable Grid View の Hide fields ボタン
← 全表示時
Pattern E
セグメント分離型
ラベルとカウントを仕切り線で分離。非表示列がある時だけカウント部分が出る。
8 / 14
← 全表示時(カウンター非表示)
Pattern F
カウンター + 初回ツールチップ
B + 初回のみ吹き出しヒント。一度閉じたら二度と出ない。発見率が最も高い組み合わせ。
列の表示 / 非表示を切り替えられます 閉じる
Pattern G
パルスアニメーション(初回のみ)
ボタン周囲が光って注意を引く。初回訪問時だけ数秒間表示。Slackの新機能紹介に近い。
実際の見え方
テーブルツールバーに配置した場合
実際のゲスト一覧UIに各パターンを当てはめたイメージ。ボタンをクリックで切替。
プレビュー切替:
インアウトゲスト名OTA部屋タイプ人数金額ステータス
3/283/30馮 紹奇 楽天トラベル ツイン2名¥28,000未送信
3/283/30鈴木 一郎 じゃらんnet シングル1名¥8,500未送信
3/283/30John Smith Booking.com ダブル2名¥18,000未送信
比較まとめ
パターン別の特性
パターン発見しやすさ情報量実装コストうるささ備考
A 現状低いなし-なし何も変えない場合
B カウンター高い低い常に表示中/全体がわかる
C バッジやや目立つ非表示がある時だけ主張
D Airtable風高い高いやや目立つ黄色ピルが目を引く
E セグメント高い低い見た目は整うが面積が大きい
F B+ツールチップ最高高い初回のみ確実だが実装やや手間
G パルス高い高い初回のみB+光る枠線。シンプル