セミナー「映像とウェブ 2 -ウェブ上の動画を使ったあれこれ- in Yahoo! JAPAN」 に参加してきました。

2013/12/10にヤフー株式会社にて行われた「映像とウェブ 2 -ウェブ上の動画を使ったあれこれ-」というセミナーに参加してきました。
概要などについては以下のとおり。

ウェブ上では動画広告などのリッチコンテンツが一般化し、今後ますます増えていくと思われます。また、Adobe Creative Cloud の登場により、ウェブ制作がメインの方でもAdobe Premiere Pro や、Adobe After Effects といった動画作成ツールが身近な存在になりました。

前回は映像制作(AfterEffects)とウェブ制作の交流というようなテーマで行いましたが、今回はウェブ上で動画コンテンツを使い、もりあげている人たちの楽しい話をお聞きしたいと思います。

これを機に動画制作を始めてみたり、ウェブ上の動画にさらに興味をもってもらえたり、あなたの制作の幅を広げる、そんなセミナーになれればと思います。
映像とウェブ2 -ウェブ上の動画を使ったあれこれ-

Web屋になるまえは映像製作会社に勤めていたこともあったので、非常に興味を惹かれたので普段は意識低い系なんですが、これはおもしろうそうだなと思い参加してみました。

登壇者と発表内容は以下のとおり。

  1. 穴井 宏幸さん(@pirosikick):『HTML5とjavascriptで作った、ブラウザで動くプロジェクションマッピングサービス』
  2. 宗宮 賢二さん:『Web素材を映像プロモーションに活用する方法とAE教育について』
  3. 大野 謙介さん(@SeKai_SeiFuKu):『映像体験の将来とGIFアニメキュレーションサービスGIFMAGAZINE製作秘話』
  4. 鈴木 辰顕さん(@tatiaki):『Yahoo! JAPANのリッチ広告について』
  5. 劇団スカッシュさん(@gekidan_squash):『どうやって僕らがYoutubeだけで暮らせるようになったのか』

『HTML5とjavascriptで作った、ブラウザで動くプロジェクションマッピングサービス』

穴井さんは今流行りつつある、「プロジェクションマッピング」をブラウザ上で行うというサービスについての講演でした。

まず「プロジェクションマッピング」については国内では昨年クリスマスにあった東京駅でのプロジェクションマッピングで一気に話題に上がった感があったが、国外では実は数年前からじわじわとトレンドになりつつあったということ。
また上記の東京駅の事例があるため「プロジェクションマッピング」というと国内では建造物などに映像を映し出すアート作品という風に捉えがちだが、国外ではもっと規模の小さいものが多く。それぞれがネタ系も含めて色々なものがあったりするということでした。

その点で実は国内における「プロジェクションマッピング」の先駆けがDPZだったりするらしい。(↓このへん)

とはいえ、かっこいい「プロジェクションマッピング」を作るとなるとまだまだ敷居が高いってことで穴井さんが立ち上げたサービスが以下の、「easy-video-mapping.com」です。

easy-video-mapping.com – Free Web browser Projection mapping

ブラウザ上でオブジェクトを作成して、そこにテクスチャとして動画なりを貼ることでブラウザ内でプロジェクションマッピングを作成できるというサービス。しかもすべてHTML5とJavaScriptだけでできているというのだから驚き。

肝の技術となっているのはHTML5で利用ができるようになった、WebGLという技術。
WebGLとは何かというと、一言でいうとOpenGLをWebブラウザ内で使えるようにしたものということ。
ではOpenGLとは何かというと、要はグラフィックス向けのライブラリとのこと。

OpenGL(オープンジーエル、Open Graphics Library)は、Khronosグループが策定しているグラフィックスハードウェアのアプリケーションプログラミングインタフェース (API)。2次元・3次元コンピュータグラフィックス両方が扱える。

