複数の要素を一緒に動かすときは、役割（主役・脇役・飾り・静止）を先に決める：Emil Kowalski の /choreograph スキル

どんな問題を解決するか / いつ使うか

コーディングエージェントに動きを頼むと、パネルが入ってきた後に中の項目が1つずつ流れ込む、といった「足し算の演出」になりがち。1つずつはなめらかでも、全体では画面が演技を終えるまで使えない。リストの入場、ヒーローの入場、同じ枠内での画面切り替え、要素の削除と詰め、複数ステップの遷移などで、動きの関係（順番・重なり・時間・止める物）を決めるときに使う。インタラクションデザイナーの Emil Kowalski が公開したスキル集 emilkowalski/skills に追加された。

やり方

1. 動く要素を全部書き出し、役割を付ける（タイミングを決める前に）。
   • 主役：ユーザーが必ず気づくべき1つ（見出し・新しい画面・操作した項目）。最初に動き、移動量が一番大きい。
   • 脇役：主役に続く内容（小見出し・ボタン・残りのリスト）。短く小さく動く。
   • 飾り：バッジ・背景・区切り線。フェードだけ、または動かさない。
   • 静止：それ以外。中身が動く入れ物も含む。
   • 主役になりたい要素が2つ以上あるなら、それは動きではなく画面の強弱の問題。
2. 2つの要素ごとに関係を選ぶ。同じ物・同じ瞬間なら「同時」。順番に意味がなければ「同時」。順番に意味があり、同時だと重なって壊れて見えるなら「順番」。壊れないなら「少しずらす（スタッガー）」。
3. 守るルール（スキルの「Hard Rules」の要約）
   • 入れ物1つにつき入場は1回。パネルが入ってくるなら中身は最初からある。親の入場と子のスタッガーを重ねない。
   • 何度も開くUI（ドロップダウン、メニュー、コマンドパレット、タブ）にはスタッガーを付けない。
   • 全部同じ間隔のスタッガーは禁止。重要度で時間や移動量を変える。
   • 演出中でも、見えている物はすぐ押せるようにする。
   • 途中で操作されても崩れないこと。
4. 数値の目安
   • プロダクトUI：項目どうしの間隔 30〜80ms、全体で約300ms以内。長いリストは最初の数件だけずらす。
   • LP・初回だけ見る画面：100〜150ms 間隔、0.5〜0.6秒の入場でもよい。
   • 消える要素はすぐにレイアウトから外し、残りが詰まる動きと同時に消す（Motion なら AnimatePresence mode="popLayout"）。

注意点

• 1つの動きの速さや曲線は別のスキル（animate）、そもそも動かすべきかは別のスキルの担当と分かれている。
• 「動きを先に消してから整える」考え方は AIが作ったアプリの「もたつき」は動きの盛りすぎ。先に消して、残った動きだけを整えさせるプロンプト と共通。こちらは残した動きの「関係」の決め方。
• リポジトリ: github.com （skills/choreograph/SKILL.md）

出典

• @emilkowalski · 2026-11-05