無料の動画部品で日本語の縦書き歌詞を動かしてみた【実測記録】
note.comでも読む
縦書きの日本語で歌詞を動かしたい。そう思って調べると、出てくる作例はほぼ英語です。真似しても自分の言葉が入りません。「日本語でもできるはずなのに、どうすれば」という宙ぶらりんな感覚、ありませんか。
HyperFramesというHTMLで動画を作るツールに、再利用できる「部品カタログ」があります。2026年8月23日に実際にさわって、日本語の縦書き歌詞が動くかどうかを検証しました。この記事は、そのときの実測記録です。うまくいったことだけでなく、詰まった場所も全部書いています。
調べても英語の作例しか出てこない、あの焦り
縦書きの日本語で歌詞を動かしたい。でも調べて出てくるのは英語の作例ばかりで、そのまま真似しても自分の言葉が入りません。
「縦書き 歌詞 アニメーション」で検索すると、英字のタイポグラフィ作例がずらりと並びます。カッコいいのはわかる。でも「サヨナラ」も「夜が明ける」も、あのフレームには入る気がしない。
英語圏で作られたものを無理に借りようとするほど、「自分の作りたいものと遠い」という感覚が膨らんでいきます。専用ツールを使えばすぐできると言う人もいます。でも、少し細かい動きを作ろうとした途端に手が止まる。そういう声も同じくらい聞こえてきます。
私自身も、見よう見まねで一度作ってみました。再生したら、頭の中にあった画と別物でした。あの瞬間、正直、心が折れかけました。
372個あるのに、使っていたのは2個だった
専用ツールなら簡単、という声はあります。でも少し細かい動きを作ろうとした途端に手が止まる、という声も同じくらいあります。私の場合、手が止まっていた理由は別のところにありました。
HyperFramesには、コマンドで一覧を引ける部品カタログがあります。試しに引いてみたら、全部で372個（block 154個・component 218個）ありました。
私がそれまで実際に取り込んでいた部品は、2個だけでした。
372個あることを知らないまま、毎回ゼロから作らせていたことになります。カタログの存在を知るだけで、できることの地図が変わります。
今回試したのは、その中にある「歌詞のタイポグラフィ」に関する部品群です。文字を1文字ずつ散らして着地させる、カラオケのように色が変わる、文字の太さが波のように走る、カメラが引きながら文字が積み上がる、文字をテクスチャで抜く、といった部品が全部で52個ありました。
実際に日本語を流し込んで動かすと、こうなります。
日本語は通った。縦書きは2箇所直した
見よう見まねで作ってみて、再生したら頭の中にあった画と別物でした。あの瞬間、心が折れかけました。
まず試したのは「日本語の文字列をそのまま渡すとどうなるか」です。
結果その1｜日本語はそのまま動いた
漢字・ひらがな・カタカナが1文字ずつ独立して散り、回転し、集まって着地しました。字形は崩れませんでした。英語圏で作られた部品が、日本語の字形をそのまま受け取ってくれた、という感覚です。
結果その2｜縦書きは「2箇所直す」必要があった
縦に文字を積むだけでは組版が壊れます。長音符「ー」が横棒のまま表示され、読点「、」が中央下に来てしまいます。CSSのwriting-modeを使うと、長音符は縦棒になり、読点は右上の正しい位置に来ました。
最初に「夜が明ける」で試したとき、この違いがわかりませんでした。長音符も句読点も含まれていなかったからです。「サヨナラ、ブルー」に変えて初めて、差がはっきりしました。
もう一つ、文字サイズの自動計算が横幅基準になっていたため、縦書きにすると文字が画面から溢れました。高さ基準に直して解決しました。
エラーは一度も出なかった。それが一番厄介だった
詰まった場面が何度もあります。ただ、エラーは一度も表示されませんでした。これが一番やっかいでした。
詰まりその1｜画面が真っ黒になった
検査コマンドは「エラー0件」と表示していました。原因は、部品を置く側と部品自身に同じ名前を付けていたことでした。最初は別の原因だと推測して直しましたが、直りませんでした。公式ドキュメントを読んで初めてわかりました。
詰まりその2｜文字の太さが波打つ部品が日本語で無反応だった
同梱フォントが英字用で、日本語が「太さを変えられないフォント」に落ちていました。部品のコメントに「静的フォントだと効果が消えるが、エラーは出ない」と書いてありました。英語で同じシーンを撮り比べて、初めて「元は動いている」とわかりました。
フォントの修正は3回失敗しました。CDNからフォントを読む方法では直りませんでした（配信側が太さ固定のフォントに変換していました）。CSSの書き方を間違えました。要素の名前まで変えてしまい、また真っ黒になりました。
詰まりその3｜テクスチャで文字を抜く部品
説明には6種類と書いてあるのに、5種類がファイル名不一致で読み込めませんでした。読み込めないと文字ごと消えて真っ黒になります。ここでもエラーは出ませんでした。
詰まりその4｜プレビューを起動したまま編集した
ファイルが書き換えられて設定が壊れました。今回の作業では、プレビューを止めてから編集する手順にしました。
フォントと見た目の話
今回使った日本語の可変フォント（太さを連続で変えられるフォント）は、中身が124個に分割されていて全部で7MBほどありました。記事に出す文字を見て必要な分だけ選ぶ仕組みを作ったら、10個・532KBで足りました。
見た目について、一つ気づきがありました。最初はゴシックで作っていたのですが、明朝に変えたら歌詞らしくなりました。ゴシックだと説明文のように見えていたのです。今回の作例では、フォントの「雰囲気」のほうが、動きよりも先に印象を決めていました。
最終的に39秒の動画を書き出しました。1920×1080・30fps・5.7MB。書き出しは33秒で終わりました。note用にシーンごとのGIFを6本作り、画面全体が動くシーンだけGIFが5.1MBまで膨らんだのでサイズを落として3.2MBにしています。
GIFが止まって見えるときの確認箇所（iPhoneとiPadをお使いの方へ）
この記事にはGIFを入れています。iPhoneやiPadで「設定→アクセシビリティ→動作→アニメーション画像を自動再生」がオフになっていると、GIFが静止画として表示されます。同じ「動作」の中にある「視差効果を減らす」も、環境によっては影響する場合があります。動きが見えないときは、この2箇所を確認してみてください。
After Effectsの代わりではなく、選択肢が増えた話
今回やったのは「部品が日本語で動くかどうかの検証」です。音に同期した完成MVを作ったわけではありません。その点は正直に書いておきます。完成品を早く作ることが目的なら、今回とは別の方法も検討対象になります。
After Effectsのような専門ツールには、長年かけて積み上げられた機能と信頼があります。それが不要になるとか、代わりになるとか、そういう話ではありません。
「AEじゃなくても、このくらいの動きは作れる」という選択肢が増えた、という話です。専用ソフトを持っていなくても、縦書きの日本語歌詞を動かす部品は存在していました。詰まる場面も多かったですが、手を動かした分だけ、できることの輪郭がはっきりしました。
今回の作業に関して言えば、完璧に仕上げてから動くより、動きながら直したほうが早く着きました。
まとめ
今回わかったことを整理します。
HyperFramesのカタログには372個の部品があり、歌詞のタイポグラフィ系だけで52個ありました。日本語はそのまま通りました。縦書きはwriting-modeの適用とサイズ計算の基準変更の2箇所を直せば動きました。詰まった原因は毎回「エラーなし」で表示されたため、ドキュメントと見比べて地道に探すしかありませんでした。フォントは可変フォントを使い、ゴシックより明朝の方が歌詞らしく見えました。
「調べても英語の作例しか出てこない」という状況から始めて、日本語の縦書き歌詞が実際に動くところまで確認できました。失敗の数もそのまま書きましたが、これが次に試す人の時間を少しでも縮めれば、書いた意味があります。
同じところでつまずいた方がいたら、コメントで教えてください。次に書くことのヒントになります。続きも書く予定なので、よければフォローしてください。
直し方の部分は後から見返すことが多いので、保存しておくと次に試すとき楽です。