動画編集ことはじめ〜Webデザイナーが聞いてみた＆やってみた〜
くれまとさくらのWebデザイナーは今日も行く
ネット回線のスピードの向上やスマートフォンの台頭で、Web上のあらゆる所で「動画」を目にするようになりました。せっかくならデザイナーだって動画にも挑戦してみたい！でも私たち、iPhoneでサクッと撮っちゃってるけどコレってアリなの？知ってるようで全然知らない映像のアレコレ。そんな疑問をこの道30年のベテランCMディレクターにぶつけてきました！映像に携わる方やWebデザイナーはもちろん、再生数に悩めるYouTuber必見？
今回は動画経験ほぼゼロな浅野が、CMディレクターの松原さんに、Webデザイナーも知らない映像業界とWebの関係や、映像を撮る際に気をつけたいポイントなどを伺いました。
https://blog.adobe.com/media_f0bc5ae86c6fdc52a8114377effced4f8b24f392.gif
松原剛（まつばら つよし）
大阪府生まれ。自由学園卒業後、1986年にテレビコマーシャル制作会社、株式会社ザ・ないん創立と共に入社。90年からCMディレクターとしてデビュー。グラフィカルなフレーミングと、台詞がなくても通じる独特の表現で、海外でもオンエア展開されたグローバルなCM作品も数多い。アジア広告祭秀作賞、ACC賞、静岡CM賞優秀賞など受賞作も多数。テレビコマーシャルだけでなく、インターネットでのバイラルCMやテレビ番組などの作品も多く手がけている。また音楽業界で交友関係が広くJUN SKY WALKER(S)、Mr.Children、LAUGHIN’ NOSEなど、ミュージックビデオの演出作も多い。2015年に独立、TVCMだけではなくWebでのムービー表現を追求した作品に取り組んでいる。主な実績：サロモン・スキー「ピラミッドモーグル」篇／湖池屋・ピンキー「ピンキーちょーだい」篇／大和証券・企業「顔」篇／サロモン・スキー「コースに棲む魔物」篇／ベネッセ・いぬのきもち「かいぬしのきもち」篇/ボブソン・ジーンズ「ツノのあるヤツ」篇／ロッテ・ブラックブラックガム「ジャッキ」篇／チロルチョコ・板チョコBIG「世界一BIGな男」篇/ING生命「地球・双眼鏡・盾」篇／ベネッセ・BIGO「お父さんのリベンジ」篇/ミズノ・ミズノウェーブ「彫刻ランナー」篇／はごろもフーズ・シーチキン「キチンと朝ごはん」篇／三井不動産・三井アウトレットパーク「ドキドキ」篇／JA共済・こども共済「アンパンマン登山」篇／新生銀行・NISAプラス「NISA＋」篇ほか多数
映像業界とアプリケーション
浅野：松原さんはご自身でアプリケーションを触って作業することもあるんですか？
松原：企画段階の映像だったり、Webだけだったら僕の方で編集作業をすることもあります。僕の愛用アプリケーションは色々と変遷があるんですが、現在はPremiere Proを使っています。インターフェースが似ているので、各ソフト独自の用語が分かれば大体使えるかな。After Effectsは僕自身はあまり使いませんが、オペレーターさんと一緒にAfter EffectsだけでCMを作る時もありますよ。
浅野：Premiere ProとAfter Effectsはどちらも動画編集ソフトですよね？私には違いがよく分からないのですが……。
松原：僕の感覚で言うと、After Effectsは合成とかタイトルワークや色調整などの素材作り。Premiere Proは編集。Premiere Proの中でも効果はつけれられるけど限界があるから、After Effectsで作ったパーツをPremiere Proで繋げていくほうが良いですね。最初にムービーを作るんだったら、Premiere Proからはじめるのが良いんじゃないでしょうか。
浅野：なるほど、グラフィックデザイナーがPhotoshopで素材を作って、Illustratorでデザインを組んでいくのに似ていますね！
https://blog.adobe.com/media_1ce06969e9e87675709643a1d5fb72a2da027c6d.gif
（左）Premiere Pro （右）After Effects
浅野：映像業界でもIllustratorやPhotoshopは使われるんでしょうか？
松原：Illustratorはコマーシャルの企画やプレゼン段階で使いますし、凝ったロゴとかを作るときは僕たちもIllustratorでロゴを作って映像に使用します。それから、Photoshopは映像業界でも必須ですね。映像にのせる写真の色補正やHDサイズへの調整があれば必ず使いますし、タイトル周りでAfter EffectsとPhotoshopを併用してダイナミックなタイトルを作ったり。同じソフトですから共通する部分もあるけれど、多分、デザイナーさんから見ると僕らは独特な使い方をしていると思います。
映像製作のワークロー、媒体の変化
浅野：松原さんの30年のキャリアの中で映像製作の環境は大きく変化したと思うのですが、松原さん自身が感じているワークフローの変化などはありますか？
松原：撮影前のプレビズや撮影時の仮合成が多く用いられるようになりました。
浅野：プレビズとは何ですか？
松原：プレビジュアライゼーション（Previsualization）というのが正式名称で、複雑なシーンを撮影前にミニチュアやCGで視覚化する手法です。90年代中頃から映画製作の現場で一般的になってきたのですが、僕らのCM製作でもこのプレビズが多く用いられるようになりましたね。特に複雑なCG合成が伴う実写撮影の時は必須になってきてますが、単なる実写のみのCMでも、撮影前にコンテの画をスキャニングして、秒割り通りにPremiere Proで繋ぎ、セリフや音楽デモをあててプレビズをつくることも多いです。
浅野：プレビズを実施するメリットは何でしょうか。
松原：特に若いプロデューサーは喜びますね。なぜかというと、予算が見えてくるんです。セット、カメラワーク、ライティング、役者のアクションなどのシミュレーションを行うと、必要なモノが明確になってくるんですよ。
浅野：なるほど。グラフィックデザイナーの言う「ラフカンプ」（ダミーの写真やイラスト素材を入れて仕上がりイメージを共有するためのデザインのラフ）と似ていますね。グラフィックの世界でも、制作環境の進歩と共に高精度なラフカンプの作成が可能になりましたが、映像製作の現場でもそういったデジタル化の恩恵はありますか？
松原：はい。プレビズを作るのも便利になりましたし、その後の撮影もデジタル化されたので、現場で撮った撮影素材をその場でPremiere Proで繋いで確認することも多くなりました。特に合成モノは実際に現場でPremiere ProやAfter Effectsを使って仮合成をして確認しながら進めることもあります。事前に作るプレビズや、現場での仮合成で創造力豊かな映像を具体化出来るようになりました。まさにデジタル化の恩恵です。20年前と比べたら劇的な変化ですよ。
浅野：デジタル化の波はワークフローだけではなく、掲載媒体にも大きい変化をもたらしましたよね。一番はWeb媒体の出現だと思うのですが、Web媒体で松原さんがなさった仕事で印象に残っているものはありますか？
松原：僕が最初にWebって面白いなと思ったのは、2006年に作ったカプコンのゲーム「極魔界村」のCMです。当時バイラルという言葉が出だした頃で、このCMはバイラルCMの成功事例としてWeb上で話題になりました。Webは、見てくれた人のレスポンスが分かるんですよね。一般の反応がすぐに分かるし、ファン同士で話題にしているのが僕らにも分かるのがいい。普通はこんな所まで見ないだろうって部分の小道具、たとえば、新聞の見出しが面白いとか、そういう細かい所まで観てる人もいて、製作者としても嬉しいです。
浅野：今は「Web限定公開」をうたっている動画も多いと思うのですが、たとえばWeb用とTVCM用の映像を並行して撮影するような仕事も増えてきているのでしょうか？
松原：現在は TVCMを撮ったらそれと一緒にWeb用の動画を取るというのはすごく増えてますね。CMのメイキングを撮ったり、タレントさんが商品の紹介をインフォマーシャルのようにしたりとか。
Web用動画、撮影のヒント
浅野：TVCMと違った、Webならではの映像の撮り方というのはあるんでしょうか？
松原：音でも映像でも、「どこで視聴するか」は僕たちはみんな意識しています。Webの場合はテレビや映画館に比べたら画面が小さいですから、ロングショット（全体像が見える絵）はあまり撮らないようにしますね。広い砂漠の中に人が小さく写っているのは映画館だと分かるけれど、スマホだとわからない。
https://blog.adobe.com/media_1cbcc8107a2ff0995fe74d4c04e18e91e9722562.gif
（左）フルショットの例 （右）ロングショットの例
松原：でもロングショットが絶対駄目なわけじゃなくて、状況を説明するためには有効な場合もあります。エスタブリッシング・ショットと言うんですが、たとえばインタビュー動画の前に、ビルと夕日が映る。そうすると、夕方にこのビルでインタビューされてる動画なんだってことが説明できますよね。そういうロングショットはWeb用の動画でも効果的です。
浅野：なるほど。
松原：「何を撮るかを明確に決める」ことを意識するだけでも随分違ってきます。まず「題名」を決めるんです。その後カット割り（コンテ）を作るといいですね。文字だけでもOK。ここで最低限「オープニング」と「エンディング」を決めておくんです。白バックに商品とタイトルが出てきて、最後MCなりがさよならって手を振る、とか。まずは全体の順番を決ましょう。僕らは先に尺を決めます。普通は1分くらい。どんな動画でも長くて2分が限度かなと思います。5分もあったら嫌になっちゃいますよ（笑）。
浅野：Webは秒数の制約も少ないのでついダラダラしてしまいそうですが、最初にカット割りと尺を決めるのは大事なポイントですね。
松原：そのふたつが決まったらいよいよ撮影なんですが、「空間演出」は意識して欲しいですね。初心者の方は、真正面のど真ん中で被写体を撮影しちゃうんですが、ちょっと斜め横から撮れば広々見えるのになぁ、と思います。被写体を中心から少しずらして、リードライン（奥行き）を意識してみましょう。
https://blog.adobe.com/media_b18abd31f6cdc387225e3d7fc5a0f32014f99f0c.gif
（左）リードラインで背景に奥行とインパクトが加わる （右）背景が平凡
松原：あとは、YouTuberの動画ってバックのベッドの上に洗濯物が見えてたりするじゃないですか（笑）。よそのメーカーのロゴとかも見えちゃうとまずいですよね。そういう余計なものは伝えたいことがブレるので映さない。逆に関連あるものは映す。要するにどう見せたいかです。たとえば本棚の前でインタビューを撮ると、頭良さそうに見えるかもしれません。そういう「空間演出」を心がけて撮影するだけでもだいぶ違いますよ。
撮り終わったら最後に、ナレーションやジングル（節目に挿入される短い音楽）、BGMを入れてみましょう。ナレーション素材はICレコーダーで録るのが便利ですね。あと、ナレーション録音はいつも同じ環境でやるのがいいです。同じ人、同じ機材でも、リビングとベットルームじゃ音質が変わってしまいますからね。
浅野：松原さんが気になった、動画の面白い見せ方をしているなというWebサイトはありますか？
松原：最近見たカメラマンのサイトで、5秒ほどの動画が背景でループしてるサイトはオシャレだなと思いました。ページを開くと背景一杯に動画が再生されて、その上にタイトルやキャッチコピーが効果的に配置されているようなサイトです。
そういった動画を撮る場合だったら、三脚で撮ったほうがいいですね。文字が前に乗るとカメラのブレって相対的にすごくはっきりするんです。あとは文字で隠れてしまうので、対象はフルショットやロングショットで撮ったほうが何が写っているのがはっきりするので良いと思います。
https://blog.adobe.com/media_da5cda0ed9adb542f09b8f31bb6b300fa8253aaf.gif
ぶっちゃけ、コレってアリ?!
浅野：実際の所、Webデザイナーや企業のWeb担当者が動画を撮らざるをえない、というシチュエーションは増えてきていると思うのですが、iPhoneでWeb用の動画を撮影するのは、プロの目からみてアリなんでしょうか？
松原：アリだと思います。iPhoneは僕たちから見ればプロユースにはならない部分ももちろんあるけれど、HDで撮ればきれいだし、浅野さんや一般の方がWeb用として撮るんでしたら、下手なハンディカメラよりもiPhoneの方がいいと思います。露出とかも5s以降なら画面を触るとその部分に合わせて自動でいい感じにしてくれる。1点だけ注意してほしいのは、「縦」で撮らないこと。再生した時に左右に黒い帯が入っちゃいますから。 コレ意外とやっちゃう方多いですね。特に人物って縦だと収まりがいいから、気持ちは分かるんですけど。
浅野：確かに言われてみると、やりがちな気がします。次に撮り終わった動画の編集なのですが、iPhoneアプリでそのまま編集できるAdobe Premiere Clipも手軽でいいなぁと思うのですが、このアプリはプロの目線で見ていかがですか？
松原：パッと使ってサッと編集できる所が良かったですね。感覚的に使えちゃうところが面白いです。ドラッグ＆ドロップで使いたいリレーションを決めて繋げちゃうし。標準でiPhoneに搭載されてるビデオアプリよりも直感的に操作できるし、動きも早い。一般の方にはぜひおすすめしたいと思いました。
浅野：iPhoneが使えるなら、私たちWebデザイナーや、ECサイトなどを運営されている皆さんも気軽に動画が撮れていいですね。ますます動画の作り手が増えそうですけど、それについてはいかがでしょうか。
松原：僕としては大歓迎です。技術や媒体が発展して作り手が増えることで発表の場も増えて、いい作品も増えるでしょうし、今までと違う手法が出てくるように思います。今回は技術的な手法を色々と話したけれど、もしかしたら僕らがやってきた手法とはぜんぜん違う常識が出てくるかもしれません。たとえば僕らは昔、「イマジナリーラインを超えてはならない」というのを演出の基本として習ったんだけど、今時の出来上がった映像を見たらそんなの関係なく良かったりして。カメラもソフトもどんどん進化してますし、製作者や発表の場が増えることで表現の幅が広がって、これからどんな表現が出てくるのか、僕自身もとても楽しみですね。
https://blog.adobe.com/media_b00c71f0db10bc7ca8f42cbaddaaede88c2708dc.gif
浅野：短い動画ひとつとっても綿密な撮影プランが必要なんですね。一方で、iPhoneやアプリケーションなど、新しい技術の登場で新しい手法もどんどん生まれてきそうです。動画の世界は今後どう変わるのか、私もとても楽しみになりました！それではいよいよ、私もいざ、動画編集に挑戦します！
実際に動画を編集してみよう！
浅野：新しい表現にはならないかもしれないんですが（笑）、私の方で「お茶を淹れる」という動画をiPhoneで撮ってきたんです。コレを素材にして、実際の編集作業を教えてください！
松原：じゃあ、Premiere Proを使って編集してみましょう。4つに動画を分けたんですね。
https://blog.adobe.com/media_2c8315b52199dd1c7b63923d355801439109a3f4.gif
iPhoneで撮った「お茶の淹れ方」の素材ファイル
浅野：はい、1.ポットを置く、2.茶葉を入れる、3.お湯を注ぐ、4.お茶を注ぐ、の4つのファイルです。撮ってる最中に余計なものが写り込んでしまったりして、意外と手間取って撮影を止めたので、4つになってしまいました。
松原：一人で撮るのは意外と大変ですよね。何人かでやれると良いんですけれど。でも、動画同士をつなぐのは簡単。４つの動画を左上のプロジェクトパネルにドラッグ＆ドロップで読み込んでから、タイムラインパネルに並べてつなげていけばOKです。
浅野：直感的に作業できてわかりやすいですね。
松原：まずはタイトルを入れていきましょう。タイトルはPremiere Proでも作れるんですが、Photoshopで作ってみましょうか。
浅野：良かった、Photoshopなら出来ます（笑）。
松原：じゃあ、背景部分のスクリーンショットを撮りましょう。それを背景にして文字を作りはじめると、位置関係や完成が想像できて楽です。
https://blog.adobe.com/media_6aa8bd2a0fc72e55c7477c0bb103193d20bd1799.gif
Photoshopでタイトルを作成、背景は保存前に削除。
浅野：できました！
松原：タイトルができたら、背景のレイヤーを削除した上で、拡張子を.tiffで、透明部分を保持のチェックボックスをオンにして保存してください。そのファイルをPremiere Proで読みこめばタイトルの完成です。
https://blog.adobe.com/media_085f5edb646040f95da2f1c3fcdad151d267d098.gif
Photoshopで作成したタイトルをPremiere Proに取り込む
浅野：なるほど、こうやってPhotoshopを使うんですね。
松原：次に４つの動画同士をつなげていきたいんですが、動画ごとにポットの大きさが違いますね。
浅野：あ、本当ですね、置く場所が変わったのに気づかなくて……。
https://blog.adobe.com/media_ede77d5f08657d9e3c04e37528bd828aa8dcc923.gif
被写体の位置は、意図せず変えないように努めたい。
松原：特に理由がなければ、配置は同一の方がいいですよね。今回のこの大きさの違いは、エフェクトパネルから「クロスディゾルブ」を選んで動画を繋げればいいと思います。ディゾルブを使うことで時間の経過も表せますし。 あとは作業をしている影が見え隠れしてしまってるのが惜しい！ 光と影は撮影後の修正が難しいから、何度かテストしてみてから撮った方がいいですね。
https://blog.adobe.com/media_e740379c15cb729096188c184f3e6bb884a2a2df.gif
クロスディゾルブによる動画間の処理
浅野：言われてみると確かにそうですよね。気をつけることがいっぱいです……。後から消せないですし、やっぱり動画って難しいです。
松原：このお茶を注いだ後に垂れてしまった水滴とか、消そうと思えば消せるものもありますけどね。でも、修正の必要がない動画を撮るほうが多分楽です（笑）。
浅野：おっしゃるとおりです（笑）。
松原：あとはもっとアップで撮って湯気を映すとか、そういうカットがあってもいいですね。でも、こんな感じで動画を繋げていくと、iPhoneで撮った動画もいい感じになったでしょう？最後に、書き出して完成！
浅野：今回くらいの30〜40秒の商品紹介動画だと、書き出すサイズはどの程度にしておけばいいでしょうか？
松原：掲載媒体にもよります。たとえばYouTubeならフルHDがいいんですが、自分のサイトやSNSにアップするなら、10MB以下を目安にしたいですね、できれば5MB以内がいいかな。
浅野：なるほど、じゃあ書き出しますね！
浅野：あっという間にできちゃいましたね！撮影は課題満載でしたが、編集は面白かったです。せっかくAdobe Creative Cloudで色々なソフトが使えるんだから、私も動画にトライしてみたいと思いました。どうもありがとうございました！
https://blog.adobe.com/media_053029d291859a06abc7b682bcbcc07b0275dde6.gif
まとめ
さくらのまとめ
動画ってとても難しいイメージがあったんですが、丁寧にポイントを教わったことで自分にもできそうだと思えました。でも、私の表情でもお分かりいただけるかと思いますが、難しいものはやっぱり難しい！細部を知り尽くしているプロにはかなわないですよ。興味のある方は、私の動画を一緒に駄目出ししてみてください。次回があれば、アドバイスを活かしてカット割りから作ります！
くれまのまとめ
いきなり第2回をさくらさんに全面的にお任せしてしまって申し訳なかったのですが、正直なところ、一読者としてめちゃめちゃ参考になりました。私が運営に携わっている小規模サイトは、ご予算や関わる人数の関係上、私がひとりですべてのコンテンツを用意しなければならないケースもあり、たまに商品などの説明動画を掲載することもあるのです。動画に関しては素人なので、大きなビデオカメラで撮影するのは難しいと感じることも多々あります。次回はぜひiPhone 6sの4K動画で撮影し、Premiere Proで編集してみたいと思います！