音声通話でチーム開発が捗るバーチャルオフィス「MetaLife」を開発した（React, Three.js）

## はじめに

今勤めている会社で『MetaLife』という **バーチャルオフィスツール** を開発しました。読み方は「メタライフ」です。

「バーチャルオフィス...？なんじゃそれ...？」

っていう方向けに一言で説明すると「リモートワーカーが集まって仕事をするバーチャル空間」です！

コロナ禍以降、「リモートワークで勤務しているよ〜」というエンジニアの方は多いと思います。

MetaLifeはリモートワークで働いているエンジニアとのコミュニケーションを円滑にし、現実のオフィスでありがちな「〇〇さん、今ちょっといいですか？」をオンラインでも実現できる、そんなバーチャル環境を目指して開発しています。

私は開発を進める中で「このサービスってエンジニア向けにすごく良いんじゃないか？」と思ったので、リリースから1ヶ月近く経ったこともあり、エンジニア向けにサービスの概要をご紹介したいと思いました。

## MetaLifeとは？

改めてMetaLifeをご紹介します。
MetaLifeはバーチャルオフィスとして利用できる、メタバースの概念を導入した新しいコミュニケーションツールです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/7tXNYou2mfw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

動画の通り、ユーザーは自分をアバターとしてキーボード入力で動かします。よくあるRPGゲームと同じです！

最も特徴的な機能は **「アバター同士が近づくと、自分の映像と音声が相手につながる」** という機能です。

