オンライン演劇「むこうのくに」を支える技術 ~フロントエンド・UI/UX編~

劇団ノーミーツが培ったノウハウって、自分たちの中に閉じる必要はまったくないと思っているんです。 コロナ禍で様々なエンタメで制約があり、特に演劇は劇場・劇団の存続の危機になりうる逆境です。 でも、この逆境をプラスに変える作品づくりをしていかないといけない。

オンラインでの演劇は増えてきたものの、オンラインならではの演劇体験を提供して興行としても成功させた前例が当初あまりありませんでした。 その前例をつくってノウハウを共有することで、コロナ禍でも興行が成功するコンテンツが増えてほしいですし、そうならないと自分たちがやる意味がないと思っています。

脚本・演出より降りてきた今作の舞台は、2025年という時代設定と、「ヘルベチカ」という１億人が使っているデジタル上の場所という舞台設定でした。 まずはこれを具体的なイメージに落とし込む作業を行います。

2025年が舞台なので、あまりに飛躍していると冷めてしまう。 一方でフィクションを提供する以上はワクワクするような面白さも必要。 「こんな世界が数年後にはあるかも」と思えるよう、SNSやYouTubeなどの延長線上の空間をイメージしました。

そのイメージをデザインに落とし込んでいくため、次はヴィジュアル・アンデンティティ（VI）を考えました。 サマーウォーズのOZの世界観、Monument Vallyというゲームの質感、auのINFOBARなど他にも様々なものをリファレンスして、ヴィジュアルを定義していきました。

リファレンスを集めながら世界観が少しずつ見えてくる中で、8bit感のあるドット絵のようなテイストでもいいんじゃないかと思いました。 世界のデザイントレンドはフラットデザインに移行し、順当にいけば8bitはむしろ時代の逆流でもあります。 だけど、ヘルベチカという空間って、かつての２ちゃんねる的な「インターネットに住んでいる人たち」の時代を彷彿とさせるものがありました。

近年のSNSの台頭を経由して、2020年には全世界がリモート中心の生活を経験しています。 これを経て、かつての「ネット上で生きる」ひとが増えていく未来は、たしかにあるかもしれない。 そうなったときに、ある種の時代回帰的なグラフィック要素をVIとして定義することで、作品自体の意味するところが伝わりやすくなるのではないかと考えました。 それならm7kenjiさんが適任だと思い、グラフィックデザイナーとしてチームに入ってもらい、ヘルベチカ製作室が発足しました。

僕は長年2Dのドット絵をやっているのですが、最初はドット絵が時代設定や舞台設定に合うのか不安がありました。

ただ、ドット絵でつくる世界について考えたときに、例えば昔のゲームってドット絵でビジュアルは貧弱なはずなのに、その世界って古くは感じないし、想像できる余地が広くてワクワクできたと思うんです。 それを再確認したときに、背伸びすることなくドット絵のよさを突き詰めればいいと思えました。

ヘルベチカを作るうえでずっと抱えていた課題が、１億人が使っているリアリティを感じられるデザインでした。 2Dだと奥行きが感じられないし、3Dだとそこに乗っかる演者が浮く懸念がありました。

ヘルベチカの世界を3Dで作るという判断は僕が押し通した部分もあったんです。 3Dを作るのはもちろん大変なんですが、奥行きをつくりやすいのと、別角度から映したりズームなど動きを作ったり、資材の使い回しがしやすく映像としての拡張性が高いのが魅力的でした。

2Dだと、特にアニメーションのような動く部分は要件が変わればイチから作り直さないといけません。 撮影側の要件も刻一刻と変わりうると感じたので、拡張性の高い3Dで行くべき*だと思ったんです。

m7kenjiさんが作ってくれた3Dのヘルベチカの世界は、いくつもの課題を解決できる力があったんです。 これなら絶対にいけるぞ、と確信できるものでした。 この世界観を構築できたことで、今作のスケールが一気に大きくなりました。

まずは、手書きでラフの世界観を固めてから、個別の構成要素を書き出しました。 例えばヘルベチカをハックするチームのアジトでは、秘密基地感のあるゲーム機やDJ卓、大量のモニターやパラボラアンテナなどの小物をたくさん詰め込みました。

その後に各アイテムごとにドット絵をつくり、モデリングをしていきます。

モデリングにはBlender、その中でもSprytileというアドオンを使いました。 2Dのタイルマップをパズルのピースのように組合わせながら3Dをモデリングしていくものです。 これを使って、ドット絵でつくった細かい素材を組み合わせてモデリングしていきました。 作った素材をパズルのように組み合わせてグラフィックを製作する手法で普段から作品を作っていたので、効率よく進められました。

時間が少なかったのもあり、いかに少リソースで最大限の効果を出せるかにこだわりましたね。 特にSprytileを使ったことでかなり効率よく進められました。 結果として、短時間でかなりの物量や奥行きをつくることができ、世界観を表現できるデザインにできたと思います。

