デザイン&モーション · iart-ai/freelance-motion-skills

brand-motion-guidelines

このスキルは、ユーザーが「モーションガイドラインの作成」「ブランドモーションシステムの構築」「イージングとタイミングトークンの定義」「アニメーション原則の文書化」「Slack/IBM/Klarnaのようなモーションランゲージの構築」「イン/アウト/トランジションルールの策定」「reduced-motionやアクセシビリティセクションの追加」を求めた場合に使用します。記入可能なブランドモーションガイドライン文書を出力します。

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author iart-aiGitHub iart-ai/freelance-motion-skills ↗Stars 3License MIT(仓库根 LICENSE:'MIT License' / Copyright (c) 2026 iart.ai;.claude-plugin/plugin.json 的 license 字段亦为 MIT)Commit d85c2b4846
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

成果物は「空欄を埋めるだけですぐに使える」ブランドモーション規約ドキュメントであり、所定の7セクションを順序通りに執筆します(原則 → トークン → モーションライブラリ → ロゴルール → 状態フィードバック → アクセシビリティ → Do/Don't)。

skills/brand-motion-guidelines/SKILL.md
A complete motion guidelines doc has seven parts. Author them in order:
処理内容:ガイドライン作成を自由作文から骨組みのある成果物へと変換します。順序自体が規律となっており、モーションライブラリの前にトークンを定義しないと、各動作がアドホックなハードコード数値に退行してしまいます。

着手前に規模を判定:単一サイトや単発キャンペーンは軽量版、プロダクト全体は完全な7セクション構成、複数プロダクト+マーケティング+配信をまたぐ場合は Motion Personality プリセットを追加します。

skills/brand-motion-guidelines/SKILL.md
How many surfaces/teams will use this?
処理内容:「ランディングページに重厚な7セクション体系を作る」「複数チームの大規模デザインシステムにペラ1枚で済ませる」といったミスマッチを防ぎます。判定のもう半分は「特定のアクションにどのトークンを割り当てるか」の判断です。

トークン命名は必ずセマンティック(リテラル値ではなく用途ベース)にし、値が変更されても全体のリネームが発生しないようにします。

skills/brand-motion-guidelines/SKILL.md
| Token values renamed constantly | Names are literal (`duration-250`) | Name by purpose (`duration-base`) so values can change |
処理内容:仕様をエンジニアリング実装可能にするための重要ステップです。コンポーネントやモーションライブラリはトークンを参照するため、値の変更は1箇所で完結します。「すべての動作は使用トークンを提示できなければならず、そうでなければ使い捨ての数値とみなす」というルールにも直結します。

イン/アウトの非対称性とスタッガーの上限をデフォルトルールとして定義:退場は入場より短く、スタッガーは30〜50msに設定します。

skills/brand-motion-guidelines/SKILL.md
Default rule: exits are shorter than entrances; staggers use small offsets (30-50ms) so groups feel alive without dragging.
処理内容:アニメーションの感覚的な知見を検証可能な条項として固定化し、理由を明記します。後続の「モーションライブラリ」テーブルの各パターンはトークンの組み合わせと紐付ける必要があります。

アクセシビリティは付録ではなく必須セクション:reduced-motion、光過敏性閾値、フォーカス可視性、色や動きのみによる情報伝達の禁止を含みます。

skills/brand-motion-guidelines/SKILL.md
- **Photosensitivity**: no more than 3 flashes per second; avoid full-screen high-contrast strobing.
処理内容:アクセシビリティをガイドラインの基本構成として組み込み(ローディング/成功/エラーのフィードバック規則と連動させ、状態には必ずテキストやアイコンを併記)、reduced-motion時の代替戦略(フェードインや即時切り替えへの置換)を提示します。

「フィーリング重視の曖昧なガイドライン」をアンチパターンとして排除:形容詞だけでは実装できず、プロダクト内の不整合を招きます。

skills/brand-motion-guidelines/SKILL.md
Why it fails: no named tokens, no values, no entrance/exit rule, nothing implementable — "smooth" and "snappy" contradict and every engineer interprets them differently
処理内容:アンチパターンを通じて出力基準を厳格化します(原則には数値ルールを伴わせ、Do/Don'tには具体的なミリ秒を記載)。「よくあるエラー → 修正方針」のリストが用意されているのもこのためです。

system-of-record(正統な記録システム)として位置付け:上流理論(3つの柱、3層の運動、1/3ルール)やパーソナリティプリセットは兄弟スキルから提供され、本文書では参照のみ行い重複定義は避けます。

skills/brand-motion-guidelines/SKILL.md
This doc is the *system-of-record* for a brand's motion; two sibling skills supply the upstream theory and the per-project feel — reference and apply them, don't duplicate their tables:
処理内容:スキル間の役割分担を明確にし、同一パック内でトークンやカーブの定義が乖離するのを防ぎます。トレードオフとして、この参照はリポジトリを跨ぐ形になります(second_pass 参照)。

SKILL.md 内に穴埋め可能なテンプレートを直接内包(バージョン番号、オーナー、8つの区分、✅/❌ プレースホルダーを含む)。

skills/brand-motion-guidelines/SKILL.md
8. DO / DON'T
処理内容:エージェントがクライアントレビューに耐えうるドキュメントの骨組みを即座に出力できるようにし、reference/full-template.md で詳細版と例文を提供します。

2コア機能

017セクション構成の規約骨組み(原則 / トークン / モーションライブラリ / ロゴ / 状態 / アクセシビリティ / Do・Don't)
02所要時間トークン表(instant 100 → slower 600ms)およびイージングトークン表(standard/decelerate/accelerate/emphasized/spring の cubic-bezier)
03モーションライブラリ:入場/退場/トランジション/スタッガーなどのパターンをトークン組み合わせに個別マッピング
04ロゴモーション規約:利用可能ルールと禁止事項(引き伸ばし不可、自由回転不可、勝手な変色不可、表示ごとの常時再生不可)
05状態とフィードバックモーション:loading/success/error/hover/focus のルールおよび「色や動きだけに依存した情報伝達の禁止」
06アクセシビリティ章:reduced-motion 代替戦略、光過敏性閾値、フォーカス可視性
07よくあるエラーと修正法テーブル(7つの症状と処方箋)および納品チェックリスト(9項目のセルフチェック)
08記入可能テンプレート(バージョン/オーナー/8区分および Do・Don't プレースホルダー)+3本の reference による詳細展開版

3外部依存関係

KindDependency / Endpoint
package兄弟 skill:animation-principles(三支柱 / 三层运动 / 1-3 规则)与 motion-art-direction(Motion Personality 预设)——均属 iart-ai/motion-design-skills 仓库
packagespring(stiffness, damping) 令牌(实现侧能力,文档只给命名位)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: プロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部への副作用はありません
監査ノート: 純粋なプロンプト/ドキュメント方法論:スクリプト、実行可能ファイル、外部通信、クレデンシャル読み取り、ディスク書き込みは一切含まれず、出力は穴埋め式の仕様書文書です。留意事項(判定には影響しません):① 上流理論として姉妹スキル(animation-principles / motion-art-direction)を参照していますが、これらは別リポジトリ(iart-ai/motion-design-skills)に属するため、本パック単体導入時は参照が未解決となります(second_pass 参照);② ブランドの方向性に関する推奨(抑制的、過度なバウンスの回避、イン/アウトの非対称性)を含みますが、これらは美観の基準付けでありリスクではありません。

5二重目の独立検証

  • [ok] 是否存在任何脚本或可执行片段 — 全目录只有 Markdown;代码块仅含 cubic-bezier 值、spring(stiffness, damping) 这类命名占位与模板文本,无 shell/JS 可执行语句。
  • [discrepancy] 跨仓引用的两个兄弟 skill 是否能解析 — SKILL.md 的 Related frameworks 要求引用 animation-principles 与 motion-art-direction,但这两个 skill 属 iart-ai/motion-design-skills(另一仓库、另一 pack)。只安装 freelance-motion-skills 时引用悬空(文档既未标注需另装,也未内联最小词汇表),实际使用需同时装 motion pack。
  • [unlocatable] 无障碍与光敏阈值等条款是否有出处 — 「≤3 次闪光/秒」「聚焦指示不可被动画隐藏」等属通用可访问性实践(对应 WCAG 类准则),但 pin 仓库内未给标准编号或链接;作为文档声明记录,合规场景应自行对照当期 WCAG。
  • [ok] 「输出是文档不是代码」是否与全文一致 — SKILL.md 在 When to use、常见错误表与交付 spec 三处均强调产出为 structured document;令牌表里的 cubic-bezier 是内容而非实现代码,与声明一致。

6結論

  • 「ブランドモーションガイドライン」を実行可能な成果物に変換:7セクションの骨組み + トークン表 + モーションマッピング + チェックリストにより、作成完了の判定が可能
  • 用途ベースのセマンティックトークン命名により、値の変更時に全体置換が必要になるという仕様運用の破綻を防止
  • アクセシビリティを必須章として位置付け、状態フィードバックと連動(色や動きだけでなくテキスト/アイコンを必須化)
  • フィーリング任せの曖昧な規約をアンチパターンとして退け、実装不能な形容詞だらけの文書生成を防止
  • 自らを system-of-record と明確化し、理論的基盤は上流スキルに委ねることで、同一パック内でのトークン・カーブ表のブレを排除
  • 最適な用途: 「ブランドがどのように動くべきか」をレビュー可能な文書としてまとめる必要がある場面に最適です:新規ブランドモーションシステムの策定、複数チーム/複数プロダクト間のモーションランゲージ統一、デザインシステムへの motion token の補完、プロダクトとマーケティング間のトーン統一、アクセシビリティ審査に向けた reduced-motion や光過敏性要件の追加など。フリーランス案件における納品物作成(freelance pack の他スキルとの併用)にも適しています。
    不向きな用途: 不適なケース:① 特定のアニメーションの実装コードのみを求めている場合(animation-principles、gsap-web、remotion-video などを利用すべき);② クリエイティブ方針の判断やパーソナリティプリセットの詳細策定(本文書は参照にとどまるため、motion-art-direction を利用すべき);③ 著者の別パックを導入せず freelance pack のみを利用している環境(上流理論の参照先が未解決となる);④ コンプライアンス監査用の厳密なアクセシビリティ認証書(本スキルはエンジニアリング規範を出力するものであり、監査証明書ではありません)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload brand-motion-guidelines.tar.gz
    sha256: 9ea95c6713578b29…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d85c2b4846.