ブラウザの画像編集ソフト「ImageFlow」の90秒紹介動画
ブラウザで動く本格的な画像編集ソフト「ImageFlow」の90秒の紹介動画です。小さな店の商品写真づくりで、PSDを開く・切り抜く・光を足すまでをブラウザだけで済ませる流れを見せています。
依頼を受けて制作したものではありません。FablessBridgeが公開情報をもとに自主制作した紹介動画です。製品名・画面・ロゴは各社のものです。
ImageFlowとこの紹介動画
ImageFlowは、ブラウザで開くとそのまま使える画像編集ソフトで、PSD・レイヤー・マスク・効果・AIの道具を備えています。PSDの読み書き、被写体の選択と背景の削除、撮った後に照明を足す「Relight」があり、PNG・AVIF・PDF・SVG・PSDで書き出せます。描画はWebGPUで行い、文書は端末の中で処理されます。
- 製品
- ImageFlow（ブラウザの画像編集ソフト）
- 動画
- 90秒・横16:9・画面の文字は英語・ナレーションなし
動画で見せたこと
- デザイナーから届いたPSDを開くのに契約が要る悩みに対して、同じPSDをブラウザへ落とすとレイヤーやマスクごと開く画面を見せました。
- 商品の切り抜きを1点ずつ手でなぞる悩みに対して、同じ写真で被写体の選択と背景の削除が一度に済む画面を見せました。
- 光が合わずに撮り直す悩みに対して、同じ写真にRelightで光の点を置いて照明を足す画面を見せました。
90秒の流れ
0〜4秒 ImageFlowの起動画面とロゴが出て、ブラウザで動く画像編集ソフトだと示します。
4〜10秒 スキンケアの小さな店をひとりで営む利用者が、商品写真を自分で撮って直しています。
10〜16秒 デザイナーからPSDが届きますが、開くにはまた契約が要ります。
16〜22秒 商品の切り抜きを投げ縄で1点ずつなぞり、1枚に長い時間がかかります。
22〜32秒 窓辺の光が暗く、照明を借りて撮り直す予定が入ります。残った商品の数と週末の数が並び、作業が終わらないことを示します。
32〜36秒 ロゴと「Professional image editing in your browser.」が出ます。
36〜48秒 同じPSDをブラウザへ落とすと開き、レイヤーとマスクと調整レイヤーが並びます。
48〜60秒 同じ商品写真で「Select Subject」と「Remove Background」を使い、一度で切り抜きます。
60〜72秒 同じ写真でRelightを開き、光の点を置いて照明を足します。
72〜90秒 WebGPUで動くことと書き出しの画面を見せ、端末の中で処理されることを示します。ImageFlowの名前と製品URL、作り手のアカウントで締めます。
表現で工夫したこと
動画全体をImageFlowの編集画面に見立て、上にメニュー、左に道具、右にレイヤー、下にプロパティを置きました。場面ごとに新しいレイヤーが重なり、切り替えは選択範囲の点線が広がって次のレイヤーが現れる形にしています。解決の場面ではサイトの実際の画面を見せ、開いた商品写真は瓶と球を自分で描いた画像にしました。
製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。
自社の製品の紹介動画を相談する
企画が固まっていない段階からご相談いただけます。
紹介動画を相談する料金と制作の流れを見る顧客案件と自社サンプルを見る