micro-interactions

マイクロインタラクションアニメーション

Disneyの12のアニメーション原則を、小さなUIフィードバックやインターフェースの細部に適用します。

クイックリファレンス

原則	マイクロインタラクションでの実装
スクワッシュ＆ストレッチ	ボタンを押したときの圧縮、トグルのバウンス
予備動作	ホバー状態のヒント、クリック前のフィードバック
演出	アクティブな要素に注意を向ける
ストレート・アヘッド／ポーズ・トゥ・ポーズ	進行状況と状態変化
フォロースルー／オーバーラッピング	波紋効果、動きの収束
スローイン／スローアウト	素早く滑らかなトランジション
アーク	トグルスイッチ、円形メニュー
副次的アクション	アイコンが親要素の状態に反応する
タイミング	ほとんどのインタラクションで100～300ms
誇張	明確だが、気を散らさない
立体感のある描画	一貫した変形の挙動
魅力	楽しく、目的に沿ったフィードバック

原則の適用例

スクワッシュ＆ストレッチ：ボタンは押したときに少し圧縮します（scaleY: 0.95）。トグルのつまみは端に当たったときに潰れます。通知バッジは更新時にバウンドします。控えめにしてください。これはUIであり、カートゥーンではありません。

予備動作：ホバー状態によってクリックへの準備を促します。ボタンは押下アニメーションの前に少し浮き上がるか、大きくなります。ドラッグ可能な項目は、つかみ始めると浮き上がります。ローディングスピナーは回転前に勢いをつけます。

演出：アクティブなフォームフィールドを明確に区別します。エラー状態は注意を引きます。成功の確認ははっきりと伝わるようにします。一度に表示するインタラクションのフィードバックは1つにします。

ストレート・アヘッドとポーズ・トゥ・ポーズ：進行状況インジケーターは連続的にアニメーションします（ストレート・アヘッド）。チェックボックスは状態間で瞬時に切り替わります（ポーズ・トゥ・ポーズ）。組み合わせる場合は、ローディングインジケーターの終了時に状態を瞬時に切り替えます。

フォロースルーとオーバーラッピング：波紋効果はタップした位置を越えて広がります。トグルスイッチは行き過ぎてから収まります。チェックマークはボックスが塗りつぶされたあと、少し遅れて描画されます。メニュー項目は順番に表示されます。

スローイン／スローアウト：素早いイーズアウトで反応の良さを演出します。イーズアウトを使った100msのアニメーションは瞬時に感じられます。リニアは避けてください。動作が壊れているように見えます。素早く現れ、穏やかに収まるようにします。

アーク：トグルスイッチはわずかな弧を描いて移動します。円形のアクションボタンは放射状に広がります。ドロップダウンのキャレットは滑らかに回転します。メニュー項目は曲線に沿って移動させることもできます。

副次的アクション：ボタンの状態変化に合わせてアイコンの色が変わります。親要素の通知に合わせてバッジの数が更新されます。入力欄にフォーカスすると補助テキストが表示されます。影は要素の高さに応じて変化します。

タイミング：即時フィードバック：50～100ms。標準的なトランジション：100～200ms。複雑なマイクロインタラクション：200～300ms。小さなUIでこれより長いと、もたついて感じられます。

誇張：気づける程度にしつつ、気を散らさないようにします。エラー時の揺れは3～5pxにし、20pxにはしません。成功時の拡大率は1.05～1.1にし、1.5にはしません。控えめながらも、はっきり伝わるようにします。

立体感のある描画：変形の原点が重要です。ボタンは中央を基点に拡大し、ツールチップはポインターを基点にします。同様の要素では一貫した挙動にします。アニメーション中も視覚的な整合性を保ちます。

魅力：マイクロインタラクションは、ユーザーを圧倒することなく個性を加えます。ユーザーが、インターフェースはすぐに反応し、生き生きしていると感じられるようにします。小さな楽しさの積み重ねが、全体的な体験の質を高めます。

コンポーネントのパターン

ボタンの状態

.button {
    transition: transform 100ms ease-out,
                box-shadow 100ms ease-out;
}
.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

トグルスイッチ

.toggle-thumb {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-thumb.active {
    transform: translateX(20px);
}

チェックボックス

.checkmark {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 200ms ease-out 50ms;
}
.checkbox:checked + .checkmark {
    stroke-dashoffset: 0;
}

タイミングの参考値

インタラクション	時間	イージング
ホバー	100ms	ease-out
クリック／タップ	100ms	ease-out
トグル	150～200ms	spring/elastic
チェックボックス	150ms	ease-out
フォーカスリング	100ms	ease-out
ツールチップの表示	150ms	ease-out
ツールチップの非表示	100ms	ease-in
バッジの更新	200ms	elastic
フォームのエラー	200ms	ease-out

ベストプラクティス

1. すべてのインタラクティブ要素にフィードバックを用意する
2. 無効状態ではアニメーションを使わず、不透明度を下げる
3. 関連するフィードバックをまとめる
4. 変更のたびにアニメーションさせない。不必要な更新は除外する
5. アニメーションなしでもテストする。機能がアニメーションに依存してはいけない
6. prefers-reduced-motionを尊重する