情報処理学会研究報告
IPSJ SIG Technical Report

Vol.2014-MUS-104 No.15
2014/8/26

TextAlive: 音楽に同期した歌詞アニメーションのKinetic Typography 制作環境
加藤淳 1,a)

中野倫靖 1,b)

後藤真孝 1,c)

本稿では、歌詞を歌声と同期してアニメーションさせる Kinetic Typography と呼ばれる動画表現の制作環境 TextAliveを提案する。既存の制作ツールでは、歌詞と歌声の同期を手作業で取り、文字や単語、複数単語から成るフレーズに対して個別に望みの動きを設計する必要があった。その際は、動きを規定するアルゴリズムのパラメタを、スライダーなどの汎用 GUI で調整して試行錯誤を重ねていた。一方、本制作環境では、歌詞と音楽の時間的対応付けを自動で推定し、動きのアルゴリズムに対する初期パラメタを自動生成する。さらに、動きのアルゴリズムを編集できるコー
ドエディタを備え、プログラマがパラメタ調整に適した専用 GUI を容易に提供できるフレームワークを提供する。これにより、TextAlive のユーザは Kinetic Typography を一から作る必要がなくなり、初めに時間合わせなどを行う手間をかけずに済む。また、歌詞の動きをインタラクティブかつグラフィカルに設計できるようになる。

1. はじめに音楽の楽しみ方はメディア技術の発展に伴って変遷してきた。音楽のみを再生する機器は蓄音機以来数多く存在

このように、歌声と同期して歌詞がアニメーションする
動画は音楽の楽しみを広げてくれる一方で、制作過程は現状、膨大な手作業で支えられている。本研究では、音楽と同期した歌詞アニメーションの Kinetic Typography に特化したが、テレビが普及して PV（Promotion Video）が制作さした制作環境 TextAlive を開発し、当該動画の作成・編集をれるようになり、音楽に視覚的な動画情報を加えて楽しめ支援する。本稿では、まず 2 章で歌詞アニメーションのるようになった。また、カラオケはもともと歌声を除いた

Kinetic Typography を制作するうえで困難なポイントを整

伴奏のみを流す装置だった。しかし、メロディーと同期し理する。次に、3 章で 1) 音楽と歌詞の時間的対応付けを半て歌詞を表示できるビデオカラオケが登場し、歌詞カード

自動で行って制作にかかる手間を削減する手法と 2) 歌詞を見るより容易に歌唱タイミングが分かるようになった。

アニメーションに特化した直感的な動画編集を可能にする

動画メディアの文脈では、文字情報の持つメッセージを手法を提案し、これらを統合したシステム TextAlive につより印象付けるため、タイトルやテロップをアニメーショ

いて紹介する（図 2）。続く 4 章では実装について述べ、5ン表示させる Kinetic Typography と呼ばれる表現手法が一章で一般的な動画制作、音声と同期するマルチメディアの般 的 で あ る 。 こ れ は印 刷 物上 で 文 字 を 綺 麗 に 配置 す る

編集などに関する既存手法と比較して本研究の新規性につTypography の動画版であり、典型例としてテレビ番組のタいて述べる。さらに、6 章で将来展望について議論したのイトルやテロップがアニメーションする動画が挙げられる。

ち、結論を述べる。

歌声は歌詞という文字情報を含むため、歌声と同期する動画制作において Kinetic Typography が利用されるのはごく

2. 歌詞アニメーションの難しさ

自然な流れである（図 1b）。実際に、歌詞が音楽に合わせ

本章では、一般的な動画制作と比べて歌詞アニメーショて派手にアニメーションする PV やビデオカラオケの動画

ンの Kinetic Typography 制作がとくに難しい理由について、が数多く制作されている。
しかしながら、文字情報を歌詞の発声タイミングと同期して思い通りにアニメーションさせることは容易ではない。
その際は、動画を一から制作できる Adobe After Effects [1]などの汎用動画制作ツールを用いる必要がある。汎用ツー
ルでは、各文字の表示位置や大きさ、フォントのスタイルなど様々なパラメタを、基本的に手作業で時系列に沿って指定していく膨大な手間がかかる。一部の音楽プレイヤー
では、歌詞と発声タイミングに関する情報を含むファイル
を読み込み、音楽と同期して表示させるシンプルなカラオ
ケ表示（図 1a）を行うことが可能だが、動画制作者の意図を含めることはできない。
1 産業技術総合研究所
National Institute of Advanced Industrial Science and Technology (AIST)a) jun.kato [at] aist.go.jpb) t.nakano [at] aist.go.jpc) m.goto [at] aist.go.jpⓒ2014 Information Processing Society of Japan