オープン仕様として公開され、幅広い処理系に対応しているため、広く一般に普及している。グラフィックデバイスとの直接通信を行なう抽象化レイヤーAPIであるため、非常に高速に動作し、高精度な3D画像を描画できる。有償・無償の豊富な補助ライブラリがあるのも特色として挙げられる。
2004年に発表されたOpenGL 2.0でシェーディング言語を仕様化するなど、時代に沿った多様な機能を持つようになっている。
OpenGL – Wikipedia

まぁ詳細についてはなかなかわかっていないのだけど、とりあえず2D/3DグラフィックスCGの画像処理が便利になるライブラリという認識でいいかなと。
それをブラウザ上でも使えるようにするのが、WebGLなわけだけどそれだと何がいいのかという点で一番のメリットがGPUの処理能力を利用できることが大きいらしい。

CPUの処理能力だけだと動画などをグリグリ動かすとなるとどうしてもパワー不足になりがちだけど、GPUも利用できればグラボを積んでいるマシンなどではそっちの処理能力も使うことができるので、かなり動作が安定するっぽい。

WebGLというとこのサンプルがまずは思い浮かんだ

Epic Citadel

なので、“WebGL = Game”という先入観があったけど、穴井さんいわくそんなことはなく、幅広く応用できるということ。

JSについては“theree.js”というライブラリを利用することでJSで3Dのオブジェクトを簡単に扱えるようになるらしい。これは自分でも使えるように検証したい。

これらを実際に制御しているJSのソース自体はせいぜい50行程度のものだというから驚いた。やっぱりライブラリはじめ既存のあるものをうまく組み合わせて使えることがスピード感もってサービスする上では大事だなと改めて思ったりした。

とは言え開発にあたってはやはり3Dプログラミンの知識がある程度は必要だったりしたらしく、あとちょっと急ピッチでよくわからなかったけど、yeomanというのが便利らしい。これを使うと簡単に開発環境が作れてしまうとかなんとか。
この辺はちょっとよくわからない話しだったのでおいおい理解できるようにしたい。

Yeoman – Modern workflows for modern webapps

セミナー終了後、実際に別室でeasy-video-mapping.comのデモを見させてもらった、単純な立方体のオブジェクトにプロジェクターから映像を投影させている様子を実際に見たけど、実際にみるとなんかそれだけ結構すごいと思えるからすごい。

またeasy-video-mappingでは実はオブジェクトそのものを3Dで扱っているというわけではなくて、あくまで平面として扱っているだけなのだということ。だから実際に投影する物体に合わせて平行四辺形をつなぎあわせて立方体として投影対象を作成して、それの面一枚ずつにテクスチャとして動画貼り付けて実現しているというのがわかった。
また現在は直線の表現しかできていないので、今後はカーブなども表現できるようにしていきたいとのこと。あと、まだ英語版だけのサービスなので、日本語対応もしていきたいなど、とにかくこれからが楽しみなサービスだった。

『Web素材を映像プロモーションに活用する方法とAE教育について』

続いて宗宮さん、宗宮さんは日本で最初のAfter Effectsの解説書を出したという、まさしくAE界の第一人者。
現在は大学の教授であるが、かつてはテレビ番組のOPなどのCGなどを手がけていらしたとのこと。

話の内容についてはAEにPhotoshopから素材をダイレクトに取り込むことで、レイヤーをそのままタイムラインに取り込むことができるので、PSで作った各部の素材をAE上で自在に動かせるということ。
これによって通常であればちょっとめんどくさいと思えるようなちょっとした動く画像バナー程度ならすぐに作れてしまうということのデモや、あとはAEは3Dでの素材を扱うことができるので、画像をコラム状に配置して、それをAEで取り込み3D空間にちらばさせるだけで、3D的に描写された一枚絵を書き出すことができるということや、このとき大事なのが、3Dの配置についてやり直しが簡単に効くということが目からウロコだった。
あとは適当に光源をおいて、光が刺しているように見せればなんとなくかっこよく見えるというAE使いあるあるなネタもあったり。

最後に実際に宗宮さんのもとで講義を受けている学生が1週間で作った動画を見て、終わりとなった。宗宮さんはAEとか触ったことがない人間でも1週間もあればここまでできるようになりますとのことだったけど、音楽も自作だったりととてもそんな誰でもできるようなクオリティじゃなかったという件。。。

