アニメーション用語辞典

アニメーション用語辞典 は何をしますか？

モーションや効果のあいまいな説明を正確な用語に変換し、ユーザーが何を依頼すればよいかを明確にします。

クイックスタート

ユーザーが効果を大まかに説明します。それに対して、以下の形式で一致する用語を返します。

**Stagger（スターガー）** — 複数のアイテムを、それぞれの間にわずかな遅延を入れて順番にアニメーションさせ、カスケードを生み出します。

複数の用語が該当する可能性がある場合は、最も一致するものを最初にリストし、続けて1〜2つの代替案とそれらがどのように異なるかの簡単なメモを添えます。

手順

1. キーワードではなく意図を読む。 ユーザーは技術的な名前ではなく、自分が見たり感じたりしているもの（「バネみたい」、「スライドして消える」、「線が描かれる」）を説明します。その感覚を以下の用語集にマッピングします。
2. 用語集を逐語的に引用する。 用語集の説明は信頼できるものです。言い換えずにそのまま使用します。
3. 類似用語を明確に区別する。 2つの用語が競合する場合（Clip-path vs Mask、Pop in vs Bounce、Shared element transition vs Layout animation）、ユーザーが選択できるようにそれらを対比します。
4. 正確に一致するものがない場合、 最も近い用語を挙げ、それが近似値であることを明確に述べるか、用語集の語彙を使って効果を説明します（例：「それはscale-inエントランスのstaggerです」）。
5. この用語集の範囲内に留まる。 用語が本当にここにない場合は、新しい用語をでっち上げるのではなく、その旨を伝えます。ただし、これらの単語を使って概念を説明しても構いません。
6. 簡潔に保つ。 命名の質問には、名前が必要であり、長文の説明は不要です。用語を先に提示し、必要に応じてのみ説明を追加します。

例

例1 — 感覚ベース ユーザー: 「ポップオーバーが、クリックしたボタンの中央からではなく、ボタンから生えるように開くやつって何ていうの？」 出力:

**Origin-aware animation（オリジン認識アニメーション）** — 要素がトリガーからアニメーションして出現します。例えば、ポップオーバーがそれを開いたボタンから成長するように表示されるもので、CSSのデフォルトである要素自身の中心から開くのとは異なります。

例2 — 明確化 ユーザー: 「ある画像が別の画像に変わるやつ。」 出力:

**Morph（モーフ）** — ある形状が別の形状に滑らかに変化します。例：Dynamic Island。

類似の代替案:
- **Crossfade（クロスフェード）** — 単に同じ場所で重なり合ってフェードする場合。
- **Shared element transition（共有要素トランジション）** — 要素が1つの位置から別の位置へ移動しながら変形する場合。

例3 — 物理感覚ベース ユーザー: 「あのiOSのスクロールで、引きすぎると抵抗があってパッと戻るやつ。」 出力:

**Rubber-banding（ラバーバンディング）** — 境界を超えてドラッグしたときの抵抗とスナップバック（iOSのオーバースクロール時の感触）。

用語集

プロジェクトの /vocabulary ページを反映した厳選されたスナップショットです。いずれかが変更された場合は、両方を同期させてください。

エントランス＆エグジット — 要素の出現と消失

• Fade in / Fade out（フェードイン / フェードアウト） — 要素が透明度を変えて出現または消失します。
• Slide in（スライドイン） — 要素が画面外からスライドして入ってきます（左、右、上、下のいずれかから）。
• Scale in（スケールイン） — 要素が小さなサイズからフルサイズに拡大しながら出現します。多くの場合フェードと組み合わせます。
• Pop in（ポップイン） — 要素がわずかにオーバーシュートして出現し、所定の位置にバウンドして収まるように見えます。
• Reveal（リビール） — クリップパスやマスクをアニメーションさせることで、コンテンツが徐々に現れます。
• Enter / Exit（エンター / イグジット） — 要素が画面に追加または削除されるときに再生されるアニメーションです。

シーケンス＆タイミング — 複数の要素や瞬間の調整