図 1

歌詞表示の方法

1

情報処理学会研究報告
IPSJ SIG Technical Report

Vol.2014-MUS-104 No.15
2014/8/26

アニメーションの設計要素である時間（2.1）および空間的

ラフィカルに制作できる。さらに、プログラミングができ

配置（2.2）のそれぞれの面から分析する。

るユーザは、歌詞の文字列をアニメーションさせるための

2.1 歌声と文字情報の高度な同期

動きのアルゴリズムを、文字ベースのプログラムとして実

歌詞は自由詩であり、言語を問わず、文字と、その集ま装、編集できる。プログラミングは必須知識ではないが、りである単語、さらに単語が複数集まったフレーズ（必ずAfter Effects のような汎用の動画制作ツールでも複雑な動

しも主語述語などが揃った文にはならないためこう呼ぶ）

きの設計はスクリプト言語で行うほうが効率的であり、動の集合となっている。以降、このような文字情報のまとま画制作で必要とされることがあるスキルである。TextAlive

りを文字ユニットと呼ぶ。歌詞をアニメーションさせたで作成した Kinetic Typography のアニメーション事例は、

Kinetic Typography 動画では、個々の文字ユニットに対して研究プロジェクトの Web サイト* 1で確認できる。

画面上で最も目立って見える瞬間が効果的に設定されてい3.1 音楽情報処理を用いたアニメーションの自動生成る。動画制作者の意図に応じて、一文字一文字が順番に表

本節では、与えられた音楽ファイルと歌詞ファイルに対示され、発声終了時にフレーズ全体が最も目立つ場合もあして歌詞アニメーションの初版を自動生成する手法を提案

れば、発声直前にフレーズが丸ごと表示され、最も目立つする。本手法により、ユーザは一から歌詞のアニメーショ

場合もある。

ンを作成する必要がなくなり、自動生成されたものをベー

このようなアニメーションを制作するためには、一般的な制作ツールでは全てのタイミングを手作業で合わせる必スに編集して自分好みのアニメーションに近づけていくことが可能となる。

要があり、非常に手間がかかる。歌詞が歌声と単純に同期

ユーザはまず、歌声が含まれる音楽ファイルと歌詞の文して表示されるカラオケの表示方法は Kinetic Typography

字列が書かれた歌詞ファイルを選択する。この後、システの最も単純な例であり、実際の動画ではより高度な同期がムが音楽と歌詞の時間的対応付けを推定[3]する。これによ行われている場合が多い。

り、歌詞中の各文字、単語、フレーズの発声タイミングが2.2 空間的な意味を持つパラメタ調整

仮に定まる。さらに、システムが楽曲のサビ区間を検出[4]

歌詞のアニメーション動画はすでに数多く制作されており、様々な典型的パターンがある。このような文字のア
ニメーションを Adobe After Effects [1]のような汎用の動画し、これらの情報を用いてデフォルトのアニメーションを自動生成する。
発声タイミングの推定結果が誤っている場合、ユーザは、制作ツールで作成するためには、キーフレームにおける位短い区間に絞って音楽と歌詞の時間的対応付けを推定させ

置を順番に指定していくなど、低レベルなパラメタ指定を直すか、タイムライン上で GUI による手作業により発声タ積み重ねていく工程が必要となる。すなわち、ユーザは、イミングを編集できる（図 3）。発声タイミングが更新され最終的な動きを頭の中に思い描きながら個別具体的なパラ

ると、アニメーションのタイミングも更新される。なお、

メタ調整を行う必要がある。このようなコマンド（パラメ

修正されたタイミング情報は自動的に保存され、次に同じ

タ調整）と実行結果（生成されるアニメーション）の間の組み合わせの音楽と歌詞を読み込んだ際に利用される。

溝は Gulf of execution and evaluation [2]と呼ばれ、適切なインタフェースによる支援が必要とされる。
歌詞のアニメーションを典型的なパターンに当てはめると、実際に指定する必要があるのは歌詞の初期位置や、歌詞がアニメーションする向きなど、空間的な意味を持つ
いくつかのパラメタだけである場合が多い。しかし、各パ
ターンに固有のパラメタをグラフィカルに指定できるインタフェースは汎用ツールでは提供されない。

3. TextAlive
本章では、前章で分析した問題を解決するための手法を
図 2

提案し、これらを実装したシステム TextAlive を紹介する

