記事のタイトルを渡すだけで、紹介動画が出てくるようにした

• 中身をコードに書き込むと、1本ごとに作り直しになる
• 外から渡す形にすれば、データを変えるだけで別の動画になる
• 枚数で長さが変わるので、長さも計算で出す

新着記事の紹介動画を毎週作るとして、毎回コードを書き換えるのは続かない。タイトルと日付を渡すだけで出るようにした。

最初は中身を直接書いていた

1本目はコードの中にタイトルを書いた。動くものはすぐできたが、2本目を作ろうとして手が止まった。タイトルを探して3か所書き換える作業が発生したからだ。

これを毎週やるくらいなら、手で編集ソフトを触ったほうが速い。自動化のつもりが手間を増やしていた。

渡す形にする

カードの中身を配列にして、外から渡すようにした。

cards: [
  { category: "AIコーディング", title: "...", date: "2026.10.02" },
  { category: "画像・動画生成AI", title: "...", date: "2026.10.03" },
]

見た目を決めるコードと、中身のデータが分かれた。来週は配列を差し替えるだけでよい。

長さも計算で出す

ここで引っかかった。カードが3枚なら5.4秒だが、5枚にすると9秒要る。動画の長さを固定していると、4枚目以降が切れる。

1枚あたりの秒数を決めて、枚数を掛けて全体の長さを出すようにした。こうすると枚数が変わっても最後まで出る。手で作っていたら必ず忘れるところだ。

記事の情報はどこから持ってくるか

いまは手で貼っているが、仕組みとしてはWordPressのAPIから直接取れる。

• 新着3本のタイトル・カテゴリ・日付を取得する
• そのまま配列として渡す
• 書き出して出来上がり

ただしここは慎重にしている。人が一度も見ないまま動画が出来上がる仕組みは、間違いもそのまま出る。いまは配列を目で確認してから書き出している。

1枚あたりの秒数をどう決めたか

最初は1枚1.2秒にしていた。自分では読めるが、他人に見せたら全員が「速い」と言った。

作っている側は中身を知っているので読めてしまう。初めて見る人は、文字が出てから読み始める。出る動きに0.55秒使っているので、実際に読める時間は1.2秒のうち0.65秒しかなかった。

1.8秒に伸ばして落ち着いた。タイトルが長い記事ではまだ短いので、文字数で秒数を変えることも試したが、切り替わりの間隔がばらついて落ち着かなかった。いまは全部1.8秒で固定し、長すぎるタイトルは動画に載せない方針にしている。

カテゴリの色分けはやめた

カテゴリごとに色を変えると、見分けはつく。しかし7カテゴリぶんの色を決めると、どれも同じくらい目立って画面が散らかった。

いまは全部同じ黄色の札にしている。見分けが必要なのは一覧のときで、1枚ずつ出す動画では要らない。動画と一覧で、必要な情報は違う。

デザインは1か所だけ凝った

カードの影を、ぼかさずに黒いまま右下にずらしている。サイトのカードと同じ処理だ。

動画だけ別のデザインにすると、同じ発信元に見えない。色と影の付け方をサイトから持ってくるだけで、見た人が結び付けてくれる。凝るところを1つに絞ると、作る時間も短くて済む。

切り替えで気をつけたこと

カードが消えるときだけ、出るときより速くしている。

出るのは0.55秒、消えるのは0.27秒。同じ速さにすると、次のカードが出るまでの間が空いて間延びする。去り際は早いほうが気持ちよいのは、画面の中でも同じだった。

まとめ

1本作るだけなら、どんな書き方でも動く。2本目を作るときに手が止まるかどうかで、その作り方が使えるか分かる。中身を外に出す、長さを計算で出す。この2つをやっておくだけで、同じ型の量産が現実的になった。