見出し画像

LP用の動画制作に初チャレンジ。3日間でプロトタイピング

こんにちは ならっきー(@nara_narami)です。
リフカムでデザイナーをしております。
ゆるっとした似顔絵を描くのがブームです。

画像1

少し前のことになりますが、8月中旬にRefcomeのLPをリニューアルしました。
デザイン周りを担当させてもらったのですが、その中でも初めて挑戦した動画づくりについて記事を書こうと思います。

🔑 LPリニューアルの背景

今回の動きにはこんな思いと背景がありました。

営業方針の変更に伴い、Refcomeが考えるリファラル採用の世界観をより伝え、「採用を仲間集めに」というミッションに紐づくものにしたいということ。
また、VIリデザインプロジェクトが別途走っているため、今回のリニューアルはその橋渡しになるようにしたい、ということ。

🖌 リフカムらしさを言語化、共通認識をとる

まず、デザイナー内でブレストしながら「リフカムらしさ」の共通認識を取ることからスタートしました。
プロダクトをどんな風に見せたいか、どう思ってもらいたいのか、どんな風に使ってもらいたいのかをキーワードレベルで出し合いました。

「リフカムらしい」キーワード

🌿ナチュラル 🍀
・自然(木/空/光)
・ゆとりのある
・穏やか
・有機的な
・わざとらしくない
・ビジネス感のない

🌞カジュアル👕
・笑顔
・肩の力の抜けた
・フランクな
・自然な暖色

これとは別に「リフカムらしくない」についても考えてみました。
例えば「無感情・政治的」といったワードはうちらしくないね、とか。

出てきたキーワードをもとに、写真やイラスト・色合いなどビジュアルに落としたらこんなイメージ、の収集をPinterestで行います。

スクリーンショット 2019-12-06 18.05.40


色合いや雰囲気は擦りあってきたけれど、肝心のビジュアルが決まらない。

🗻 動画チャレンジの始まり(⏰ある日の昼下がり)

上司🙎‍♂️(@dex1t)とブレストしつつ他社サイトで動画を使っている事例をみていた時のこと。

🙍‍♀️「写真とかイラストだと全員でやってる感とか、和気藹々感出すの難しい😩」
🙍‍♀️「リフカムの目指す世界観を伝えるには動画のほうがいいかもしれないです」
🙍‍♀️「どうやって撮ってるんだろう...高いのかなー」
🙍‍♀️「長く使える動画でもないし...コストあんまりかけたくないですね」
🙍‍♂️「そうだねー」
🙍‍♀️「試してみたい気持ちはありますよ」
🙍‍♂️「一回社内で撮ってみる?
🙍‍♀️「なるほどそれはいいかも」

そのまま話は続行。

🙍‍♀️「ストーリーどうしましょうか」
🙍‍♀️「ナチュラルにお誘いできるような雰囲気がいいですね」
🙍‍♂️「人事だけで頑張るのではなく、色んな人が関わるリファラル採用の世界観を伝えたいね」
🙍‍♀️「実際にプロダクトを使っているところを見せたいです」
🙍‍♂️「実際誘うときと同じように、オフィスとかじゃなくてカフェとかで肩肘じはらずに誘う感じがいいかもね」

あれこれ話すうちにどういう風に見せたいか、登場人物はどんな人か、どんな場所で何をしているのかがなんとなく見えてきました。
話しながら、手元にiPadを持っていた上司がざっくり絵コンテを書き出し。

画像3


ここまでブレストを始めてから10分くらい。
ここから私が解像度をあげてお絵かき。
どんなシーンがあれば良いか、具体的に小物があればいいのか、座る椅子はどんな風だったらシーンに合うか?などをぼんやり意識しながら描いてみます。
Paper.リフカム.76 (1)

🎥 社内でプロトタイプ撮影してみる(⏰20分後)


この時点で平面上でのイメージはできたものの、動画にした時にどうなるかわからなかったので、メンバーに声をかけ社内で撮影をしてみます。
(運の良いことに出演して欲しいメンバーが全員社内にいた🤟)


スクリーンショット 2019-10-28 18.13.17

寸劇を撮影、粗々ではあるものの動画を繋げてストーリーを通しでみれるようにしました。動画にしたことでイメージが明確になり、デザイナー内でイメージ共有できたので本番撮影に向けての準備に移ります。

スクリーンショット 2019-10-30 16.34.02

🏃‍♀️ 撮影準備(7/13 ⏰1時間後)