TextAlive のメイン画面（図 2）。TextAlive は、制作者のスキルに応じて 2 通りの使い方ができるように設計されている。特定の前提知識を持たないユーザは、GUI で音楽に同期した歌詞アニメーシ
ョンの Kinetic Typography 動画をインタラクティブかつグ*1

TextAlive. http://staff.aist.go.jp/jun.kato/TextAlive/ⓒ2014 Information Processing Society of Japan

図 3

タイムライン上での発声タイミングの修正

2

情報処理学会研究報告
IPSJ SIG Technical Report

Vol.2014-MUS-104 No.15
2014/8/26

3.2 インタラクティブなパラメタ調整用 GUI の提供支援

か視覚的に分からないことが多かった。GUI によるパラメ

いったん歌詞アニメーションの初版が自動生成されるタ調整が難しい要因として、動きのアルゴリズムには様々と、ユーザは、ステージ上でアルゴリズムのパラメタを調な種類があり、統一的なパラメタ調整用ユーザインタフェ

整したり、別のアニメーションアルゴリズムを割り当てたースが提供できないことが挙げられる。そこで TextAlive でりできる（図 2）。本節では、パラメタ調整用のユーザイン

は、アルゴリズム実装者が一番アルゴリズムについてよくタフェースをよりグラフィカルなものにするための手法を知っており、直感的なパラメタ調整用 GUI を実装できると提案する。これにより、エンドユーザは目標とする動きにいう仮定を置く。そして、ユーザインタフェースの実装を近づけるためのパラメタ調整をより直感的に行えることが容易にする手法を提案する。すなわち、TextAlive 上に動き期待できる。

のアルゴリズムを実装できるソースコードエディタを提供

既存の動画制作ツールでは、グラフィカルに調整できる

し、パラメタ調整用ユーザインタフェースをアルゴリズム

パラメタがオブジェクトの初期位置などに限定されていた。

と同時に実装できるようにする（図 4）。その際、ユーザイ

したがって、実際にオブジェクトがどのような動きになる

ンタフェースのひな形となる GUI ウィジェットの実装を
Kinetic Typography 制作用に特化して用意し、単純なユーザ
インタフェースならソースコードにコメントを一行足すだ
けで提供できるようにする（図 5）。
このように、ソースコード中の特定の部分を特別扱いし、アルゴリズム本体とは異なる評価を行う手法は、パラメタ調整を多用するプロトタイピング用途のプログラミング環
境で提案されてきた（5.3 で詳述）。とくに静的コード解析
によってコメント欄の内容を抽出し、パラメタ調整用 GUIにする手法は Juxtapose [5]が最初と考えられる。類似手法
は統合開発環境 Unity* 2にも採用され、C#のクラスで public

図 4

アニメーションのアルゴリズムとパラメタ調整用

GUI を実装するための Java ソースコードエディタ

修飾子の付与されたフィールドに対して自動的にスライダーが表示されるようになっている。これらの既存手法ではスライダーのみ配置可能であったものを、本手法ではさま
ざまなユーザインタフェースの実装にも応用可能なように拡張した点に新規性がある。

4. 実装
本章では、前章の手法を実現した歌詞アニメーション制
作環境 TextAlive の実装について述べる。
4.1 概要TextAlive システムにおける処理の流れを図 6 に示す。
TextAlive は Java で実装されており、64bit 版 Windows 8.1
で動作確認を行っている。音楽ファイルは MP3 または MS
WAV フォーマットに対応している。歌詞ファイルはテキス
トファイルの形式で与える。歌詞ファイルの内容は、フレーズごとに改行されたプレーンテキストである。単語は
MeCab* 3による形態素解析の結果として得られる。フレー
ズや単語のまとまりは、ユーザが後から再編集できる。な
お、音楽ファイルが MP3 フォーマットの場合、メタ情報を埋め込む仕様である ID3v2.3.0* 4に歌詞の埋め込み方法が明記されている。TextAlive は当該仕様に対応しているため、歌詞が MP3 ファイルに埋め込まれている場合、テキストフ
図 5

コメントを解析することでステージ上に生成される

ァイルを別途用意する必要はない。
歌詞をアニメーションさせるためのアルゴリズムや、ア

パラメタ調整用 GUI*2*3

Unity. http://unity3d.com/
MeCab. http://mecab.sourceforge.net/ⓒ2014 Information Processing Society of Japan*4

ID3 v2.3.0. http://id3.org/id3v2.3.0

3情報処理学会研究報告
IPSJ SIG Technical Report

