fluid-design

Fluid Design

インターフェースを、不連続な状態の切り替えではなく、連続する物理システムのように感じられるものにします。

他のスキルとの組み合わせ

• このスキルでは、インタラクションの感触を扱います。
• modern-css-html では、その感触を実現できる最もネイティブな実装を扱います。
• 挙動を表現できる場合は、CSS／HTML を優先してください。
• 中断、速度の継承、ジェスチャーの連続性、または CSS ではきれいに表現できないスプリング物理が必要な場合は、JavaScript／Motion／SwiftUI を使用してください。

デフォルト設定

1. インタラクティブな移動や拡大縮小には、固定時間のイージングよりもスプリングを優先してください。
2. ユーザーが開始できるアニメーションは、すべて途中で中断できる必要があります。
3. オブジェクトをつかめる場合は、ボタンだけを介する操作よりも直接操作を優先してください。
4. ジェスチャーの境界（離す → 落ち着く／閉じる）をまたいで速度を維持してください。
5. 同じオブジェクトが存続する状態やルートの変更では、共有される同一性を維持してください。
6. 入力方法（マウス、トラックパッド、タッチ、キーボード）に合わせて、インタラクションモデルを適応させてください。
7. 空間的な連続性には FLIP、レイアウトアニメーション、または View Transitions を優先してください。レイアウトプロパティを直接アニメーションするのは、コンポーネントとの適合性と実測した描画コストを考慮した場合に限ります。
8. 端では段階的に抵抗を加え、境界ではラバーバンド効果を取り入れてください。
9. 振り付けの順序を設けてください。操作対象が先導し、周囲がそれに応じ、その後に落ち着きます。
10. 操作の手がかりを維持しつつ、より安全な代替手段を用意した、動きを抑えた場合の経路を提供してください。

推奨／非推奨

推奨	非推奨
インタラクティブな動きに type: "spring" を使う	transition: all
色／不透明度には CSS の transition を使う	理由やパフォーマンス確認のない高コストなレイアウトアニメーション
動きを抑えた場合は別のレイアウトを使う	アクセシビリティ対策として animation: none !important だけを使う
要素が密集した領域では、速度を考慮したホバー制御を行う	反応が遅く感じるデバウンス付きホバー、または制御されていないストロボ効果
Transform + opacity	ユーザーが終わるまで待たなければならない、長く固定されたキーフレームシーケンス

調整の出発点

• UI スプリング：剛性 200–400、減衰 20–30、質量 0.8–1.2
• レイアウトの再配置：約 200–350ms、または適切に減衰するスプリング
• ジェスチャーによる閉じる操作：オフセットのしきい値と速度のしきい値を組み合わせる
• 要素が密集したホバー領域：EMA で平滑化した速度を使い、開始と終了で個別のしきい値を設定する

入力とアクセシビリティ

• デスクトップ＋動きを許可：設計に応じてスプリング、たわみ、速度による制御を使います。
• デスクトップ＋動きを抑える：階層とコントロールは維持し、空間的な物理表現は、より控えめな不透明度／色／スナップのモデルに置き換えます。
• タッチ：ホバーに依存した発見方法より、ドラッグ／スクロールのメタファーを優先します。
• キーボード：ポインターの精密な操作がなくても、すべてのインタラクティブな領域を操作できるようにします。

レビューチェックリスト

• 動きの途中で、ユーザーは方向を戻したり変えたりできますか？
• 移動距離／速度によって、動きへの応答は変わりますか？
• インタラクションでアニメーションするプロパティは、コンポジターに適したものだけですか？
• 動きを抑えても、同じタスクを実行できますか？
• リスト／グリッドの再配置で、空間的な記憶は保たれますか？
• ホバー要素が密集した領域では、ポインターの高速な移動に対する制御が行われていますか？
• CSS では挙動を表現できないため、JavaScript を使う必要がありますか？

参考資料

• ジェスチャーやトランジションに対応する実装については、Motion recipes を参照してください。
• 連続性の挙動を判断する際は、Principle notes を参照してください。 タスクに必要な参考資料だけを読み込んでください。