Webクリエイターのステージを広げる動画スキル習得ステップ

Webクリエイターは「動画」を身に付けるべし

映像はフイルム・ビデオの時代から演出、撮影、編集と専門のスキルが必要なクリエイティブだった。デジタル化が進行した現在でもその専門性の本質は変わっていないと言えるが、高速なインターネットとデジタルメディアの実現によって、好きな時間に好きなデバイスで視聴できる「動画」コンテンツが利用されるようになった。

Webサイトでの活用はもちろん、スマートフォンやタブレットPCでの視聴機会は、今後さらに増えていくことだろう。

コンテンツとしての動画の持っている特長は次の点だ。

1. 密度の高い情報を短時間で伝達できる（コミュニケーションスピードが速い）
2. 直感的な印象構築ができる（ブランディングなどのイメージ訴求が得意）
3. リアリティを持った情報伝達ができる（実物を見せ、動きと音でプレゼンテーションする）
4. 動画としてパッケージになっている（様々なサイトに掲載可能でマルチスクリーンに対応可能）

スマートフォンやタブレットPCのようにタッチパネルインターフェイスを持つデバイスのコンテンツは、いかに直感的に「タッチ」して選択してもらえるかが重要になってきている。そこでエモーショナルに、速いコミュニケーションスピードでユーザーに情報を伝える動画のメリットが活かされる。そして、それらのデバイスは、ほぼHTML5に対応しており、最初から動画のタグが簡単に貼り込める仕様になっているなど、動画がこれからの標準装備になってくることは間違いない。

ソーシャルメディアのコミュニケーションにおいても、動画は重要なコンテンツとなっている。また、オープンAPIを利用して取得したユーザーの情報を、動画などのリッチメディアコンテンツの一部に組み込んで見せるプロモーション手法などが話題を呼んでいる。

現在、最もクライアントが興味を引かれるプロモーション手法に関わってくるのが動画コンテンツなのだ。それを提案・実現できるスキルを身につけることが、Webクリエイターとしてのランクアップにつながることは間違いないだろう。

動画対応は実は簡単！？

一口に動画と言っても、その内容は様々だ。

1. 映像制作の専門スキルがないと対応できないような演出・撮影・編集をともなうもの
2. グラフィックスの展開が中心となるプレゼンテーション
3. 既存の映像をWebで公開するための最適化

これまで、動画（映像）コンテンツを制作する場合、自社内に制作リソースを持たないWebプロダクションは外部の映像制作会社に発注するケースが多かった。リソースがないということは、どんな簡単なコンテンツであっても外部に依存してしまうことになり、効率も悪く仕事にもなりにくかった。

ところが、動画の制作環境はここ数年で大きく変動し、この状況は変わりつつある。ハイビジョン画質・ブロードバンドレベルの映像制作作業が、一般的なPCでもストレスなくできるようになったのだ。そして、このイノベーョンを活かすことができるチャンスに恵まれているのが、Web制作に携わるクリエイターなのだ。

デスクトップPCの動画制作環境では、これまでのWebサイト制作で駆使してきたツール類がシームレスに動画制作のツールと連携するため、Web制作に近い操作感で映像を作ることができる。デザイナーが使い慣れているPhotoshopやIllustratorなどのAdobeのデザインツールを使い、AdobeのPremiereやAfter Effects、またはAppleのFinal Cutなどの動画ソフトだけを習得するだけで動画への対応が始められる（図1）。

AdobeやAppleの動画編集ソフトは、PhotoshopやIllustratorなどのデザイン系のソフトウェアのデータを読み込んで動画を作成できる。アプリケーション内で連携している部分も多く、使い勝手も共通しているため、WebやDTPで作成したデータを動画素材に活用するなど、シームレスに制作が可能だ。

簡単なコンテンツであれば、映像制作部門を持たないWeb制作会社でも動画対応が始められるし、これまですべて外注していた作業を内制化できる範囲も増えるだろう。

動画コンテンツ制作スキームの変化

現在でも、一般的にはWebサイト制作と動画コンテンツの制作を分業して映像制作プロダクションに発注しているケースは多いだろう（広告代理店がそのように仕切る場合もある）。