Vol.2014-MUS-104 No.15
2014/8/26

座標系における単語の位置、単語基準の相対座標系における文字の位置が計算される。そして、各文字の表示に用いられるパラメタを画面上の絶対座標系に変換してゆき、画
面内へ収まるものだけが描画される。
4.3 アニメーションの自動生成
デフォルトのアニメーションは、3.1 で述べたように、音楽と歌詞の時間的対応付けが確定した後、サビの開始、終了タイミングの情報を利用して生成される。ここで自動生成される内容はユーザがアニメーションを自分好みにしていくための土台となるため、シンプルかつ TextAlive の機能が伝わる分かりやすい具体例となっていたほうがよいと考えられる。そこで、現在の実装では次段落に示すようなヒューリスティックな方法でアニメーションのアルゴリズ
ムを割り当てている。将来的には、この自動生成の方法も
図 6

TextAlive システムにおける処理の流れ

ルゴリズムのパラメタ調整用 GUI は Java で記述される。
これらのソースコードは、TextAlive の内蔵ソースコードエ
ディタでいつでも作成・編集できる。また、編集内容はすぐにアニメーションや GUI に反映される。例えば、現在作
成中のアニメーションで使われているアルゴリズムが編集されると、生成されるアニメーションも動的に更新される。
4.2 歌詞のアニメーション
歌詞のアニメーションでは、可読性を確保するため、単語単位で見ると文字が横方向や縦方向に順番を保って並んでいることが多い。また、単語が文字の相対的な位置関係を保ったまま動いたり、複数の単語がまとまってフレーズを形成し、フレーズごとに文字の重複を避けるような処理が行われたりする。このように、各文字ユニット（文字、単語、フレーズ）の位置や向きを決める処理は他階層のユニットとは独立しており、上位階層のユニットを基準にした相対座標系を用いるとシンプルに記述できる。
そこで、TextAlive では、ユーザが各文字ユニットに対して別々のアニメーションのアルゴリズムを割り当てられるようにしている。例えば図 1 の例では、各単語に「文字の横書きを行いつつ発声開始に合わせて画面右端に到達する
よう右方向にスライドするアルゴリズム」が、各フレーズに「画面縦方向にばらけさせ、文字が重なって読めなくなるのを防ぐ改行のためのアルゴリズム」が割り当てられている。それぞれ独立にアルゴリズムを切り替えられるため、
例えば各文字に対して「回転するアルゴリズム」を追加したり、単語の移動する向きを左向きにしたりするなど、さまざまな組み合わせを試すことができる。
各瞬間における歌詞のレンダリング処理では、画面上の絶対座標系におけるフレーズの位置、フレーズ基準の相対*5
ホットスワップはもともと Web サービスの実装などでよく使われる技術である。クラスをリロードした後も Java VM 上に古い実装のインスタン
スが残るが、これは古いリクエストへの応答に使われているもので、新しⓒ2014 Information Processing Society of Japan

プログラマが作成、編集できるようにして、テンプレート
としてユーザが自由に選べるようにする予定である。
サビは楽曲が盛り上がる場面である。したがって、Kinetic
Typography の演出上も、サビをそれ以外の区間より盛り上
げたほうが曲調と合うと考えられる。まず、サビ以外については、各単語に対して「文字が右方向にスライドするア
ルゴリズム」が、各フレーズに対して「改行のためのアルゴリズム」が割り当てられるようになっている（先述した
図 1 の例）。一方、サビについては各文字に対して「画面を埋め尽くすように外周から右回りに配置されていくアルゴリズム」が割り当てられるようになっている。実際に画面を埋め尽くしそうになったら古い字から消えていく。また、配置されたてのときは文字色がオレンジだが、時間が経つと黒くなる。このように、画面が次々と鮮やかな色で埋まっていくため、サビ以外と比べて印象に残りやすい。
4.4 アニメーションとパラメタ調整用 GUI の Java 実装
アニメーションのアルゴリズムはそれぞれ一つの Java
クラスとして定義されており、TextAlive 起動時にソースコードがコンパイルされて Java VM へ動的に読み込まれる。
また、プログラマがアニメーション制作中にアルゴリズムを編集した際は、ソースコードが再度コンパイルされ、クラスが読み込み直される。通常の Java 用開発環境では、プ
ログラム起動中にクラスを読み直す機能はホットスワップと呼ばれる。ただし、単なるホットスワップでは、今後割り当てられるアニメーションのアルゴリズムが新しくなるだけで、現在編集中のアニメーションで既に利用されているアルゴリズムは更新されない* 5。そこで、4.5 で詳述する
方法により、可能な限り古いアニメーションのパラメタを保ったままアルゴリズムを新しいものに差し替え、画面を更新する。こうして、プログラマがシームレスにプログラ
ムの実行（アニメーション制作）とソースコードの編集（アいリクエストへの応答は新しい実装のインスタンスで行われる。この場合はサーバ応答の一貫性が保たれるため、むしろ望ましい動作と言える。

