arc-mastery

弧の習得

自然な動きの原則

自然な動きのほとんどは、曲線的な軌道をたどります。腕は弧を描いて振られ、頭は弧を描いて向きを変えます。投げられた物体は放物線を描いて進みます。アニメーションの動きが直線的だと、たちまち機械的で不自然に感じられます。弧は、有機的な動きの象徴です。

基本理論

解剖学的な根拠：身体はヒンジと支点の連なりでできています。関節が回転すると、そこにつながったものはすべて、その関節を中心とする弧を描いて動きます。直線的な動きには機械的なレールが必要ですが、生物にはそのようなものはありません。

物理学的な根拠：重力によって、飛翔体は放物線を描きます。運動量があるため、向きを変えると軌道は曲がります。直線的に向きを変えるには、無限の力が必要です。

弧の種類

円弧：単一の支点を中心とした純粋な回転（振り子、ドアの開閉） 放物線：重力下での投射運動（ジャンプ、投げる動作） S字カーブ：複数の支点を通る複雑な動き（鞭のしなり、脊椎の動き） 8の字の動き：途切れず流れる動き（歩行時の腰、なびく布）

支点の連鎖

弧を理解するには、支点の階層構造を理解する必要があります。

• 肩が回転する → 肘が弧を描いて動く
• 肘が回転する → 手首が複合的な弧を描いて動く
• 手首が回転する → 指先が三重の複合弧を描いて動く

関節が加わるたびに、その先にあるすべてのものの動きの軌道が複雑になります。

他の原則との関係

フォロースルーも弧を描く：付属する部分は、直線的に戻るのではなく、曲線的な軌道をたどって落ち着きます。

予備動作が弧の始まりを作る：動き出す前の予備動作によって、弧の方向が定まることがよくあります。

タイミングが弧の見え方を左右する：弧を通る動きが速い場合、はっきり認識できるよう、曲線を誇張する必要があります。

オーバーラップアクションがずれた弧を作る：二次的な要素は、主となる要素に遅れて独自の弧を描きます。

分野別の応用

UI／モーションデザイン

• ページ遷移：要素は直線的にスライドするのではなく、曲線的な軌道で現れたり消えたりする必要があります
• メニューの展開：項目は起点から弧を描いて扇状に広がります
• ジェスチャーへの応答：スワイプ後の動きは自然な曲線を描きます
• 通知の表示：スライドインにわずかな弧を加えると、機械的な印象を防げます
• ドラッグ操作：離した後の軌道は、速度ベクトルに応じて曲線を描く必要があります

キャラクターアニメーション

• 歩行サイクル：各手足の各部位が弧を描き、腰は8の字を描きます
• 頭の向きの変化：あごは弧を描き、直線的に移動するわけではありません
• 腕のジェスチャー：「まっすぐ」指し示す動作でも、手の軌道は曲線を描きます
• ジャンプ：身体は放物線を描きながら、内側では回転の弧を描きます

モーショングラフィックス

• ロゴの表示：要素が弧を描いて現れると、ランダムではなく演出された印象になります
• テキストアニメーション：文字の軌道に曲線を加えると、優雅さが増します
• インフォグラフィックの構築：データポイントを弧に沿ってつなぐと、流れが生まれます

ゲームデザイン

• 投射物の物理演算：説得力のある弾道には、正確な放物線を使います
• キャラクターコントローラー：弧に沿った方向転換アニメーションを使うと、その場での旋回を防げます
• カメラの動き：弧を基本としたカメラの軌道は、映画のような印象になります

よくある間違い

1. 直線補間：アニメーションソフトの既定の動作ですが、手動で修正する必要があります
2. 弧の中心が一定しない：動きの弧には、理にかなった支点が必要です
3. 対称的な弧：自然な弧は、片道は速く戻りは遅いなど、非対称であることがよくあります
4. 速い動きで弧が平坦になる：素早い動きは、認識できるよう弧を誇張する必要があります

3Dにおける弧の課題

3Dでは、弧がカメラから見て認識できる必要があります。ワールド空間で完璧な弧でも、角度によっては直線に見えたり、逆向きに見えたりすることがあります。最終的なカメラから見て弧が認識できるか、必ず確認してください。

弧を描くテクニック

伝統的な方法では、動きの軌道を一筆でなぞります。鉛筆が自然に曲がるなら、弧はうまく機能しています。意識して方向を変えなければならないなら、動きが直線的すぎる可能性があります。

実装のヒューリスティック

任意の点から点への動きでは、制御点を追加して曲線を作成します。制御点は直線に対して垂直にずらして配置し、イーズアウトの感覚にするには開始点に近づけ、イーズインの感覚にするには終点に近づけます。複雑な動きでは、まず意図する軌跡を描きます。曲線になっていなければ、改善が必要です。

弧の高さのデフォルト値：さりげなく自然な印象にするには移動距離の10～20％、大きく弧を描く動きにするには30～50％です。