フレームワーク活用ガイド
押さえておきたい用語
- シグネチャーモーメント: プロダクトを象徴するマイクロインタラクション。記憶に残る特徴的な操作応答
- イージング関数: アニメーションの加速・減速カーブ。自然な動きに不可欠
- ハプティクス: 振動や触覚フィードバックで操作の結果を手に伝える技術
- スケルトンスクリーン: コンテンツ読み込み中に表示する骨格的なプレースホルダー
1
インタラクション監査
既存UIの操作フィードバックを一覧化 → 不足箇所の特定
こんな悩みに効く#
- 「ローディング中に何も表示されずユーザーが離脱する」
- 「成功とエラーの区別がテキストだけで弱い」
- 「初回ユーザーが次の操作を見つけられない」
使い方#
既存UIのフィードバックを監査する
主要なユーザーフローを操作し、各ステップで「操作を受け付けた応答があるか」「処理中の表示があるか」「結果が明確に伝わるか」をチェックする。フィードバックが欠如している箇所をリスト化する。
適切なパターンを選ぶ
操作確認（ボタン押下のリップル）、状態変化（トグルのスライド）、進捗表示（スケルトンスクリーン）、成功/エラー（チェックマーク/シェイク）、ガイド（パルスアニメーション）の5パターンから、各操作に最適なものを選ぶ。
デュレーションとイージングを設定する
操作確認は100ms以内の即時応答。状態変化は200〜300ms。画面遷移は300〜500ms。イージングはease-out（減速）を基本とし、バウンスやスプリングは控えめに使う。
多感覚フィードバックを組み合わせる
重要な操作（決済完了、削除確認）には視覚（アニメーション）+触覚（ハプティクス）+聴覚（サウンド）の3感覚を組み合わせる。日常操作は視覚のみで十分。
具体例#
フードデリバリー — 注文完了の体験設計
状況: 注文完了画面がテキストだけの表示で、ユーザーの31%が「本当に注文できたか不安」と回答。確認のためにサポートに問い合わせるケースが月500件。
適用プロセス:
- 注文完了時のフィードバックを多感覚で設計
- 視覚：チェックマークが弾むように描画→注文番号がフェードイン→配達予定時間がカウントダウン表示
- 触覚：注文確定時に短いバイブレーション（成功パターン）
- 進捗：「レストランが受付中」→「調理中」→「配達員が向かっています」のリアルタイムステータス
成果: 「注文に不安を感じた」ユーザーが31%→5%に減少。確認の問い合わせが月500件→60件に激減した。
ノートアプリ — 自動保存フィードバックの追加
状況: 自動保存機能があるにもかかわらず、ユーザーの48%が「保存されたか不安」で手動保存のショートカット（Ctrl+S）を頻繁に押していた。
適用プロセス:
- 自動保存のタイミング（入力停止後2秒）でフィードバックを追加
- ツールバー右端に小さなクラウドアイコンが一瞬フェードイン→チェックマーク化→フェードアウト（全体300ms）
- オフライン時はクラウドアイコンに斜線が入り「オフライン保存済み」とツールチップ表示
成果: 手動保存操作が78%減少。ユーザーインタビューで「保存のことを考えなくてよくなった」という声が多数確認され、作業への集中度が向上した。
SaaS — オンボーディングのガイドインタラクション
状況: 新規ユーザーの58%がダッシュボード到達後に操作せず離脱。多機能画面で「まず何をすればいいか」が分からない状態。
適用プロセス:
- 初回ログイン時にコーチマーク（パルスする光の輪）で最初の操作を示唆
- 「プロジェクトを作成」ボタンにパルスアニメーション→クリック後にカードが展開するアニメーション→「チームメンバーを招待」にパルスが移動
- 3ステップ完了後にチェックマークアニメーションと紙吹雪で達成感を演出
- 2回目以降のログインではガイドを自動的に非表示
成果: ダッシュボード到達後の操作開始率が42%→81%に改善。オンボーディング完了率（3ステップ完了）が24%→62%に向上した。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| アニメーションの長すぎ | 500msを超えるとユーザーが「遅い」と感じる | 日常操作は200〜300ms、遷移は最長500ms |
| フィードバックの均一化 | すべての操作に同じ強度のフィードバックで重要度が伝わらない | 操作の重要度に応じてフィードバックの強度を変える |
| モーションの一貫性欠如 | イージングやデュレーションがバラバラだと不自然 | デザインシステムでモーショントークンを定義する |
| アクセシビリティ無視 | モーション過敏症のユーザーが不快になる | prefers-reduced-motionメディアクエリに対応する |
まとめ#
マイクロインタラクションの実装詳細は 「何を、いつ、どれくらいの強さで」 フィードバックするかにかかっている。操作確認は100ms以内、状態変化は200〜300ms、重要な結果は多感覚で伝える。デュレーションとイージングをデザインシステムのトークンとして統一し、操作の重要度に応じた強弱をつけることで、プロダクト全体の 「手触り」 が一貫したものになる。