4

情報処理学会研究報告
IPSJ SIG Technical Report

Vol.2014-MUS-104 No.15
2014/8/26

ルゴリズムの設計）を行き来できる Live Programming [6]をらの情報を JSON オブジェクトとして表記すると、例えば実現している。

図 7 のようになる。アニメーションの読み込みは、このまた、アニメーションアルゴリズムの Java クラスが Java

JSON オブジェクトをパースして、文字ユニットやアニメ

VM へ読み込まれるとき、同時に静的コード解析が行われ、ーションアルゴリズムのインスタンスを生成すればよい。

パラメタ調整用 GUI を生成するための情報が収集される。

なお、いったん JSON として書き出したアニメーション

具体的には、ANTLR Parser* 6を用いてソースコードがパーを再度読み込む際に、アニメーションアルゴリズムの実装

スされ、Java クラスの public フィールドがアニメーションが更新されている可能性がある。そこで、例えば JSON 側の内容を調整するためのパラメタとして扱われる。パラメに保存されているパラメタが Java クラスに当該フィール

タ調整用 GUI は、当該 public フィールドに付与されたコメ

ドがないために読み込めない、あるいは JSON 側で値が未ントの内容に応じて図 5 のように生成される。コメントは

定義のパラメタが Java クラスでは宣言されていることが@ui に続けてパラメタ調整用 GUI の実装クラス名とパラ起きうる。このミスマッチは、別のアニメーションの編集

メタの値域などを表すオプションを記述する仕様になって中にアルゴリズムの実装を変更した場合、またはアニメー

おり、これによってウィジェットが適切な位置にレンダリション制作中に利用しているアルゴリズムの実装を変更しングされ、適正な範囲でのパラメタ調整が行える。

た場合（4.4 で言及）に生じる。このようなケースでは、パラメタ調整用 GUI として、スライダー（図 5 上）や選

JSON 側にしかないパラメタを無視し、Java クラス側にし択式のラジオボックス（同中）アニメーション表示画面上

かないパラメタは初期値を代入することによって、可能なで移動可能なハンドル（同下）といった代表的なウィジェ

限り元々のパラメタを保持するように処理する。

ットの実装は初めから提供されている。しかし、独自の GUI

5. 関連研究を実装する場合は、パラメタ調整用 GUI を表す基底 Java クラスを拡張して、新たなクラスを定義する必要がある。
4.5 アニメーションの保存と読み込み

5.1 Kinetic Typography の制作支援
Kinetic Typography は、文字情報を動画としてアニメーシ

TextAlive で作成、編集されたアニメーションを保存する

ョンさせ、視聴者の印象に残す表現手法である。実際に、には、歌詞を構成する文字ユニット（文字、単語、フレー

静止した文字と比較して感情的な情報をより伝えやすいとズ）を時系列で並べ、それぞれについて音楽との時間的対いう実験結果[7]が報告されている。この表現手法を容易に応付け（発声開始と終了のタイミング）および割り当てら実現するために、プログラミング言語[8]やフレームワーク

れたアニメーションアルゴリズムの種類とパラメタを書き[9]についてのプログラマ向けの研究の他、GUI で文字列にだせばよい。このうち、アニメーションアルゴリズムの種

動きをつけられるエンドユーザ向けのユーザインタフェー

類はアルゴリズムを表す Java クラスの名前であり、パラメ

ス[10]が提案されてきた。エンドユーザ向けツールの研究

タはその public フィールドの名前と値のペアである。これ

成果は Web 上で公開され、様々なメディアアートに応用されている[11]。文字列に対してテキストマイニングを行い、想起される感情を推定して適切な動きを自動選択する手法[12][13]も提案されている。汎用の動画制作ツールに Kinetic
Typography 制作用インタフェースを追加するプラグイン[14]が発売されているが、テンプレートで用意された動きしか適用できない。
このように、Kinetic Typography に関する既存手法はいず
れも文字のアニメーションのみを扱った研究や製品である。
一方で本研究は歌詞がアニメーションする動画に着目し、音楽と同期する制約条件を利用して半自動的なユーザイン
タフェースを提供している。
5.2 アニメーション制作用インタフェース
汎用のアニメーション制作ツールとして、Adobe Flash やAfter Effects [1]などが市販されている。これらのツールでは、時間軸に沿ってキーフレームを指定し、キーフレーム
におけるオブジェクトの状態を指定すると、間のフレームを滑らかに補間することにより、プログラミング不要でア

