オンラインイベントで「Gather」をつかう時のスペースの作り方

この記事は CivicTech ＆ GovTech Advent Calendar 2021 の18日目の記事です。

🎄🎄🎄🎄

Code for Japanでは、月に一度エンジニアやデザイナーがオンライン上に集まり、みんなで持ち寄った様々なプロジェクトに1日（10:45から18:00まで）かけて取り組む「ソーシャルハックデー」を実施しています。継続して取り組まれているプロジェクトも多いですが、初心者の方でも気軽にゆるっとした雰囲気の中でシビックテックに触れることができるイベントになっています！

10月23日以降、試験的ではありますが「Gather.Town」のというバーチャル空間に集まっていただいてイベントを実施しています。（それまではZoomによるブレイクアウトルームを活用してイベントを実施していました。）

このGather.Townの空間は、わたしがデザインを担当させていただいています。

Gather.Townスペースの作り方

Gather.Townのイベントスペースってどうやって作ればいいの？？どうやって作られているの？？と疑問に思われるかもしれませんが、誰にでも簡単に作れるんです！

『Gather』『作り方』などで検索をすると、作り方については沢山ヒットします。その情報を見ていくと、そんなに難しくなさそうだ！ということが、すぐに分かるかと思います。ただUIが全て英語なので、英語が苦手なわたしは、ちょっとだけ苦戦しています。

色々、調べながらではありますが、わたしの作業方法を少しまとめておきたいと思います。だれかの参考になれば嬉しいです✨

スペースのざっくりとしたイメージを組み立てる

まず、スプレットシートやエクセルなどのセルドキュメントを使用して、どんな空間をどのくらいの広さでレイアウトするかをマス目を使って考えます（Gather.Town上では、1セルの大きさは32px*32pxで構成されています）。
1つのマスの概念は、アバターが収まる仕様だということです。アバターは十字キーの操作で移動したり「Z」キーを押すとその場で小躍り🕺したりします。ソーシャルハックデーでは、みなさん椅子に着席して（実は立って乗っかっているだけ）テーブルを囲んでディスカッションをしながら、モクモクと作業されます。

スペースの床（最背面画像）を描く

レイアウトがある程度決まったら、次にスペースの「床」となる部分の背景画像を作っていきます。これは、Gatherが提供しているMapmakerというWebアプリで作ることができます。

Mapmakerでできることは、床を描くことの他に、家具の選択と設置と移動、領域（ログインして最初に降り立つ領域、会話が聞こえる領域、侵入できない場所）など、機能が盛りだくさんです。ちょっと操作に慣れるまでは難しいかもしれませんが、複雑な機能はありません。（多分…）

そして、Mapmakerが提供している床や家具のバリエーションは豊富にありますが「こんな背景が使いたいのにな」「こんな家具があったら楽しいかな」と思うことも多いです。

また、日本のアプリケーションではないからなのか？色味がけっこう鮮やかなので、少し落ち着いた雰囲気の空間をデザインしたい場合には、どうしようかなと悩まされます。

欲張りデザインに挑戦してみる

そんなとき、使用するのがFigmaとTiledというツールです。Figmaでは32px*32pxのルールでオブジェクトを作っていきます。

この画像（tiled-bgというpng形式の１枚画像）をTiledというアプリケーションに読み込みます。Tiled上の右下部分の「タイルセット」にドラッグ&ドロップでインポートができるので簡単です。

そして、Tiled上でペタペタとタイルオブジェクトを並べていきます。「タイル」といっているのは32*32pxの1マスの画像を、左側の領域に並べていくのですが・・・複雑で大きめの画像タイルセットを作ってしまうと、並べる作業が大変になんです。

今回は、クリスマスっぽいカラーを取り入れつつ、領域ごとにナンバリングをつけて、下の方にCode for JapanとGatherのロゴを設置しました。作っている過程で足りないものが出たらFigmaの編集に戻り、修正してエクスポートしTiledのタイルセットの画像を読み込み直すと更新されます。

Tiled上での作業が完成したら、画像としてエクスポートをしてMapmakerで読み込みます。たまに、余白の多い画像がエキスポートされてしまうこともありますが、そんな時はPhotoshopを使ってトリミングをしています。

完成

実際にソーシャルハックデー中の風景です🎄

さまざまなアバターが集まり、動きまわったりするのを眺めていると、とっても楽しいです！
会話をしているときは吹き出しがあらわれるので、どんな話しをしているのかな？と思いながら、そのアバターに近づいていくとお喋りを聞くことができます。そんな様子を見ていても可愛いくて、Zoomでの開催よりも賑やかな雰囲気が楽しめるのでオススメです。

少人数でお試し利用する場合は、無料でスペースを作ることもできるので、ぜひ試してみてください！