動きと動画を別の工程で作る

タイミング、状態、編集、音を扱う

読む目安：約8分。教材としての制作提案です。生成・性能・料金の比較実験は実行していません。

この章で身につけること

• アニメーションと書き出した動画を区別する
• 動きの意図と状態遷移を設計する
• 時間的一貫性を確認する

アプリの状態から見た目の動きを決める

1. 1操作
2. 2実行中
3. 3結果を確認
4. 4成功または失敗
5. 5表情と許可する操作

1. 1経過時間
2. 2アニメーションの値
3. 3表示フレーム

自作の状態図です。結果の確認とアニメーションの進行を分けています。表示が動くことは要求が成功した証拠にはなりません。時間の経路では停止や動きを減らす表示も設計します。

仕事の役割

• モーションデザイナー：動きの意図とタイミング
• 映像編集者：ショットの順序と間
• サウンド担当：音の意味とバランス
• 実装者：状態と動作を接続

入力

• 伝える内容と最終形式
• 台本または状態図
• 素材と音の使用権
• 時間、解像度、出力形式

制作工程

1. 静止状態で情報設計を完成させる
2. 動かす要素と目的を一つずつ決める
3. 低品質の仮編集または簡単な状態遷移で検証する
4. 素材を差し替え、時間的一貫性を確認する
5. 停止、字幕、音、書き出しを確認する

出力

• 動作するUIまたは編集済み動画
• 台本・状態図・タイミング設定
• 元素材と最終出力

何が変わるのかを先に決める

アニメーションは時間や入力に応じて値が変わることです。UIなら透明度や位置、3Dなら骨やカメラ、ドット絵なら表示フレームを変えます。キーフレームは重要な時点の値、補間は間の変化、イージングは変化の速さの配分です。動きを付ける前に「登場を知らせる」「操作の結果を返す」「視線を誘導する」のどれかを決めます。

見た目の動きとアプリの状態

送信ボタンの見た目が動いても、通信が完了したことにはなりません。待機、実行中、成功、失敗などの状態と、各状態で許可する操作を分けて設計します。画面更新ごとに一定量を足すと端末の更新頻度で速さが変わる場合があるため、経過時間を使って動きを作ります。

動画はショットを編集して完成させる

動画制作では、台本→絵コンテ→仮編集→素材生成または撮影→編集→音→字幕→書き出しのように分けます。AI動画の一つの出力は素材となるショットです。人物の形、物体の位置、光、動きがフレーム間で保たれるかを確認します。一枚の良いサムネイルは全編の品質保証にはなりません。

見せる動きと止められる動き

操作できるデモには停止とリセットを用意します。スクロールに過剰に連動すると内容を読む操作を妨げる場合があります。動画には必要な字幕、音量調整、表示時間を用意します。SNS用の短さは、情報が理解できるかを確認しながら決めます。ここでは特定秒数が必ず伸びるとは主張しません。

品質チェック

• 動きが情報の順番を助ける
• 連打や失敗時に状態が壊れない
• 最初・中間・最後を通して形と接地を確認
• 字幕が読める時間がある

失敗を切り分ける

症状	原因	次にすること
華やかだが何を見ればよいか分からない	複数要素が同時に強く動く	主役を一つにし、時差と静止時間を作る
動画の途中で顔や小物が変わる	時間的一貫性の破綻	問題ショットを短く分け、参照・編集・別テイクで検証する

実験課題：案内キャラが反応するUI

状態：未実行（not-run）。実測結果ではなく、これから取り組む課題です。

課題：待機・実行中・成功・失敗の4状態を定義し、各状態に必要な表情と動きを割り当てる。

成果物：状態表と操作デモ

完了条件：連打・エラー・動きを減らす設定でも意味が伝わる

関連するCatalog候補と実践

先に読む章：つくるものと仕事の全体地図 · キャラクターを一人の存在にする

• ボタンとカードの操作フィードバック (Catalog候補: animation-ui-feedback)
• スクロール連動のセクション表示 (Catalog候補: animation-scroll-reveal)
• ページ遷移とモーダルの動き (Catalog候補: animation-page-transition)

実験記録表で計画と証拠を残す

実験ノートを開く

一次資料

• MDN requestAnimationFrame — 確認日: 2026-10-03
• Aseprite Animation — 確認日: 2026-10-03

2026-10-04に確認した出典の範囲

requestAnimationFrame は一回のコールバックを予約するため、次のフレームには再予約が必要です。timestampで経過時間を扱い、背景タブの停止も測定条件へ残します。FPSが固定とは仮定しません。