デザイン

三次ベジェ曲線ジェネレーター

曲線上の 2 つの制御点をドラッグし、実際の要素がそれに合わせて動く様子を見ながら、アニメーションの手触りを形づくります。三次ベジェ関数は、平坦で機械的なトランジションを、加速し、収まり、行き過ぎて戻るような自然な動きに変えるもので、曲線と動きを並べて見るとその関係がはっきりわかります。CSS のキーワードや名前付きイージングから始め、思い描いたタイミングになるまでハンドルを引きます。位置、拡大縮小、不透明度のデモがループ再生されるので、同じ曲線が異なるプロパティでどう見えるかを比べられます。出力は貼り付けてすぐ使えるトランジションやアニメーションのタイミング関数で、すべてブラウザ内で計算されます。

  • 2 つの制御点をドラッグすると、イージング曲線がライブの動きプレビューと一緒に更新されます
  • CSS キーワードや easeOutBack などの名前付きイージングから始め、手で微調整できます
  • 位置、拡大縮小、不透明度のデモを並べ、1 本の曲線を複数プロパティで確認できます
  • 0 から 1 の範囲を超えて、滑らかな変化だけでなく跳ね返る back イージングも作れます
  • トランジションやアニメーション用のタイミング関数をコピーでき、計算はすべてブラウザ内です
工具/三次ベジェ曲線ジェネレーター
ease
位置
拡大縮小
不透明度
600ms
transition
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

/* shorthand */
transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
クイック操作

概要

イージング曲線と、それが生み出す動きを並べて示すことで、タイミングをスタイルシートで当てずっぽうに直す 4 つの数字ではなく、感じて調整できるものにします。

  1. 01

    曲線を直接編集

    2 つの制御点をドラッグして加速と減速を整え、デザイン仕様の曲線に合わせたいときは正確な数値を入力できます。

  2. 02

    複数プロパティのライブな動き

    位置、拡大縮小、不透明度のデモがループ再生され、同じ曲線が移動、サイズ、フェードを動かすときの見え方の違いを示します。

  3. 03

    キーワードと名前付きイージング

    linear、ease、ease-in-out や easeOutCubic、easeInOutBack などの名前付きイージングから始め、ゼロからではなくそこから微調整できます。

  4. 04

    行き過ぎとばねの手触り

    制御点は 0 から 1 の帯の外へ動かせるので、終点を越えて戻る back イージングも、滑らかな変化と同じくらい簡単に作れます。

  5. 05

    線形の基準線

    薄い直線とプレビューの線形ゴーストにより、自分の曲線が一定で生気のない動きからどれだけ離れているかがはっきりわかります。

  6. 06

    整理されたコピー用出力

    結果は標準の cubic-bezier タイミング関数に、トランジションやアニメーションの短縮例が添えられ、どのスタイルシートにもそのまま貼れます。

使い方

動きがどう感じられるべきかという曖昧な感覚を、正確なイージング関数に変えます。デザインを再現する場合も、直感で調整する場合も同じです。

  1. 01

    CSS キーワードか、目的の手触りに近い名前付きイージングから出発点を選びます。

  2. 02

    開始と終了の制御点をドラッグし、動きの加速と減速の仕方を調整します。

  3. 03

    ばねのような効果には、制御点を枠の上か下へ引いて曲線を終点より行き過ぎさせます。

  4. 04

    時間を設定し、位置、拡大縮小、不透明度のデモでタイミングが合うまで確認します。

  5. 05

    トランジションかアニメーションを選び、タイミング関数をスタイルシートにコピーします。

詳細

動きは界面の一部であって上に載せる装飾ではないので、イージングエディタは実際の cubic-bezier 構文に対応し、結果を正直に見せる必要があります。

  • 2 つのドラッグ可能な制御点が cubic-bezier 関数の 4 つの数字に直接対応します
  • 数値入力はデザインツールや仕様の曲線を再現するための正確な値を受け付けます
  • 制御点は 0 から 1 の範囲を越えられ、back やばねのようなイージングを作れます
  • プリセット群は CSS キーワードと、sine から back までの一通りの名前付きイージングを網羅します
  • 各プリセットには小さな曲線のサムネイルが付き、適用前に形を見分けられます
  • 位置、拡大縮小、不透明度のデモが一緒にループし、曲線をプロパティ間で比較できます
  • 線形ゴーストと対角の基準線が、曲線が一定速度からどれだけ離れているかを示します
  • 調整できる時間により、同じ曲線が速いときと遅いときでどう感じるかがわかります
  • 出力は timing-function 宣言と、トランジションまたはアニメーションの短縮の両方を含みます
  • すべてブラウザ内で動くため、未公開作業のモーションデザインは非公開のままです

活用シーン