• Keyframes（キーフレーム） — アニメーション内で定義されたポイント（0%、50%、100%）で、ブラウザはその間を補完します。
• Interpolation / Tween（補間 / トゥイーン） — 開始値と終了値の間のすべての中間フレームを生成し、モーションを連続的にします。
• Stagger（スターガー） — 複数のアイテムを、それぞれの間にわずかな遅延を入れて順番にアニメーションさせ、カスケードを生み出します。
• Orchestration（オーケストレーション） — 複数のアニメーションのタイミングを意図的に調整し、1つの調整されたモーションのように感じさせることです。
• Delay（ディレイ） — アニメーションが始まるまでの時間です。
• Duration（再生時間） — アニメーションが完了するまでの時間です。
• Fill mode（フィルモード） — アニメーションの開始前または終了後に、要素が最初または最後のフレームのスタイルを保持するかどうかを指定します（例: forwards）。
• Stepped animation（ステップアニメーション） — カウントダウンタイマーのように、離散的なステップに分割されたアニメーションです。

移動＆トランスフォーム — 位置、サイズ、角度の変更

• Translate（トランスレート） — 要素をX軸またはY軸に沿って移動します。
• Scale（スケール） — 要素を拡大または縮小します。
• Rotate（ローテート） — 要素を点を中心に回転します。
• Skew（スキュー） — 要素をX軸またはY軸に沿って傾け、長方形の形状からせん断します。
• 3D tilt / Flip（3Dチルト / フリップ） — 3D空間で回転（rotateX / rotateY）させ、奥行きを加えます。
• Perspective（パースペクティブ） — 3D効果の強さを決定します。値が小さいほど奥行きが強調され、視聴者が近くにいるように見えます。
• Transform origin（トランスフォーム起点） — スケールや回転の基点となるアンカーポイントです。
• Origin-aware animation（オリジン認識アニメーション） — 要素がトリガーからアニメーションして出現します。例えば、ポップオーバーがそれを開いたボタンから成長するように表示されるもので、CSSのデフォルトである要素自身の中心から開くのとは異なります。

状態間トランジション — ある状態、ビュー、要素を別のものにつなぐ

• Crossfade（クロスフェード） — ある要素がフェードアウトすると同時に別の要素が同じ場所でフェードインします。
• Continuity transition（継続性トランジション） — 変更の前後を視覚的につなぐことで、ユーザーの方向性を維持する変化です。例えば、同じ四角形を拡大・縮小することです。
• Morph（モーフ） — ある形状が別の形状に滑らかに変化します。例：Dynamic Island。
• Shared element transition（共有要素トランジション） — 要素が1つの位置から別の位置へ移動しながら変形します。サムネイルがカードに拡大するようなものです。
• Layout animation（レイアウトアニメーション） — 要素のサイズや位置が変わるとき、スナップではなく新しい場所に向かってアニメーションします。
• Accordion / Collapse（アコーディオン / コラプス） — セクションが滑らかに高さを拡張・収縮させてコンテンツを表示・非表示にします。
• Direction-aware transition（方向認識トランジション） — コンテンツが前方に移動するときは一方向、戻るときは逆方向にスライドし、ナビゲーションに方向性を与えます。

スクロール — スクロールやビュー間の移動に連動したモーション

• Scroll reveal（スクロールリビール） — 要素がビューポートに入るときにフェードインまたはスライドインします。
• Scroll-driven animation（スクロール駆動アニメーション） — アニメーションの進行がスクロール位置に直接紐づけられたものです。
• Parallax（パララックス） — スクロール中に背景と前景が異なる速度で動き、奥行きを生み出します。
• Page transition（ページトランジション） — あるページやルートから別のページに移動するときに再生されるアニメーションです。
• View transition（ビュートランジション） — ブラウザが2つの状態またはページ間をモーフィングし、共有要素を接続します。

フィードバック＆インタラクション — ユーザーのアクションへの応答

