SVG変換ツール「Vectorlab」の30秒紹介動画
PNG・JPG・WEBPの画像を、編集できるSVGのパスに変えるブラウザのツール「Vectorlab」の30秒の紹介動画です。読み込む・整える・書き出すの3手を、サイトの実際の画面に寄って囲みながら見せています。
依頼を受けて制作したものではありません。FablessBridgeが公開情報をもとに自主制作した紹介動画です。製品名・画面・ロゴは各社のものです。
Vectorlabのサイトを見るvectorlab-tau.vercel.appXの投稿を見る@FablessBridge
Vectorlabとこの紹介動画
Vectorlabは、PNG・JPG・WEBP（20MBまで）の画像を、編集できるSVGのパスに変換するブラウザのツールです。Illustration、Logo & icon、Photo、3D renderのプリセットを選び、色数などを調整してSVGを書き出せます。処理はブラウザの中で行われ、ファイルはサーバーへアップロードされません。
- 製品
- Vectorlab（SVG変換ツール）
- 動画
- 30秒・横16:9・画面の文字は英語・ナレーションなし
動画で見せたこと
- 画像を読み込む最初の手順を、サイトに内蔵されたIllustrationのサンプルを押して、変換の画面が出るところまで見せました。
- プリセットと色数を調整する手順を、元画像とベクターの画面の切り替えと、色数が16から32へ回るカウンターで見せました。
- SVGのパスを書き出す手順と、ファイルが端末の中にとどまることを、ダウンロードの操作と「Your files stay on your device.」の一文で見せました。
30秒の流れ
0〜2秒 ロゴと「Make it vector.」が出ます。右の窓ではロゴが拡大表示になり、ズームの数字が100%から244%まで回ります。
2〜8秒 「01 / IMPORT」の札で「Start with an image.」と出ます。実際の画面に寄り、カーソルがIllustrationのサンプルを押して画像が読み込まれます。左に作業票のレシートが印字されます。
8〜14秒 「02 / REFINE」の札で「Find your balance.」と出ます。3D renderのサンプルで元画像からVectorの画面に切り替わり、色数のカウンターが16から32へ回ります。
14〜20秒 「03 / EXPORT」の札で「Take it anywhere.」と出ます。カーソルが「Download SVG」のボタンを押し、画面下の数値の表示を囲みます。
20〜26秒 ブラウザの中で使えることを伝える見出しと、「Your files stay on your device.」が出ます。トップの画面に寄って1行を囲みます。
26〜30秒 作業票のレシートが切り取られて上へ抜け、ロゴと「Make it vector.」、製品のURLを出して締めます。
表現で工夫したこと
窓の外は感熱紙のレシートに見立て、左の作業票が手ごとに「01 IMPORT」「02 REFINE」「03 EXPORT」の行を印字し、最後に切り取られて上へ抜けます。地は薄いクリーム色にライムの差し色で、書体はManrope、DM Sans、IBM Plex Monoです。製品の窓は、サイトの内蔵サンプルを押して撮った実際の画面をそのまま使い、寄る・なぞる・囲むだけにしました。
製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。
自社の製品の紹介動画を相談する
企画が固まっていない段階からご相談いただけます。
紹介動画を相談する料金と制作の流れを見る顧客案件と自社サンプルを見る