映像制作は、シナリオ作りから、撮影、編集と、多くの専門分野の人間が関わる仕事で、ITスキルで仕事をするWeb制作の人間が簡単に手を出せる分野ではないことも確かだ。だが、あなたは映像を作る人、私はサイトを作る人という制作体制で仕事をしていると、双方が同じ方向を見てコンテンツを作ってないというケースが起こりうる。

実は、映像や放送の業界は旧態依然とした古臭い体質であるため（というと語弊があるが）、新しいメディアや技術には感覚が追いついていっていないところが多いからだ。映像単体ではすばらしい作品ができあがるかもしれないが、現在Webの世界で求められているコンテンツやコミュニケーション手法に対応しきれない場合がある。デジタルメディアですばらしい動画を提供できている制作会社には、そこのブレイクスルーが必ずあるのだ。

Webプロダクションの形態によって異なる部分ではあるが、先述の通り、現在は動画のハンドリングがサイト構築の環境に近く、ある程度のことはWebクリエイターが自分でできる。パートナーとなる映像制作会社には、デジタルコンテンツの作り方を学んでもらい、双方十分にコンセンサスを得たうえで作業段取りを組んで、共同で作品を作るスキームに変わっていかなくてはならない。たとえば、次のような方法だ（図2）。

これによって、作品のクオリティを上げることができるだけでなく、無駄なコストを削減することにもつながる。

動画スキルを身に付けるには

当然、Webのクリエイターのなかでも、職種・専門分野によっては使えるツールや、基本スキルが異なる場合がある。動画対応に向けてそれぞれの場合のスキルアップ戦略を考えよう。基本として、動画対応には主に次の2系統の知識とスキルが必要になる（図3）。

1. 「動画」をハンドリングするためのスキル
2. 「動画」コンテンツを作るためのスキル

1. 動画をハンドリングするためのスキル

まず、基本的にできるようにならなくてはならないのが動画をハンドリングするための基礎知識だ。Webディレクターやマークアップエンジニアはこの部分をクリアできればよいだろう。

1. 動画フォーマット　（Webサイトや各デバイスで視聴できる形式のデータを作る方法）

   実際は、Webサイト公開用の「Windows Media形式」「Flash Video形式」「MPEG-4 AVC/H.264形式」の3種類について理解し、エンコーディングなど、動画ソフトのその部分だけをマスターすればよい。

2. 動画プラットフォーム（動画データを配信するためのサーバー・サービスなどの知識）

   ユーザーがオンラインで動画を見るには、動画全体をダウンロードしてから見るタイプと、オンデマンド配信（ストリーミング）の2つの方法がある。基本的には、現在の主流のオンデマンド配信選択することになる。そのうえで、YouTubeなどのフリーのプラットフォームを使うのか、CDNや帯域保障のある配信サービスを使うかなどを目的によって選択・運用できることを覚える。

3. 動画インターフェイス（動画を視聴するWebページの構成・アプリの制作方法）

   動画配信サーバー（プラットフォーム）に格納したデータをサイトデザインのなかでどのように見せるのか、またFlashなどのリッチメディアアプリケーションに組み込むマークアップ手法などを身に付ける。

YouTubeやニコニコ動画に映像を投稿したことがあれば、基本的な動画フォーマットとエンコーディングの方法は体験しているのではないだろうか。それぞれを少しずつ系統的に学べばよいと考えれば、基本的なハンドリングスキルを身に付けるのは大変なことではない。クライアントから預かった動画素材をサイトやプラットフォームに合わせた形にエンコードできる、というだけでも「動画」スキルをアピールするポイントになる。

Webディレクターとして、次第に動画制作全体のフローが把握できるようになったら次のステップへと進む。映像の撮影から、音声の処理など、各プロセスの分業・発注などをコントロールできるようになればコスト管理が容易になり、顧客の要望への対応力も強くなる。

2. 動画コンテンツを作るためのスキル

1. 動画のディレクション

   Webディレクター・プランナーは、テキストやグラフィックス、Flashなどのコンテンツと同様に動画をディレクションできるようになる必要がある。制作スタッフにきちんと指示ができれば、コンテンツの種類が変わるだけだと考えていい。

   • サイトの設計（動画の役割と使い方を決める）

     動画単体で伝える情報ではなく、サイト全体で伝える情報としてコンテンツを設計すること。

   • 動画の構成（シナリオに盛り込む情報を整理する）

     動画で伝達するべき内容を時間軸に合わせて構成すること。一般的な商品やサービスであれば、プレゼンテーションの考え方で情報を整理することはできる。

   • 制作手配・指示

     映像制作会社や、制作スタッフに対し作業の指示ができること。ロケ手配や、映像の撮影指示、役者に芝居を付けるような演出はできないが、サイト内においてその動画がどのように用いられるかということと、見せなくてはならないシーン（カット）、尺数（長さ）などの指示ができればよい。

