変革につながるアイデアは、きっと研究の最前線にある。日本最大級の公的研究機関・産総研の公式ウェブマガジン。

インタラクティブな歌詞駆動型視覚表現「リリックアプリ」を可能にする開発用フレームワーク

インタラクティブな歌詞駆動型視覚表現「リリックアプリ」を可能にする開発用フレームワーク

2026/08/19

インタラクティブな歌詞駆動型視覚表現「リリックアプリ」を可能にする開発用フレームワーク

研究者の写真
    KeyPoint 音楽に合わせて歌詞が魅力的に動くリリックビデオ。ただし、誰がいつ見ても同じ内容です。その常識を一歩進め、楽曲を聴くたび・画面に触れるたびに新しい表現が生まれて、創造的な演出を体験できる「リリックアプリ」の世界を切り拓いたのが、人間情報インタラクション研究部門の加藤淳上級主任研究員と後藤真孝上級首席研究員です。開発したリリックアプリ開発用フレームワーク「TextAlive App API」は、歌詞タイミングの自動解析から音楽の再生制御、ウェブでの配信までを一つにつないだ新しい基盤。プログラマーは使い慣れたライブラリで自由に開発でき、ミュージシャンは自分の曲のURLを指定するだけでその曲のリリックアプリをインターネットで公開できます。

    研究の背景:「見る」から「触れる」へ、新たな音楽体験を生み出せる仕組みを提供

     ストリーミングとSNSが音楽の届け方を変え、スマートフォンのアプリで新しい体験が得られる時代。音楽の歌詞の見せ方も、一方向的で静的なリリックビデオとは違って、リスナーであるユーザーがアプリ画面をタッチ操作すると毎回違う体験を得られるようなインタラクティブな歌詞表現を切り拓くことを目指して、産総研はリリックアプリ*1を提唱しました。しかし、楽曲とその歌詞を連動させた魅力的な演出を設計し、配信まで視野に入れてアプリを作るのは、熟練のプログラマーであっても容易ではありません。

     リリックアプリ開発の壁は三つありました。第一に、楽曲を解析して歌詞のタイミングやビート、サビなどの多様な情報を用意して楽曲の再生に合わせて利用できるようにする負担。第二に、そうした情報やユーザーの入力に反応するインタラクションを、クリエイティブ・コーディングの流儀と矛盾なく実装する難しさ。第三に、作ったアプリをスマートフォンやPCへ広く配信する運用面の課題です。こうした一連の「解析・実装・配信」を容易にするために、ウェブ標準を土台にしたフレームワークを設計。プログラマー・ミュージシャン・リスナーが新しい音楽体験を共創できる基盤を目指しました。

    得られた成果:解析・実装・配信を「つなぐ」——リリックアプリを手軽に作り、届けられる

     研究開発した「TextAlive App API」の中心となる考え方は、プログラマーやミュージシャンが「解析・実装・配信」に対応する三つの仕組みを手軽に扱えるようにすることです。(1)歌詞のタイミングなどを自動で解析し、必要に応じてウェブブラウザーのインタフェース上で誤りを訂正できる仕組み、(2)楽曲の再生に合わせた演出をプログラマーが自在に設計して実装できる仕組み、(3)作ったリリックアプリの作品をそのままウェブサイトとして配信し、ミュージシャンなどが後から楽曲や見た目を簡単に変えられる仕組みです。

     まず解析に関する仕組みでは、楽曲とその歌詞を登録すると、歌詞の文字ごとの発声タイミングや、ビート、サビの位置などの時刻情報を自動で推定します。結果はブラウザー上で確認でき、誤っていたら訂正することも可能です。さらに、解析や訂正がバージョン管理されているため、訂正された正しい状態の時刻情報を指定し、それを確実に用いたリリックアプリの開発ができます。

     次に楽曲を再生するアプリの動きを制御する仕組みです。一般的に用いられることが多い特定の合図(歌詞の文字やビートのタイミング)が来るのを待って、その演出を始める方式(イベント駆動型)ではなく、画面を描き直すタイミングごとに「今、どの合図が来ているところか」をアプリが能動的に取りに行き、常に適切な内容を表示できるように時刻精度を上げた方式(時刻駆動型・時区間駆動型)を考案しています。これにより、例えば「間もなく次の歌詞が発声されるから先にその文字を動かしておく」「歌詞とビートの両方にぴったり合った映像を表示する」といった細かな制御がしやすくなります。プログラマーが画面演出を開発する目的で普段使っている p5.js や Three.js、PixiJS、React などのライブラリと自由に組み合わせて開発でき、新たに特殊なノウハウを覚える必要もありません。

     三つ目はインターネットを使った配信の仕組みです。作ったアプリをそのままウェブサイトとして公開できるため、ユーザーはリリックアプリを体験するために何かをインストールする必要がなく、スマートフォンでも PC でもウェブブラウザーですぐにアプリを動かせます。また、再生する楽曲を指定したり、演出内容を手軽にカスタマイズしたりする仕組みも用意しているので、ミュージシャン自身が、自作曲のプロモーション用途でリリックアプリを自分好みにカスタマイズして公開できます。リリックアプリの開発(プログラマー)、カスタマイズ(ミュージシャン)、インタラクティブな音楽体験(リスナー)を一つのフレームワークですべて実現できる点が特長です。

    今後の展望:歌詞×ウェブ×インタラクションの基盤で文化と産業に貢献

     「TextAlive App API」を一般公開した2020年以降、バーチャルシンガーの人気キャラクター「初音ミク」の年次イベント「マジカルミライ」の一環として、プログラミング・コンテストが毎年実施されています。最初の2年間の応募作品 52件の内容を分析したところ、楽曲が持つ世界観の仮想空間に歌詞が浮かぶ拡張現実アプリ、画面をタップして遊べるゲーム、歌詞を直接つかんで楽曲の再生位置を変えられるインタラクティブなリリックアプリなど、8種類の形態を発見できました。プログラマーの方々の手によって、「聴く」「作る」「触れる」を楽しめる新しい音楽体験が数多く生まれたことが実証されました。

     その後も、2026年時点でプログラミング・コンテストは7回目を数え、プログラマーの実装パターン分析から得た知見を踏まえたフレームワークの拡張を行うなど、研究開発を継続してきました。これからも、クリエイティブなみなさまとの取り組みを続けながら、教育目的の応用や、さらなる企業連携なども視野に入れ、文化と産業の両面で「リリックアプリ」という新たな表現メディアの可能性を追求します。簡単で速いコンテンツ制作・発信手段が普及してきた今こそ、新たな表現とそれを可能とする技術をコミュニティーと共に着実に育てていく人間中心のインタラクション研究の意義は大きい——私たちは、そのためのエンターテイメント・デジタル技術を、学術と現場を往復しながら創出していきます。


    トップ画像の背景に表示されている画像は、『初音ミク「マジカルミライ」』プログラミング・コンテスト応募作品(Ⓒ CFM)

    *1: 見なよ…25 年にわたる研究の軌跡を…産総研つくば&郡山の現場から生配信!
      【ナゾロジー×産総研マガジン未解明のナゾに挑む研究者たち】「初音ミクも研究対象!未来の音楽体験を作る研究」[参照元へ戻る]

    Jun Kato, Masataka Goto
    Lyric App Framework: A Web‑based Framework for Developing Interactive Lyric‑driven Musical Applications
    Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems (CHI ’23), 2023.
    DOI: 10.1145/3544548.3580931

    加藤 淳, 後藤 真孝
    インタラクティブな歌詞駆動型視覚表現「リリックアプリ」開発用フレームワークの提案と実証研究
    情報処理学会論文誌 66巻2号, p.273-285, 2025.
    DOI: 10.20729/0002000020

    創作の輪に参加できるプログラミング・コンテスト開催決定! 楽曲のリリックアプリを大募集!

    人間情報インタラクション研究部門
    メディアインタラクション研究グループ
    上級主任研究員

    加藤 淳

    KATO Jun

    加藤 淳上級主任研究員の写真

    情報・人間工学領域
    上級首席研究員

    後藤 真孝

    GOTO Masataka

    後藤 真孝上級首席研究員の写真
    産総研
    情報・人間工学領域
    人間情報インタラクション研究部門

    この記事へのリアクション

    •  

    •  

    •  

    この記事をシェア

    • Xでシェア
    • facebookでシェア
    • LINEでシェア

    掲載記事・産総研との連携・紹介技術・研究成果などにご興味をお持ちの方へ

    産総研マガジンでご紹介している事例や成果、トピックスは、産総研で行われている研究や連携成果の一部です。
    掲載記事に関するお問い合わせのほか、産総研の研究内容・技術サポート・連携・コラボレーションなどに興味をお持ちの方は、
    お問い合わせフォームよりお気軽にご連絡ください。

    Copyright © National Institute of Advanced Industrial Science and Technology (AIST)
    (Japan Corporate Number 7010005005425). All rights reserved.