技術的な制約が表現のクオリティを左右する—プログラミング

BAPA(バパ)の「デザイン・プログラミング」の講義、後半はバスキュールのエンジニアである渡邊敬之さんが、アイデアをかたちにするためにどんなことに気をつけ、どんな順序で制作を進めていったのかをリアルに語ります。最後は、バスキュールのみなさんによる生徒の作品の講評がおこなわれました。

モックアップを作り、ユーザー体験が最大になるようなルールを決めていく


渡邊敬之(わたなべ・たかゆき/バスキュール デベロッパー・ディレクター) 大学、大学院で電気・電子分野を専攻し、平行して独学でプログラミングを学ぶ。2005年にバスキュールに入社。【主な作品】Sakanaction 12cams、MAKE TV金曜カーソル個人サイト:http://kitasenjudesign.com

 僕はいわゆるFlasherと言われるフロントエンドエンジニアで、大枠の企画が決定したあとにプロジェクトに参加することが多いです。映像やアルゴリズムを用いる表現に関わるプログラムを担当しています。

  今回は、アイデアを考えるというより、アイデアをどうかたちにしていくかという話をしようと思います。

 要点は2つ。ひとつは「とにかく作ってみる」ということ。ひとつとして同じ案件はないので、僕らは毎回新しいチャレンジをしています。つくってみて初めてわかることがとても多い。だから、デジタルに精通していない人と一緒にプロジェクトをやるときは特に、とにかくモックアップをつくってイメージを共有することが大事になってきます。

 そうやって、トライアンドエラーを繰り返して精度を上げていくこと。企画が指導した当初は、仕様もきちっと決まっていないことが多く、つくりながら決めていくことが多いんですよね。そのためには、トライアンドエラーができる環境をつくることが重要だと思っています。

前回、PARTYの川村真司さんが、andropの「Bright Siren」のPVをつくるときに、ストロボ制御をシミュレーションするツールをつくっていました。あれがあることによって、アニメーションのいろいろなパターンを試して、一番いいアニメーションを模索することができたはずです。試行錯誤するためのお膳立てをしておくことが、クオリティの高い作品をつくることにつながると思います。

 2つ目は「枠組み・ルール作りが重要」ということ。インタラクティブコンテンツというのは、見るだけでなく、ユーザー体験自体を気持ちのいいものにしなければいけない。また、デバイスやプラットフォームの特性に依存します。映像のようにフォーマットが決まっていないので、ルールや枠組みからつくらなければいけないことが多いんです。

 このとき考えるのは、「アイデア・企画」と「技術的制約」のバランスです。この2つは表裏一体で、密接に関わっています。例えば、スマートフォンと連動したテレビの企画をやるとします。スマホをポチッと操作して、それがテレビに反映されるまで6秒のレイテンシー(遅延時間)があるんですけど、その時間を踏まえて企画を練らなければいけないんですよね。この時間が0秒だったら、もっと面白くできるし、30秒かかるならば成立すらしないかもしれない。

 各案件によって、ユーザー体験が最大になるように、アイデアと技術のバランスを綿密に設計していく必要があるんです。そのためには作って試してみて分かることも多々あります。


