UIXHERO
#196
インタラクション・アニメーション
#196

とぅいーん

トゥイーン (Tweening)

別名・表記:TweeningIn-betweeningMotion Tween

UIXHERO Definition

「変形プロセス」。AからBへ変わる途中経過を作ること。

概要

伝統的な手描きアニメーションでは、原画を描く「原画マン」と、その間を埋める「動画マン(In-betweener)」が分業していた。 デジタルアニメーションでは、コンピュータがこの「動画マン」の役割を担い、計算によって中間フレームを生成する。これを「トゥイーン」と呼ぶ。トゥイーンは制作現場の用語であり、数学的には「補間(Interpolation)」によって実現されている。

実質的には「補間(Interpolation)」と同義だが、Flashなどのアニメーションツール文化から生まれた言葉として定着している。

UXでの活用

  • 効率化: デザイナーは開始と終了の状態(キーフレーム)だけを定義すればよいため、アニメーション制作の工数を大幅に削減できる。
  • 一貫性: コンピュータが計算するため、常に一定の品質と滑らかさで動く。ただし、温かみのある「ゆらぎ」や「崩し」を表現するには、手動での調整(フレームバイフレーム)が必要になることもある。

💡 使いどころ

アニメーション制作ソフト(Flash/Animateなど)や、プログラムでアニメーションを実装する際に使われる用語。

⚠️ 注意点・誤用

トゥイーンの設定(イージングやデュレーション)が不適切だと、動きが機械的で安っぽくなる。単にAB間を繋ぐだけでなく、そこに「物理法則」や「感情」を込める意識が必要。

具体例

  • モーショントゥイーン:位置や大きさの変化を補間する
  • シェイフトゥイーン:形状の変化(丸から四角へなど)を補間する
出典・参考文献:
  • Thomas, F., & Johnston, O. (1981). The Illusion of Life: Disney Animation. New York: Disney Editions.
  • Lasseter, J. (1987). Principles of traditional animation applied to 3D computer animation. Proceedings of SIGGRAPH '87, 35–44.
  • W3C. (2012). CSS Animations Level 1. World Wide Web Consortium (W3C) Recommendation.
  • Goldstein, E. B. (2014). Sensation and Perception (9th ed.). Cengage Learning.

関連する解説記事

関連する記事詳細が見つかりませんでした。

作成: 2026年2月12日
更新: 2026年2月14日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: