似ているUIパーツは「1組につき見分ける軸1つ」で覚え、AIへの修正指示で名前を取り違えない
トースト／スナックバー、モーダル／ポップオーバーなど、紛らわしい部品の組ごとに違いを1つの軸で言えるようにしておく。
どんな問題を解決するか / いつ使うか
AIに「トーストで出して」と頼んだのに欲しかったのは「元に戻す」付きの通知だった、のように、部品名をあいまいに使うと修正がずれて返ってくる。名前を覚えるだけでなく、似た部品との違いを1つの軸で言えると、指示がぶれにくい。
見分け方（組ごとの軸）
| 組 | 見分ける軸 |
|---|---|
| トースト／スナックバー | 知らせるだけか、「元に戻す」などの操作を置くか |
| モーダル／ポップオーバー | 背後の操作を止めるか、止めないか |
| ツールチップ／ポップオーバー | 文字だけか、ボタンやリンクを含むか |
| ドロワー／ボトムシート | アプリ全体の移動か、今の画面での操作か |
| タブ／セグメントコントロール | 内容ごと切り替えるか、表示方法だけ切り替えるか |
| トグル／チェックボックス | 押した瞬間に反映か、送信で確定か |
| バッジ／チップ | 状態を示すだけか、押して選ぶか |
| スケルトン／スピナー | 画面全体の読み込みか、一部の待ちか |
使い方
- AIへの指示では部品名に軸を添える（例：「保存後に下部に通知。『元に戻す』ボタン付き＝スナックバー」）。
- DESIGN.md やデザインのルールファイルに、この表を「部品の使い分け」として入れておくと、エージェントが自分で選ぶときにも効く。
- 迷う部品が出てきたら、その組の軸を1つ足して表を育てる。
注意点
- 呼び名はデザインシステムごとに少しずつ違う（Material の Snackbar と、他のライブラリの Toast の定義など）。自分たちのライブラリの名前に合わせて表を直す。
- 構造の伝え方は AIへのUI指示は「App Bar + Drawer + Card Grid + Tabs」のようにUIパターン名で構造を伝える も参照。
出典
- 投稿者: @kawai_design
- 投稿: @kawai_design · 2026-10-20
- 収集日: 2026-10-21（JST）