撮影場所の決定・機材の準備を行います。
「人事が1人で肩肘張ることなくリファラル採用を促進する」サービスであることを伝えるために「自然光が入る、穏やかなベンチャーっぽいオフィス」と「力の抜けた温かみのあるおしゃれなカフェ」をイメージした場所を選ぶことに決めました。
レンタルスペースで探したところ、オフィス近くで2つのイメージを叶えられるお部屋を発見!2日後に借りることに成功 🎉

次に機材の準備です。
上司がツテをつかって情報を集めてくれました。
参考にしたのはこちら。

撮影・ライティング方法
スタートアップで事業のプロモーション動画を作った話 - ふくち - Medium
一人でも実践できる! 映像ライティング講座 | ビデオSALON

ライト

https://www.amazon.co.jp/gp/product/B071ZH4CZS/ 
https://www.amazon.co.jp/gp/product/B077Z61TPN
https://www.amazon.co.jp/dp/B07RSB6F22/

レフ板
https://www.amazon.co.jp/dp/B01BSEJFX4/ref=cm_sw_r_tw_dp_U_x_knUlDbPD8C425

上記のものを買いたかったのですが、撮影までに時間がなくamazonなどの配送サービスでは間に合わなかったので(自業自得)帰宅ついでに家電量販店に駆け込み、照明とレフ板を購入しました。

あり物での構成になりますが、必要最低限は揃いました。
これで1日目終了です。激動🏃‍♀️🏃‍♀️💨

🎨 プロダクトLPのデザインと動画を合わせてみる(2日目)


撮影準備と並行してLPサイトのデザインを作成していたので、実際に動画をFigmaProtopieではめ込み、Webでのプロトタイプを行いました。
動画はファーストビューの背景として使用する想定だったので、LP全体でのストーリーと動画が合うかどうか、動画の上に配置する文字やレイアウト、色味の確認をするためです。
実際にファーストビューの背景に動画を置いてみると、服の色が雰囲気を左右することがわかったり、人物に文字がモロ被りしてしまったり、と発見がありました。
メンバーの普段着ていて色味の良いものをワイワイお話。

スクリーンショット 2019-10-31 13.49.28

スクリーンショット 2019-10-31 13.08.29

みんな反応良くて嬉しい😊


🎥 本番当日(7/15 3日目

3日目。午前中の撮影だったので陽の光もいい感じ🌞
Figmaでまとめたイメージとストーリーをメンバーに伝え、ipadで表示しつつ撮影開始です。

スクリーンショット 2019-10-28 19.47.23

撮影中はみんな立ち代わりでサポートしてくれました。

画像7

部屋のレイアウトを変えたり

画像5

レフ板を持ってくれたり

画像12

柔らかい光を作るために照明にビニール袋をかぶせたり🔦

カット数が多くなかったことと、事前に社内でトライアル撮影をしていたため、撮影はスムーズに進み1時間程度で完了しました。よかった!

会社に戻った後、動画のつなぎこみを行い当日中にyoutubeで限定公開までこぎつけました✌️

スクリーンショット 2019-10-28 20.04.15

動画の処理や色味調節は限定公開後に行ったのですが、今回はとにかく手早く作って共有することを意識しました。

 🐤 後日(7/16 4日目~

動画のつなぎ込みをして足りなかったトランディション部分の再撮影や、画像処理、色味調整などを行いました。

ここは反省点なのですが、動画を通しで見てみると不足している部分が発覚し細かい再撮影が発生してしまいました。
次回はトランディション部分も意識して撮影していきたい😌

🚴‍♀️ プロトタイプすることの大切さ

動画制作未経験ながら、3日で動画の企画から撮影、編集までを高速で行うことができました。
大きく括って動くのではなく、小さくプロトタイプを繰り返していくことで失敗を最小限に抑えることが出来たことが一番よかったです。

出来上がりの共通認識をもてたことで安心して全力投球できた実感があるので、やったことない何かをする時や、誰かを巻き込んでのプロジェクトを進める時にはプロトタイプ、おすすめです。

また、今回動画プロトタイピングをしながらRefcomeのブランディングの方向性を少しづつ形作ることにも挑戦できました。
どう見せたいのか、どんな印象を持ってもらいたいのか、それを実現するためにはどうすればいいのか。まだまだ手が回っていない所は多いですが、より良い会社にするため動いていこうと思います。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
どら焼きあげる
16
リフカムでデザイナーをしています。 あまいものとしょっぱいものの狭間でいきています

こちらでもピックアップされています

refcome design & engineering
refcome design & engineering
  • 5本

リフカムのデザイナー・エンジニアが、「採用を仲間集めに」するための取り組みを綴ります。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。