技術的な制約を乗り越えることで、初めて実現するアイデアがある

 それではここで、「TOKYO CITY SYMPHONY」を例にして、この作品をどうやってつくっていったか説明します。

 僕が参加した時は、精巧な東京の都市模型にプロジェクションマッピングし、その映像と音を用いてユーザーが演奏できるサイトをつくる、ということが決まっていました。これどのような仕様にし、どのくらいの分量の映像を撮影し、どのような体験にしていったらよいかなど、実際手を動かしてみなければわからないことを、作りながら決めていきました。

 つくるものは、自分で演奏のムービーをつくれるEDITモードと、みんなの演奏がつながっているのを見られるWATCHモードの2つ。まずは僕も春日さんと同じように、資料を集めました。

 僕はアイデアを出すのはそんなに得意ではないけれど、資料を集めるのは誰でもできることなので必ずやるようにしています。

 参考になりそうなサイトや映像を集めて、これは気持ちよかったなとか、これはおもしろいけれど複雑になりすぎている、など参考にして、モックを作り始めます。

 最初はテスト撮影もできなかったので、Photoshop上で街並みのアウトラインをひいたものにプロジェクションマッピングのシミュレーションをして検証していきました。固定アングルだけじゃなくて、複数のアングルを入れたらどうなるかなどのことを少しずつ探っています。

 もう少し進んで、模型のテスト撮影を行なってからは、模型に単なる映像をプロフジェクションして、どうなるのか試しています。ここで、ユーザーが演奏出来るひとつの映像を0.5秒単位でやっていたら、単調だったり、音楽として成り立たいことがわかり、いくつかの尺の映像素材を撮影することになりました。

 こういうインタラクティブジェネレートの作品をつくるときに考えるのは、ユーザーがどんな入力(演奏)をしても、一定レベルのクオリティの出力(映像と音楽)を保てるようにする、ということです。それが一番難しい。おそらく、ずっと同じキーを押し続ける人とかがいるわけです(笑)。そういう人がいても、一定のクオリティを持った出力をできるような設計をしています。

 例えば、クオリティを保つための設計として、WATCHモードの演奏のすべてをユーザーに任せるのではなく、Aさん、Bさんと続いたら、Cさんに行く前にこちらでつくったムービーを挟み込むようにしました。そうすると、映像的にも音楽的にもクオリティが保たれます。あと、各ユーザーのバリエーションをつけるために「FUTURE CITY」「ROCK CITY」「EDO CITY」という3つの異なるトーンの映像・音楽を用意し、選べるようにしています。こうすれば、自動的にいろいろなバリエーションが出ます。

 最終的には、このような企画的な面白さの部分と、「最低限のロード時間、CPUの負荷、遷移の簡単さ」などのユーザビリティ的な部分、実装時間などを吟味して、どういう形がよいか探っていきます。

 これは撮影日直前のモックです。

 公開1か月前に映像素材の撮影だったのですが、それまでに仕様はほぼ確定させ、自分で演奏ができる状態までなっています。撮影時に工夫した点は、先ほど話したトライアンドエラーができる環境をつくるために、実際に撮った映像をすばやくシステムに入れ込めるようなツールを用意しました。撮影した映像を細かく切り出して、ツールやバッチでフラッシュ形式に変換したんです。それで、撮影時にすぐフィードバックして、最適なアングルなどを探ることができました。こうした試行錯誤が最終アウトプットのクオリティを左右するように思います。


技術的な制約は表現に大きく影響する

 最後にもう一つ、「DRIVE-GO-ROUND」の例について解説します。

 これは真木よう子と夜の首都高速をドライブしている気分になれる、360度ムービーです。

 この案件の問題は、映像の読み込みをどうするかでした。3つのシチュエーションでドライブする画面を切り替えられるんですけど、シチュエーションが替わってもバックミュージックと映像はなめらかに続いているんですよね。まず思いつくのは以下のような実装方法なのですが……

1.映像を最初に全部ローディング
×全部で数100MBもあり、ローディング時間が果てしない

2.プログレッシブダウンロード(ダウンロードしながら再生)
×ムービーが1つならいいが、同時並行で複数ムービが進んでいる
×結局ローディング量も変わらないし、切り替わりも難しい

3.ストリーミング
×ストリーミングサーバーをたてなきゃいけない
×バッファリングの時間は必ずあって、気持よく切り替わらない

 これらの方法では、バックに流れている曲との厳密な同期とスムーズな遷移、インタラクションを実現できません。

この続きは有料会員登録をすると
読むことができます。
cakes・note会員の方はここからログイン

1週間無料のお試し購読する

cakesは定額読み放題のコンテンツ配信サイトです。簡単なお手続きで、サイト内のすべての記事を読むことができます。cakesには他にも以下のような記事があります。

人気の連載

おすすめ記事

この連載について

初回を読む
教えて、バパ。

BAPA

デザインとプログラミング。両方のスキルを兼ね備える、次世代型スーパークリエイターの育成を目指す学校ができました。“Both Art and Programming Academy”、その名もBAPA(バパ)! デザインや広告などのクリ...もっと読む

この連載の人気記事

関連記事

関連キーワード

コメント

bapa_ac 【cakes連載記事:第6回「デザイン・プログラミング」】 バスキュール... http://t.co/yMkkcTCphY 4年弱前 replyretweetfavorite