ブラウザでリリックビデオを作る方法【完全ガイド】
LyricsFlow MVMaker(リリックフローMVメーカー)は、ブラウザだけで動く無料のリリックビデオ制作ツールです。曲と歌詞のタイミングファイルを読み込むと、1行ずつ動く文字(キネティックタイポグラフィ)のMVになり、そのままパソコン上でMP4に書き出せます。このページでは、空のプロジェクトから動画ファイルが完成するまでの流れを順番に説明します。
用意するもの
- 音源ファイル — MP3・WAV・M4Aなど、ブラウザで再生できる形式。
- タイミング付きの歌詞 —
.srt(字幕ファイル)または.lrc(歌詞ファイル)。歌詞テキストしかない場合は SRT歌詞ファイルの作り方 を参考に作るか、手順3の自動文字起こしを使ってください。 - パソコンのブラウザ — 最新版のChromeまたはEdgeがおすすめです。スマホやタブレットでも開けますが、フルサイズの曲の書き出しはPCの方がずっと速く安定します。
手順1:画面の縦横比を選ぶ
エディタを開くと、最初にキャンバスの比率を選ぶ画面が出ます。あとからヘッダーの 16:9 / 9:16 / 1:1 ボタンでいつでも切り替えられます。
| 比率 | 向いている用途 | 書き出しサイズ |
|---|---|---|
| 16:9(横長) | YouTube、Webサイト、PCでの再生 | 1280×720、1920×1080 |
| 9:16(縦長) | TikTok、YouTubeショート、Instagramリール | 720×1280、1080×1920 |
| 1:1(正方形) | Instagramフィード、X(Twitter)、告知用 | 1080×1080 |
文字のレイアウトは比率ごとに自動で再計算されるので、タイミングを作り直さずに同じプロジェクトから3種類の動画を書き出せます。縦型動画で気をつけたい点は 縦型リリックビデオの作り方 にまとめています。
手順2:曲と歌詞を読み込む
- 🎵 楽曲読込 をクリックして曲を選びます。タイムラインに波形と曲の長さが表示されます。
- 📄 字幕/LRC読込 をクリックして歌詞ファイルを選びます。字幕の1ブロックが、タイムライン上の1つの「フレーズ」になります。
- ▶ で再生すると、プレビュー画面で歌詞が曲に合わせて出たり消えたりします。
まずは雰囲気を見たいという場合は、✨ デモデータ読込 や 💎 トパーズ色の夏空 デモ で音源付きのサンプルプロジェクトを開けます。自分のファイルを用意する前に、エフェクトの動きを確認できます。
手順3:(任意)SRTを自動で作る
タイミング付きの歌詞がない場合は、自動文字起こしパネルを使います。歌声からSRTを作る方法は3つあります。
- Groq Whisper API — 非常に高速で、無料枠があります。ご自身のAPIキーを入力して使います。
- OpenAI Whisper-1 API — ご自身のOpenAIキーで従量課金。
- ブラウザ内Whisper(Tiny / Base) — キー不要・無料。初回に約75〜140MBのモデルをブラウザにダウンロードし、ご自身のPC上で処理します。
結果はSRTのプレビューとして表示され、そのままタイムラインに適用することも、ファイルとして保存することもできます。歌声の認識は完璧ではないので、必ず一度通して再生し、誤字やタイミングを直してください。詳しくは Whisperで歌詞字幕を自動生成する方法 で解説しています。
手順4:フレーズ調整パネルで編集する
タイムライン上のフレーズをクリックすると、右側の ⚙️ フレーズ調整 パネルで細かく設定できます。
- テキスト — 誤字の修正、改行の追加、強調したい語の分割など。
- 開始・終了時間 — 秒数を直接入力するか、±0.5秒のボタンで前後のフレーズと重ねられます。
- レーン — 上段・下段の2レーンがあり、掛け合いやコーラスなど2行を同時に表示できます。
- INモーション・OUTモーション — 登場と退場のアニメーション。
- アニメーション速度、フォント、文字サイズ、文字色、グロー色、表示位置、書字方向 — 日本語の縦書きにも対応しています。
スタイルクイックプリセット を使えばワンクリックで統一感のある見た目になり、気に入った設定は 「+ 現在の設定をお気に入り保存」で ⭐お気に入り設定 タブに保存して他の曲でも使い回せます。
手順5:文字アニメーションを付ける
🎨エフェクト タブには、登場(IN)と退場(OUT)のアニメーションが並んでいます。カードをフレーズにドラッグするか、フレーズを選んでフレーズ調整パネルからモーションを選びます。各エフェクトの動きは エフェクト一覧 で確認できます。
手早く下書きを作るなら、🎲 全フレーズにランダム適用 が便利です。全フレーズにIN/OUTモーションとスタイルをランダムに割り当てます。全体の雰囲気が気に入るまで何度か押し、そのあとサビの頭や曲名など大事な行だけ手で調整するのがおすすめです。📏 文字サイズを一括適用 で、ランダム後の文字サイズを揃えられます。
テンポやジャンルに合わせたモーションの選び方は リリックビデオを良くする文字アニメーションのコツ を参考にしてください。
手順6:背景を選ぶ
🌌背景パターン タブでは、3Dワイヤートンネル、シンセウェーブ、音波スペクトラム、デジタルコード雨、雨滴ローファイ、月夜の桜吹雪、ハロウィン・クリスマスの季節テーマなど、リアルタイムに描画されるアニメーション背景を選べます。文字を主役にしたい場合は、プレビュー下のバーからシンプルな黒背景も選べます。動画ファイルを背景トラックとして使うこともできます。
手順7:タイムラインを保存する
💾 タイムライン保存 で、歌詞・タイミング・エフェクト設定をまとめたJSONファイルをダウンロードできます。続きを編集するときは 📂 タイムライン読込 で復元します。音源ファイルはJSONに含まれないので、曲のファイルも一緒に保管しておいてください。
手順8:MP4を書き出す
🎬 動画エクスポート を押して、次の項目を選びます。
- 解像度 — 720p/1080p(横・縦)、または1080×1080の正方形。
- フレームレート — 30fpsは軽くて速く、60fpsは速い動きがなめらかになります。
- ビットレート — 3Mbps(標準)、6Mbps(高画質)、12Mbps(最高画質)。YouTube向けなら1080pで6〜12Mbpsにすると、再圧縮後もグローや粒子がきれいに残ります。
動画はffmpeg.wasmを使って、ブラウザ内でH.264映像+AAC音声のMP4にエンコードされます。完了するまでタブを開いたまま、前面に表示しておいてください。書き出した動画の右下には小さなロゴが入りますが、動画編集ソフトでトリミングしたり隠したりしてかまいません。
うまくいかないとき
書き出しが遅い・止まる
エンコードはPCのCPUとメモリを使います。重いタブやアプリを閉じ、30fpsや720pを試してください。タブを最小化したり裏に回したりすると、ブラウザが処理を遅くすることがあります。
歌詞がずれる
SRTが同じバージョンの音源で作られているか確認してください(シングル版とアルバム版でイントロの長さが違うことがよくあります)。個別のフレーズはフレーズ調整パネルで調整できます。
文字が表示されない
装飾系のフォントには英字しか含まれないものがあります。フォント設定で日本語対応のフォントを選んでください。
その他の質問は よくある質問 にまとめています。
さっそくリリックビデオを作ってみませんか? ブラウザだけで動作し、無料・登録不要です。
⚡ エディタを開く