ブラウザのデザインツール集「playgrnd」の30秒紹介動画
ポスターの背景などをキー1つで生成するブラウザのデザインツール集「playgrnd」の30秒の紹介動画です。同じお題を手作業で作る場合と並べ、SPACEで次々に絵柄が変わる様子を見せています。
依頼を受けて制作したものではありません。FablessBridgeが公開情報をもとに自主制作した紹介動画です。製品名・画面・ロゴは各社のものです。
playgrndとこの紹介動画
playgrndは、1つの目的に絞った生成デザインのツールを52個集めたブラウザのサイトです。ツールを開いてSPACEを押すと新しい絵柄に変わり、気に入ったものを書き出せます。アカウントの登録や画像のアップロードはいりません。
- 製品
- playgrnd（ブラウザのデザインツール集）
- 動画
- 30秒・横16:9・画面の文字は英語・ナレーションなし
動画で見せたこと
- ポスターの背景を手で作ると登録やアップロードや手描きの手間がかかる点に対して、左の手作業の線画と右のDAHLIAの画面を並べました。
- 1つのツールで終わらない絵柄の幅を、FOLD・BENDAY・KIOSK・CORALの実際の画面を1つの枠の中で順に入れ替えて見せました。
- 手数の違いを、手作業の手順に線を引いてSPACEと書き出しだけの手順と並べ、52のツールとアカウント不要の札で示しました。
30秒の流れ
0〜2秒 公式ロゴから引いて「Same brief. Two ways.」と出ます。
2〜10秒 左では名前のない線画で登録とアップロードと手描きが進み、右ではツールの一覧からDAHLIAを押してSPACEで新しい絵柄に変わります。
10〜18秒 1つの枠の中でFOLD・BENDAY・KIOSK・CORALの実際の画面が順に入れ替わります。
18〜25秒 手作業の手順に線が引かれてSPACEと書き出しの手順と並び、52のツールとアカウント不要の札が出て作品の切り抜きが流れます。
25〜30秒 公式のog画像から引き、playgrnd.toolsとサイトの一言「Tiny tools for making weird, beautiful things.」で締めます。
表現で工夫したこと
サイトと同じ紙の地にトンボの印を置き、DM Monoとロゴの金色とInstrument Serifの見出しで組みました。場面のつなぎは画面を波打たせて入れ替える形にしています。右側の画面とロゴは公式の撮影のまま使い、左の手作業の側は実在の製品に見えない名前のない線画にしました。
製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。
自社の製品の紹介動画を相談する
企画が固まっていない段階からご相談いただけます。
紹介動画を相談する料金と制作の流れを見る顧客案件と自社サンプルを見る