98.8K+ダウンロード
使い方ガイドへスキップ
motion-design作者 LottieFiles

Motion Design スキル。

Claude Code と Codex のモーション・ビデオ向けスキル：モーションデザインの原則（タイミング、イージング、コレオグラフィ、アニメーションの基礎）を適用します。

  • モーションと動画
OpenDesign をダウンロード使い方ガイドを見る
LottieFiles/motion-design-skill · skills/motion-design/SKILL.mdSKILL.md
--- name: motion-design description: Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system. --- ## When to Apply ## Quick Reference: 8-Step Checklist ## Three Pillars (CRITICAL) ## Motion Personality ## Property Selection ## Duration Table
アップストリームファイルから読み取ったフロントマターとセクション見出し（2026-09-14）· 全12,489文字

01 できること

Claude CodeとCodexでmotion-designスキルが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

インターフェースをアニメーションさせるデザイナーおよび開発者向けの、原則のみに焦点を当てたモーションデザインのリファレンスです。感情的な意図、視覚的なナラティブ、モーションクラフトという3つの柱から始まり、各判断を4つのモーションパーソナリティ（Playful、Premium、Corporate、Energetic）のいずれかに落とし込みます。それぞれに固定の持続時間帯、イージングカーブ、オーバーシュート率が定められています。

ボタンプレス、カードのエントランス、成功・エラーのシェイクといった実践的なレシピを収録し、要素タイプごとの持続時間表、方向性のあるイージングルール、コレオグラフィとスタッガーの予算、感情からモーションへのマッピング、ウェイトクラスによって裏付けられています。ガイダンスは、既存のどのアニメーションシステムにも適用できる数値、デフォルト値、制約として表現されています。

生成されるもの

  • 定義すべき3つのブランドモーション定数：シグネチャーイージング、持続時間パレット、エントランスパターン
  • プラットフォーム標準から借用した、既製のcubic-bezier仕様
  • ボタンプレスのフォロースルーなど、ステップごとのタイミングを持つ複数ステップのパターンレシピ
プロンプト例を見る ↗

仕組み

  1. 01
    まず3つの柱を固める

    タイミングやカーブを選ぶ前に、感情的な意図、視覚的なマイクロストーリー、そしてモーションを説得力あるものにするクラフトを見極めます。

  2. 02
    1つのパーソナリティアーキタイプに固定する

    Playful、Premium、Corporate、Energeticのうち単一のアーキタイプを選び、プロジェクト全体で維持します。それぞれ独自の持続時間帯、イージングカーブ、オーバーシュートを持つためです。

  3. 03
    効果を生む最小限のプロパティを使用する

    プロパティ表は、各エフェクトの目標を主要プロパティと任意の副次プロパティと組み合わせています。プロパティが1つだと直接的に、2つだと洗練された印象に、3つ以上だと視聴者を圧倒するリスクが生じます。

  4. 04
    距離に応じて持続時間をスケールする

    要素タイプに応じた持続時間から始め、移動距離に応じて引き伸ばします：100pxを基準とすると、200pxは1.3倍、400pxは1.6倍になります。

  5. 05
    方向に応じてイージングする

    エントランスはease-outファミリーのカーブで減速するため、モーションは速く始まり、穏やかに着地します。

02 適合性を確認

motion-design スキルを使用するタイミング

Claude Code または Codex でこの種のモーションとビデオの作業を行う場合は、motion-design スキルを使用してください。以下の適合性と制限はスキル自体のファイルから取得されています。

適している場合

  • ボタン、カード、モーダル、ページ遷移などのUIアニメーション
  • マイクロインタラクションとフィードバックアニメーション
  • 読み込み中、成功、エラーの状態
  • スクロールトリガーまたはプログレスベースのアニメーションの計画

境界を知る

  • 要素が3つ以上あるシーンでは、同時にアクティブに動いている要素をその3分の1を超えて存在させることはできません。
  • 弾むエラーフィードバック：エラー状態はオーバーシュートを取りません。エラーはしっかりとした印象であるべきだからです。

提供すべきもの

  • 感情的なターゲットまず、喜び、落ち着き、緊急性、上品さのいずれを視聴者に感じてもらいたいかを決めます。
  • モーションパーソナリティのアーキタイプタイミング、イージング、オーバーシュートの一貫性を保つために、パーソナリティに名前を付けます：Playful、Premium、Corporate、Energetic のいずれかです。
  • 主要なプロパティアニメーションを書く前に、実際に動くもの――位置、スケール、回転、不透明度のいずれか――を明確にします。

03 スキルの内部

モーションデザインスキルが Claude Code と Codex に与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. 空間的な移動にリニアイージングを使わない

    空間的なモーションにはイージングカーブを使用しなければなりません。リニアはスピナーとプログレスバーのみに限定されます。

  2. 状態変化を不透明度だけで表現しない

    重要な状態変化は、その場でフェードするのではなく、不透明度と位置またはスケールを組み合わせる必要があります。

  3. 3つのモーションレイヤーをすべて保つ

    すべてのアニメーションには、主要なアクション、補助的な豊かさ、そして周辺的な背景の動きが含まれます。レイヤーが欠けているアニメーションは平坦に見えます。

  4. UIではデフォルトでCorporateにする

    パーソナリティが指定されていない場合、UI作業には Corporate を、イラストには Playful を使用します。

  5. 入場を退場より長くする

    入場は退場よりも30〜50%長く実行します。ユーザーは現れるものに注目するためです。

  6. 中間キーフレームなしで画面の3分の1を超えて移動させない

    中間的なキーフレーム変化なしに、画面の1/3を超えて移動するモーションはありません。

  7. 総スタッガー量に上限を設ける

    どのようなスタッガーパターンを使用する場合でも、総遅延バジェットは500ms未満に保つ必要があります。

  8. ディズニーの原則を適用する

    ディズニーのアニメーション原則、特に「アンティシペーション」と「フォロースルー」の適用が求められます。

