AI業務効率化・自動化レシピ
DESIGN DIRECTION

速さの変わり方（イージング）

どの動きにも組み合わせられる、もう1つの指定です。同じ動きでも、速さの変わり方で印象が大きく変わります。

0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

速さの変わり方（イージング）

リニア（等速）Linear

最初から最後まで、同じ速さで動く。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）この動きは1.4秒かけて、等速（リニア）で動かしてください。速さを変えずに一定で動かします。
動画用（動画を作るAIや編集の依頼に）1.4秒かけて200px動かし、速さの変わり方はリニア（linear・等速）にしてください。キーフレームの間で速度を変えません。
細かい指定動画を作る人・細かく指示したい人向け
長さ
1.4秒
動く距離
200px
速さの変わり方
リニア（linear）
曲線の数値
cubic-bezier(0, 0, 1, 1)
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
<!-- 点が左右に行き来する。速さの変わり方だけを見比べる見本 -->
<div class="fb-track">
  <div class="fb-dot"></div>
</div>

<style>
.fb-track { position: relative; width: 224px; height: 24px; }
.fb-dot {
  position: absolute; left: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: #c25e1f;
  /* 速さの変わり方：リニア（linear） */
  animation: fb-run 1.4s linear infinite alternate;
}
@keyframes fb-run {
  to { left: 200px; }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-dot { animation: none; transition: none; }
}
</style>
どう動くか
動き始めから止まるまで速さが変わりません。機械的で、ぴたっと止まる印象になります。
使う場面
回り続けるローディング、流れ続けるテロップ、時計の針。くり返す動きや、終わりのない動き。
やりすぎに注意
出す・消すに使うと、急に止まって硬く見えます。登場の動きには、たいていイーズアウトが合います。
0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

速さの変わり方（イージング）

イーズインEase in

ゆっくり動き出して、だんだん速くなる。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）退場の動きは1.4秒で、ゆっくり動き出して最後に速くなる（イーズイン）ようにしてください。
動画用（動画を作るAIや編集の依頼に）画面の外へ出ていく動きは1.4秒・200pxで、イーズイン（ease-in・動き出しがゆっくり、最後が速い）にしてください。
細かい指定動画を作る人・細かく指示したい人向け
長さ
1.4秒
動く距離
200px
速さの変わり方
イーズイン（ease-in）
曲線の数値
cubic-bezier(0.42, 0, 1, 1)
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
<!-- 点が左右に行き来する。速さの変わり方だけを見比べる見本 -->
<div class="fb-track">
  <div class="fb-dot"></div>
</div>

<style>
.fb-track { position: relative; width: 224px; height: 24px; }
.fb-dot {
  position: absolute; left: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: #c25e1f;
  /* 速さの変わり方：イーズイン（ease-in） */
  animation: fb-run 1.4s ease-in infinite alternate;
}
@keyframes fb-run {
  to { left: 200px; }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-dot { animation: none; transition: none; }
}
</style>
どう動くか
動き始めがゆっくりで、最後がいちばん速くなります。勢いがついたまま画面の外へ抜けていく印象です。
使う場面
消える・画面の外へ出ていく動き（フェードアウト、退場）。
やりすぎに注意
登場の動きに使うと、最後に急に止まってぶつかったように見えます。
0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

速さの変わり方（イージング）

イーズアウトEase out

速く動き出して、最後はゆっくり止まる。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）登場の動きは1.4秒で、最後がゆっくり止まる（イーズアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）登場の動きは1.4秒・200pxで、イーズアウト（ease-out・動き出しが速く、止まる直前にゆっくり）にしてください。
細かい指定動画を作る人・細かく指示したい人向け
長さ
1.4秒
動く距離
200px
速さの変わり方
イーズアウト（ease-out）
曲線の数値
cubic-bezier(0, 0, 0.58, 1)
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
<!-- 点が左右に行き来する。速さの変わり方だけを見比べる見本 -->
<div class="fb-track">
  <div class="fb-dot"></div>
</div>

<style>
.fb-track { position: relative; width: 224px; height: 24px; }
.fb-dot {
  position: absolute; left: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: #c25e1f;
  /* 速さの変わり方：イーズアウト（ease-out） */
  animation: fb-run 1.4s ease-out infinite alternate;
}
@keyframes fb-run {
  to { left: 200px; }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-dot { animation: none; transition: none; }
}
</style>
どう動くか
動き始めがいちばん速く、止まる直前にゆっくりになります。自然に「収まる」印象で、画面に登場する動きの基本です。
使う場面
題名や部品が出てくる動き（フェードイン、スライドイン、ワイプ）。迷ったらこれ。
やりすぎに注意
消える動きに使うと、ゆっくり残って未練がましく見えます。消える動きはイーズインを。
0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

