クイック エンジニアリングブログ

株式会社クイック Web事業企画開発本部のエンジニアリングチームが運営する技術ブログです。

画面仕様書のツール選定(AdobeXD,Figma,Zeplin)について

こんにちは、デザイナーのFです。

私が参画しているプロジェクト(業務システムの開発・運営)の場合、画面仕様書はXDとZeplinで管理・共有しているんですが、去年AdobeFigmaを買収してからAdobe XD(以降XD)側の機能開発のペースが落ちているし、Figmaの勢いがどんどん増しています。

いろいろな所から「Figmaが良い」「Figmaだけで完結」という話が多く散見されるのを目の当たりにしています。 この変化の感覚はFlashがなくなる時の「Flash終了」「JavaScriptで出来る」の流れに近く、またもや自分が使っていたツールの終焉を見届けることになるのかと、少し悲しい気持ちになっています。

実際Figmaの機能や更新頻度を見ている限り、私もFigmaがいいと思っています。

XDの単体販売終了のお知らせも有り、このまま行くとXDが使用できなくなり、Figma等に移行する未来があるので、置き換えた場合どうなるのかは想定しておかないといけません。

なので、どのような移行パターンがあるかシミュレートしてみました。
今回はそんなお話です。

現在の画面仕様書のツール選定方法

前提として所属プロジェクトの画面仕様書の要件は
「誰でも齟齬なく正しい情報が読み取れること」
「共有コストを下げ、共有ミスもなくす」です。

誰でもとは書いていますが、一番重要視しているのは、エンジニアが開発時に情報を正しく読み取れるようになっているかです。

そして当時、この要件を満たす画面仕様書を作るにあたってツールを選定したのですが、候補としてあがったのはXD+Zeplinという組み合わせでした。

なぜXDとZeplinになったのか

理由は、作る側がAdobeCCに加入していて既に使っていたからです。 コストの問題もありますが、XDでの画面作成自体に問題はなく、使いやすく、FigmaやSketchに関しても単なる類似の制作ソフトだと思っていました。 そして、当時は機能的にも課金してまで制作ソフトを変える必要はないと感じていました。

次にZeplinについてです。 XDでは画面を作ることはできますが、画面仕様書として管理する場合に、単体だとファイルや画面出力を一元管理できません。Zeplinとの連携はそこの管理・共有部分をうまく補助してくれます。

また、Zeplin上でスタイルガイドを設定すると、それに沿ってCSS等の補足情報をうまく伝えることができ、共有コストを下げ共有ミスも減らすことができるので、ここもプラスでした。

運営的には、必要な画面をXDで作成し、Zeplinにアップしていき、その画面を画面仕様書としてまとめて管理・共有するという形です。

Figmaのみに置き換えてみる

XD+ZeplinからFigmaのみに置き換えると、単純に使用するツールが減るだけではありません。 要件を1つのツールで満たすことができます。

Figmaの機能については詳しくは書きませんが、XDとZeplinでできていたことがFigmaのみで完結できます。 1つのツールで画面を作ることもでき、さらに、制作した画面を画面仕様書として管理する場合でもファイルや画面出力を一元管理できます。 Zeplinのスタイルガイドの機能もFigmaのページやライブラリを利用すれば置き換え可能なので、共有コスト、共有ミスの部分を考えても合格点です。

Figma+Zeplinという考え

現在の構成から考えるとXDがFigmaに置き換わる形になります。

この構成はFigmaのみの構成から考えると余計なツールや管理対象が増えているようにも見えます。 Figmaはオールインワンだから良いのであってZeplinを追加してしまうと、使いやすい制作ツール止まりになってしまうので、良さを引き出せないのではないか?とも考えられますよね。

ただし、今回の場合XD+Zeplinからの移行なので、いままで画面仕様書をZeplinで確認していた人にとっては何も変わりません。制作環境のみ変更という形で済みます。 コストの問題や移行の仕方、規模感によっても変わってくるとは思いますが、この形も候補としてはありだと感じます。

まとめ

いまから新しくプロジェクトを立ち上げる場合はFigmaのみでよいかもしれませんが、現在の構成から移行する場合はZeplinを残す選択肢も十分にあると感じました。 Figmaの更新頻度や勢いを見ていると、Zeplinの機能をすべて網羅したツールに今後なるかもしれませんが、Figmaもいつなくなるかわからないです。

今回結果的には、寿命が短いツール選定になってしまいましたが、要件を満たしていますし、そこまで大きく失敗ではなかったように思います。 しかし、コスト的な部分もありましたが、選定時に決めつけた形でXDを選んでしまったのは反省すべき点だったかもしれません、もう少しまわりの意見や情勢を考慮すべきでした。

まさか、XDがこんな結果になるとは思ってもいませんし、、、
とにかくAdobeXDには早急にFigmaへの移行関係のアップデートをしていただきたいと思っています。


\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! //

919.jp