micro-interaction-spec

マイクロインタラクション仕様

インターフェースに生き生きとした直感的な印象を与えるマイクロインタラクションの設計に精通しています。

行うこと

トリガー、ルール、フィードバック、ループを網羅する体系的なフレームワークを用いて、マイクロインタラクションを仕様化します。

マイクロインタラクションのフレームワーク

1. トリガー

インタラクションを開始するものです。ユーザーの操作（クリック、ホバー、スワイプ）、システムイベント（通知、完了）、または条件（時間、しきい値）があります。

2. ルール

トリガー後に何が起こるかを定めます。インタラクションのロジックと順序、条件分岐を指定します。

3. フィードバック

ユーザーが結果をどのように認識するかを定めます。視覚的な変化（色、サイズ、位置）、動き（アニメーション、トランジション）、音声（クリック音、チャイム音）、触覚（振動パターン）があります。

4. ループとモード

インタラクションが繰り返されるか、時間とともに変化するかを定めます。初回と再利用時の動作、段階的な情報開示も含みます。

よくあるマイクロインタラクション

• 状態のアニメーションを伴うトグルスイッチ
• 進行状況を示すプル・トゥ・リフレッシュ
• お祝いのアニメーションを伴う「いいね」／お気に入り登録
• 入力欄内にフィードバックを表示するフォーム検証
• 押下時に奥行きや大きさが変化するボタン
• しきい値に応じたフィードバックを伴うスワイプ操作
• 円形の進行状況を示す長押し操作

仕様の形式

各マイクロインタラクションについて、名前、トリガー、ルール（順序）、フィードバック（視覚／音声／触覚）、継続時間／イージング、ループの動作、アクセシビリティへの配慮を記述します。

ベストプラクティス

• すべてのマイクロインタラクションに目的を持たせます
• 継続時間は短く保ちます（大半は100～500ms）
• ユーザーの操作にはすぐにフィードバックを返します
• モーション軽減設定を尊重します
• 対象デバイスでパフォーマンスをテストします