速さの変わり方（イージング）

イーズインアウトEase in out

ゆっくり動き出し、途中で速くなり、最後はゆっくり止まる。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）画面の中で移動する動きは1.4秒で、始めと終わりがゆっくり（イーズインアウト）になるようにしてください。
動画用（動画を作るAIや編集の依頼に）移動の動きは1.4秒・200pxで、イーズインアウト（ease-in-out・始めと終わりがゆっくり、中間が速い）にしてください。
細かい指定動画を作る人・細かく指示したい人向け
長さ
1.4秒
動く距離
200px
速さの変わり方
イーズインアウト（ease-in-out）
曲線の数値
cubic-bezier(0.42, 0, 0.58, 1)
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
<!-- 点が左右に行き来する。速さの変わり方だけを見比べる見本 -->
<div class="fb-track">
  <div class="fb-dot"></div>
</div>

<style>
.fb-track { position: relative; width: 224px; height: 24px; }
.fb-dot {
  position: absolute; left: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: #c25e1f;
  /* 速さの変わり方：イーズインアウト（ease-in-out） */
  animation: fb-run 1.4s ease-in-out infinite alternate;
}
@keyframes fb-run {
  to { left: 200px; }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-dot { animation: none; transition: none; }
}
</style>
どう動くか
始めと終わりの両方がゆっくりで、真ん中がいちばん速くなります。画面の中で場所を移す動きが、なめらかに見えます。
使う場面
画面の中での移動、スライドの切り替え、カメラの移動（パン）。
やりすぎに注意
短い動き（0.3秒以下）では違いが見えにくく、もたついて見えることがあります。
0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

速さの変わり方（イージング）

バック（行き過ぎて戻る）Back / Overshoot

止まる位置を少し行き過ぎてから、戻って止まる。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）登場の動きは1.4秒で、止まる位置を少し行き過ぎてから戻る（バック）ようにしてください。勢いのある、弾んだ印象にします。
動画用（動画を作るAIや編集の依頼に）200pxの移動を1.4秒で、終点を少し行き過ぎてから戻って止まるオーバーシュート（バック・cubic-bezier(0.34, 1.56, 0.64, 1)）にしてください。
細かい指定動画を作る人・細かく指示したい人向け
長さ
1.4秒
動く距離
200px
速さの変わり方
バック（back）
曲線の数値
cubic-bezier(0.34, 1.56, 0.64, 1)
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
<!-- 点が左右に行き来する。速さの変わり方だけを見比べる見本 -->
<div class="fb-track">
  <div class="fb-dot"></div>
</div>

<style>
.fb-track { position: relative; width: 224px; height: 24px; }
.fb-dot {
  position: absolute; left: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: #c25e1f;
  /* 速さの変わり方：バック（back） */
  animation: fb-run 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}
@keyframes fb-run {
  to { left: 200px; }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-dot { animation: none; transition: none; }
}
</style>
どう動くか
勢いよく動いて目標を少し越え、すぐ戻って止まります。ばねのような弾みが出て、楽しく元気な印象になります。動画では「オーバーシュート」とも呼びます。
使う場面
ボタンやアイコンが出てくるとき、通知、子ども向けや親しみやすい資料。
やりすぎに注意
仕事の報告やまじめな資料では、軽く見えることがあります。行き過ぎる量は小さめに。
0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

速さの変わり方（イージング）

バウンス（跳ねる）Bounce

着地したあと、何度か小さく跳ねて止まる。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）落ちてくる動きは1.4秒で、着地したあとに何度か小さく跳ねて止まる（バウンス）ようにしてください。
動画用（動画を作るAIや編集の依頼に）200pxの移動を1.4秒で、終点で3回ほど跳ね返り、跳ねるたびに低くなって止まるバウンスにしてください。
細かい指定動画を作る人・細かく指示したい人向け
長さ
1.4秒
動く距離
200px
速さの変わり方
バウンス（bounce）
曲線の数値
linear(…)（点を結んだ曲線。全体は HTML・CSS の欄）
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
<!-- 点が左右に行き来する。速さの変わり方だけを見比べる見本 -->
<div class="fb-track">
  <div class="fb-dot"></div>
</div>

