インタラクティブな演出を極めし達人からデザインのヒントを探る：第53回HTML5とか勉強会リポート（2/2 ページ）

「第53回HTML5とか勉強会〜インタラクティブの世界から学ぶコンテンツ制作」で紹介された2人のクリエイターのコンテンツ制作事例講演「クリエイティブと人生」「“ヤフー トレンドコースター” のつくりかた。」から現在の“クリエイティブ”やWebデザインに役立つヒントを探ってみよう。

[河内典子，@mucchio]

Saqooshaさんが語るTREND COASTERの作り方

　もう一人の登壇者は、クマをかぶったプログラマーとして知られるdot by dot inc.のCTOのSaqooshaさん。「“ヤフー トレンドコースター” のつくりかた。」と題して「TREND COASTER」を作った経緯をプレゼンテーションした。

　TREND COASTERはOculus Riftとドライブシュミレーターを使って、トレンドを体感できるジェットコースターとして話題を集めたので、知っている読者も多いだろう。

動画が取得できませんでした

　ヤフーとは2013年にも「さわれる検索」として、3Dプリンターを使い検索結果を表現する作品を制作。講演では、視覚障害者向けにマシンを設置し、インターネット広告への未来を打ち出した経緯を話した。

　続く2014年には、もう少しエンターテイメント寄りな企画をヤフーに求められた。それが、TREND COASTERだ。Saqooshaさんは、エンジニアとして企画会議から参加し、作品が実現可能かどうかをその場で発言しているが、クリエイティブな作品をエンジニア主導で進めるためにも、企画会議からどんどん参加していくべきだという考えを持っている。

Flash、JavaScript、openFrameworks、Unityなどのフロントエンドのプログラミング技術を中心に、さまざまなソフトウエア／ハードウエア技術を巧みに用いて、クライアントやクリエイティブディレクターたちの無理難題を解決する仕事に携わっている

企画ありきの技術鍛錬

　ご想像の通り、TREND COASTERは完成までは一筋縄ではいかなかった。例えば、ジェットコースターを体感する「風」だ。どうすればいいか秋葉原のお店に探しにいき、まずは店員にスペック表の見方を教えてもらい、どの数値が高いと風圧が感じられるのかを知るところからはじめ、最終的に工業用ダクトファンにたどり着いた。工業用ダクトファンは、マンホールの中の人が死なないように空気を送るから相当強い風を送ることができる製品だ。

プレゼンテーションで椅子を使ってジェットコースターをシミュレーション。水に飛び込むスプラッシュのために霧吹きで水を掛けた結果20分でOKが出たという

　Saqooshaさんは、ジェットコースターのコースを生成するために、Unityを使ってコースシミュレーターのモックを作った。シミュレーターは、チェコまで買い出しに行った。現地の販売元で試乗させてもらい、製品は気に入ったが、高価だったため、「バンドルされていたモニターとハンドルは不要だ」と交渉したが伝わらず、Saqooshaさんはその場で、シミュレーターのソースコードを見せてもらい、プログラムを書いて制御して見せた。結果、欲しいものだけを売ってもらえたという。

　Twitterのスクリーンキャプチャを表示させる表示窓にはサーバーサイドでNode.jsを、UIにはPhantomJSを使っている。Twitter APIからツイートテキスト、ユーザーのアイコンを読み込んで、HTMLでレイアウトしたものをPNGで書き出し、テクスチャとしてUnityに読み込んでいる。

　TREND COASTERはWebサイトでも体験できる。Web版作成に当たって、SaqooshaさんはUnityとWebGLを使用。UnityとWebGLとでは座標系の扱いが逆なため大変なこともあったが、HTML5で作った部分は、元のコードをほぼそのまま移植できて簡単だった。

　「HTML5の浸透でブラウザーでできることが広がって楽しんでいますが、まだパフォーマンスが問題で、ちょっと安定して使いづらいですが、これからのWebGLに期待しています」（Saqooshaさん）

　「FLARToolkit」の生みの親でもあるSaqooshaさんは、ARをFlashに持ち込んだ第一人者だが、TREND COASTERを作ることでOculus Riftでも第一人者に。Oculus Rift案件第2弾の「進撃の巨人展360°体感シアター“哮”」でも力を発揮した。

Saqoosha :: 進撃の巨人展、360°体感シアター“哮”

　「そこでは、1秒間に75フレームで構成しなくてはなりませんでしたが、キャラクターがたくさん登場し、エフェクトが盛り盛りで、世界がめっちゃくちゃ広く、いかに要素を削らずに保つかというのが腕の見せ所でした。どの案件でも絶対ありますが、見えないところは極力削りながら、最終的には、まとめるのが難しいですね。プロジェクトの後半になると、最高の表現ばかりの中でどれを削るかを判断するのが大変でした。フラッシャー（Flash使い）はマゾヒスティックだと言われますが、こうなったらもっと楽しいだろうと、確かに自分で課題をさらに盛ってしまうことがあります」（Saqooshaさん）

Saqooshaさん「熱しやすく冷めやすい性格。目先に飛び付いてやっています。外せない大切な考えや、必勝パターンがあるわけでなく、周囲からは『瞬間沸騰型問題解決おたく』と呼ばれたことも。課題がないと、物を作らないのですが、企画が面白いと思ったら、わっと火が付いて、あれもこれもできるよと『無茶ぶりドリブン』で仕事をします。Google検索を一日何十回も使っているので、ネットワークがなくなったら仕事できません」

　このように、2人のクリエイターの講演模様を紹介したが、いかがだっただろうか。Flash全盛期からインタラクティブな領域で活躍してきた2人に共通しているのは、面白いと思った企画や技術は、検索しながら取得していき、自分のものにしていく。結果、「盛り過ぎ」と言われるほど凝りに凝る。ひょっとすると、このやり方はエンジニアにもデザイナーにも、デジタルの世界でモノを作る人に通じる、戦い方なのかもしれない。