• Hover effect（ホバーエフェクト） — カーソルが要素の上に移動したときの視覚的な変化です。
• Press / Tap feedback（プレス / タップフィードバック） — 要素がクリックされたときの微妙なスケールダウンで、物理的な感触を与えます。
• Hold to confirm（長押し確認） — ユーザーがボタンを押し続けている間、プログレス効果が満たされていきます。
• Drag（ドラッグ） — 要素を掴んで移動すること。多くの場合、離したときに慣性（モメンタム）が働きます。
• Drag to reorder（ドラッグ並べ替え） — リスト内のアイテムをドラッグして並べ替え、他のアイテムはそのために移動します。
• Swipe to dismiss（スワイプ閉じる） — ドロワーやトーストのような要素を画面外にドラッグして閉じます。
• Rubber-banding（ラバーバンディング） — 境界を超えてドラッグしたときの抵抗とスナップバック（iOSのオーバースクロール時の感触）。
• Shake / Wiggle（シェイク / ウィグル） — エラーや拒否された入力を示す、素早い左右の小刻みな動きです。
• Ripple（リップル） — タップした点から広がる円で、プレスを確認します。

イージング — アニメーション中の速度変化

• Easing（イージング） — アニメーションが加速または減速する割合です。
• Ease-out（イーズアウト） — 速く始まり、遅く終わります。ほとんどのUIやユーザーの操作に応答するもののデフォルトです。
• Ease-in（イーズイン） — 遅く始まり、速く終わります。通常は避けるべきです。もっさりした印象を与えることがあります。
• Ease-in-out（イーズインアウト） — 遅く、速く、遅くなります。すでに画面にある要素がAからBに移動する場合に適しています。
• Linear（リニア） — 一定の速度。UIでは避け、スピナーやマーキー用に確保します。
• Cubic-bezier（キュービックベジェ） — 正確な制御のために独自に定義するカスタムイージング曲線です。
• Asymmetric easing（非対称イージング） — 加速と減速が異なるレートで行われる曲線。対称的なものよりも生き生きと感じられます。

スプリングアニメーション — 固定再生時間のイージングに代わる物理ベースのモーション

• Spring（スプリング） — 設定された再生時間ではなく、物理法則（テンション、質量、ダンピング）によって駆動されるモーションです。
• Stiffness / Tension（スティフネス / テンション） — スプリングが目標に向かって引っ張る強さ。値が高いほどスナップがききます。
• Damping（ダンピング） — スプリングが落ち着く速さ。ダンピングが低いほど、バウンドと振動が多くなります。
• Mass（マス） — アニメーションする要素の重さの感じ方。質量が大きいと遅く、鈍くなります。
• Bounce（バウンス） — スプリングがオーバーシュートして落ち着くもので、遊び心を加えます。
• Perceptual duration（知覚的な再生時間） — スプリングが実際には微調整を続けているにもかかわらず、完了したように感じられる時間です。
• Momentum（モメンタム） — 特にドラッグ後や中断後に、速度を維持するモーションです。
• Velocity（ベロシティ） — 要素が動く速さと方向。スプリングは中断時にその速度を次のアニメーションに引き継ぐため、フリックされた要素は速度を維持します。
• Interruptible animation（中断可能なアニメーション） — アニメーションが途中で滑らかに方向転換できるもので、最後まで完了する必要はありません。

ループ＆アンビエントモーション — 自動的に実行されるアニメーション

• Marquee（マーキー） — テキストやコンテンツが連続的にループしてスクロールします。
• Loop（ループ） — アニメーションが設定された回数、または無限に繰り返されます。
• Alternate (yoyo)（オルタネート / ヨーヨー） — ループの各繰り返しで、最初からジャンプして戻る代わりに、順方向に再生した後、逆方向に再生するループです。
• Orbit（オービット） — 要素が別の要素の周りを連続的な軌道で周回します。
• Pulse（パルス） — 注意を引くための、穏やかな繰り返しのスケールまたは不透明度の変化です。
• Float（フロート） — 静止している要素に生命感と無重力感を与える、穏やかで継続的な上下のドリフトです。
• Idle animation（アイドルアニメーション） — 要素がただそこにあり、操作を待っている間に再生される微妙なモーションです。