イージングは、設計された動きと既定のままの動きを分けるものです。適した曲線は何がなぜ動くかで決まり、実際の要素に当てて試すのが最も速い判断方法です。

  1. ボタンとホバーのトランジション

    短い ease-out は、ボタンやリンクにホバーや押下で機敏できびきびした手触りを与え、もたつきや機械的な印象を避けます。

  2. モーダルとポップオーバー

    登場は少し行き過ぎる動きのほうが見栄えがよく、退場は速く線形に保つと、パネルが入るときは生き生きし、出るときは潔く見えます。

  3. メニューとアコーディオン

    展開と折りたたみは ease-in-out 曲線が向き、高さの変化が急に切り替わらず、穏やかに始まって終わります。

  4. トーストと通知

    わずかに行き過ぎる back イージングは入ってくるトーストに目を向けさせ、その後ぎこちなさなく所定の位置に収めます。

  5. ページとルートの遷移

    大きな移動に滑らかな ease-in-out 曲線を使うと、画面間の遷移が唐突ではなく連続して感じられます。

  6. ローダーと進捗

    ループするインジケーターや進捗バーは、繰り返す動きが機械的でなく安定して見えるよう、慎重に選んだイージングが要ります。

  7. デザイン仕様の再現

    デザインツールの正確な制御点の値を貼り付けると、CSS でモーション曲線を正確に再現でき、引き継ぎに使えます。

  8. モーションシステムの構築

    再利用できるイージング曲線を少数に絞ると、製品全体のアニメーションが一貫したタイミングの感覚を共有します。

関連情報

動きはレイアウトの上に乗るので、まず Flexbox と Grid レイアウト生成 で構造を決め、トランジションが立体感も変えるときは、イージングを ボックスシャドウジェネレーター の奥行きと組み合わせて、動きと影が互いに争わず一緒に変化するようにします。

使い方のヒント

イージングはやり過ぎやすいので、いくつかの習慣があると動きが意図的で一貫したものになり、騒がしさや気が散る印象を避けられます。

  • 入ってくる要素や入力に反応する要素には ease-out を使うと、速く始まり遅く終わって機敏に感じられます。
  • 画面から去る要素には ease-in を使うと、遅く始まり速く終わって加速して離れていくように読めます。
  • 行き過ぎやばねの曲線は注目に値する場面に取っておき、ページの全トランジションに使わないようにします。
  • 小さな UI 変化は時間を短く、おおよそ 150 から 300 ミリ秒に保ち、操作が軽快なままにします。
  • 同じイージングでも小さな移動と大きな移動で手触りが変わるため、曲線を移動距離に合わせます。
  • コンポーネントごとに固有の cubic-bezier を書くのではなく、少数の名前付き曲線に統一します。
  • 動きを減らす設定を尊重し、求めるユーザーには大きな移動を弱めるか取り除きます。
  • デモで合うタイミングも実際の文脈では遅く感じることがあるため、実際の時間と大きさで曲線を検証します。

制限事項

このツールは CSS の cubic-bezier タイミングに絞っているため、いくつかの関連する動きの領域は意図的に対象外です。

  • cubic-bezier 曲線を生成します。steps() による段階的なタイミングは構文が異なり、ここでは生成しません。
  • CSS の cubic-bezier は 2 つの x 値が 0 から 1 に収まることを求めるため、水平方向のハンドルはその範囲に制限されます。
  • タイミング関数を出力するもので、完全なキーフレームではありません。アニメーションするプロパティと値はご自身の CSS で定義します。
  • プレビューは固定のデモ要素を使うため、実際のコンポーネントの大きさと距離で手触りを確認してください。
  • アニメーションライブラリのばね物理は行き過ぎで近似できますが、cubic-bezier 曲線と同一ではありません。
  • 体感の滑らかさはフレームレートや同時に再描画されているものにも左右され、このエディタはそれを測定しません。

よくある質問

イージング曲線を形づくり、動きの構想を出荷できる CSS に変えるときに、よく出てくる質問をまとめました。

三次ベジェイージング曲線とは何ですか。

2 つの制御点を使って時間を進捗に対応づける関数です。曲線を曲げることで、一定速度ではなく、アニメーションがどう加速し、減速し、行き過ぎるかを制御できます。

生成された CSS はそのまま本番で使えますか。

はい。出力は標準の cubic-bezier タイミング関数で、どのスタイルシートのトランジションやアニメーション宣言にも変更なく貼り付けられます。

ease-in と ease-out はいつ使い分けますか。

入ってくる要素や入力に反応する要素には、減速して収まる ease-out を使います。去る要素には、加速して離れる ease-in を使います。画面上で始まり終わる動きには ease-in-out が向きます。

弾むようなばね効果はどう作りますか。

制御点を編集枠の上か下へドラッグして曲線を終点の値より行き過ぎさせると、easeOutBack のようなばね系イージングに見られる、行き過ぎて戻る動きになります。

なぜ X 値は制限され Y 値は制限されないのですか。

CSS は時間を表す cubic-bezier の X 値が 0 から 1 に収まることだけを許します。進捗を表す Y 値はその範囲の外へ出られ、行き過ぎを作れます。

キーフレームも生成しますか。

いいえ。生成するのはタイミング関数です。transform や opacity など何をアニメーションするかは、ご自身のトランジションやキーフレーム規則で定義し、そこに曲線を適用します。

デザインツールの正確な曲線を再現できますか。

はい。4 つの制御点の値を数値入力に直接入れると、デザインファイルや仕様の特定の cubic-bezier 曲線を再現できます。

編集中に何かアップロードされますか。

いいえ。曲線の編集、プレビュー、CSS 生成はすべてブラウザ内で動くため、未公開の製品 UI や機密のモーションデザインでも安全に使えます。

関連ツール

タイミングは洗練された界面の一つの層です。イージングが決まったら、レイアウトと奥行きに戻り、構造、立体感、動きのすべてを一つの考え抜かれたデザインの一部として読めるようにします。