はじめに
こんにちは！ プリントシール機のソフトウェア開発を担当している長谷川です。
本記事では、プリントシール機のUI実装においてFigmaを導入したことで得られたメリットや工数削減の成果について紹介していきます！
「プリントシール機ではこんな方法でUIを作っているんだ」と知っていただけると嬉しいです。
従来のUI実装方法
これまで、UIの実装にはAdobe Photoshopで作成したデザインデータに対して座標情報データ付与し、Unity上に手作業で配置する方法を採用していました。
座標情報データとは、Unity上で各デザインデータをどの位置に配置するかを明記した情報です。以下の画像はその一例です。
この方法には以下の2つの課題がありました。
- デザインデータの正確性を実装者が都度確認する必要がある
- 実装者がすべて手作業で配置するため工数が多くかかる
特に、デザインデータと座標情報データが別々に提出されるため、チェック作業が煩雑になり、実装量が増えるほど工数も比例して増加していました。
このような課題を解決できるきっかけとなったのがFigmaの導入でした。
Figmaとは
Figmaは、クラウドベースのデザインツールで、WebやアプリのUI設計に広く利用されています。また、画面デザインだけでなく、プロトタイプ機能を使って動作確認も可能なため、UI設計に非常に有用です。
Unity×Figmaの方法
UnityとFigmaを連携する方法は以下の2つです。
- 既存のUnityアセットを活用する方法
- Figma APIを活用する方法
弊社では、独自の処理が多いため、既存アセットでは対応が難しいケースがあり、今回はFigma APIを活用する方法を選択しました。
Figma APIは、プロジェクトIDとアクセストークンを使ってFigmaサーバーにGETリクエスト処理を送ることで、指定したプロジェクトのデータをJSON形式で取得できます。APIの詳細については以下の公式リファレンスをご参照ください。
ツールの実装
Figma APIを活用し、Figma上のデザインデータを自動でUnityに配置するツールを開発しました。ツールの構成は以下の図のようになっています。
このツールでは、ボタン1つでFigmaからデータを取得し、UnityのScene内に必要なコンポーネントを追加したGameObjectを自動配置できます。
以下は、ツール使用後のUnity画面の例です。
Figma×Unityによる改善ポイント
今回の取り組みにより、以下の２点が大きく改善されました。
1. 提出データの確認が容易に
従来は、座標情報データとデザインデータが分かれていたため、確認作業が煩雑でしたが、Figma上で一目で確認できるようになりました。
また、簡単なUI動作もFigma上で確認できるため、手戻りや確認工数の削減につながりました。
2. UIの自動配置が可能に
Figma APIを活用することで、デザインデータをUnityに自動反映できるようになりました。弊社独自の処理にも柔軟に対応ができるため、拡張性も高く、従来の手作業と比べて大幅な工数削減が実現しました。具体的には、従来1～2時間くらいかかっていた作業が10分程度で完了するようになりました！
まとめ
本記事は、FigmaとUnityを連携させることで、プリントシール機のUI実装における工数を大幅に削減できた事例をご紹介しました。
Adobe Photoshopと座標情報データによる手作業からボタン1つでの自動実装へと進化したことで、業務効率が大きく向上しました。 Figmaは導入も比較的容易で、Unityとの連携もスムーズです。今回の事例が、Figma導入を検討されている方の参考になれば幸いです。
また、プリントシール機のUI開発において、どのような課題があり、どのように業務改善をしているかを少しでもご理解いただけたなら嬉しく思います。
今後も業務改善を重ね、より効率的な開発を目指してまいります！
