マイクロ・フィードバック
操作の結果をふわっと伝える、小さな反応。
操作の結果と処理の状態を、小さく素早く伝える部品のカテゴリ。トグルやチェック描画のように状態が切り替わったことを示すもの、トースト・アラートバナーのように結果を知らせるもの、スケルトン・スピナー・送信ボタン演出のように「いま待っている」ことを埋めるものが並ぶ。原則はドハティ閾値。応答が0.4秒を超えると利用者の集中は途切れるので、その前に「受け付けた」「処理中」の状態を見せる必要がある。何かを待たせる画面、あるいは操作したのに何も起きなかったように見える画面を直すときに引く。
使い分け設定の ON/OFF は toggle-switch、送信の進行は submit-loading、読み込み待ちはレイアウトが分かるなら skeleton-loading、分からないなら loading-spinner。結果の通知は自動で消えてよければ toast、読み飛ばされて困るなら alert-banner。confetti は成功の山場に1回だけ。
まず見る3件
- クリック
トグルスイッチ解説あり
Toggle Switch
クリックでつまみが滑らかにスライドする ON/OFF スイッチ。設定画面の定番UIパターン。
- レール幅はつまみ直径の約 2 倍（56×30 につまみ 24）。ON と OFF でつまみの位置差が一目で分かる比率にする
- つまみは cubic-bezier(0.34,1.56,0.64,1) で一度行き過ぎてから収まる。等速だと「押した」感触が無い
- 状態は aria-checked に持ち、CSS は属性セレクタで描く。JS が見た目と読み上げを別々に更新する事故を防ぐ
- JS
- クリック
トースト通知解説あり
Toast Notification
ボタン操作後にふわっと現れ、数秒で自動消滅する通知。処理完了などの確認に使う。
- トーストの要素は最初から DOM に置き、中身の文字だけ差し替える。後から要素ごと足すと aria-live が読まれない
- 出現は 16px 上へ滑らせながらフェード 250ms。位置を動かさずフェードだけだと「どこから来たか」が分からない
- 連打したらタイマーを clearTimeout で張り直す。前の消滅タイマーが残ると、新しい通知が 0.1 秒で消える
- JS
- クリック
スケルトンローディング解説あり
Skeleton Screen
読み込み中に輝く光が流れるプレースホルダを表示し、完了後に実コンテンツへ差し替わる。
- 骨組みは実カードと同じ構造（円 44px＋帯 2 本）にする。寸法が合うほど差し替え時のガタつきが小さい
- 光の帯は ::after の transform だけを動かす。背景位置を動かすより軽く、帯を何本並べても引っかからない
- 帯の 2 本目は 65% 幅にする。全部同じ長さだと「本文が載る場所」に見えず、ただの棒に見える
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| トグルスイッチ Toggle Switch | クリック | JS | 即時反映される二択の設定（通知・公開）・今どちらの状態かを一目で見せたい行 | default |
| チェック描画 Animated Checkbox | クリック | CSSのみ | ToDo の完了チェック・同意など押した手応えを強調したい単発操作 | default |
| トースト通知 Toast Notification | クリック | JS | 保存・コピーなど判断を求めない結果通知・作業を止めずに成功を伝えたい操作 | default / active / success |
| スケルトンローディング Skeleton Screen | クリック | JS | 読み込み後の形が決まっているカード・一覧・レイアウトシフトを防ぎたい非同期表示 | default / hover / disabled / loading |
| 送信ボタン演出 Button Loading State | クリック | JS | 数秒で終わる送信・登録のボタン・送信中→完了をボタン内で完結させたい操作 | default / disabled / loading / success |
| ダークモードトグル Dark Mode Toggle | クリック | JS | ヘッダーなど常に見える位置のテーマ切替・ライト／ダークを 1 タップで往復させたい場面 | default |
| 紙吹雪セレブレーション Confetti Celebration | クリック | JS | 目標達成・購入完了の一回きりの祝福・枠内に収めたい軽い演出 | default / active |
| AIタイピングインジケータ AI Typing Indicator | クリック | JS | AI チャットの「考え中」と回答の流し込み・ストリーミング応答の見た目 | default / loading |
| 絵文字リアクションバー Emoji Reaction Bar | 長押し | JS | チャット・コメントへの絵文字リアクション・PC はホバー、スマホは長押しで出す副操作 | default / hover / active |
| アラート・バナー Alert / Banner | クリック | JS | 保存完了・容量警告など画面内に留める通知・ユーザーが閉じるまで残すべき警告・エラー | default / hover / active / error / success |
| ローディングスピナー Loading Spinner | 自動再生 | CSSのみ | ボタン内・小領域の処理中表示・形が事前に分からない読み込み | loading |
すべての見本（11件）
- クリック
トグルスイッチ解説あり
Toggle Switch
クリックでつまみが滑らかにスライドする ON/OFF スイッチ。設定画面の定番UIパターン。
- JS
- クリック
チェック描画解説あり
Animated Checkbox
チェック時にレ点が線で描かれるアニメーション。操作の手応えを視覚で強調する。
- CSSのみ
- クリック
トースト通知解説あり
Toast Notification
ボタン操作後にふわっと現れ、数秒で自動消滅する通知。処理完了などの確認に使う。
- JS
- クリック
スケルトンローディング解説あり
Skeleton Screen
読み込み中に輝く光が流れるプレースホルダを表示し、完了後に実コンテンツへ差し替わる。
- JS
- クリック
送信ボタン演出解説あり
Button Loading State
送信ボタンを押すとスピナーが回り、完了後にチェックマークへ変化。処理中の状態を明示する。
- JS
- クリック
ダークモードトグル解説あり
Dark Mode Toggle
太陽↔月にモーフするトグルで昼夜を切替。ミニカードの背景・文字色・アイコンがアニメ遷移する今風のテーマスイッチ。
- JS
- クリック
紙吹雪セレブレーション
Confetti Celebration
ボタンを押すと紙吹雪が舞い上がる成功演出。依存ゼロの自前パーティクルが重力で落下＋回転。連打しても枠内に収まる。
- JS
- クリック
AIタイピングインジケータ
AI Typing Indicator
AIが考え中の「・・・」3点バブルから、回答が1文字ずつ流れ込むストリーミング風表示。チャットUI・AIアシスタントの定番フィードバック。
- JS
- 長押し
絵文字リアクションバー
Emoji Reaction Bar
メッセージにホバー（PC）または長押し（スマホ）すると絵文字バーが開き、選ぶとバウンスしながらリアクションが付く。Slack/Messenger風。
- JS
- クリック
アラート・バナー解説あり
Alert / Banner
情報・成功・警告・エラーの4色のインラインバナー。アイコンと文言、×ボタンで構成し、×を押すとスライドしながら消える。
- JS
- 自動再生
ローディングスピナー解説あり
Loading Spinner
CSSだけで動く3種のローディング表現。回転リング・3点バウンス・バーのシマー。読み込み中を静かに伝える定番の見本。
- CSSのみ