手描きホワイトボード動画：ナレーションが進むにつれて、ペンもその通りに描いていく

67秒のホワイトボード動画：画面上では、誰かがペンを手に取りながら話して描いている様子が映し出され、ナレーションが進むにつれてペンがそれに合わせて描いていく。 起点はSimon聊AIの一本の記事だった。私はただ「これがどうやって実現できたのか調べて」と投げかけ、「うちのIndexTTSを使って、私の声でもできる？」と聞いただけで、AIはその記事の通りにこの動画を作ってくれた。 どのように行うのか、誰がやったのか Claude Codeは原作の文章を読み、ナレーションを書き、各段落で何を描くかも記述する。これら2つの内容は同じファイルに記述されている。 ナレーションは12の短いセグメントに分割され、各セグメントには描くべき対象が1組ずつ割り当てられており、作品全体で計72個となる。 Codexがキャラクターの小さな画像を描く。まず4コマを1枚に描き、それを4枚の画像に切り分ける ナレーションは私の声。自宅にある別のGPU搭載PCでIndexTTS 2を動かし、私の声を再現する プログラムが各フレームを描画し、それらを動画としてつなぎ合わせ、さらに字幕を合成する ペンがナレーションにどう追いつくのか 先にナレーションを読み上げ、それから描く。各ナレーションをまず読み上げ、実際に何秒かかったかを計測する その時間帯に組み込む。この部分で描くべきものは、このナレーションの間に描いていく。線が長ければ長いほど描くのに時間がかかり、文字は一文字ずつ書いていく。 描き終わらないなら、時間を借りればいい。次の段落の冒頭から少し時間を借りる。それでも足りなければ、段落全体を速く描く。最大で3倍速。 指定した秒数に合わせて1フレームずつ描く。撮影時、プログラムは「今は何秒目か」を見て、その時点で描かれているべきところまで描く。ペン先も線の先端に置く 字幕にも同じタイミングを使う。字幕には原稿の文を使い、表示時間はナレーションに合わせる つまり、映像と音声がぴったり合っているのは、後から編集したのではなく、最初からナレーションのタイミングに合わせて調整されていたからです。 画面はどうやって動くの？ 線はウェブ上のベクター線（SVG）です。1フレームごとに、プログラムが各線をどれだけ露出させるかを計算します。1フレームごとに「現在何秒か」しか見ないため、ブラウザを4つ同時に開いて手分けして描画することができ、67秒の動画が21秒で描き終わります。 原作のタイトルには Codex + Excalidraw と書いてある。実際に線を引いているのは rough.js、画面を撮影しているのは Playwright、動画をつなげているのは ffmpeg、そしてキャラクターのミニ画像を担当しているのは Codex だ。 つまずいた箇所 問題：AIが自分で映像からフレームを抜き出して確認し、ナレーションはもう3段落目なのに、3つ目の画面はまだ描き始めてもいないと気づいた。 理由：1つの段落に描くべきものが多すぎて、最も多い段落では25個もあり、描ききれない。 解決策：筆の運びを少し速くし、詰め込みすぎた段落を分割し、斜線の塗りつぶしを全面塗りつぶしに変更した。最も遅かった箇所は、2.7秒の遅れから2.4秒に短縮された。作品全体では最後に約2.5秒の遅れが残っていたが、それ以上は修正しなかった。 AIはどこまでできるのか できる 画面の遅延に気づき、各区間の遅延時間を秒単位で計測する小さなツールを作った 原稿読み上げツールを切り替えても、イラストや字幕のソフトは一行も変更する必要がありません 音声認識でナレーションを文字起こしして原稿と照合したところ、20文すべて一致した まだ誰かの助けが必要だ 自動チェックはすべて合格でした。各文の冒頭と末尾の「カッ」という音は、私が耳で聞き取ったものです。 最初は原因を間違えて推測していたが、私が2回目に雑音があると言ったところ、ようやく見つけた 「講對比」が「將對比」と読まれたのを、読み間違いとして検出できない この方法は「Simon聊AI」からのものです。〈Codex + Excalidrawで一言から動画を作る〉、そして彼がオープンソース化した whiteboard-video 2026年9月27日