mcpField
A
attention-direction

attention-direction

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

attention-direction について

アニメーターやシーン制作者向けのアニメーション設計スキルです。構図、動き、タイミングで視線を導き、焦点の競合を整理する方法を示します。

主な機能

  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 attention-direction

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

詳細

注意の誘導

観客の視線を操るマジシャンのように考えましょう。アニメーションとは、視線をそらし、導くことです。何が重要かを決め、それを見逃せないようにしながら、まだ見せるべきでないものは隠します。

基本となる考え方

シーンをアニメーション化する前に、次のことを考えましょう。視線をどこへ、どの順番で向けるべきでしょうか?

観客が一度に見られるものは一つだけです。フレームの中、そして時間の流れの中で、観客の注意を導くのがあなたの役目です。すべての要素は、焦点を支えるか、焦点と競い合うかのどちらかです。

焦点から見た12の原則

ステージング — 注意を導く土台です。シルエットを明確にし、構図をすっきりさせます。重要な要素を背景から際立たせます。ステージングは焦点を支えます。

タイミング — 注意は動きに従います。静止の中の動きは視線を引きつけます。戦略的なタイミングによって、ものごとに気づくタイミングを制御します。静止もまた、効果的な手段です。

予備動作 — 注意を引きつけるための準備です。重要なことが起こる前に、それが起こる場所へ視線を導きます。予備動作は、主役の出番を前に点灯するスポットライトのようなものです。

二次動作 — 支えるものであり、競い合うものではありません。二次的な要素は、主な動作から注意を奪うのではなく、それを引き立てる必要があります。バックコーラスが主役を食ってはいけません。

後追いの動きとオーバーラッピング — 注意には勢いがあります。一つの動きが終わると、視線は次の動きが始まることを期待します。後追いの動きを使って、連続する動作の中で視線を導きましょう。

誇張 — 増幅によって強調します。重要な要素は、より大きく、より速く、よりコントラストを強くします。誇張は「ここを見てください」と伝えます。抑制は「これは後でかまいません」と伝えます。

スカッシュ&ストレッチ — 視覚的に注意を引く要素です。インパクトフレーム(スカッシュ)やスピード線(ストレッチ)は、目を引く視覚的なアクセントを生み出します。

弧 — 視線の通り道です。観客の視線は動きの弧をたどります。注意を導きたい場所へ視線が向かうよう、動きの経路を設計しましょう。

スローイン&スローアウト — 注意を段階的に高めます。動きの始まりを緩やかにすると、動作を見つける時間が生まれます。動きの終わりを緩やかにすると、内容を理解する時間が生まれます。理解のペースを制御しましょう。

立体的な描画 — 形によって階層を作ります。重要な要素には、より強い立体感を持たせます。背景の要素は平面的にし、ディテールを抑えます。ボリューム感は注意を引きつけます。

魅力 — 視線は魅力的なものを求めます。魅力的な要素は自然と焦点を集めます。魅力を戦略的に活用しましょう。フレーム内で最も魅力的なものが、最初に見られます。

ストレート・アヘッドとポーズ・トゥ・ポーズ — 注意の向け先を計画する(ポーズ・トゥ・ポーズ)ことで、焦点を意図的に定められます。即興的に発見する(ストレート・アヘッド)場合は、後から注意の向け先を調整する必要があるかもしれません。

実践への応用

注意を導く手段:

  • コントラスト:暗い背景に明るい色、中間色に鮮やかな色
  • 分離:重要な要素の周囲に空間を設ける
  • 大きさ:大きな要素ほど先に目に入る
  • 位置:中央や三分割法の交点
  • 動き:静止した画面の中の動きは視線を引きつける
  • ディテール:細部の多い領域ほど注意を引く
  • キャラクターの視線:観客はキャラクターが見ている先を見る

注意を導く順序:

  1. 視線の始点を決める
  2. フレーム内での視線の経路を計画する
  3. 最も重要な要素に視線を導く
  4. 内容を理解する時間を設ける
  5. 次の焦点へ移る

よくある注意誘導の失敗:

  • 焦点の競合:複数の要素が注意を奪い合っている
  • 情報が埋もれる:重要な要素がノイズに埋もれている
  • 見る場所がない:明確な優先順位がない
  • 間が足りない:焦点を当てる時間が短すぎる
  • 視線が行き着かない:動きが着地点につながらず、収束しない

焦点が「定まらない」と感じる場合:

  1. 二次的な動きを減らす
  2. 主な要素のコントラストを高める
  3. 重要な領域の周囲に静止を加える
  4. 重要な瞬間には背景を簡素にする

シーンが「物足りない」と感じる場合:

  1. 競い合わない範囲で、補助的な動きを加える
  2. 二次動作を使って視覚的な興味を生み出す
  3. 常に何かが動いている状態にする
  4. 注意の流れに視覚的なリズムを作る

視線の経路をマッピングする: 意図した視線の動きを矢印で示しながら、シーンのスケッチを描きます。経路が不明瞭だったり、混乱していたりする場合は、簡素化しましょう。複数の経路が競い合う場合は、一つに絞りましょう。

黄金律

何が重要かを決めていなければ、注目をコントロールすることはできません。 テクニックを気にする前に、根本的な問いに答えてください。このフレームで今、最も重要なものは何でしょうか? それ以外のすべては、それを引き立てるためのものです。

コメント