図 7*6

アニメーションを表す JSON ファイルの例（抜粋）

ANTLR. http://www.antlr.org/ⓒ2014 Information Processing Society of Japan5

情報処理学会研究報告
IPSJ SIG Technical Report
ニメーションを制作できる。Microsoft PowerPoint のような

Vol.2014-MUS-104 No.15
2014/8/26

自由に作成・編集することはできない。

スライド作成ツールでも、スライド上のオブジェクトに簡単なアニメーション効果を指定できる。

また、物理シミュレーションを用いたアニメーション制
作やゲーム開発を支援する研究において、パラメタの決定研究では、ペンデバイスやタッチ入力によりオブジェクを支援する手法が提案されている。例えば、パラメタを変トが動く軌跡を描くインタラクション手法[15]が提案され化させた場合のオブジェクトのアニメーションの軌跡を重ている。また、軌跡に沿って色や拡大率などオブジェクト

ねて表示し、望ましいものを選んで徐々に絞り込んでいけの見た目に関するパラメタを変化させることで、オブジェる手法[19]や、ゲームを実行したとき特定の瞬間に物体がクトを動かしながら徐々に色や大きさを変えるアニメーシ取っていた位置に対して制約をかけることでパラメタを逆ョンを制作できる手法[16]が提案されている。

算する手法[20]が提案されている。これらはいずれも望ま

上記の手法は、いずれも個々のオブジェクトの動きを手しい実行結果を選ぶことでパラメタを絞り込む手法であり、作業で指示する必要がある。そこで、水の流れや鳥の群れ、パラメタを GUI で変化させて望ましい実行結果を得る本木から散る葉のように、多くのオブジェクトが同じような手法と相補的な役割を果たすものである。

傾向を持って動くアニメーションをスケッチ入力で描くた

6. 議論

めのインタフェース[17]が提案されている。しかし、出現するオブジェクトの数などは細かく指定できない他、個々の6.1 歌詞をより魅力的に伝える動画表現の大衆化
音楽は、音楽と同期した動画と共に鑑賞すればより楽し

オブジェクトに対して詳細なパラメタ調整ができない。
本研究では、個々の文字でなく単語やフレーズに対してみが増す。ボーカル付き音楽は、歌詞カードと一緒に楽し

アニメーションを割り当てることで、複数オブジェクトのめばより深く制作者の意図を理解できる。つまり、文字の動きを一気に指定できる。また、アニメーションのパラメ

メッセージを動画により印象づける Kinetic Typography とタ調整用 GUI を容易に実装できるフレームワークを提供いう表現手法を歌詞に適用すれば、歌詞をより魅力的に伝しており、細かなパラメタ調整をしやすくしている。一方える音楽動画が実現できるはずである。筆者らは、本研究で、各オブジェクトの軌跡を表示することはできても、自を通してそのような動画表現の大衆化を目指している。

由に軌跡を編集して動きを指定することは不可能である。

例えば本研究により、曲は作れるが動画は作れなかった

これは、オブジェクトの動きを具体的な座標のリストとし

音楽制作者が、歌詞に込めたメッセージを歌詞アニメーシて保持するか、アルゴリズムとパラメタの組み合わせとし

ョンによって直接表現した動画を制作、配信できるようにて保持するかというアプローチの差であり、両者を融合すなる。また、そもそも音楽動画では、アーティストを撮影る手法の開発は将来の課題と考えている。

した動画や、イラスト、キャラクターのアニメーションな

5.3 パラメタ調整を容易にするプログラミング環境

どが主役となることが多く、歌詞はともすれば目立たない

Adobe Flash や After Effects では、ActionScript などのスクよう動画のセーフエリア（辺縁部）に追いやられ、カラオ

リプト言語でアニメーションをコントロールできる。歌詞

ケ字幕のように単調に表示されがちであった。そこで本研をアニメーションさせるために、各文字や単語ごとに動き

究が、音楽動画制作者の持つ表現のレパートリーを広げるを定義するスクリプトを割り当てることも可能であり、す役割を果たせることを期待している。

