mcpField
S
secondary-action-mastery

secondary-action-mastery

github.com/dylantarreクリエイティブ・メディア132500 回インストール43 週間前に更新
リポジトリ

secondary-action-mastery について

アニメーションやモーションデザインにおけるセカンダリーアクションの実践ガイドです。アニメーターやインターフェースデザイナーが、主動作を補強しつつ注意を奪わない動きを加える方法を学べます。

主な機能

  1. 01補助動作を従属させる原則
  2. 02セカンダリーとオーバーラップの区別
  3. 03補助動作のカテゴリー
  4. 04タイミングとステージングの指針
  5. 05取り除いて評価する方法

活用シーン

  1. 01ボタン操作に控えめな動きを追加
  2. 02キャラクターの歩行や会話を豊かにする
  3. 03インターフェースの環境要素をアニメーション化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dylantarre/animation-principles --skill secondary-action-mastery

インストール後、Claude Code で/secondary-action-masteryを入力して読み込まれたか確認します。

詳細

二次アクションを極める

エンリッチメントの原則

二次アクションは、メインアクションの妨げにならずにシーンに生命を吹き込みます。キャラクターが歩きながら(プライマリ)、口笛を吹き、腕を振る(セカンダリ)。ボタンを押す動作(プライマリ)に、さりげない波紋のエフェクト(セカンダリ)を加える。これが、機能的なアニメーションと、豊かで没入感のある動きの違いです。

基本理論

従属の原則:二次アクションが主アクションと競合してはなりません。視聴者が主アクションではなく二次アクションに注目してしまったら、失敗です。脇役は脇役のままでなければなりません。

強化の機能:優れた二次アクションは、主アクションの意味を強めます。単に動きを加えるだけではなく、伝えようとしている物語に奥行きを加えます。

違い:二次アクションとオーバーラッピングアクション

この2つはよく混同されます。

  • オーバーラッピングアクション:物理的な結果(頭が動いたことで髪が揺れる)
  • 二次アクション:独立した補助動作(歩きながら口笛を吹く)

オーバーラッピングは反応であり、二次アクションは付加要素です。

二次アクションのカテゴリー

感情の強化:会話中の緊張したそわそわした動き、得点後の勝ち誇ったガッツポーズ
環境への反応:風になびく服、寒さで見える息
キャラクターの仕草:眼鏡を直す、髪をいじる、指で机を叩く
環境の生命感:背景のキャラクター、環境アニメーション、待機中の動作

他の原則との相互作用

ステージングが二次アクションの視認性を決める:構図の中で、二次アクションは主アクションを引き立てる範囲に収める必要があります。

タイミングのずれが競合を防ぐ:二次アクションは主アクションとは異なるタイミングで進行することがよくあります。

オーバーラッピングアクションが二次アクションになることも多い:物理法則に基づく動きが、注意をそらさずにシーンを豊かにします。

フォロースルーが移行をつくる:主アクションが完了するにつれて、二次アクションも収まっていきます。

分野別の応用

UI/モーションデザイン
  • ボタンの操作:押下が主アクション、さりげない影の変化やアイコンの微細なアニメーションが二次アクション
  • 読み込み状態:スピナーが主アクション、背景の脈動や浮遊するパーティクルが二次アクション
  • カードコンポーネント:コンテンツのアニメーションが主アクション、環境光のようなほのかな発光や影の動きが二次アクション
  • フォームの送信:成功状態が主アクション、紙吹雪やさりげない祝賀演出が二次アクション
  • ナビゲーション:ページ遷移が主アクション、さりげない視差レイヤーが二次アクション
キャラクターアニメーション
  • 歩行サイクル:歩行動作が主アクション、腕の振り、頭の上下動、呼吸が二次アクション
  • 会話:リップシンクと表情が主アクション、手振りや重心移動が二次アクション
  • アクションシーン:戦闘が主アクション、環境の反応や群衆の反応が二次アクション
  • 待機状態:ポーズの保持が主アクション、さりげない呼吸、まばたき、微細な動きが二次アクション
インターフェースの仕上げ
  • ダッシュボード:データの更新が主アクション、グラフのさりげない呼吸のような動きが二次アクション
  • 通知:メッセージの表示が主アクション、バッジの脈動が二次アクション
  • 空の状態:メッセージが主アクション、アニメーション付きのイラストが二次アクション
  • トランジション:コンテンツの切り替えが主アクション、スケルトンローディングや背景のフェードが二次アクション
ゲームの手応え
  • プレイヤーのアクション:攻撃アニメーションが主アクション、画面の揺れやパーティクルの放出が二次アクション
  • 環境:プレイヤーの動きが主アクション、草の揺れや舞い上がるほこりが二次アクション
  • メニュー:選択項目の変更が主アクション、ホバー時のパーティクルや背景アニメーションが二次アクション

よくある間違い

  1. 主アクションを圧倒する:二次アクションが目立ちすぎて、注意をそらしてしまう
  2. 無関係な二次アクション:主アクションの意味を強めない動作を加える
  3. 二次アクションを詰め込みすぎる:補助動作が多すぎて、画面が雑然とする
  4. 二次アクションがまったくない:シーンが静的で、生命感や完成度に欠ける

さりげなさの段階

最小限(プロフェッショナルな場面):主アクションの振幅の10~20%
中程度(一般消費者向け製品):振幅の30~40%
表現豊か(エンターテインメント、ゲーム):振幅の50~60%
演劇的(カートゥーン、祝賀演出):振幅の70%以上

場面とブランドの個性に合わせましょう。

「取り除いてテストする」方法

セカンダリアクションを加えてアニメーションさせた後、一時的に取り除きます。シーンが物足りなく感じられるなら、セカンダリアクションが効果を発揮しています。なくなったことに気づかないなら、目立たなすぎたか、不要だった可能性があります。

実装時の指針

プライマリアクションごとに、「ほかに何が動き、反応し、起こるだろうか?」と問いかけます。最も価値のあるセカンダリアクションを1つ加えます。最初のアクションと競合しない場合に限り、さらに追加します。セカンダリアクションのタイミングはプライマリアクションとずらします。少し前に始めるか、ホールド中に始めるか、落ち着く余韻の中で始めます。

コメント