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

出す・消す

題名や箇条書きを、どう画面に登場させるか。いちばんよく使う動きです。

0.00秒

調整して指示を作る

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

速さの変わり方

速さの変わり方とは

出す・消す

フェードインFade in

透明な状態から、少しずつ濃くなって現れる。

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

スライド用（PowerPoint・Canva を操作するAIに）題名はフェードインで表示してください。長さは0.5秒で、最後はゆっくり止まる（イーズアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）冒頭のタイトルを0.5秒でフェードインさせてください。速さの変わり方はイーズアウト（ease-out）。
細かい指定動画を作る人・細かく指示したい人向け
長さ
0.5秒
速さの変わり方
イーズアウト（ease-out）
曲線の数値
cubic-bezier(0, 0, 0.58, 1)
変えるもの
透明度 0% → 100%
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<!-- 動かしたい部品に class="fb-fade-in" を付ける -->
<h1 class="fb-fade-in">上期の振り返り</h1>

<style>
.fb-fade-in {
  /* 動きの名前・長さ・速さの変わり方・終わったら最後の状態を保つ */
  animation: fb-fade-in 0.5s ease-out both;
}
@keyframes fb-fade-in {
  from { opacity: 0; }  /* 始め */
  to   { opacity: 1; }  /* 終わり */
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-fade-in { animation: none; transition: none; }
}
</style>
どう動くか
位置も大きさも変えず、透明から不透明へ変わるだけの動きです。目立ちすぎず、どんな資料にもなじみます。下から少し動かすと、軽やかに見えます。消すときは逆向きのフェードアウトを使います。
使う場面
スライドの題名、写真、動画の冒頭のタイトル。迷ったらまずこれ。
やりすぎに注意
1秒を超えると、待たされている感じが出ます。資料なら0.3〜0.6秒が目安です。

ツールでの近い効果

  • PowerPointフェードイン
  • Canvaフェード

名前は 2026-10-16 に公式ページで確かめたものです（PowerPoint のアニメーション・Canva）。版によって名前や並びが変わることがあります。

0.00秒

調整して指示を作る

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

速さの変わり方

速さの変わり方とは

出す・消す

スライドインSlide in

横から滑り込んできて、定位置で止まる。

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

スライド用（PowerPoint・Canva を操作するAIに）題名は左から大きくスライドインして表示してください。長さは0.5秒で、最後はゆっくり止まる（イーズアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）タイトルを左から40px、0.5秒でスライドインさせてください。速さの変わり方はイーズアウト（ease-out）。
細かい指定動画を作る人・細かく指示したい人向け
長さ
0.5秒
速さの変わり方
イーズアウト（ease-out）
曲線の数値
cubic-bezier(0, 0, 0.58, 1)
変えるもの
左から 40px・透明度 0% → 100%
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<h1 class="fb-slide-in">上期の振り返り</h1>

<style>
.fb-slide-in {
  animation: fb-slide-in 0.5s ease-out both;
}
@keyframes fb-slide-in {
  from { opacity: 0; transform: translateX(-40px); }  /* 始めは左で透明 */
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-slide-in { animation: none; transition: none; }
}
</style>
どう動くか
画面の外や少し離れた位置から、横に動いて定位置で止まります。どちらから来たかで「話の流れ」の向きを伝えられます。
使う場面
新しい項目の登場、比べるものを左右から出すとき、動画のタイトル。
やりすぎに注意
動く距離が大きいと、目で追うのが大変になります。資料なら40px前後で十分です。
0.00秒

調整して指示を作る

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

速さの変わり方

速さの変わり方とは

出す・消す

ズームインZoom in

小さい状態から、元の大きさへ広がって現れる。

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

スライド用（PowerPoint・Canva を操作するAIに）題名は、少し小さい状態から元の大きさへ広がりながら現れるズームで表示してください。長さは0.5秒で、最後はゆっくり止まる（イーズアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）タイトルを70%の大きさから100%へ、0.5秒でズームインさせてください（同時にフェードイン）。速さの変わり方はイーズアウト（ease-out）。
細かい指定動画を作る人・細かく指示したい人向け
長さ
0.5秒
速さの変わり方
イーズアウト（ease-out）
曲線の数値
cubic-bezier(0, 0, 0.58, 1)
変えるもの
大きさ 70% → 100%・透明度 0% → 100%
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<h1 class="fb-zoom-in">上期の振り返り</h1>

