オンライン演劇「むこうのくに」を支える技術 ~フロントエンド・UI/UX編~
eyecatch_no_meets_part1
オンライン演劇「むこうのくに」を支える技術 ~フロントエンド・UI/UX編~
みつじ
2020.08.27
この記事でわかること
オンライン演劇はリアル演劇の代替ではなく、新しいエンタメの形。
奥行きやスケールのある世界観をつくることが課題。Blenderなどを駆使した3Dは解の一つ。
スマホやPCの画面に映るUI/UXの工夫によって、劇場以上の没入感など未来の劇場体験を実現できる。

7月23日から8月2日にかけて上演された劇団ノーミーツによるオンライン演劇「むこうのくに」。

オンラインでライブ配信される演劇で140分という長編、チケットは有料にも関わらず、7000人以上が観劇するなど話題を呼びました。

劇場でのリアルの演劇に制限がかかるなか、新しいエンタメの形として注目されるオンライン演劇

劇団ノーミーツはその中でも最も注目を浴びながら最先端を走っている劇団です。

今作、前作や他のオンライン演劇以上に世界観や没入感といった点で大きな注目を集めました。

そんなオンライン演劇「むこうのくに」を支えた技術・デザインを連載形式で深堀りしていきます。

第1弾は「フロントエンド・UI/UX編」。

クリエイティブディレクターの鈴木健太さん、UI/UXデザイナー・フロントエンドエンジニアの藤木良祐さん、アートディレクション / グラフィックデザインを担当したm7kenji(えむななけんじ)さんにお話を伺います!

成功するオンライン演劇が増えてほしい

みつじ

最初にお聞きしたいのですが…「むこうのくに」を支える技術や裏側のお話って公開しないという選択肢もあったと思うんです。 なぜインタビューを受けていただけたんですか?

鈴木健太さん

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

鈴木健太さん

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

みつじ

素晴らしい考えだ…!

オンライン演劇における要件定義と世界観づくり

みつじ

早速、今作の「むこうのくに」を支えた技術やデザインの話も聞かせてください。 今作では「ヘルベチカ」という仮想空間がメインの舞台でした。 どのようにして世界観をつくっていったのか教えていただけますか?

image
今作の舞台となったヘルベチカのメインのデザイン。このような世界ができるまでを追う。
鈴木健太さん

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

鈴木健太さん

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

みつじ

フィクションとリアリティの塩梅がむずかしそう…

鈴木健太さん

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

image
鈴木さんがリファレンスとしてあげていたMonument Valleyの世界の質感。他にも数え切れないほどのリファレンスを挙げていた。

8bit的なドット絵でのデザインへ

鈴木健太さん

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

鈴木健太さん

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

m7kenjiさん

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

m7kenjiさん

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

star_fox_playing
m7kenjiさんが「むこうのくに」の世界観を考える際にリファレンスしたSFCのSTARFOX。第1ステージのコーネリアでは四角い立方体が街を表しており、想像を膨らませて楽しむ。Wikipediaより参照。

世界をつくるのは拡張性の高い3Dで

鈴木健太さん

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

m7kenjiさん

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

m7kenjiさん

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

みつじ

プロジェクトに合った技術選定なんですね…!

鈴木健太さん

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

みつじ

「アイデアとは、複数の問題を一気に解決するものだ」という言葉を思い出します。 ここがブレークスルーが起きた瞬間だったんですね…!

3D空間はBlenderとSprytileで作成

みつじ

3Dのデザインと実装って具体的にはどのように進めていったんですか?

m7kenjiさん

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

image
m7kenjiさんの手書きのラフ。左側のように全体のラフをつくってから、右側のように個別の要素を書き出していた。
m7kenjiさん

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

image
できあがったアジトの背景。小物までデザインが作り込まれている。
みつじ

すごい…!物量がかなり多くて大変そうです。 モデリングのツールは何を使われていたんですか?

m7kenjiさん

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

image
右下にあるタイルマップの素材をつくり、それを組み合わせてモデリングを作成する。
みつじ

ドット絵が得意で3Dに挑戦したm7kenjiさんだからこそ活用できたアドオンて感じがします…! 3Dを作るにあたってこだわったポイントはどこですか?

m7kenjiさん

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

image
お客さんの画面に映らない部分まで広がる奥行きのある大きな世界。物量の多さと作り込みに圧倒される。