<style>
.fb-track { position: relative; width: 224px; height: 24px; }
.fb-dot {
  position: absolute; left: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: #c25e1f;
  /* 速さの変わり方：バウンス（bounce） */
  animation: fb-run 1.4s linear(0, 0.005, 0.019, 0.043, 0.076, 0.118, 0.17, 0.232, 0.303, 0.383, 0.473, 0.572, 0.681, 0.799, 0.926, 0.97, 0.91, 0.86, 0.819, 0.788, 0.766, 0.753, 0.75, 0.757, 0.772, 0.798, 0.833, 0.877, 0.931, 0.994, 0.973, 0.952, 0.94, 0.938, 0.945, 0.962, 0.988, 0.991, 0.985, 0.988, 1) infinite alternate;
}
@keyframes fb-run {
  to { left: 200px; }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-dot { animation: none; transition: none; }
}
</style>
どう動くか
ボールが床に落ちたように、止まる位置で跳ね返り、跳ねるたびに低くなって止まります。重さと楽しさが出ます。
使う場面
上から落ちてくるアイコン、ゲームのような演出、動画のロゴの登場。
やりすぎに注意
文字や数字に使うと読みにくくなります。目立つので、1つの画面に1か所までにします。
0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

速さの変わり方（イージング）

スプリング（ばね）Spring

終点の前後で揺れながら、だんだん止まる。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）この動きは1.4秒で、終点の前後でばねのように何度か揺れてから止まる（スプリング）ようにしてください。
動画用（動画を作るAIや編集の依頼に）200pxの移動を1.4秒で、終点を越えたり戻ったりを3回ほどくり返し、揺れがだんだん小さくなって止まるスプリング（ばね）の動きにしてください。
細かい指定動画を作る人・細かく指示したい人向け
長さ
1.4秒
動く距離
200px
速さの変わり方
スプリング（spring）
曲線の数値
linear(…)（点を結んだ曲線。全体は HTML・CSS の欄）
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
<!-- 点が左右に行き来する。速さの変わり方だけを見比べる見本 -->
<div class="fb-track">
  <div class="fb-dot"></div>
</div>

<style>
.fb-track { position: relative; width: 224px; height: 24px; }
.fb-dot {
  position: absolute; left: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: #c25e1f;
  /* 速さの変わり方：スプリング（spring） */
  animation: fb-run 1.4s linear(0, 0.191, 0.433, 0.683, 0.907, 1.084, 1.205, 1.27, 1.284, 1.259, 1.209, 1.146, 1.081, 1.023, 0.977, 0.946, 0.93, 0.926, 0.933, 0.946, 0.962, 0.979, 0.994, 1.006, 1.014, 1.018, 1.019, 1.017, 1.014, 1.01, 1.005, 1.001, 0.998, 0.996, 0.995, 0.995, 0.995, 0.996, 0.998, 0.999, 1) infinite alternate;
}
@keyframes fb-run {
  to { left: 200px; }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-dot { animation: none; transition: none; }
}
</style>
どう動くか
終点を越えたり戻ったりを何度かくり返し、揺れがだんだん小さくなって止まります。ばねにつながった物のような、生きた動きになります。
使う場面
アプリの画面のような動き、ドラッグを離したあとの戻り、楽しい雰囲気の動画。
やりすぎに注意
揺れる回数が多いと、止まるまで待たされます。仕事の資料では控えめに。
0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

速さの変わり方（イージング）

ステップ（コマ送り）Steps

なめらかではなく、決まった段階でカクカク進む。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）この動きは1.4秒で、なめらかではなく5段階でカクカクと進む（ステップ）ようにしてください。
動画用（動画を作るAIや編集の依頼に）200pxの移動を1.4秒で、5コマに分けてカクカクと進めてください（ステップ・steps(5)）。コマの間はつながず、止まった絵を切り替えます。
細かい指定動画を作る人・細かく指示したい人向け
長さ
1.4秒
動く距離
200px
速さの変わり方
ステップ（steps(5)）
曲線の数値
steps(5, end)
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
<!-- 点が左右に行き来する。速さの変わり方だけを見比べる見本 -->
<div class="fb-track">
  <div class="fb-dot"></div>
</div>

<style>
.fb-track { position: relative; width: 224px; height: 24px; }
.fb-dot {
  position: absolute; left: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: #c25e1f;
  /* 速さの変わり方：ステップ（steps(5)） */
  animation: fb-run 1.4s steps(5, end) infinite alternate;
}
@keyframes fb-run {
  to { left: 200px; }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-dot { animation: none; transition: none; }
}
</style>
どう動くか
動きを決まった数のコマに分け、コマとコマの間はつながずに切り替えます。時計の秒針や、パラパラ漫画のような動きです。
使う場面
時計の針、タイプライター、ドット絵のような演出、カウントダウン。
やりすぎに注意
なめらかさを求める場面では、ただ動きが悪いように見えます。わざとカクカクさせたいときだけ使います。