JSONと手元の画像だけで、右から左へ流れるランキング動画を作ります
「おすすめ10選」のように、順位と写真と短い説明が並ぶ内容を動画にしたいときに向いています。カードが横に流れていくだけの単純な構成なので、編集ソフトを開かずに作れます。
推奨する形式は meta / video / style / display / items を持つオブジェクト形式です。従来のカード配列だけのJSONも引き続き読み込めます。JSONの中に video / style / display があるときは、その値を画面の設定へ反映してから描画します。
「長さの決め方」で、どちらから決めるかを選べます。どちらを選んでも、決まらなかった側の数値は自動で計算されて入力欄に表示されるので、いま何秒・何px/秒になっているかは常に画面で確認できます。
| 決め方 | 入力する値 | 自動で決まる値 | 向いている場面 |
|---|---|---|---|
| 速度から決める | 速度（px/秒） | 動画の長さ | 流れる速さの見え方を優先したいとき |
| 長さを秒で指定する | 動画の長さ（秒） | 速度（px/秒） | 尺が決まっているとき（BGMに合わせる・30秒の広告枠に収める・他の素材と並べる） |
計算式は両方向とも同じです。移動距離＝動画の横幅＋カード全体の横幅（枚数×カード幅＋間隔）、移動時間＝移動距離÷速度、動画の長さ＝開始待機＋移動時間＋終了待機。指定した長さには開始待機と終了待機が含まれますので、15秒と指定すれば書き出される動画は15秒です。
長さを指定する場合、開始待機と終了待機を引いた残りが移動に使える時間になります。この残りが0.2秒を下回る指定はそのままでは成立しないため、成立する最短の長さまで引き上げたうえで画面に警告を表示します。黙って別の長さで書き出すことはありません。長さを短くしたいのに引き上げられるときは、開始待機・終了待機を減らしてください。
画面下の3つの数字（カード枚数・動画時間・移動距離）で、設定を変えた結果をその場で確認できます。
| 動画サイズ | 比率 | 主な用途 |
|---|---|---|
| 1280×720 | 16:9 | 軽く試すとき |
| 1920×1080 | 16:9 | 通常の横型動画 |
| 1080×1920 | 9:16 | ショート動画・縦型のSNS投稿 |
| 720×1280 | 9:16 | 縦型を軽く出したいとき |
順位帯・説明文・枠線・アクセント線は、それぞれ表示を切り替えられます。写真だけを並べたいときは説明文と順位帯を消し、画像領域を100%に近づけてください。逆に文字を読ませたいときはカード高さを増やし、画像領域の割合を下げます。アクセント色はカードごとに JSON の accent で個別指定できます。
画像の収まり方は fit（cover / contain）と position（例 50% 50%）で調整できます。顔が切れるときは position を上寄りにしてください。
カードが右から左へ流れていくランキング動画です。1枚のカードに順位・画像・説明文が入ります。JSONの並び順を反転するボタンがあるので、下位から上位へ流すことも、その逆もできます。
アップロードは不要です。「画像を追加」からローカルの画像を選ぶか、ドロップしてください。JSONの image にはファイル名だけを書きます。読み込んだ画像はお使いのブラウザ内でのみ使われます。
決め方を2通りから選べます。「速度から決める」ではカードの枚数・横幅・間隔と流れる速度（px/秒）から長さが決まり、そこへ開始待機と終了待機が加わります。「長さを秒で指定する」では逆に、指定した秒数に収まるよう速度が自動で逆算されます。現在の枚数・動画時間・移動距離は画面に表示されます。
作れます。「長さの決め方」を「長さを秒で指定する」にして、動画の長さに30と入力してください。カードが全部流れきる速度が自動で計算されます。指定した長さには開始待機と終了待機も含まれるので、書き出される動画がちょうど30秒になります。
開始待機と終了待機を引いた残りが0.2秒未満になる指定は、カードが流れる時間が残らないため成立しません。この場合は成立する最短の長さまで引き上げ、その旨を画面に警告として表示します。開始待機・終了待機を小さくすると、より短い指定が通るようになります。
いいえ。JSONの解釈も、画像の読み込みも、動画の書き出しも、すべてお使いのブラウザ内で完結します。外部への通信は行いません。