<style>
.fb-zoom-in {
  animation: fb-zoom-in 0.5s ease-out both;
}
@keyframes fb-zoom-in {
  from { opacity: 0; transform: scale(0.7); }  /* 始めは小さく透明 */
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-zoom-in { animation: none; transition: none; }
}
</style>
どう動くか
小さく薄い状態から、広がりながら現れます。画面の奥から手前に来るような印象になります。
使う場面
章の題名、大事な一言、動画のロゴ。
やりすぎに注意
始めの大きさを小さくしすぎると、派手に見えます。仕事の資料なら70〜90%から始めると落ち着きます。
0.00秒

調整して指示を作る

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

速さの変わり方

速さの変わり方とは

出す・消す

時間差で出す（スタッガー）Stagger

同じ動きを、上の行から少しずつ遅らせて順番に出す。

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

スライド用（PowerPoint・Canva を操作するAIに）箇条書きは、上の行から1行ずつ順番に表示してください。各行は0.4秒でほんの少し左からスライドしながらフェードインし、次の行は0.15秒遅れて始めてください。最後はゆっくり止まる（イーズアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）要点のテロップを、上から1行ずつ0.15秒の時間差（スタッガー）で出してください。各行は0.4秒、左から8pxスライドしながらフェードイン、速さの変わり方はイーズアウト（ease-out）。
細かい指定動画を作る人・細かく指示したい人向け
長さ
1行 0.4秒
時間差
0.15秒ずつ
速さの変わり方
イーズアウト（ease-out）
曲線の数値
cubic-bezier(0, 0, 0.58, 1)
変えるもの
透明度 0% → 100%・左から 8px
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<ul class="fb-stagger">
  <li>担当を決める</li>
  <li>期限を決める</li>
  <li>予算を確かめる</li>
</ul>

<style>
.fb-stagger li {
  animation: fb-stagger-in 0.4s ease-out both;
}
/* 2つ目から 0.15秒ずつ遅らせる */
.fb-stagger li:nth-child(2) { animation-delay: 0.15s; }
.fb-stagger li:nth-child(3) { animation-delay: 0.3s; }
@keyframes fb-stagger-in {
  from { opacity: 0; transform: translateX(-8px); }  /* 始め */
  to   { opacity: 1; transform: none; }  /* 終わり */
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-stagger li { animation: none; transition: none; }
}
</style>
どう動くか
各行に同じ動きを付け、上の行より少しずつ遅れて始めます。話す順番と画面の出る順番がそろうので、聞き手が先を読みすぎません。
使う場面
説明しながら見せる箇条書き、手順の一覧、動画の要点まとめ。
やりすぎに注意
1行ずつクリックで出すと、話が途切れて長く感じます。自動で続けて出すほうが、テンポよく見えます。ずらす間隔は0.1〜0.2秒が目安です。
0.00秒

調整して指示を作る

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

速さの変わり方

速さの変わり方とは

出す・消す

ポップPop

ポンと弾むように、少し大きくなってから収まる。

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

スライド用（PowerPoint・Canva を操作するAIに）申し込みのボタンは、ポンと弾むように現れる（ポップ）表示にしてください。長さは0.5秒で、少し行き過ぎてから戻って止まる（バック）ようにしてください。
動画用（動画を作るAIや編集の依頼に）ボタンを大きさ0から0.5秒でポップさせてください。速さの変わり方はバック（back）にして、少し大きくなりすぎてから戻ります。
細かい指定動画を作る人・細かく指示したい人向け
長さ
0.5秒
速さの変わり方
バック（back）
曲線の数値
cubic-bezier(0.34, 1.56, 0.64, 1)
変えるもの
大きさ 0% → 100%（速さの変わり方で行き過ぎを出す）
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<button class="fb-pop">今すぐ申し込む</button>