2. デザイン・編集
   • エフェクトソフトで作る「動くグラフィックス」　～Flashの経験のあるクリエイターの場合

     Webのデザインや、DTPのデザインと動画の違いは、動画が「時間軸」を持っていることにある。現状、Flashを用いて画面展開のあるサイトや、モーショングラフィックスを作成した経験のあるデザイナーやフラッシャーであれば、この「時間軸」の考え方にはなじみやすいだろう。モーショングラフィックスの制作経験があれば、After EffectsやMotionのような動画効果を編集するソフト、画面展開のあるFlashの制作経験があれば、PremiereやFinal Cutのような編集ソフトが取り組みやすいだろう。

   • 編集ソフトで「動くスライドショー」　～DTPなどのデザインのできるデザイナーの場合

     PhotoshopやIllustratorで作成したグラフィックスを、スライドショーのような考え方で展開、デザイン性の高い動画を作成することから始めるのが近道ではないだろうか。AdobeのPremiereは、PhotoshopやIllustratorのアセット共有が可能なので、デザイン環境と動画制作環境をシームレスにつないで作業できる（AppleのFinal CutやMotionも、バージョンによって連携している）。

このように、「いまできること」から始めることで、動画スキル獲得には、それぞれに適した道筋が考えられる。なんらかのソフトを身に付けることは必用だが、すべてをマスターしなくとも、動画対応は始められる。どこかがマスターできれば、次のスキルを獲得することは難しくない。段階的なスキルアップ戦略を立てて臨もう（図4）。

全スタッフ動画OK!
クロスコのイノベーションはどのように起こったのか

この記事で紹介するWebクリエイターの動画スキル獲得イメージは、実は、クロスコの社内で起こったプロセスを例としている。一般のWeb制作会社と異なり、弊社はもともと映像制作事業と、Webなどのプロモーション事業の2つのドメインを持っている会社だが、以前は「映像（音声含む）」を作るプロフェッショナルと、「Web（DTP含む）」を作るプロフェッショナルの両方の人材が、同じ社内に居ながら、一般の映像制作会社とWeb制作会社のようなに仕事の分担をしていたのである。

この状況が大きく変化したのは、放送のデジタル化と、デジタル収録、ノンリニア編集の手法・環境が急速に整い、放送局用の仕事をしている編集室でも、PC（Mac）ベースのFinal Cutを編集システムに組み込むなど、両者が同じ環境で仕事をできるようになってからだ。

DTPやWebのデザイナーが作成したロゴやグラフィック素材を動画に用いることで、画面デザインに費やしていた編集スタジオの時間を短縮し、新しい感覚で映像のクォリティを高めることができたし、動く素材を作る作業が、デザイナーたちのモーショングラフィック感覚を育てるのに役立った。

映像とWeb、両方のプロフェッショナルが共同で作業することで、双方のノウハウを教えあうことができ、分業も含めた効率的な制作手法を確立し、マルチスクリーンに対応した映像と、デザインクオリティの高いコンテンツへの対応スキルを獲得していった。これらはすべて個々のスタッフの地道な努力があって、全体のイノベーションが起こったのだと言える。

では、実際Webクリエイター達がどのように動画を習得していったのか、インタビューでご覧いただきたい。

事例1：デザイナーが動画をマスターするには

Interviewデザイナー：佐藤修

できることが増えると、仕事が増えて、寝る暇が減ります。

• Adobe Premiere
• Adobe After Effects
• Apple Final Cut

デザイナーの佐藤は、DTPからWeb、Flashまでこなすマルチスキルの人間だ。Flashで経験の多かった、モーショングラフィックスの表現をAfter Effectsで動画化することと、After Effectsと連動したPremiereでの編集を段階的にマスターしていった。動画対応が増えたことに合わせて、映像制作で多く使われるFinal Cutも習得した。Web用の動画から、様々なフォーマットを扱うデジタルサイネージのコンテンツ制作まで幅広いデジタルコンテンツを創り続けている。