こだわった「没入感」とそれを支える技術・デザイン

みつじ

今作のUIやUXのこだわりについて聞かせてください!

藤木良祐さん

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

藤木良祐さん

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

劇への参加の役割も持つログイン機能

藤木良祐さん

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

配信サイトにアクセスするとヘルベチカへのログインページが表示され、入力するとヘルベチカの世界へ入っていく。
みつじ

最初にこの画面が開いてテンション上がりましたし、劇の世界観が一気に伝わりました。

藤木良祐さん

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

みつじ

細かい部分まで実装が行き届いてる…!

動的にデザインが変化する配信サイト

みつじ

配信画面の外の背景のデザインって劇中に変化してましたよね…?

藤木良祐さん

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

image
劇中が不穏な空気に包まれた際には、配信画面に合わせてサイトの背景も赤く暗く怪しい雰囲気に変化している。
藤木良祐さん

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

みつじ

今はヘルベチカの跡地という形で、パソコン音楽クラブさんの劇伴の音源やm7kenjiさんのデザイン画像を公開するという取り組みも面白いですね。 helvetica.worldで藤木さんのこだわりの実装も見れるので、ぜひご覧ください…!

リアルタイムで盛り上がる投票やチャット

藤木良祐さん

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

image
右上の質問から投票することができ、リアルタイムに結果が集計・公開される。
藤木良祐さん

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

藤木良祐さん

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

鈴木健太さん

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

鈴木健太さん

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

image
劇中の舞台とキャラクターのまま、フィルター機能を駆使して楽しませながら前説や休憩への誘導をしたDJメガネ。

UI/UXを支えた技術とは

藤木良祐さん

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

藤木良祐さん

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

みつじ

どのようにしてデータの更新などをしていたんですか?

藤木良祐さん

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

image
シンプルな管理画面で劇中の様々な箇所の動的な変更を管理していた。
みつじ

UI/UXまわりやフロントエンドの実装での課題やこだわったポイントはどこですか?

藤木良祐さん

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

藤木良祐さん

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

次回作へのチャレンジとオンライン演劇のこれから

みつじ

今作「むこうのくに」が終わり、皆さんの次のチャレンジは何になるんでしょう?

藤木良祐さん

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

m7kenjiさん

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

みつじ

どちらのお話もワクワクする…!

鈴木健太さん

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

みつじ

どんな作品が生まれるのか楽しみだ…! オンライン演劇って今後どうなっていくんでしょうか?

鈴木健太さん

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

鈴木健太さん

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

みつじ

新しい表現としてのオンライン演劇、これからどのように進化していくのか本当に楽しみです! エンジニアやデザイナーの方もオンライン演劇に関わってみるのは面白いのではないでしょうか? 鈴木さん、藤木さん、m7kenjiさん、ありがとうございました!

実はこの3人のメンバーはFACEBOYというプロジェクトを一緒に取り組んでいました。 そのような背景があってこのメンバーが集まっていたというストーリーもアツいですね…。

また、鈴木健太さん、藤木良祐さん、m7kenjiさん、それぞれのリンクが個人のサイトになっているので、ぜひご覧ください…!

次回の連載第2弾では「撮影を支えたハードウェア」について深堀りします! オンライン演劇にロボットアームやスマートホームのシステムが使われている…? お楽しみに…!

ライター

みつじ
京都大学経済学部を卒業後、Web系のコンサル会社を経て株式会社Tenxiaを創業。 最近はコードを書く機会がなくてPMみたいなことばかりしている。 サウナとアイドルとスマブラが好き。
みつじの記事一覧を見る
劇団ノーミーツのオンライン演劇『むこうのくに』を支える技術
気になる人のXをフォローしよう!
アンドエンジニア公式LINEでは
新着記事やエンジニアに役立つ情報をお届け!
日々のキャッチアップをお手伝いします!
マイナビITエージェント

編集部オススメコンテンツ

Sponsored
【年収±診断】6つの質問に答えて、真の市場価値をチェック!
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
はじめて転職される方へ
SE・システムエンジニア(IT/通信/インターネット) 求人一覧

編集部おすすめコンテンツ

Sponsored
【年収±診断】6つの質問に答えて、真の市場価値をチェック!
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

Powered by マイナビ AGENT