べてのオブジェクトに対して個別に動きをつけるような手

時刻同期コメント付き動画配信サービスのニコニコ動

間はかからない。しかし、動きを定義するスクリプトと GUI

画* 7で見られる「コメントアート」には、歌詞をより魅力的を橋渡しする仕組みが存在せず、スクリプトで利用するパに伝えたいという欲求に応えてきた側面がある。コメント

ラメタを調整するために、スクリプトの記述とアニメーシ

アートとは、動画上に時刻同期コメントを多数投稿し、配ョンの確認を何度も繰り返す必要がある。

信されている動画に対して単なる文字情報を超えた視覚表

このようなソースコードと実行結果の溝を解決するた現を付与する表現手法である。これにより、楽曲の歌詞をめに、ソースコード中でパラメタだけ特別扱いし、実行結

凝った色やレイアウトで表示する例がしばしば見られる。

果を見ながらパラメタをインタラクティブに操作できるよ

ただし、コメントアートは他者がコメントを投稿するとうにする手法が提案されている。例えば、変数宣言に付与

徐々に消えてしまい、文字の複雑な動きをコントロールすされたコメントを解析してプログラム実行中に当該変数のることもできない。本研究はコメントアートを置き換える

値を調整できるスライダーを自動生成する手法[5]や、変数

ものではないが、前述のような制約がなく、より自由度のの型を解析して、型に応じた適切なパラメタ調整用 GUI を高い表現手段と言える。

表示する手法[18]がある。いずれの場合もパラメタ調整用

6.2 アニメーションの N 次創作
YouTube* 8やニコニコ動画といった動画配信サービスでGUI の実装は開発環境側で用意してあり、本手法のように*7

ニコニコ動画. http://nicovideo.jp/ⓒ2014 Information Processing Society of Japan*8

YouTube. http://www.youtube.com/

6情報処理学会研究報告
IPSJ SIG Technical Report
は、鑑賞した動画を自分なりに改変することが容易ではな

Vol.2014-MUS-104 No.15
2014/8/26

ェクト」の支援を受けた。

い。一方、TextAlive で作成されたアニメーションは、見た目の複雑さとは裏腹に JSON フォーマットで簡潔に表現され、容易に派生作品を制作できるように設計されている。
例えば、不満点があれば、すぐに自分なりの演出を試してみることができ、思い通りのアニメーションに改変でき

参 考 文 献
[1]
[2]
[3]

る。また、替え歌に対して、同じようなスタイルの動画を一瞬で作成できる。派生作品が制作されることを期待する
楽曲制作者にとっては、JSON ファイルや歌詞ファイル（通[4]常のテキストデータや発声タイミングの情報が付与された
フォーマットなど）を公開するインセンティブが高まり、さらに TextAlive のような音楽動画制作システムが重用さ[5]れるサイクルが生まれる可能性がある。
6.3 歌詞以外への応用と他ツール連携
Kinetic Typography を利用した動画は、音楽ではなく朗読を対象にしていることもある。TextAlive は、現状、歌詞のアニメーション制作しか行えないが、朗読に対して音声認

[6]
[7]

識を行い、認識結果を表示・編集できる既存技術[21]を利用すれば、朗読内容の Kinetic Typography 制作に応用できる。

[8]

また、すでに朗読の書き起こしが済んでいる録音データを、[9]

時間的対応付けを保ったまま編集できるインタフェース[22]が提案されている。このインタフェースでは、不要な息継ぎや言葉の繰り返しなどをテキストエディタで削除すると、録音データも同期して編集される。これは本研究と同

[10]
[11]

様に時間的対応付けを持つマルチメディアを編集する手法であり、相補的な役割を持つため、将来的に統合できる。
Kinetic Typography では、文字以外のオブジェクトが画面上に配置されていることもある。例えば、オブジェクトの

[12]
[13]

周りに文字が流れるような効果が考えられる。このような動画制作をサポートするためにはデータ構造とユーザイン
タフェースの拡張が必要である。現実的には、Adobe After

[14]
[15]

Effects のような外部ツールにデータをエクスポートする仕組みを用意することで、文字情報のアニメーションだけ本[16]

ツールで制作し、その他は汎用ツールに任せるような役割分担が必要だろう。

[17]

7. おわりに
本稿で提案した TextAlive は、音楽に連動した歌詞のア[18]

ニメーションを半自動的に生成でき、直感的な GUI で編集可能なシステムである。研究上の貢献は、1) アニメーショ[19]