04 実際に使う

Claude Code または Codex に motion-design をインストールする

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、またはお使いのエージェントに motion-design を追加する

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

skills/motion-design/SKILL.md 用の一般的なskills CLI形式です。リポジトリごとに独自のパスが定められている場合があります。

スキルに最初のモーション・動画タスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Add a card entrance to [the pricing section] of my [React dashboard]. The cards should feel Premium: start 20px below target at opacity 0, take a slight curve in the path, and let the shadow arrive about 50ms after each card. Stagger the four cards at 60ms with the total under 400ms, and dim the surrounding content to 80%.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

  • 評価基準について、品質チェックリストファイル全体に取り組みます。
  • デュレーションテーブルに基づき、各デュレーションが要素タイプに一致していることを確認します。
  • 結果が安っぽく、または平坦に感じられる場合は、セカンダリレイヤーとアンビエントレイヤーとしてシャドウモーションと背景の動きを加えます。
  • 個性がない場合は、汎用的なイージングを至る所に使うのではなく、1つのアーキタイプを一貫して適用します。
  • 公開前に、プラットフォーム、アクセシビリティ、パフォーマンスへの適応を確認します。

OpenDesignでは、motion-designをそのSKILL.mdリンクからインポートします：Plugins → Add → Skill → Import from link。その後、上部バーで選択します。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author
LottieFiles
Repository
github.com/LottieFiles/motion-design-skill ブランチ main
スキルファイル
skills/motion-design/SKILL.md 検証時にコンテンツチェックサムを記録。コミット f9a8a04
License
MIT LICENSE より。SKILL.md には「MIT」と記載されています。
リポジトリスター数
1,626 LottieFiles/motion-design-skill リポジトリ全体について 2026-09-14 に取得した GitHub スナップショットです。motion-design の評価や使用回数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

  1. When to Applyスキルを使用するトリガーと、タイミング、パーソナリティ、ディズニーの原則、またはスタッガーに振り分ける4つの質問による決定木です。
  2. Three Pillars (CRITICAL)感情的な意図、視覚的なナラティブ、モーションクラフト、そしてすべてのアニメーションに必要な3つのモーションレイヤーです。
  3. Motion Personalityデュレーション、イージング、オーバーシュートの値を持つ4つのアーキタイプ、および3つのブランドモーション定数です。
  4. Property Selectionエフェクトの目的をプライマリおよびセカンダリプロパティにマッピングし、シンプルさの閾値を示します。
  5. Duration Table要素ごとのデュレーション、距離によるスケーリング、エントランスとエグジットの比率、インタラクティブフィードバックのタイミングです。
  6. Easing Selection方向性のあるイージングルール、業界標準のcubic-bezier、マテリアルベースのデュレーションとオーバーシュートのスケールです。
  7. Common Patternsボタン押下、カードのエントランス、成功状態、エラーシェイクのためのステップバイステップのレシピです。
  8. Choreography Essentialsヒーローリード、空間的な一貫性、カウンターモーション、1/3ルール、スタッガーディレイの配分です。
  9. Emotion-to-Motion Map7つの感情をキャラクター、パス、イージング、デュレーションにマッピングし、パスを言語として捉える意味も示します。
  10. Weight Classification重い、中間、軽い要素について、デュレーション、オーバーシュート、ダンピングのガイダンスです。
  11. Quality Rules絶対に破ってはならないCRITICAL項目と、デュレーション、イージング、一貫性に関するHIGH推奨事項です。
  12. Troubleshooting Quick Referenceロボット的なものから平坦なものまで、5つのアニメーションの違和感とその考えられる原因および修正方法です。
スキル自身による説明
「モーションデザイン原則を適用し、感情的で技術的に健全なアニメーションとトランジションを作成します。タイミング、イージング、コレオグラフィー、UI に適応させた Disney アニメーション原則を提供します。アニメーション、トランジション、マイクロインタラクション、ローディング状態、ページ遷移、スクロールトリガーエフェクト、あらゆるモーションワークの作成時に使用します。CSS、Framer Motion、GSAP、Lottie、Spring、あらゆるアニメーションシステムで動作します。」

SKILL.md のフロントマターの説明です。ファイル全体は約 12,489 文字です。GitHub でファイル全体を読む。

06 インストールする前に

motion-designスキルについてのよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

これは1つのアニメーションライブラリに縛られてしまいますか？

いいえ。このファイルはCSS、Framer Motion、GSAP、Lottie、Spring、その他あらゆるアニメーションシステムをサポートすると明記しており、ガイダンスはライブラリ固有のコードではなく、タイミング、イージング、コレオグラフィーの判断として提供されます。

モーダルのトランジションはどのくらいの時間をかけるべきですか？

デュレーションテーブルでは、モーダルとダイアログはフォーカスの切り替えとして300〜400msとされています。対照的に、ツールチップやマイクロフィードバックは即座に感じられる必要があるため、80〜120msに設定されています。

弾力のある要素は、紙のカードよりも大きく弾むべきですか？

はい。マテリアルベースのイージングテーブルは、想定されるマテリアルに応じて持続時間とオーバーシュートをスケーリングします。elasticは持続時間を0.8倍にスケーリングし、オーバーシュートは15〜25%になります。一方paperは1.0倍のままで、オーバーシュートは3〜5%です。

Motion Design

実際のモーションと映像のタスクで motion-design を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから motion-design をインポートして、上記のプロンプトを貼り付け、結果の前にプランを読んでください。

OpenDesign をダウンロードすべてのスキルを見る
ターミナル
npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート／スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応