Classiアドベントカレンダー13日目は、デザイナーの@shio312がお送りします。
今年は弊社UXデザイン部も採用している、デザインのバージョン管理と開発連携をAbstractにまとめることになった経緯を、デザインツールの紹介を交えながらお話します。
はじめに
エンジニアさん
「最新のデザインってどれ」
「えっ、実装結構進めてたのに急になんか違うUIになった（怒）」
「えっ、なんでこんなUIなの...わけがわからないよ...」
「しかも前回とはちがうツールでデザインカンプきた...なにこれ…つらい...」
上記のような、残念な気持ちになるような事案に覚えはないでしょうか。ウッ。
私達はデザインシステムの構築やコンポーネント化、バージョン管理といった面で、プロトタイピングをinVisionかXDで、グラフィック作成をSketch、デザインレビューとバージョン管理をAbstractで行っていました。
問題だったのが開発連携ツールで一時期は乱立しており、inVisionのinspect機能、Abstractのinspect機能、さらにZeplinも試験的に導入し3つの開発連携ツールが使用されていて、デザイナー同士も連携されるエンジニアも「何を見れば最新のデザインが今どのような状況で、実装するなら何を見ればいいのか」のコミュニケーションにコストがかかっていました。
UIツールを（XD）、SketchとAbstractに絞るまでの道のり
既存のデザインフローはこうだった
開発と連携まわりがもったいないかんじですね。運営も金銭コストもかかっています。
ということで開発との連携に使っている各ツールの特徴を整理し、ツールを絞っていきました。
開発連携ツールの機能比較（2019年12月段階）
| プロトタイプ | バージョン管理 | 開発と連携 | |
|---|---|---|---|
inVision 
|
◎ | × | ○ |
Abstract 
|
× | ◎ | ○ |
Zeplin 
|
× | × | ◎ |
ツールそれぞれできることが見えてきました。
ここから絞るに当たってチームでツールごとに比較していきました。
まずinVisionを除外
inVisionは少し前にinspect（開発連携するためのレイアウト指示ができる）機能が追加され、しばらく開発との連携ツールとしても使っていましたが、年間コストが高い上にプロトタイピングツールはXDで代替することができるので、ZeplinもしくはAbstractのinspect機能どちらかを使うとし、inVisionは除外となりました。
〜 Abstract（inspect機能） VS Zeplin 〜
残る2ツールから1つに絞る際は慎重に比較しました。
それぞれのUIです。見た目はそこまで差がないですが、操作性に関して少し差がありました。
| Abstract （inspect機能） |
Zeplin | |
|---|---|---|
| pros | ・Sketchデータそのままのレイヤー構成が反映され、デザイナーの意図が反映できる | ・シンボルもしくはグループの最上層単位でオブジェクトとして認識されるのでレイヤー整理する必要がなくエンジニアに連携できる ・マージンの数字が一番正確 |
| cons | ・レイヤーを整理しておかないと、どの数字を実装すればいいかがわかりづらい ・上記からレイヤー整理の工数が発生する |
・レイヤー名が表示されないので、レイアウト指示の際工夫が必要 |
比べてみると、inspect機能自体は老舗であるZeplinの方が精緻でスペックが少し高い結果に。
デザインフローを考えて、Abtractを選んだ
機能単体で比較するとZeplinを選ぶ結果になりましたが、ツール全体で見るとAbstractはデザインレビュー、バージョン管理、開発連携もでき、課題だった「何を見れば最新のデザインが今どのような状況で、実装するなら何を見ればいいのか」が1つのツールを把握していれば解決可能という優位性が決め手となり、Abstractを選択することになりました。
Abstractのinspect機能で発生する課題は「Sketchのレイヤーグループをまとめずに、オブジェクトごとに分ける」運用で対処することに。
ちなみにinVisionのinspectスペックはAbstractと同じ程度でした。
新しいデザインフローはこうなった
Abstractでバージョン管理から開発連携まで一貫させる事で
- 管理コストを減らせる
- Abstractのプロジェクトにエンジニアを招待しデザインの変化を見せることで、実装中のエンジニアも最新のデザイン（設計）が把握できる
- エンジニアもデザインレビューに参加できる
- デザイナーもコミット履歴から仕様の変更の経緯が説明しやすくなり、エンジニアへレビューを投げるハードルが低くなる
Abstractのプロジェクトにディレクターなどチームメンバーも招待すれば、メンバー全員がデザイナーの進捗を把握できるようになる
みんながもっと仲良くなる😊
※Figmaはどうなん？
バージョン管理まで可能なデザインフローを一貫して行えるFigmaですが、前述の通り弊社はデザインシステムの構築やコンポーネント化といった面でSketchをUIツールとして採用しています。プロジェクトの速さやフェーズによってはFigma一本の方が有効な場合もあります。
さいごに_デザインにみんなを巻き込めばもっと仲良くなれる
まだ標準ツールとして設定して期は浅いのでまだまだ検証中ではありますが、徐々に「あのツールを確認すればわかる」という認識は広がっています。
弊社はAbstractを選びましたが、規模や進め方で違うツールを選んでもデザインにみんなが自主的に参加でき、把握できる環境を作る事ができればプロジェクトの風通しが良くなり、結果としてチームの雰囲気も良くなるはずです。
みなさんがよりよいプロダクト開発ができることを願っています。