ンの初期パラメタを自動的に生成することで、既存ツールでは必要だったユーザの膨大な手作業を削減した点と 2)[20]

パラメタ調整用 GUI に対する実装支援を提供することで、ユーザがアニメーションを直感的かつ精密に編集しやすくした点である。今後は、本制作環境が既存の音楽関連コンテンツ制作・編集・鑑賞のエコシステムの中に馴染むよう拡張を行っていきたい。
謝辞

本研究の一部は JST CREST「OngaCREST プロジⓒ2014 Information Processing Society of Japan

[21]

[22]

Adobe After Effects, http://www.adobe.com/After Effects/.
Norman, D.A.: The Psychology of Everyday Things, Basic
Books, Inc., New York (1988).
Fujihara, H., Goto, M., Ogata, J. and Okuno H.:
LyricSynchronizer: Automatic Synchronization System Between
Musical Audio Signals and Lyrics, IEEE Journal of Selected
Topics in Signal Processing, Vol.5, No.6, pp.1252-1261 (2011).
Goto, M.: A Chorus-Section Detection Method for Musical Audio
Signals and Its Application to a Music Listening Station, IEEE
Transactions on Audio, Speech, and Language Processing, Vol.14,
No.5, pp.1783-1794 (2006).
Hartmann, B., Yu, L., Allison, A., Yang, Y. and Klemmer, S.:
Design As Exploration: Creating Interface Alternatives throughParallel Authoring and Runtime Tuning, Proc. of. UIST 2008,
pp.91-100.
McDirmid, S.: Usable Live Programming, Proc. of SPLASH
Onward! 2013, pp. 53-62.
Lee, J., Jun, S., Forlizzi, J. and Hudson, S.: Using Kinetic
Typography to Convey Emotion in Text-based InterpersonalCommunication, Proc. of DIS 2006, pp.41-49.
Chao, C. and Maeda, J.: Concrete Programming Paradigm for
Kinetic Typography, Proc. of IEEE VL 1997, pp.446-447.
Lee, C. J., Forlizzi, J. and Hudson, S.: The Kinetic Typography
Engine: Extensible System for Animating Expressive Text, Proc.
of UIST 2002, pp.81-90.
Forlizzi, J., Lee, J. and Hudson, S.: The Kinedit System: Affective
Messages Using Dynamic Texts, Proc. of CHI 2003, pp.377-384.
Jason, L.: Writing-Designing-Programming: The NextText
Project, Media-Space Journal: Special Issue on Futures of New
Media Art, Vol.1, No. 5, Media-Space Perth (2008).
Minakuchi, M. and Tanaka, K.: Automatic Kinetic Typography
Composer, Proc. of ACE 2005, pp.221-224.
Strapparava, C. and Valitutti, A.: Bringing the Text to Life
Automatically, Proc. of AAAI 2006 Workshop on Computational
Aesthetics.
aescripts: TypeMonkey. http://aescripts.com/typemonkey/
Davis, R. C., Colwell, B. and Landay, J. A.: K-Sketch: A ‘Kinetic’
Sketch Pad for Novice Animators, Proc. of CHI 2008, pp.413422.
Santosa, S., Chevalier, F., Balakrishnan, R. and Singh, K.: Direct
Space-Time Trajectory Control for Visual Media Editing, Proc. of
CHI 2013, pp.1149-1158.
Kazi, R. H., Chevalier, F., Grossman, T., Zhao, S. and
Fitzmaurice, G.; Draco: Bringing Life to Illustrations withKinetic Textures, Proc. of CHI 2014, pp.351-360.
Kato, J. and Igarashi, T.: VisionSketch: Integrated Support for
Example-Centric Programming of Image Processing
Applications, Proc. of GI 2014, pp.115-122.
Twigg, C. D. and James, D. L.: Many-Worlds Browsing forControl of Multibody Dynamics, ACM Trans. of SIGGRAPH
2007, Vol.26, No.3 (2007).
Ha, S., McCann, J., Liu, K. and Popovic, J.: Physics Storyboards,
Computer Graphics Forum (Proc. of Eurographics 2013), Vol.32,
No.2, pp.133-142 (2013).
Goto, M. and Ogata, J.: PodCastle: Recent Advances of a Spoken
Document Retrieval Service Improved by Anonymous User
Contributions, Proc. of Interspeech 2011, pp.3073-3076.
Rubin, S., Berthouzoz, F., Mysore, G. J., Li W. and Agrawala, M.:
Content-Based Tools for Editing Audio Stories, Proc. of UIST
2013, pp.113-122.

7