ポリッシュ＆エフェクト — 良いものを素晴らしいものに変える小さなタッチ

• Blur（ブラー） — 要素を柔らかくしたり、小さな不完全さを隠すために使用されるぼかしフィルターです。
• Clip-path（クリップパス） — 要素を形状にクリッピングし、リビール、マスク、ビフォー/アフタースライダーに使用されます。
• Mask（マスク） — 形状やグラデーションを使用して要素の一部を隠したり表示したりすること。クリップパスに似ていますが、ソフトでフェード可能なエッジを持ちます。
• Before / after slider（ビフォー/アフタースライダー） — 2つの重ねられた画像を比較するために、ドラッグ可能な仕切りでワイプするものです。
• Line drawing（ラインドローイング） — まるで目に見えないペンでなぞるように、SVGパスが自らを描画するものです。
• Text morph（テキストモーフ） — テキストが変化するときに文字ごとにアニメーションし、新しい値に注意を引きます。
• Skeleton / Shimmer（スケルトン / シマー） — コンテンツの読み込み中に表示される、動く光沢のあるプレースホルダーです。
• Number ticker（ナンバーティッカー） — 数字が値に向かってローリングまたはカウントアップするものです。
• Tabular numbers（表組み数字） — 固定幅の数字で、数値が変わっても位置がずれません。ティッカー、タイマー、カウンターに不可欠です。
• Typewriter（タイプライター） — まるでタイプされているかのように、テキストが一度に1文字ずつ表示されます。

パフォーマンス — モーションを滑らかに保ち、カクつきを防ぐもの

• Frame rate (FPS)（フレームレート / FPS） — 1秒間に描画されるフレーム数。60fpsが滑らかなモーションの基準であり、新しいディスプレイでは120fpsです。
• Jank（ジャンク） — ブラウザがアニメーションに追いつけずフレームをドロップしたときに生じる、目に見えるカクつきです。
• Dropped frame（ドロップフレーム） — ブラウザが描画の期限に間に合わなかったフレームで、モーションにわずかな引っ掛かりを生じさせます。
• Compositing（コンポジット） — GPUに要素を独自のレイヤー上で移動またはフェードさせ、レイアウトやペイントをやり直さないようにすることです。
• will-change（ウィルチェンジ） — 要素がこれからアニメーションすることをブラウザに伝えるCSSのヒントで、ブラウザは事前にその要素を独自のレイヤーに昇格させることができます。
• Layout thrashing（レイアウトスラッシング） — width、height、top、leftなどのプロパティをアニメーションさせると、ブラウザは毎フレームレイアウトを再計算する必要が生じ、ジャンクの原因になります。

知っておくべき原則 — いつ、どのようにアニメーションさせるかを導く概念

• Purposeful animation（目的のあるアニメーション） — モーションは、方向を示す、フィードバックを与える、関係性を示すなど、機能に役立つべきであり、単なる装飾であってはなりません。
• Anticipation（予備動作） — 動きの前に逆方向への小さな予備動作があり、これから起こることを示唆します。
• Follow-through（フォロースルー） — 主要なモーションが停止した後も、要素の一部が動き続け、少し落ち着くことで重みを加えます。
• Squash & stretch（スクワッシュ＆ストレッチ） — 要素が動くときに変形させ、重さ、速度、柔軟性を伝えます。
• Perceived performance（知覚パフォーマンス） — 適切なアニメーションは、実際には速くなくても、インターフェースをより速く感じさせます。
• Frequency of use（使用頻度） — ユーザーがアニメーションを見る頻度が高いほど、そのアニメーションは短く、控えめであるべきです。
• Spatial consistency（空間的一貫性） — 要素が状態を超えてその同一性と位置を維持するようにアニメーションさせることで、ユーザーが何がどこに行ったかを見失わないようにします。
• Hardware acceleration（ハードウェアアクセラレーション） — transformとopacityをアニメーションさせることで、GPUがモーションを滑らかに保つことができます。
• Reduced motion（モーション抑制） — ユーザーのprefers-reduced-motion設定を尊重し、モーションを弱めたり削除したりします。