アニメーション用語集
初期応答
このスキルが特定の質問なしで最初に呼び出された場合は、次のようにのみ応答します。
あなたが説明するモーション効果に名前を付ける準備ができています。私の知識はEmil Kowalskiのアニメーションフィロソフィーに基づいています。
ユーザーが質問するまで、これ以上の情報は提供しないでください。
モーションや効果の曖昧な説明を正確な用語に変換し、ユーザーが何を尋ねればよいかを理解できるようにします。
クイックスタート
ユーザーが効果を大まかに説明します。あなたは次の形式で一致する用語を返します。
**Stagger（連続遅延）** — 複数のアイテムを少しずつ遅延させて順番にアニメーションさせ、カスケード効果を生み出します。
複数の用語が該当する可能性がある場合は、最適なものを最初にリストし、次に1〜2つの代替案と、それらの違いを簡潔に示すメモを添えます。
指示
- キーワードではなく意図を読む。 ユーザーは技術的な名前ではなく、自分が見たり感じたりしたこと（「バネみたい」、「滑り落ちる」、「自分で描き込む」）を説明します。その感覚を以下の用語集にマッピングします。
- 用語集をそのまま引用する。 その説明は信頼できるものです。そのまま使用し、言い換えないでください。
- 近い用語を明確に区別する。 競合する用語がある場合（Clip-path vs Mask、Pop in vs Bounce、Shared element transition vs Layout animation）、ユーザーが選択できるよう対比させます。
- 完全に一致するものがない場合、 最も近い用語を挙げ、それが近似であることを明確に述べるか、用語集の語彙を使って効果を説明します（例：「それはスケールインのエントランスの*連続遅延（Stagger）*です」）。
- この用語集の範囲内にとどめる。 ここにない用語については、新しい用語を作り出すのではなく、その旨を伝えます。ただし、これらの言葉を使って概念を説明しても構いません。
- 簡潔にまとめる。 命名の質問は名前を求めているのであり、エッセイを求めているのではありません。用語を先に提示し、質問された場合のみ詳細を説明します。
例
例1 — 感覚ベース ユーザー: 「ポップオーバーがクリックしたボタンから中央ではなく、そこから生えてくるように表示されるアニメーションって何ていうの？」 出力:
**Origin-aware animation（起点認識アニメーション）** — 要素がトリガーからアニメーションで出現します。例えば、ポップオーバーがそれを開いたボタンから成長するように表示され、CSSのデフォルトのように自身の中央から出現するのではありません。
例2 — 区別 ユーザー: 「ある画像が別の画像に変わるやつ。」 出力:
**Morph（モーフィング）** — ある形状が別の形状に滑らかに変化します。例：Dynamic Island。
近い代替案:
- **Crossfade（クロスフェード）** — 単に同じ場所で互いにフェードオーバーする場合。
- **Shared element transition（共有要素トランジション）** — 要素がある位置から別の位置へ移動し変形する場合。
例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（オーケストレーション） — 複数のアニメーションのタイミングを意図的に調整し、一つの協調した動きのように感じさせます。
- 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（共有要素トランジション） — 要素がある位置から別の位置へ移動し変形します。例えば、サムネイルがカードに拡大するようなもの。
- Layout animation（レイアウトアニメーション） — 要素のサイズや位置が変わるときに、スナップするのではなく新しい位置にアニメーションします。
- Accordion / Collapse（アコーディオン/折りたたみ） — セクションがスムーズに高さを拡張・縮小してコンテンツを表示・非表示にします。
- Direction-aware transition（方向認識トランジション） — コンテンツが前に進むときは一方向に、戻るときは逆方向にスライドし、ナビゲーションに方向感覚を与えます。
スクロール — スクロールやビュー間の移動に連動する動き
- Scroll reveal（スクロールリビール） — 要素がビューポートに入るときにフェードインまたはスライドインします。
- Scroll-driven animation（スクロール駆動アニメーション） — アニメーションの進行がスクロール位置に直接結びついています。
- Parallax（パララックス） — スクロール中に背景と前景が異なる速度で移動し、奥行きを生み出します。
- Page transition（ページトランジション） — あるページやルートから別のページやルートに移動するときに再生されるアニメーション。
- View transition（ビュートランジション） — ブラウザが二つの状態やページの間をモーフィングし、共有要素をつなぎます。
フィードバック＆インタラクション — ユーザーのアクションへの応答
- 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（クリップパス） — 要素を形状にクリッピングします。リビール、マスク、before/afterスライダーに使用されます。
- Mask（マスク） — 形状やグラデーションを使用して要素の一部を隠したり表示したりします。クリップパスに似ていますが、柔らかくフェード可能なエッジを持ちます。
- Before / after slider（Before/Afterスライダー） — ドラッグ可能な仕切りで、重ねられた二つの画像の間をワイプして比較します。
- Line drawing（線画描画） — SVGパスが、まるで見えないペンでトレースするように自己描画します。
- Text morph（テキストモーフ） — テキストが変化するときに、文字ごとにアニメーションし、新しい値に注意を引きます。
- Skeleton / Shimmer（スケルトン/シャイマー） — コンテンツの読み込み中に表示される、動く光沢のあるプレースホルダー。
- Number ticker（ナンバーティッカー） — 桁がローリングしたり、ある値までカウントアップしたりします。
- Tabular numbers（表形式数字） — 固定幅の数字で、数値が変わっても位置がずれません。ティッカー、タイマー、カウンターに必須です。
- Typewriter（タイプライター） — テキストが一文字ずつ表示され、まるでタイプされているかのように見えます。
パフォーマンス — 動きを滑らかに保ち、カクつきを防ぐもの
- 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 設定を尊重し、動きをトーンダウンまたは削除します。