01Vectimoとは
SVGを「紙芝居のシーン」として並べ、それぞれに動きをつけて1本の動画に書き出すツールです。
デザインツール(Illustrator・Figmaなど)で作ったSVGをそのまま読み込み、パーツごとにアニメーションを設定できます。写真(PNG・JPG)も1シーンとして読み込め、ズームやパンで動かして思い出のスライドショーづくりにも使えます。写真の差し替え、テロップ、BGMやナレーション、シーン間の切り替え効果まで、動画づくりに必要な要素がひと通りそろっています。Instagram Reelsのような縦型(9:16)から正方形・横型まで対応します。
02画面の構成
画面は大きく分けて「上部バー・左・中央・右・下段」の5つです。
⤢ で拡大編集モーダルを開けます⤢ で拡大編集モーダルを使うと作業しやすくなります。03クイックスタート
まず全体像。3分で1本作る最短ルートです。
- 素材を追加 — 「+ 素材を追加」またはシーンストリップにドラッグ&ドロップ(SVG・写真)。テンプレートから始めることもできます(最初の画面で「セール告知」「新商品紹介」「思い出スライドショー」を選ぶだけ)
- プリセットを適用 — 「全シーンに適用」で一括。まず雰囲気を決める
- ▶ 全再生 で通して確認
- MP4書き出し — 比率とfpsを選んで書き出し
細かい調整(テキスト差し替え・写真・テロップ・音)は次章以降で。
04基本の流れ(7ステップ)
実際の制作でおすすめの順番です。
素材を読み込む(SVG・写真)
「+ 素材を追加」から複数選択、またはシーンストリップにドロップ。SVGのほか写真(PNG・JPG・WebP)も読み込めます。ファイル名順に並び、ドラッグで並べ替え、複製・削除も可能です。写真は読み込むと自動でゆっくりズーム(Ken Burns)が付き、それらしい動きになります。
プリセットで動きの土台を作る
中央下の選択メニューからプリセットを選び「全シーンに適用」。8種類の中から近いものを当てて、あとで個別調整するのが速いです。
パーツごとにアニメを微調整
左のパーツ一覧か、プレビューで直接クリックしてパーツを選択。右カラムでアニメの種類・時間・遅延・イージング・退場を設定します。写真パーツは「パーツ全体の動き」と「画像だけの動き(枠内でズーム等)」を別々に設定できます。
テロップを乗せる
左「テロップ」→「+ テロップを追加」。プレビュー上でドラッグして位置決め(中央に寄せると赤い中心ガイドが出て吸着)。フォント・縁取り/帯・登場アニメを設定します。
音を付けて“音ハメ”する
BGMは動画全体に。ナレーションや効果音は左「音声」からシーンごとに(複数OK)。タイムラインに波形が出るので、ビートや声に合わせてテロップ・アニメのバーを合わせられます。
全再生 → MP4書き出し
▶ 全再生で通し確認(再生中もシークバーで移動、Escで閉じる)。問題なければ MP4書き出し。比率(元サイズ/1:1/9:16/16:9)とfps(24/30)を選んで書き出します。
05CSVで文字をまとめて差し替え
同じレイアウトで文字だけ違う動画を量産するときに便利です。
- SVGを読み込んだ状態で☰ メニュー →「CSVテンプレを書き出し」を選ぶと、そのプロジェクト専用のCSVがダウンロードされます(列:シーン番号/シーン名/パーツID/パーツ名/行/現在のテキスト/新しいテキスト)。
- Excel等で「新しいテキスト」列に記入。変えない項目は空欄のままでOK(元のテキストが残ります)。
- ☰ メニュー →「CSVを取り込み」でアップすると、記入した項目だけが一括反映されます。
06画像・動画の一括割当
全シーンぶんの写真・動画を一度に読み込み、どのパーツに入れるか手で指定します。
- シーンストリップの「メディア一括割当」を開く。
- 画像・動画ファイルをドロップ(またはクリックで選択、複数可)。画像・動画以外はアラートでスキップされます。
- 各ファイルのプルダウンで割当先を選択。「シーン2「N2_○○」/ photo_main」のように、どのシーンのどのパーツかが分かる表記です。
- 「適用」で一括反映。画像は枠に合わせて中央トリミング、動画は各パーツの
尺・位置ボタンで後から調整できます。
07アニメーション(全28種)
パーツごとに設定します。写真は「画像だけの動き」も別に指定可能。
登場・単発
強調・ループ(ずっと繰り返す動き)
写真向き(パン・ズーム)
テキスト向き
軌道(パスに沿って動く)
要素が決まった軌道を辿って動きます。「弧を描いて着地」「跳ねながら」などは最後に正しい位置へ収まるので登場演出に、「円を一周」「らせん」はアクセントに向きます。動く幅は「距離」の値で調整できます。
動きの使い回し(コピー・カスタムプリセット)
作り込んだ動きは再利用できます。パーツを選択すると、右パネルのパーツ設定内に次のボタンが並びます。
- 動きをコピー → 別パーツを選んで 貼り付け:その場で複製。
- 保存:名前を付けてカスタムプリセットとして保存。右パネルに一覧で並び、他パーツや別シーンにワンクリックで適用できます(×で削除)。プロジェクト保存(JSON)にも含まれます。
コピーされるのは「動きの性質」(種類・時間・遅延・イージング・退場など)だけで、位置やレイヤー順は移らないので、レイアウトの違うパーツ同士でも安全に使えます。
動きをホバーで確認
右パネルの「動きの種類」プルダウンの下にプレビュー用のマスが並びます。マウスを乗せると小さな四角がその動きで動いて見え、クリックで適用できます。名前だけでは分かりにくい動きも、見て選べます。
図形・帯・アイコンを足す
左カラムの「図形・テキストを追加」(クリックで開閉するメニュー)から、文字・四角・角丸・丸・帯(座布団)・三角・星・矢印・吹き出しを、いま選んでいるシーンにパーツとして追加できます。文字パーツはテロップと違いパーツ扱いなので、レイヤー順の変更や全種類のアニメ(軌道・タイプライター等)が使えます。内容は右パネルの「テキスト編集」から書き換えられます。色を選んでからボタンを押すと中央に追加され、以降は通常のパーツと同じ——ドラッグ移動・サイズ変更・アニメ設定・レイヤー順・色変更——がすべて使えます。追加した図形を選ぶと、右パネルで図形の種類をあとから変更(丸→四角など)でき、色や位置は保たれます。塗りは単色のほかグラデーション(2色+角度)も選べます。テキストの下に帯を敷く、キャッチに星や矢印を添える、といった装飾に便利です。
08プリセット(8種)
全パーツにまとめて“らしい動き”を当てる出発点。適用後に個別調整できます。
紙面風
写真はゆっくりズーム、テキストは順番にスライドイン。雑誌の誌面のような落ち着いた構成。
ポップ
要素が弾んで登場。明るくにぎやかな告知向き。
シネマ
ゆったりフェードで登場し、退場も添える。上質・情緒的な見せ方。
ミニマル
さっとフェードするだけの最小構成。情報を主役にしたいとき。
ダイナミック
写真はズームイン、テキストは左右交互にスライド。テンポの速い広告向き。
タイプ演出
テキストを1文字ずつ、写真はKen Burns。ストーリー性のある紹介に。
ハンコ・ポップ
テキストがスタンプでドンと。セール・新店告知に。
スライドショー
カットが流れて入れ替わる。写真が多い構成向き。
09テロップ
シーンに後乗せする字幕・キャッチコピー。
- 位置決め:プレビュー上をドラッグ。中心に近づくと赤い中心ガイドが出て吸着します(数値入力も可)。
- フォント(6種):ゴシック/明朝/丸ゴシック/手書き風/極太インパクト/等幅。書き出しでも崩れないフォント構成です。
- スタイル:縁取り文字/帯付き(座布団)。色も個別指定。
- 動き:登場アニメ(フェード・スライド・ポップ等)とタイミング、シーン終了時の自動フェードアウト。
10音声・BGM
BGMは動画全体に1本、ナレーション等はシーンごとに複数。
BGM(動画全体)
音声バーの「+ BGMを選択」、または音声ファイルを音声バーにドロップ。音量・フェードイン/アウト・ループを設定できます。
シーン音声(複数可)
左カラムの「音声」セクションから追加(ここにドロップも可)。1シーンに何本でも重ねられます。選択すると右カラムで次を調整できます。
11シーン切替エフェクト(6種)
前のシーンから次のシーンへの移り変わり方。各シーンに設定します。
切替の長さ(秒数)も指定できます。全再生・MP4書き出しの両方に反映されます。
12タイムライン
下段。パーツ・テロップ・音声の時間配置をまとめて見て、直接いじれます。
- バーをドラッグ:左右で開始タイミング(delay)を変更。
- バーの右端をドラッグ:長さ(duration)を伸縮。
- ミニサムネイル:各パーツ行に見た目のサムネイルを表示。
- 音声波形:BGM・シーン音声の波形を表示(音ハメ用)。
- ズーム:右上のスライダーで横幅を最大6倍に拡大。細かいタイミング調整がしやすくなります。
- クリックでジャンプ:タイムラインの好きな位置をクリックすると、その時点の静止状態をプレビュー表示。
13書き出し・保存
成果物の出力と、作業状態の保存。
14ショートカット
15つまずき & FAQ
プレビューでパーツをクリックしても選択できない
パーツの上を直接クリックしてください(背景の余白ではなく、図形や文字の上)。それでも反応しないときは、いったん別のパーツを選んでから戻すと復帰します。テロップや音声は左カラムの一覧からも選べます。
縦長SVGでプレビューが小さくて作業しづらい
プレビュー右上の ⤢ ボタンで拡大編集モーダルを開いてください。画面いっぱいに表示され、その中でもクリック選択・ドラッグ移動・中心ガイドがそのまま使えます。Escまたは✕で閉じます。
CSVを取り込んでも「反映できる行がありません」と出る
多くの場合、記入して上書き保存したファイルではなく、最初にダウンロードした空のテンプレをアップしています。Excelで保存し直したファイルを選んでください。また、テンプレ書き出し後にシーンを並べ替え・削除するとパーツIDが一致せず反映されません。
Figma(フィグマ)で作ったSVGの写真が差し替えられない
対応済みです。Figmaは写真を「パターン塗りの図形」として書き出しますが、Vectimoはこれを画像として認識し、差し替え・アニメ設定ができます。差し替えると通常の画像要素に変換されるので、以後は動画差し替えや画像内アニメもすべて使えます。
全再生で聞いた音とMP4書き出しの音が違う
再生速度を変えたときのピッチの扱いを、再生と書き出しでそろえてあります。もし気になる差が残る場合は、書き出しをChrome/Edgeで行っているか確認してください。
BGMが指定より長く鳴り続ける
全再生が最後まで到達した時点でBGM・音声は停止します。途中で閉じたいときは Esc か「閉じる」で止まります。
作ったプロジェクトを別の日/別のPCで続けたい
☰ メニューの「プロジェクトを保存」でJSONを保存し、次回「プロジェクトを開く」で読み込みます。ただし画像・動画・音声のファイル実体はJSONに含まれないため、読み込み後に再設定が必要です。素材ファイルは別途フォルダで保管しておくと安心です。
アプリが真っ白/エラー表示が出た
最新のHTMLファイルを使っているか確認し、ブラウザを再読み込みしてください。改善しない場合は、直前に行った操作と表示されたエラー文言を控えておくと原因特定が早くなります。
16更新履歴
機能を追加したら、このセクションに追記していきます。
2026-07-07
- 拡大編集がフル編集画面に:左にパーツ一覧・右にアニメーション設定を表示し、大画面のままパーツ選択から動きの調整まで完結
- PNG→SVG変換の品質を大幅改善(輪郭が滑らかに)。変換結果をワンクリックでVectimoへ連携
- パーツが非常に多いSVGを色ごとに自動グループ化(フリーズ対策)
- ライトモードを全体配色の切替に刷新
2026-07-06
- 文字(テキスト)をパーツとして追加できるように。レイヤー順・全アニメ(軌道など)・ドラッグ・色変更・透過率がテロップと違って全部使えます
- ライトモード:上部バーの ☀/🌙 ボタンで切替(選択は記憶されます)
- テロップのフォントを11種に拡充(ポップ体・教科書体・行書体・筆記体・欧文セリフを追加)
- 作業中にタブを閉じようとすると確認ダイアログを表示(うっかり消し防止)
- 自動保存:作業内容をブラウザ内に自動で保持。うっかりタブを閉じても、最初の画面の「前回の作業を復元する」から再開できます(同じブラウザ・同じ端末に限る/動画・音声はファイルサイズが収まる範囲で保持)
- スマートフォンで開いたとき、PCでの利用を推奨する案内を表示
- テンプレートから始める:最初の画面から「セール告知」「新商品紹介」「思い出スライドショー」をワンクリックで読み込み
- MP4書き出しに用途プリセット(Reels/TikTok・正方形・YouTube横型・元サイズ)を追加。比率とfpsをまとめて設定
- ☰メニューと最初の画面から使い方ガイドを開けるように
2026-07-05
- 軌道(パス)アニメーションを追加:弧・山なり・波・ジグザグ・跳ね・円・らせんの7種
- 図形の塗りにグラデーション(2色+角度)を選べるように
- 追加した図形の種類をあとから変更できるように(丸→四角など、色・位置は保持)
- 図形追加パネルを開閉式メニューにして省スペース化
- パーツ選択中に Delete/Backspace でパーツを削除できるように
- 追加した図形もクリックで選択を切り替えできるように
- パーツの透過率(不透明度)を設定できるように
- シーン切替にスライド(左→右・上→下)・ワイプ・回転・ぼかし・グリッチを追加(全10種類に)
- 左カラムに図形・帯・アイコンの追加(四角・丸・帯・三角・星・矢印・吹き出し)。追加後はパーツとしてアニメ・移動・色変更が可能
- 動きの種類をホバーで確認できるプレビューマスを追加
- MP4書き出しの進捗表示を充実(フェーズ・経過/残り時間・フレーム数)
- 音声・動画も含めて保存できる「素材ごと保存(1ファイル完結)」を追加
- 上部バーを整理:ファイル操作を「☰ メニュー」に集約し、主要ボタンを線画アイコンに統一
- 角丸・余白をデザイントークンで統一し、ボタン・入力・カード・モーダルにマイクロインタラクション(滑らかな動き)を追加
- 選択中のパーツを、左一覧・タイムライン・プレビューでまとめて強調表示
- 動きのコピー・カスタムプリセットの操作を右パネルのボタン/一覧に集約(パーツの右クリックは廃止)
- 操作の発見性向上:初回操作ヒントと、パーツ選択時の常設ヒントを追加(☰メニューから再表示可)
- シーンをたくさん並べても横スクロールバーを非表示に
2026-07-04
- 動きのコピー/貼り付け・カスタムプリセット保存を追加。凝った動きを他パーツや別シーンで再利用でき、プロジェクトJSONにも保存されます
- 写真(PNG/JPG/WebP)をシーンとして読み込み可能に。スライドショー用途に対応
- 選択パーツを Ctrl+ホイール/ピンチ/±ボタンで拡大縮小
- プレビュー右上に拡大編集モーダル(⤢)を追加
- 全再生にシークバー(再生中の移動)とEsc閉じを追加
- パーツ移動時の中心スナップガイドを追加
- シーン音声を複数対応+使用範囲トリミングに、パーツ一覧から選択・調整できるよう変更
- SVG・音声・メディアのドラッグ&ドロップ対応(非対応ファイルはアラート)
- Figmaのパターン塗り画像の認識・差し替えに対応
- タイムラインに波形・ミニサムネイル・ズーム・ドラッグ操作を追加
- テロップのフォント選択(6種)、シーン切替にモーフを追加
- サービス名を Vectimo にリブランド