【MESON流XR開発】デザイナー×エンジニアのコラボレーション
こんにちは、MESONデザイナーのまちるだ（@mathi0829lda）です！
今回は、MESONのプロジェクトでどのようにデザイナーとエンジニアがコラボレーションをしているかについてお話ししたいと思います！
MESONはXR企業なので、一般的なスマホUIやWebデザインのワークフローとは大きく違った方法で、プロジェクトを進めています。
こんな方におすすめ！
ー
・エンジニアとの連携を強めたいデザイナーさん
・リモートでプロジェクトに参加しているエンジニアさん・デザイナーさん
・XR業界でのデザインの進め方を知りたいデザイナーさん
の役に少しでも立てたら嬉しいです🕊！
では早速！はじめに、MESONでデザイナーがどプロジェクトにおいてどこまでデザインを担当しているのかお話ししていきます。
デザインの作成
ー
■主なデザイン範囲
プロジェクトのUIデザインはほぼまちるだが担当していて、主なデザイン範囲はUIアニメーション、空間演出（UIと関係があるところ）です。
MESONの開発はデザイン：私1人、メインエンジニア：1〜2人です。わたしはいつも『出来るだけエンジニアさんにはエンジニアさんにしかできないことをやってもらいたい🥺わいができるかぎりのところまではやりきるから🥺』という気持ちで、UI作成後Unityに組み込み、レイアウトを組むところまでを担当しています。
Unity使ってUI組んでみたいデザイナーさんはぜひこちらの記事を参考にチャレンジしてみてください！きっとエンジニアさんが喜ぶはずです...！
■使用ツール
MESONでは主に以下のツールを使用しています。
XD
2つのファイルが存在します。
・Diagram・・・シーンごとの情報整理（ワイヤーフレームのようなイメージ）
・UI Elements・・・本番のレイアウト・UIパーツを制作していく場所
Cinema 4D
UIのアニメーション作成、空間的なレイアウトのデザイン
XD
MESONではDiagramというシーンごとのワイヤーフレーム を作成し、情報の整理を行なっていきます。こちらは現状ではPMがベースを作成し、デザイナーがブラッシュアップを行ったあと、UI ElementsというXDで本番のデザインを行なっていきます。
最近では、Figma使用しているデザイナーさんが多い印象を受けます。MESONがあえてXDを選んでいる理由は、なんといっても3D Transformの機能があることです。AR/VRのUIは、限られた範囲の2D画面に配置されるわけではなく、空間に配置されたり視界についてくるようなUIが多いです。そのため、3D Transformを使うことで、最初のDiagram作成時や実際のUI Elementを作成してエンジニアさんに伝えるときに、UIが「空間固定されているものなのか、視界に追従するものなのか」「一人称視点で大体どれくらいの角度で見えていたいのか」を大まかに伝えることが可能になります。
また、どのシーンのどの動きが決定しているか、細かなニュアンスどんな感じなのかはすべてXDに集約されていてアートボードごとに「検証項目」「仕様詳細」「DESIGN FIX」などの付箋を貼っておく形で管理を行なっています。Slackでの流動的なコミュニケーションが減り、ストック型のコミュニケーションをXD上で行うことで、細かなエンジニアさんからの質問もXDで答えることができています。
Cinema 4D
Unityに組み込むUI ElementsはXDで作成しますが、立体的な動きをするボタンなどはCinema 4Dを使ってアニメーションを作成していきます。
XDにもアニメーション機能はありますが、AR/VRのUIは立体の動きがある方が気持ちの良いインタラクションになるので、より詳細なアニメーションをエンジニアさんに伝えるために3Dツールを使っています。
エンジニアさんとのコラボレーション
ー
MESON流のエンジニアさんとのコラボレーションの方法...
それはずばり！！！
『UIを一緒に育てていく』
です！
大まかな流れとしては、私がUnityに組み込んだ仮のUIパーツにエンジニアさんがUI遷移・アニメーションをつけて、UI本体の見た目はまちるだがアップデートしていくというのを繰り返し、ひとつのUIパーツを育ててクオリティを上げていくスタイルでコラボレーションをしています✨
このやり方を実践したプロジェクトでは、リモートで参加してくれているエンジニアさんとも、とてもスムーズにデザインと実装のやりとりができました！
えどさん、一緒にこのスタイル考えてくれてありがとう😎
■コラボレーションの流れ
1. 仮のUIを書き出し、UnityでPrefabにする
UIのレイアウトが固まったら、まちるだが仮のUIパーツをpngで書き出しUnityに組み込みます。そして、全てのUIをPrefab化します。
最初にUIをPrefab化しておくことで、後からデザインを簡単に修正することができます。（この時点では、体験のシーケンスやUIの構造などある程度決定しているタイミングになります）
また、まずは仮のデザインで組み込みを行っておけば、エンジニアさんが先にUIの遷移を実装することができるので作業効率化にもなります。
このとき、Prefabの中をこのような構造にしておくことをおすすめします。
例えば画像のように「Close_En」となっているところのデザインをアップデートしていくようにすると、エンジニアさんがあとからつけてくれたアニメーションを間違って消してしまうなどのアクシデントを防ぐことができます！
2. Design Sceneに配置する
MainSceneとは別のSceneを作り、Design Sceneとしたところに1でPrefab化したUIを配置していきます。Sceneを分ける理由は、エンジニアさんが触っているところとコンフリクトを起こさないようにするためデザイン配置の専用シーンを作成しています。
3. エンジニアさんがアニメーションをつけていく
2までの状態をエンジニアさんが確認したら、あらかじめ共有しておいたXDとCinema 4Dで作成したアニメーションを元に、Design Sceneに配置されたUI Prefabの中にアニメーションをつけていきます。
1でPrefabの中の構造についてお話
4. UIのブラッシュアップ
本番のUI ElementがXDで完成したら、まちるだが1で作成したPrefabの中を修正して差し替えていきます。ある程度本番のUIになったら、アニメーションのブラッシュアップも並行して行っていきます。
このフェーズになるとニュアンスや細部の調整になるので、エンジニアさんと密にコミュニケーションをとりながら進めていきます。
最後のブラッシュアップは
・エンジニアさんにパラメータを設定しておいてもらい、微調整はデザイナーがやる
・隣で見ながら調整してもらえるなら対面で行ってしまう
・3Dツールで作成した、より詳細のアニメーションを見せる
のどれかで進めるとスムーズかと思います！
最後に
ー
ARサービスを開発するワークフロー・エンジニアとデザイナーのコラボレーションの正解はまだありません。試行錯誤しながら自分たちに合ったやり方を確立していけるのがベストだと思います！楽しみながらメンバーとコラボレーションしていくことは、プロジェクトの仕上がりも一段と素敵なものになると私は信じています。
より、みなさんのお仕事が楽しく素敵なプロジェクトになりますように✨
最後まで読んでいただきありがとうございました！
🎨デザイナー募集中🎨
ー
MESONではデザイナーを募集しています！
興味のある方は、ぜひお気軽に会社サイトやTwitterから連絡ください！
お会いするのを楽しみにしています！
この記事が気に入ったらサポートをしてみませんか？