『映像体験の将来とGIFアニメキュレーションサービスGIFMAGAZINE製作秘話』

続いてはGIFの話し。

GIFの今昔話を踏まえてのGIFアニメーションをこれからについてと、GIFアニメーションの閲覧・収集に特化したiPhoneアプリの「GIFMAGAZINE」の紹介の話しだった。

まぁ実際にスマホをはじめとしたモバイル環境の台頭によって、GIFアニメーションが急激に広がってきていたのは実感しているところ、こういうサービスがでてくるのも実に納得が良く感じだ。
こういうおもしろそうなサービスはAndroidユーザーに冷たいのは残念。

『Yahoo! JAPANのリッチ広告について』

次は今回のセミナー主催者でもあり、Yahoo!Japanのデザイナーでもある鈴木さんからYahoo! JAPANのリッチ広告について。

実はもうずいぶんとYahoo! JAPANのトップページを見ることもなかったのだけど、知らない間に結構面白い広告をYahoo!ではやっていたようで、いわゆる広告バナーの領域に対して、オンマウスするとそこから画面が大きくなってコンテンツがスタートしたり、直近のネタだと、進撃の巨人がYahoo!サイトに現れるというキャンペーンもそうだ。

さて、その中で今回紹介されたのはドラクエモンスターパレードのキャンペーン広告でドラクエのモンスタースライムがYahoo! JAPANのトップページから影だけ透けてみえるという仕掛けの開設だった。

この事例と鈴木さんの個人の仕事の事例を交えてAEを使って動画を簡単にWebページに落としこむというやり方について実演デモをやる予定だったが、どうもディスプレイに使われている、PCの解像度があっていなかったみたいで、細かい操作がなかなかできず、なんともグダグダな展開に・・・。
最終的には鈴木さんの口からあとでYouTubeに動画をあげますとなってしまった。

とりあえず、鈴木さんの講演をまとめるとリッチ広告として目指しているのはユーザーの邪魔をせずにいかに商品のPRをできるかということと、100枚の仕様書を書くよりも、まずは1つモックを作ってみせたほうがいいということでした。

動画楽しみに待ってます。

『どうやって僕らがYoutubeだけで暮らせるようになったのか』

最後は劇団スカッシュさんというYouTubeに動画をあげて、それで生計を立てているという人たち。正直自分はまったく存じていなかったのだけど、界隈ではかなり有名人だったよう。

YouTubeに作品をあげてお金を稼いでいる人のことをYouTuber(ユーチューバー)というらしい。
劇団スカッシュさんたちは自己紹介のあとは鈴木さんとのトークセッションという形になった。まとめると。

・YouTubeで再生数をのばすにはとにかく媚を売ることが大事(再生数が多い動画を母体に紐づいていく)
・YouTubeはほとんどがスマホで見られている
・スマホで見られる前提で構成を作ったほうが離脱されない(最初の15秒で惹きつけて、3分以内で終わるようにする)
・日本ではYouTuberは個人でやっている人がほとんどなので、劇団という複数人でストーリーのあるものを制作できているのは劇団スカッシュくらい
「さよならヒーロー」が公開中

普段ニコニコ派だったけどYouTubeの界隈ってのも知らない間にずいぶんと変わってきてるんだなと実感。

まとめ

これまで動画っていうのは動画サイトで一方的に見ることが多かったわけで、前に自分でつくっているときも最終的には映像コンテンツとしてつくってきたわけだけど、今回のセミナーを通じて、もっと動画というコンテンツを柔軟に小さい単位で扱って、Webを構成するうえでの一つのパーツとしてみることができれば、これまでの固定概念からもはずれたもっと面白いものができあがるかもしれないし、自分でも動画をそういう風に利用したWebのサイトなりサービスを作れるようになれたらいいなと思えた。
非常に刺激になることが多く、とても楽しかったので、また次回以降もあるようなら参加したいと思いました。

Posted from Minato-ku, Tōkyō-to, Japan.

[`evernote` not found]
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.