REALITYのUIデザイン

UIデザイナーの超簡単（@choukantan）です。

エンジニア中心のブログでしたが、今回からデザインチームもnoteを書いていくことになりました。普段は料理のことばかりツイートしてるので、今回改めてREALITYのUIデザインについて説明したいと思います。

REALITYについて

37の地域に展開する、アバターを使ったライブ配信プラットフォームです（2021年6月現在）。配信やゲームを通じて友達を見つけるのもよし！アバターをカスタイズして楽しむのもよし！国際交流するのもよし！REALITYはそんな感じのアプリです。

(ダウンロードはこちらから)

チーム編成

アプリの機能開発には主にPM・エンジニア・アートの3グループが関わっており、UIデザイナーは「アートグループ」の中の「デザインチーム」に所属しています。

デザインチームにはバナーやイベント用の壁紙など2Dデザインを主に行うメンバーとUIデザインを行うメンバーに分かれるのですが、UIデザイナーは基本的にPMやエンジニアとコミュニケーションを取ることが多いです。

ワークフローとしては、PMが作成した要件をもとに（タスクの大小によって変わる）、画面遷移・レイアウトの検討、最終的なビジュアルまで落とし込みます。デザインを作成した後はエンジニアと細かい実装方法を相談し、リリースまで密にコミュニケーションを取りながら進めます。

開発環境

デザインツールにはFimgaを使っており、企画から設計、ビジュアルデザイン、エンジニアへの共有まで含めて全てFigma上で行っています。Figmaで対応できない細かなアニメーションのみAdobeのAfter Effectsを使います。（Figmaいいよね）

（Fimga運用方法についてはまた別の機会に話したいと思います。）

アプリの構造

Android, iOSの両OSに対応しているのですが、アバターの表示に関わる部分にはUnityを使用しています。また、イベントやお知らせのページはWEBを表示しているので、UIデザイナーとして関わるプラットフォームが多いのが特徴的です。

↑は一見同じような画面に見えるが、配信と視聴で実装方法が異なる。配信画面やアバターに関係する部分はネイティブをベースに、Unityの画面が表示されている状態で、Unityの画面の上にネイティブの画面を重ねて表示するなんてこともある。（理解するのがちょっと大変）

ちなみに超簡単は元々WEB系のスタートアップでデザイナーをしていたので、入社当時はわからないことが多くて超苦戦してました。なんとかここまで成長することができたのは、エンジニアやPMの手助けがあったからだと思います。（感謝ぁ）

現状の課題

普段は画面設計やビジュアルまで幅広いでデザイン業務を行なっていますが、長いこと専任のUIデザイナーが1人だったことと、リリースから現在までにかなりのスピードで機能を開発してきたため

- 実装されたUIの再検討やデザインの整理ができてない
- 細かなアニメーションやビジュアルをブラッシュアップするリソースがない
- デザインファイルの管理・整理ができない
- ユーザーリサーチやインタビューが実施できてない

と、課題は山積み。

正直どれもやりたいけど、人的リソースなさすぎワロた状態なので、一緒に改善してくれるメンバーを募集しています。

UXに関わる部分から表層的なビジュアルの改善など、デザイナーとしてやれることはたくさんあるので、ちょっとでもいいなと思ったら↓からご応募ください。

まとめ

- REALITY面白いよ
- UIデザイナーたりてないよ
- ちょっとでも気になったら応募してね

それではみなさんさようならー