MetaLifeでは、話しかけたい人の近くに移動して自分の音声や映像をONにするだけで、相手との会話を始められます。
![画面収録_2022-09-24_9_31_35_AdobeExpress (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331607/588816cb-b72e-d8e3-f0de-358102fc4856.gif)
「リモートワーク中に顔を見せるのは億劫」という方、安心してください。**「音声のみでもOK」です！**

もちろん画面共有も可能です。下の画像は、画面共有でVSCodeを相手に見せながら相談している様子です。この時、音声もつながっていて会話できます。
![FZbVvrUaQAAQNjR.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2859230/24a8e948-b8be-c6fa-c57f-acb707dd83aa.jpeg)

## どうしてエンジニア向き？

自分は開発者としてこのMetaLifeに携わっていて、普段の業務でも利用していますが、冒頭でも触れたようにMetaLifeはエンジニアにピッタリのツールだなと感じています！

自分なりに思う理由を以下で説明します。

### 1. リモートワークでも協力が必須

エンジニアはチーム全体でスケジュールや仕様に調和をとりながら進める作業などが多いので、チーム間でのコミュニケーションを細かく取る場面が多いと思います。

MetaLifeなら、離れた場所で働いている人でも、まるで同じ空間にいるような感覚で一緒に仕事ができます。

「コミュニケーションは始まりが一番ハードルが高い」と思っていますが、例えば現実のオフィスで「〇〇さんに質問したいな〜、でも忙しそうで億劫だな」なんて会話のスタートを諦めてしまうこともあるかも知れません。

MetaLifeだとアバターが座っているだけなので、いい意味で会話の始まりに対する緊張感がありません。

### 2. 新しいツールや概念をスッと受け入れやすい

基本的にエンジニアはデジタルツールへのリテラシーが高いので、MetaLifeのような新概念もスッと受け入れてくれるのではないかな？と想像しています。

エンジニアの方々は普段から様々なツールを触っていますし、自分でツールを導入する能力に長けた方も多い印象です。MetaLifeもスッと使い始めてスッとその良さに気づいてくれるのではないかな〜〜〜なんて思ってます。

### 3. 推奨環境への理解がある

これも割と大きな理由ですが、MetaLifeは現在ブラウザでのみ提供していて、「PC」 & 「Google Chrome」を推奨しています。（WebRTCあるある）

エンジニアの皆さんはPCを普段使いしていますし、Google Chromeを使って開発している方が多い（と勝手に思っている）ので、この辺りの利用環境が違和感なく馴染むこともエンジニア向けだなと感じるポイントです。

またマルチモニターを使って開発している方も多いと思いますが、会話中に1画面でMetaLifeを開いて画面共有をしながら、もう１画面で調べ物をする、などの使い方が可能です。こうした「利便性を感じやすいポイント」もエンジニアには多いと感じています。

### 4. 25人まで無料で使える

MetaLifeは25名までの同時接続であれば無料で使うことができるので、多くのエンジニアチームで無料で使っていただけるのはないかな〜と思います。


### 5. (一番大事)生産性が上がって楽しい & 雑談が増えて楽しい

エンジニアの私にとってMetaLifeは **「使っていて楽しい」** です！！

MetaLifeの価値は「チームメイトがそこにいる」という前提に基づいています。
ブラウザにずっと同じタブを開いているとしたら、楽しい画面だった方がいいですよね！

MetaLifeではゲームライクなRPGのUIを採用しています。これは日本人にとっては誰もが経験した **子供の頃のゲームの世界** であり、そこで自分はアバターとなって「いつものみんなと、好きな自分で」働けるという **ワクワク感** を感じ取っていただけたら嬉しいな〜〜〜と思いながら開発しています。

## 実際に社内でMetaLifeを運用した感想

手前味噌ですが、開発者なりに感じる利用者としての利点について思うところを書いてみます。

### オフィスにいるような感覚でリモートワークができる

私の会社では50%くらいの方が出社、50%くらいの方がリモートワーク、というハイブリッドな組織で、勤務中は全員がMetaLifeに接続しています。

リモートワーク組はMetaLifeを開けば勤務中のメンバーが全員いるという状況なので、気軽に同僚に声かけをしたり、上司にちょっとした相談をしたりできます。

オフィスのマップを「集中ゾーン」や「休憩ゾーン」などあらかじめラベル付けして分けることで、相手が今話しかけてもよい状態なのかも一目瞭然なので、上司に気をつかうことも少ないです。（下の画像は私の会社のMetaLife上でのオフィスです）
![オフィス雑談1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331607/ebc24d56-be33-d5e8-0e15-ab17b4acfcf2.png)
オフィス組は現実の座席が近ければもちろん直接会話しますが、座席が離れている場合はMetaLifeで会話をすることもあります！
この辺りはMetaLife導入前はSlackのチャットを使っていましたが、今はMetaLifeでの音声ベースに切り替わってきていて、圧倒的に楽になったと感じるシチュエーションも多々あります。

テキストとして記録を残しながら相手に伝えたい場面と、音としてパッと伝えたい&聞きたい場面は分かれると思います。
会話のオプションが増えたのはチームワークを磨く上ですごくよかったです。

### 楽しい & 雑談が増えた

MetaLifeを使うようになってから仕事の相談はもちろん、同僚や後輩との雑談が生まれるようになりました！

仕事後にボードゲームをしながら飲み会をすることもあります。オンライン飲み会は以前はZoomで開催していましたが、Zoomだとどうしても「映像をONにしないといけない感」を受けがちです。

MetaLifeではそもそも自分がアバターとして存在しているので **映像をONにしないことへの違和感がほぼありません。**

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">インターンのOBを招待して、仕事後にMetaLifeでオンライン飲み会＋ボードゲームしたよ〜<br><br>全員リモートワークだけどお手軽に楽しく繋がれるのが魅力的だよね！😳<a href="https://twitter.com/hashtag/MetaLife?src=hash&amp;ref_src=twsrc%5Etfw">#MetaLife</a> <a href="https://t.co/jEWvSeBsGN">pic.twitter.com/jEWvSeBsGN</a></p>&mdash; 矢野雄己 / MetaLife開発者 (@yanolii) <a href="https://twitter.com/yanolii/status/1569703286617567232?ref_src=twsrc%5Etfw">September 13, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


### コードを見せながら相談しやすい
エンジニアの場合、相談事は一緒にコードを見ながら解決していくなんてことも多いですよね。その際、リアルのオフィスで同じ画面を見ながら話すと少し見にくいし伝わりにくいなと感じることがあると思います。MetaLifeを使って画面共有をしながら話しているとオフィスにいる時より見やすいのはもちろん、伝える側もより丁寧に伝えようとするはずなので結果的に作業効率の向上につながります。

## 他社の類似サービスとの違い

実は類似したサービスは他にもあります。MetaLifeは後発サービスということもあって他社のサービスとの違いについてよく聞かれるので、ここで簡単に触れておきます。

### 見た目が楽しい

ここまでで何度も触れてきた「楽しい」というワードですが、MetaLifeのチームではとても大切にしています。せっかく似たようなツールを触るなら、触っていて楽しい方がチームメンバーを誘いやすいですし、使いたくなりますよね！

MetaLifeではアバターの姿も自由にカスタマイズでき、これが会話のきっかけになることもあります！
![スクリーンショット 2022-09-24 9.42.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331607/e628b31c-154e-3039-f6fa-2125cddca3fc.png)

### 空間としてよりリアル

当たり判定があり、壁への回り込みが表現できるなど、空間としての質感も重視しています。技術的には `Three.js` を利用していて、2Dの画面の中にも3Dっぽさを表現しています。

MetaLifeはドット絵のデザインが魅力です。自分で好きな位置に好きなオブジェクトを配置してカスタマイズもできます。

オリジナルのマップも制作できる（有料）ので、現実のオフィスをMetaLifeにRPGっぽく再現できますし、あるいはファンタジー的発想に溢れた空想の職場をMetaLife上に構築することも可能です。


### ちょっとだけ便利

機能だけを見ると似通ったサービスになりがちなのですが、「MetaLifeの方がちょっと便利」という微妙な感覚も大事にしています。
ここにも詳細はたくさんあるのですが、触ってもらえればわかる!と開発者なりに信じています。


## 便利機能をちょっとだけ紹介

### メガホン
同じフロアにいるすべての人に、自分の音声・映像・画面共有を届けることができます。
![33b7be209d7954f0c246ee20e22ca2a2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331607/7ca1709c-13a1-5f25-f391-56b54d0cc616.png)
画像では一番左の人が「メガホン」モードとなっています。


### 雲

オフィスを「集中スペース」や「休憩スペース」などと分けることで、テレワークでもメリハリを持って仕事に励むことができます。
![スクリーンショット 2022-09-17 155233.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2859230/be201ace-1f77-d290-68b5-716385101850.png)

### ミーティングルーム

ミーティングルームに入るとZoomのような会議も始められます。
![meetingroom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2859230/91fef640-d8db-c571-0a2a-d3b22db09231.png)
ミーティングルームには鍵をかけることができるので、機密性の高い打ち合わせを行うことも可能です。
![meetinglock.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2859230/4dea21a0-55ad-4626-edfe-f4670603c366.png)

### 車に乗る
`C` キーを押すと車に乗れます。車に乗るとマップ上を高速で移動できるのでとても便利です。
![365d93bf021577b9bea2b8aa98eae404.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331607/033160d4-9cbb-327b-8e82-500e6ccb0f7b.gif)


### 瞬間移動
行きたい場所をダブルクリックすることで、そのマスへ忍者のように瞬間移動できます。この辺りのアニメーションも少し工夫を凝らしているのでぜひ触ってみてください！
![7271b589fef64610856ac7d9b823b55e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331607/06f8cb23-2aea-777b-73db-070010a1c5cc.gif)


## ユーザーからの反応
リリースしてからTwitterで嬉しい反応をいただいているので、この場をお借りして何点か紹介したいと思います。

リリース後1時間で **キングコング西野** さんからコメントが！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Metalifeで『えんとつ町』が作れるなら、秒でお金を出すし、コミュニティを絡めて、一気にお客さんを集められる。</p>&mdash; 西野亮廣(キングコング) (@nishinoakihiro) <a href="https://twitter.com/nishinoakihiro/status/1554662212983070720?ref_src=twsrc%5Etfw">August 3, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

人気漫画家「さかたはるき」先生とのPRコラボレーションは **1.4万いいねの大反響**
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">お家に帰ってまずやる事といえば…？ <a href="https://t.co/HGtybyzDqm">pic.twitter.com/HGtybyzDqm</a></p>&mdash; さかたはるき@FANBOX (@kervalchan) <a href="https://twitter.com/kervalchan/status/1565647586039844864?ref_src=twsrc%5Etfw">September 2, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます!<br>今日も5時から朝活スタートしてます。<a href="https://twitter.com/honey_create?ref_src=twsrc%5Etfw">@honey_create</a><br> さんに教えてもらったバーチャルオフィス【MetaLife】空間楽し過ぎる(*´ω｀*)<a href="https://t.co/jjbCFOIjVj">https://t.co/jjbCFOIjVj</a> <a href="https://t.co/ffKqsRr8vI">pic.twitter.com/ffKqsRr8vI</a></p>&mdash; ケイイチ🍖臆病なトップセールス (@nagakeiichi) <a href="https://twitter.com/nagakeiichi/status/1569827520916389890?ref_src=twsrc%5Etfw">September 13, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 公式サイトはこちら

- MetaLifeはバーチャルオフィスツールで、エンジニアに向いている！
- わかりやすくて楽しい！
- リモートワークのメンバーとの会話が円滑に！

こちらからお試しいただけるので、ぜひ感想などいただけると嬉しいです！

https://metalife.co.jp/

「面白そう！」と思っていただけましたら、開発チームの励みになるので「いいね」していただけるととても嬉しいです😄