ど〜も〜、blueの黒澤明 中尾こと、 Hawk(と呼ばれたい) です。
みなさまは普段どんな映画とかみますか?
アクション?ホラー?はたまた恋愛?
ちなみに、私は引くぐらい映画を見ません。。。。

そんな私が、この度トップページに載せる背景動画を撮って見ました。

動画のコンセプトを決めてみる

今回幸いな(?)ことに、ディレクターは私ですので、動画の内容も勝手に決めました(笑)
ざっくりまとめるとこんな感じ。

  • ループしても不自然じゃないこと
  • 全てワンカットで撮りたい
  • ワンカットだけど登場人物を複数回登場させる

まあ、ぶっちゃけミュージクビデオ風に取ろうかと思い立った次第です(笑)

絵コンテを描いてみる

動画の大体のコンセプトが決まったところで、 小さなお髭のデザイナー のところに行き熱弁をふるいました。
すると 小さなお髭のデザイナー「言葉じゃわからないんで、絵コンテ描いてくださいよ。」 と参考URLを投げつけられました。。。

涙で顔を濡らしながら初絵コンテを書きました。
それがこちら
104091fd abf7 466d ad92 1bf2670a3f7c
見てください、ピカソも裸足で逃げ出すような 絵コンテを(笑)

カメリハしてみる

普通の動画は横長かと思いますが、今回使用する動画はご覧の通り縦長になっております。
これはほとんどの場合において画面の半分は縦長になるだろうという予測のものです。
そのため動画自体も縦長で撮った方が効率的ですよね?

「だから私はXperia」 で撮影しました!

絵コンテを元に、ざっくりとしたカメラワークで仮撮影して見ます。
やはり絵コンテで説明するよりも実際の動画で説明する方がわかりやすいですもんね!

本番撮影してみる

ここでいよいよ本番です。
個人的には、会議室2つ抑える方が苦労しました(笑)

カメリハで撮影した動画を見てもらい各々の動きを確認してもらいます。
カメリハの時は私がカメラマン役をしましたが、本番では出演者でもありますので、カメラマン役の 重鎮 にもカメラワークを確認してもらいます。
そして、本番!

と言っても、カメラワークが早すぎて移動が間に合わなかったり、移動中の様子が見切れてしまったりと何回か取り直しました(笑)

編集してみる

撮影完了した血と涙と汗の結晶を編集して行きます。
使うのは iMovie! (windowsのみなさまごめんなさい。)
フィルターでモノクロ化、音声の削除、スピード調整を行なって行きます。

そして書き出し!!
の前に、忘れてはいけないことがあります。
今回縦長の動画ですので、このまま書き出してしまうと左右に黒マキがついて横長の動画になってしまいます。。。
これを避けるために、一度わざと横向きに回転させて書き出します。
すると同然横向きの動画が書き出させるはずです。

このまま設置を試みましたがうまく行きませんでした。。。。
(CSSで回転させるとなぜか動画が途中で止まってしまう謎現象が起きました。。。。)

そこで、横になった動画を Quick Time Player で回転させます。
(この時拡張子が変更してしまします。)

これでひとまず縦長動画が完成です!

設置してみる

しつこいようですが、今回は縦長動画ですので youtube にアップロードして埋め込むことができません。
ここは素直に videoタグ を使います。
そして設置する拡張子は2種類、.mp4.webm という拡張子を使用します。
.mp4 に関してはみなさま馴染み深いと思いますが、.webm とはあまり聞き覚えないですよね?
こちらは、web動画用に開発された拡張子らしいです。

そして厄介なことに .webm に変換してくれる良いアプリがあまり見当たりませんでした。。。。
(macだからかも。。。。)

そこに救世主が現れました!!
救世主:cloudconvert
こいつで、.mp4.webm に変換してやります。
webサービスですので、多少時間がかかるのはご愛嬌。。。

そして、いよいよ設置!!

<video loop autoplay>
  <source src="hogehoge.mp4">
  <source src="hogehoge.webm">
  <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

これで無事に動画が見れるかと思います!!

最後に

「信じられるかい?この作業、リリースの2日前の出来事なんだぜ!」
皆さんもこんなことにならないように、スケジュールは計画的に!!

それでは、また!

Shere
  • はてなブログ
  • Twitter
  • Facebook
監督ごっこをしながら背景動画を作ってみた

Writer

  • Name

    中尾鷹人

  • Position

    神にもっとも近いと言われていると思っている感じを出しつつ、今日も自分なりに頑張って業務をこなそうと思いながら、なかなかやる気の出ないフロントエンジニア

  • Profile

    昔々あるところにえらい神様がおりました。 えらい神様はとても残念なことがあり、洞窟の中に隠れてしまいました。 するとどうゆうことでしょう。世界が暗闇に包まれてしまいました。他の神様たちは相談し、えらい神様に洞窟から出てもらうように説得しました。なんやかんやあって、なんとか洞窟の扉を開けることに成功しました。扉を開けると眩しい光に包まれました。 すると中からえらい神様となぜかえらそうな神様が出てきました。 そのなぜかえらそうな神様がのちにフロントエンジニアとなって活躍するのは別のお話。