「そんなところまで…！？」「SYNMN」のデザインに込められたこだわり特集！
※最初に設定したサムネイルに明るい水色と黄色のコントラストがあったためか上部に警告が表示されていますが、「ロシア」「ウクライナ」に関する記述は一切ございません！
こんにちはー！Synamonのおはるです！！
先日リリースされました「SYNMN」、皆さんインストールされましたでしょうか？
今回はSynamonが誇る凄腕デザイナーの2名に聞いた、「SYNMN」の3Dモデリング、空間設計、UI/UXなど、デザインのこだわりを記事にしていきたいと思います。
今回お話してくれたのはこの2人。
西口 雅幸 Masayuki Nishiguchi
Synamon開発責任者。
大手アニメ制作会社にて「金色のガッシュベル」「ワンピース」などの作品にCGモデラーとして参加した後、CGプロダクションにて「スーパーロボット大戦」「ファイナルファンタジーXIII」などの作品にてゲームムービーのモデリングを経験。その後Unityエンジニアに転向し、スマホアプリのソーシャルゲームの開発経験を経て、Synamonを共同創業。
CGモデラーとして、3Dプリンタ、AR、VRといった技術に触れたことで大きな衝撃を受けたが、特にVRには「世界すべてを創造することができる」という究極的な魅力を感じた。今はすべての人がメタバースで活動するようなクリエイティブな世界を作るべく日々Synamonで邁進中。
趣味はシステマ（格闘技）、ゲーム（最近だとエルデンリング、Splatoon3も楽しみ）、3Dモデリング、Unity。
徳永 まり奈 Marina Tokunaga
Synamon 3Dモデラー/デザイナー。
映像制作会社で1年間実写合成のCG制作をし、フルCGの世界がつくりたくなりSynamonにジョイン。 今まではモニターの四角い画面でしか確認できなかった自作3Dモデルを、VR内で手に持ってグリグリと見れた衝撃でXRの可能性を感じた。
ホラーが大好きで、映画、小説、ゲーム、YouTubeでホラーを漁る日々。いつか3DCGで最高のホラーランドを作りたい。
創業時からSynamonのデザインを支えるお二人が新規プロダクトに込めた想いやこだわり、どうぞお楽しみください！
SYNMNエントランス内、ゲートウェイワールド
操作説明のパネルがあるため、初めましての方々の操作練習にぴったり！
西口：
「SYNMN」はメタバース空間を入れ子構造で管理できるのが特徴なんですが、その一番大きな単位が「プラネット」、つまり惑星なんですよね。
そんな「宇宙空間に浮かぶ星々を旅する」という発想のもとに作られた空間がゲートウェイワールドです。
だから、ワールドのコンセプトは宇宙船、宇宙ステーションのようなもの。ここからスタートして、他の星々に旅立ってもらえるようなイメージで作成しました。
宇宙船の発着場→狭い通路を抜けて広がる新世界
「/ WELCOME /」看板が出迎えてくれます。
（ViweはViewのミスです。こんなミスが見られるのもアプデ前の今だけ…！）
西口：
ここは宇宙船の発着場なんです。旅のスタート地点ですね。
そこから、ちょっとずつ操作を覚えつつ、長くて狭いダクトのような道を抜けると、世界がパーッと広がる感じ…ここの構図にはこだわりました。
西口：
このワールドを作成する上では本当にたくさんのリファレンスを集めました。ディズニーのやつとか。あれ、なんだっけ？
徳永：
「シュガー・ラッシュ：オンライン」ね。
西口：
そうだ、「シュガー・ラッシュ：オンライン」。
暗いところから始まって、そこを抜けだしたら世界がパーッと広がるインパクトを出したくて。
他にも参考にしたのは「リビッツ！」、「リトルビッグプラネット」、「スプラトゥーン」、「クラッシュバンディクー」、「Fall Guys」とか。
↑ 28秒あたりから、オンラインの世界に繋がる場面が見られる。
徳永：
何かに寄りすぎないように気をつけつつ、たくさんリファレンスを集めましたね。
おはる：
「Hello world」もいいですよね。結構体験者からは好評ですよ！
とくにエンジニアはみんな盛り上がるし面白がってくれます。
徳永：
へええ、そうなんだ！「Hello world」って言葉を選んだのは私なんですよ。
最初「Hello world」って入れてみて、西口さんに「これでどうかな」って言ったら「いいんじゃない？」って言うから採用されたw
「スプラトゥーン」シリーズのチュートリアル抜けた時にシティが広がる感じとか、「シュガー・ラッシュ：オンライン」のオンラインに繋がった瞬間とかのワクワク感、「こんな世界があるんだ！！」感を出したくて、「Welcome!」的メッセージを入れようと思ったんです。
西口：
でも、全体テイストをどうするかは本当に苦労しましたね。
「宇宙船だから」といって「スター・ウォーズ」に寄せると細かすぎ感が出て、逆に「Fall Guys」までいくとデフォルメすぎて。
「クラッシュ・バンディクー」みたいに四角をわざとゆがませるのもテイストとしては良いけど、「SYNMN」で採用するにはやりすぎかも…とか言いながら、相当話し合ったポイントですね。
徳永：
「なんでこれじゃダメなのか」「このテイストならいいんじゃないか」、すごく話し合って今の形になりました。
最初は「クラッシュ・バンディクー」を意識してホールの入り口の形をゆがませたり、ネオンっぽい色味を加えたりしてたんですけど、「やりすぎ」って却下されましたねw そうやって最終的にどんどん洗練されていきました。
星のチップとかもかわいいから賑やかしで入れてみて、内心「却下されるかな…」と思ってたんですが、ギリ今も残ってますねw
西口：
ギリセーフラインw
とはいえ、僕も自分の好き嫌いで却下してるわけじゃないですよ。
これが僕たちのプラネットやワールドだったら好き勝手に遊んでいいと思うんですけど、サービスのデフォルトなワールドとして、あまり染まってない感じ、色を付けない感じにしたかったんです。それでも溢れ出る感性が、ワールドとしての落としどころでしたね…w
もし自分一人で作ってたらもっと色の無い感じになってたと思います。でもこうやっていいデザインにできたのは、チーム開発の面白いところですね。
人は登れるところがあったら登る生き物
西口：
このワールドで使い方をしっかり覚えてもらうために設置したのがアスレチックです。
本当はもっとチュートリアル的なギミックを入れられるといいんですけど、そこまでは手が回らなかったので、練習できる仕組みを置きました。
登れるところがあったらなぜかみんな登るじゃないですか？だから一つ用意しておいたら、案内せずとも登ってくれて、練習にもなっていいんじゃないか、っていうw
SYNMNさんオープンβ入ったら人に会えて嬉しいしプラネットが綺麗#SYNMN #メタバース pic.twitter.com/0ECAmePI77
— Yusuke Okada (@Yuten110) October 4, 2022
「効くディティール」を盛り込む
Synamonのワールドづくりで非常に特徴的なのが、バーチャルになくても良い小物をあえて作りこむこと。
別に案内板も、手すりのガラス板もなくていいのに作りこむ。その背景について聞いてみました。
西口：
あの…「効くディティール」が好きなんですよ。何気ないけど、それがあることでグッと説得力が上がる一品というのがあるんです。
過去プロダクトでもあえてVR空間に非常灯をつくったり、コンセントを壁に着けたり。こういうディティールを盛り込むことで、空間にリアリティとスケール感が生まれます。
バーチャル空間にリアルなものを作ってあげることで、その空間のスケール感を合わせてあげるイメージですね。
バーチャル空間に「ぶつかっても痛くないようにつけるスポンジ」がある。
ぶつかりたくてもすり抜けるのに…！
ドアの裏側やハンドルの作りこみに加え、ドアとぶつかる範囲を線で示しているのも細かい。
なお、ドアが動くギミックはないし、アバターとドアがぶつかっても肉体は痛みを感じない。
ディティールの表現である。
徳永：
ステージ裏の空間とかもありますけど、このワールドを作ってくれた武藤さんがこういう細かいこだわりを出すのが上手いんですよね。
西口：
こういうリアルさへのこだわりはあるけど、質感はリアルに寄せすぎないのは気をつけました。広場の草や木も、あえて質感はポリゴンっぽくしてみたり。
みんなでリファレンスを集めながら統一感を出せるように進めました。
そんな武藤さんは現在、Synamonオフィスの3DCG化＆「SynaLab」に追加できるように準備を進めてくれています！
次回アップデートをお楽しみに…（まんまうちのオフィスです！！！）
SYNMNテンプレートワールド「広場」
モデルは皆さんも行ったことがあるかもしれないあの場所
大きなモニターと開放的な空間が特徴。イベントにはうってつけ！
西口：
ワイワイ複数人が集まれる空間を作りたくて、街か広場か…という風に考えて作りました。
ただ、箱庭っぽく閉じた空間の方が使いやすいだろうなと思って、公園の回りに建物があるようなデザインにしようかなと。
それでインターネット上で参考資料を探していたところ、ラゾーナ川崎プラザに出会いまして…。
西口：
ただ、そのまんまラゾーナにしてもアレなので、別のアイデアも探していたところ、武藤さんから「船っぽくしてみたらどうか」という意見が出たんですよ。それを採用して、各所に船っぽいディティールを散りばめました。
例えば、階段や手すりとか。船にあるものを参考にして作っています。落としどころとしてはこれも綺麗にまとまったんじゃないかな。
西口：
空は在り物なんですけど、十何種類か用意してどれが一番合うか検証しました。空間の大部分を占める要素なので、空一つで全然印象が変わるんです。
アニメとかで、人物はセル画だけど背景は手書き美術、みたいなのあるじゃないですか。それくらいのデフォルメ感がちょうどいいかなと思って選んでいます。
ちょっと紫が強くて夕焼けのような印象を与えてしまったり、気になる部分はまだあるので、今後もうちょっと良くしていきたいですね。
おまけ
（これは西口さんも知らなかった武藤さんの小技）
2種類のデフォルトアバター
西口：
アバターで意識したのはシンプルさですね。たくさん人が入った時に重くならないように、極力ローポリにしました。
アバターは別部隊が制作してくれたんですが、使いやすく可愛らしいものになったと思います。
四角いアバターの方は服にロゴが入っているんですが、これは会社ごとに変更することが可能です。
今公開している2つのプラネットはSynamonの管轄だからSynamonロゴが入っていますが、お客さまの会社ロゴに差し替えることもできるキャンバスになっています。
実はハイポリアバターも準備中なので、こちらもお楽しみに！
UI/UXのこだわり
徳永：
UI/UXも空間と同様、Synamonの色を出しすぎずシンプルにすることを目指していました。
あとは、すぐに行きたい空間にアクセスできるような設計も意識していました。まだまだ未完成なところもあるんですが、今後どんどん改善していきたいですね。
西口：
まだ部屋に入るまでの面倒くささは残っちゃっていると思うので、全然やりたいことは達成できていないんですがねw ただ、リリースまで時間がない中ではよくできたんじゃないかなと。
全体像ができてからスタートできるわけでもなく、開発には「今作れる機能作っておいてください」みたいな指示出しながら、平行してワイヤーフレームを作ったりしていたので…。
こんな進め方だったので、「最初想定していたけど今回のリリースに乗せれなかった機能」も実はたくさんあります。今後徐々にリリースできればと思うのでこちらもお楽しみに…。
「SYNMN」と「SynaLab」の未来。二人から読者の皆さんへメッセージ
今はテンプレートの広場にSynamon関連の看板が並んでいる「SynaLab」。
今後はSynamonファンの想いを取り入れながら、ファンの皆さんがワクワクできる&未来のお客さまが「自分たちもこうやってメタバースを活用したい！」と思えるオリジナルなテンションの上がる空間に仕上げていきたいと考えています。
西口さんも徳永さんも、クリエイティブで明るい未来を目指すSynamonファンのみなさんと共創する気満々なので、ぜひこれからも交流していきましょう！
西口：
「やって意味がある、価値があるものってなんだろう」というところを模索しつつ、今後メタバースやバーチャル的な世界を盛り上げていきたいなと思っています。
そのためにグラフィックやビジュアルはとても大事だと思うので、皆さんに楽しんで頂けるように頑張ります。末永くよろしくお願いいたします！
徳永：
ここからのアップデートでUIも空間もどんどんアップデートしていきたいなと思っています。
みなさんもよかったら「SYNMN」を体験する中で感じたことなどTwitterなどでどんどん発信して頂けたら嬉しいです！
頂いた意見も参考にしつつ、みなさんにとって使いやすく楽しい空間にしていきたいと思いますので、どうぞよろしくお願いいたします！
Synamonのものづくりのこだわりがぎゅぎゅっと詰め込まれた「SYNMN」。
ただ、これはわたしたちが考える良いものを提供するだけではなく、企業とファンが共創する土台になっていくことを願ったプラットフォームです。
目指す姿になれるよう、今後も真摯に取り組んでまいりますのでどうぞよろしくお願いいたします！
▼ダウンロードはこちらから
近日中には「SYNMN」を使ったイベントも開催予定なので、続報をお楽しみに…！！！
ではでは～！