普通の演劇では、劇場があり、そこに照明、音響、道具などの舞台装置があります。 オンライン演劇ではスマホやPCが劇場になり、そのスクリーンに映る配信サイトが舞台です。 UI/UXの工夫で既存の劇場体験をアップデートでき、未来の劇場体験を作ることができると考えました。

インタラクションやリアルタイム性も大切にしましたが、一番こだわったのは「没入感」でした。

まずは配信ページのログイン機能です。 ログイン機能はセキュリティ観点でも必要で実装したのですが、名前やパスワードを入力してその世界に入っていくことが没入につながると考えました。 ドメインもhelvetica.worldを取得するなどこだわっています。

お客さんが最初に触れるページなので細部にまでこだわりました。 例えば完全に静止したページではなく後ろの要素がふわふわ動いてますが、一つ一つの素材を動かすコードを書いています。

そうなんですよ。 劇の展開に合わせて、場面転換のときに切り替わるのはもちろん、同じ場面でも夜だと夜景になるというような変化もしていました。 基本の背景は同じでも、投票の日は花火があがる、怪しい展開では曇りになる、などかなり細かい変化まで作り込んでいます。

配信画面の中のデザインにこだわるのはもちろん大事なのですが、画面の外側もデザインできれば配信への没入感が高まるし、それぞれの作品の世界観を表現できる部分になると思うんです。 なのでここはかなり力を入れましたね。

ライブ配信だからこそ楽しめる機能として、劇中でエモーションバーと呼ばれる投票システムを実装しました。

劇中と連動したテーマで投票をすることで、作品への参加感や世界への没入感が高まります。 リアルタイムの集計結果に対して演者がフィードバックをすることでライブ感も高まりますよね。

また、お客さん同士のチャット機能も実装しています。 チャット機能によって、ライブ配信だからこその盛り上がりを実現できました。

前説と途中休憩においては、演者が舞台装置をうまく使いながら劇中のキャラクターのままMCをすることで、お客さんはよりUIのことを理解し、舞台に没入することができました。 前説や途中休憩を入れるアイデアは、実は前作「門外不出モラトリアム」の際に出演者の浅場万矢さんから出たアイデアです。

様々な要因によってオンライン演劇は成立していますが、一番重要なのは、すべてのお客さんがいかにストレスなく、長時間集中して参加していただけるかです。 デザイナーの視点だけでなく演者の視点も取り入れながら、藤木くんを主体に実際の配信画面を構築していきました。

今作はライブ配信かつ没入感にこだわるということで、実現したいことがクリアだったので技術選定はスムーズでした。 リアルタイムで変更したい要素が多かったので、フロントエンドはNuxt.js、バックエンドはFirebaseです。

投票の更新や背景デザインの変更などは、FirebaseのRealtime Databaseを使ってサーバー側の値の変化を接続中のデバイスに送り、Nuxt.jsでそれを受け取って描画していました。 頻繁な描画の更新のプログラムをシンプルにするため、データバインディングの仕組みを持つvue.jsをフレームワークとして採用しました。

更新自体は、管理画面を作成して劇の進行に合わせて手動で操作していましたね。 誰でも使えるシンプルな画面と機能を意識して作りました。

課題としては、ブラウザ対応やスマホ対応ですね。 閲覧環境ごとに最適化された、より良い観劇体験を届けられるようにしていきたいです。

こだわったのは、没入感を高めるために細かい部分まで実装した点ですね。 背景が変わる実装やログイン画面の作り込みなど、小さな要素までこだわりぬいて実装しました。

UI/UXにおいては反省点も多かったので、次回作に向けてまずは改善です。 今作を通して劇団ノーミーツが目指す未来の劇場体験の片鱗が見えてきたので、それをさらに形にしていきたいですね。

僕はグラフィックデザインで関わりましたが、リモートの演劇でもグリーンバックを使って、より面白い背景の中で演者が動くものができたら楽しいなと思います。

Zoomを最大限活用してリアリティを追求した前作「門外不出モラトリアム」、そして「Zoomを越える」を掲げて新しい劇場体験にトライした今作「むこうのくに」。 この２つの長編のオンライン演劇を提供でき、ようやくスタートラインに立ったと感じています。 培ってきたシステムやノウハウをベースに、短編・長編、ジャンル問わず色々な作品にトライしていきたいです。

オンライン演劇はリアル演劇を完全に代替するものではないと思っています。 このタイミングでオンライン演劇に触れた方が、劇場にも足を運んでリアルの演劇も楽しんでもらえると嬉しいです。 もちろんオンライン演劇もブラッシュアップして新しい表現として確立していきたいですね。

また、演劇業界はもちろん、映画やその他エンタメ業界の方にも作品を見ていただき、自分たちでも取り入れられないか？何か一緒にやれないか？と思っていただければ嬉しいです。 新しい表現にトライしていく際の力になれると嬉しいですね。 その中でオンライン演劇もさらに増えてほしいですし、それらのコンテンツが集まり未来の劇場体験ができるオンラインの劇場を作っていきたいと思っています。