<style>
.fb-pop {
  animation: fb-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes fb-pop {
  from { transform: scale(0); }  /* 始めは見えない大きさ */
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-pop { animation: none; transition: none; }
}
</style>
どう動くか
大きさ0から広がり、少し大きくなりすぎてから元の大きさに戻ります。速さの変わり方「バック」と組み合わせた動きです。
使う場面
ボタン・アイコン・通知の登場。親しみやすい資料や動画。
やりすぎに注意
まじめな資料では軽く見えます。文字の多い部品より、小さなボタンやアイコンに使います。
0.00秒

調整して指示を作る

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

速さの変わり方

速さの変わり方とは

出す・消す

ぼかしから出すBlur in

ぼやけた状態から、ピントが合うように現れる。

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

スライド用（PowerPoint・Canva を操作するAIに）題名は、強くぼやけた状態からくっきりしながら現れるようにしてください。長さは0.7秒で、最後はゆっくり止まる（イーズアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）タイトルを、ぼかし10pxの状態から0.7秒でピントが合うように出してください（同時にフェードイン）。速さの変わり方はイーズアウト（ease-out）。
細かい指定動画を作る人・細かく指示したい人向け
長さ
0.7秒
速さの変わり方
イーズアウト（ease-out）
曲線の数値
cubic-bezier(0, 0, 0.58, 1)
変えるもの
ぼかし 10px → 0・透明度 0% → 100%
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<h1 class="fb-blur-in">上期の振り返り</h1>

<style>
.fb-blur-in {
  animation: fb-blur-in 0.7s ease-out both;
}
@keyframes fb-blur-in {
  from { opacity: 0; filter: blur(10px); }  /* 始めはぼやけて透明 */
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-blur-in { animation: none; transition: none; }
}
</style>
どう動くか
ぼかしと透明の状態から、くっきりした状態に変わります。カメラのピントが合うような、上品な印象になります。
使う場面
動画の冒頭のタイトル、写真の上の言葉、落ち着いた雰囲気の資料。
やりすぎに注意
ぼかしは処理が重く、古いパソコンではカクつくことがあります。大きな画像全体には使わないでください。
0.00秒

調整して指示を作る

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

速さの変わり方

速さの変わり方とは

出す・消す

フリップ（裏返る）Flip

カードを裏返すように、縦の軸で回って現れる。

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

スライド用（PowerPoint・Canva を操作するAIに）題名は、カードを裏返すように縦の軸で回りながら現れる（フリップ）表示にしてください。長さは0.6秒で、最後はゆっくり止まる（イーズアウト）ようにしてください。
動画用（動画を作るAIや編集の依頼に）タイトルを縦の軸で90度回った状態から0.6秒で正面に向けてください（フリップ）。奥行きを付けて、速さの変わり方はイーズアウト（ease-out）。
細かい指定動画を作る人・細かく指示したい人向け
長さ
0.6秒
速さの変わり方
イーズアウト（ease-out）
曲線の数値
cubic-bezier(0, 0, 0.58, 1)
変えるもの
縦の軸の回転 90° → 0°（奥行き 600px）
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<div class="fb-flip-wrap">
  <h1 class="fb-flip">上期の振り返り</h1>
</div>

<style>
.fb-flip-wrap { perspective: 600px; }  /* 奥行きを付ける */
.fb-flip {
  animation: fb-flip 0.6s ease-out both;
}
@keyframes fb-flip {
  from { transform: rotateY(90deg); }  /* 始めは真横を向いている */
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-flip { animation: none; transition: none; }
}
</style>
どう動くか
真横を向いた状態から、縦の軸で回って正面を向きます。カードがめくれるような、奥行きのある動きです。
使う場面
クイズの答え、ビフォー・アフターの切り替え、カード型の一覧。
やりすぎに注意
回っている途中は文字が読めません。長い文には使わず、短い言葉や数字に使います。
0.00秒

調整して指示を作る

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

速さの変わり方

速さの変わり方とは

出す・消す

フェードアウトFade out

少しずつ薄くなって、消える。

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

スライド用（PowerPoint・Canva を操作するAIに）説明が終わった図は、フェードアウトで消してください。長さは0.4秒で、ゆっくり動き出して最後が速くなる（イーズイン）ようにしてください。
動画用（動画を作るAIや編集の依頼に）場面の終わりに、タイトルを0.4秒でフェードアウトさせてください。速さの変わり方はイーズイン（ease-in）。
細かい指定動画を作る人・細かく指示したい人向け
長さ
0.4秒
速さの変わり方
イーズイン（ease-in）
曲線の数値
cubic-bezier(0.42, 0, 1, 1)
変えるもの
透明度 100% → 0%
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<h1 class="fb-fade-out">上期の振り返り</h1>

<style>
.fb-fade-out {
  animation: fb-fade-out 0.4s ease-in both;
}
@keyframes fb-fade-out {
  to { opacity: 0; }  /* 終わりは透明 */
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-fade-out { animation: none; transition: none; }
}
</style>
どう動くか
フェードインの逆で、不透明から透明へ変わって消えます。説明が終わった部品を、目立たせずに片付けられます。
使う場面
説明を終えた図、動画の場面の終わり、次の話題へ移る前。
やりすぎに注意
消える動きは、出る動きより短めにします。速さは「ゆっくり動き出す（イーズイン）」が合います。