#271
心理学・認知バイアス
#271べじぇきょくせん
ベジェ曲線
別名・表記:Bezier CurveCubic Bezier
UIXHERO Definition
「動きのグラフ」。時間と進行度の関係をカーブで表したもの。
概要
フランスの自動車メーカー、ルノーのエンジニアであるピエール・ベジェ氏が考案した。 デザインツール（IllustratorやFigma）のパス描画でもおなじみだが、アニメーションにおいては「横軸を時間、縦軸を変化量」としたグラフとして使われる。
UXでの活用
- カスタムイージング: プリセットのイージングでは表現できない、ブランド独自の「動きの味付け」を作ることができる。
- 物理挙動の再現: 重力や摩擦、バネ係数などを計算し、ベジェ曲線に近似させることで、リアルな物理法則に基づいた動きをCSSだけで表現する。
💡 使いどころ
標準のイージング（ease-in, ease-out）では物足りず、独自の動き（バネのような動きや、特殊な加速など）を作りたい時。CSSの cubic-bezier() や transition-timing-function で指定する。
⚠️ 注意点・誤用
制御点（ハンドル）の操作が直感的ではない。慣れが必要。複雑にしすぎると不自然な動きになる。
具体例
- `cubic-bezier(0.25, 0.1, 0.25, 1.0)` （一般的なeaseの定義）
- `cubic-bezier(0.68, -0.55, 0.265, 1.55)` （少し戻ってから進み、行き過ぎて戻るようなバウンス動作）
出典・参考文献:
- Bézier, P. (1972). Numerical Control: Mathematics and Applications. Wiley.
- Farin, G. (2002). Curves and Surfaces for CAGD: A Practical Guide (5th ed.). Morgan Kaufmann.
- Google. (2014). Material Design Guidelines: Motion. Google Design.
関連する解説記事
関連する記事詳細が見つかりませんでした。