ManaBun開発記② ～ サービス開発でのXDの具体的な活用例 ～

こんにちは！今回は前回の記事で触れた、
「ManaBun開発の連携面でどうXDを活用しているのか？」の具体的な活用例を書いていきたいと思います！

デザインキットでルールの一括管理

シキラボは、プロダクトのUIデザインをする上でデザインデータの管理に非常に重きを置いています。

Adobe XDを使っているのですが、UIそのもののレイアウトデータと別にコンポーネント管理をするためのデータをつくっています。
それをシキラボでは「デザインキット」と呼び、デザイナーだけではなくディレクターやエンジニアと連携する核として開発しています。

デザインキットには、ボタン・アイコンのようなパーツやフォント・カラー等を纏めて配置しておきます。
そこからレイアウトデータへリンクしたコンポーネントを配置し、各画面を作成するのがデザインキットを利用した開発フローです。

デザインキットに各コンポーネントを纏めることで
・デザインルール管理、共有のしやすさ
・デザイン変更時の修正対応のしやすさ
・各パーツ素材譲渡のしやすさ
など多数のメリットがあります。

オリエン文化とXD

多くの会社ではXDはデザイナーが触るものだと思いますが、シキラボでは他職種が触ることが多くあります。
それは「オリエン」という仕様共有会の場で、XDのリアルタイム共同編集機能を活用しているからです。

オリエンではディレクターが用意した仕様書を確認しながら、同時にXDのプロトタイプ画面を順に確認していきます。
そこで特筆する仕様や注意点などがあれば、各画面下部に設けた仕様欄に記載して頂き、
デザインに関わる仕様変更などがあればプロトタイプに反映する、というのがオリエンの一連のフローです。

またXDに仕様が記載されていることで、ディレクターなど他職種のメンバーでも簡単に説明することができるのも特徴です。

最後に

本記事では、Manabunプロジェクトの開発においてのAdobe XDの具体的な活用例を書かせていただきました。
XDを導入する機会があれば今回書かせていただいた活用例を参考に役立ててもらえれば幸いです！

それでは今回もお付き合いありがとうございました！