事例2：Webディレクターが動画をマスターするには

Interviewディレクター：岩戸貴志

導入するソフトは先ず自分が一通り使ってみないと。現在3DCGに挑戦中です。

• Adobe Premiere
• Adobe After Effects
• Apple Final Cut
• Apple Motion

Webデザイナーが作業している動画制作環境を、設計し導入してきたのがWebディレクターの岩戸だ。クライアントの要望を直接聞く立場にある彼は、動画へのニーズをひしひしと感じていた。

• 動画を用いたいが、予算が少ない。
• 短期間でサイトに掲載したい。
• Web用の素材から動画をつくってほしい

そうしたなか、社内で放送用のノンリニア編集ルームがPCベースで稼働しはじめたのを契機に、同様の作業環境をWeb制作チームでも十分運用できると考え提言した。現在システムは順調に稼働し、増設・拡充が進んでいる。自身もFlashなどのアニメーションの制作経験から動画への対応をしていったことから、Webのデザイナーたちも同様に学べると考えたのだ。

作品事例1：デザイナーが動画をマスターすると

Interviewデザイナー：林昭吾

映像は写真と違って撮影後の調整が大変ですね。

• Apple Final Cut

顧客へのプレゼンテーションにタブレットPCを使用する企業は多くなってきており、Web制作会社がコンテンツの制作を依頼されるケースも増えてきている。本プロジェクトはADKインターナショナルとパートナーを組み行われたものだが、DJ機器のリアルな操作感やサウンドをiPadでどのように表現するかが最大の課題だった。タブレットPCのプレゼンテーションの肝は、「直観的＝エモーショナル」にユーザーの興味を喚起してコンテンツを視聴させることにある。本プロジェクトは、まさにこの点で動画が威力を発揮した事例といえる。

デザイナーの林は、DTPの経験が豊富なスタッフだ。PhotoshopやIllustratorという、普段使い慣れたデザインソフトで作成したレイアウトやパーツを撮影した動画と組み合わせ、「動くカタログ」のような効果的な画面を作りあげた。もともと、DTPの世界では商品やモデルのスチール撮影は、スタジオワーク・屋外ロケも含めて経験があるため、スチールがムービーに変わっただけで、ディレクションも問題なくできたという。

作品事例2：映像エディターのマルチスクリーン対応

編集は最初からノンリニアで覚えた世代です。

放送局用の番組を編集しているクロスコの編集センターでも、編集している作品が最終的にマルチスクリーンで用いられるということがあたりまえになった。Webで見せる動画を作る場合、動画が掲載されるプラットフォームのことを考慮した構成・編集にすることが重要だ。編集スタッフも「ソーシャルメディアって、何ですか」とは言っていられないのである（実は写真に写る編集室の隣には、USTREAM配信が可能なスタジオも稼働しており、Webを意識せずにはおられない環境だ）。

普段、映像編集スタジオで音楽番組の編集などを行っている千久間が担当したのが、店頭からWebサイトまでマルチで用いられる商品案内ムービーだ。店頭モニターで離れて見る場合と小さいWeb画面を近くで見る場合のどちらでもきちんと情報が伝えられること、Webユーザーを考慮して音声が聞こえなくても、商品の概要が伝わる構成にすることがポイントだ。作品によっては、スクリーンごとに作り変えることもあるが、本作品では、直感的に読み取れるデザインと短いコピーの動きでそれをクリアしている。

常に進化を！

こうした事例でわかるように、Webのディレクターやデザイナーが「動画」に一歩を踏み出すことは決して難しいことではない。自分はデザインのプロだから、マークアップのプロフェッショナルだから他は学ぶ必要がない、自分はこれしかできない、と思っている人材は10年後を生き残ることができないだろう。

デザイナーは、デザイナーになるときに何を学んだのだろうか。「デザインする」という基本があれば、Webの仕事ができたように、他のクリエイティブへの理解も十分できる。

Webの世界は、日々技術も表現も革新されている。だれもが常に新しい技術・プログラムやソフトを学び続けないといけないことと思う。Flashの技術や表現、使い方を皆が学んだときのように、それは新しい表現やサービスの可能性を開いてくれるものであるはずだ。