前提
アドベントカレンダー初参加！
最近UI/UXデザイナー（見習い）デビューを果たしたわたくし、
手始めに最近よく使われているUI/UXデザインツールについて、書いてみたいと思います。
Sketch、InVision、Studioなど・・色々あるにはあるのですが、
業務で使用してみての感想を含め、ここではFigmaとAdobeXDの2つについて比較していきます。
各ツールの利用シーン
これらの細かい説明は省きます。
この記事では、両ツールを 新規Webサービス または スマートフォンアプリの企画・開発
において、以下の目的で使用することを想定しています。
- プロトタイピングの作成と共有
- 画面UIデザインの作成と共有
- 画面遷移の作成と共有
ざっくり両者比較
| 比較項目 | Figma | AdobeXD |
|---|---|---|
| 学習コスト |
低〜中 ・直感的に操作可能 ・公式ドキュメントも整理されている（英語だけど）し、Youtubeに動画もある |
低〜中 ・操作感はFigmaとほぼ変わらない。結構Figmaに寄せて開発してて、ショートカットが似てたりする ・学習材料はさすがAdobe、無数にある（記事、動画、etc） |
| 導入コスト |
無料〜＄45/月 ＊最新版は、Figma Plans参照 ・3名以上のチームで共同作業する場合は、有料の方がよさそう |
無料〜¥1180/月 ・ソフトウェアダウンロードが必要だが、基本機能はほぼ無料の範囲でも使える。 ・共同プロトタイプを2つ以上作る必要ある場合は有料が吉。 |
| 環境 |
◎ ・ブラウザで動くWebサービスのためOSを選ばない ・デスクトップアプリもあり（Win10,Mac） |
◯ ・デスクトップアプリのみ（Win10,Mac） |
| プロトタイピングツールとして |
◎ ・画面遷移作成時のトリガーが多いので色々実現できる ・スマホ実機確認が無線で可能 |
◎ ・十分、さまざまな表現を実現できる ・スマホ実機確認は有線で繋いで確認可能 ・Adobe製品との互換性が◎ |
| デザインチーム内での共同ワーク |
◎ ・同時共同編集ができるのはFigmaだけ。でも無料だと、2名まで。 ・バージョン管理可能 |
◎ ・クラウドドキュメントに保存した場合はバージョン管理あり（ローカルドキュメントの場合は.xdでファイル保存し、それを共有するので競合の危険性はある。無償だとクラウドの容量が2GBしかない。） |
| 他チームへの連携 （開発チーム、デザインベンダー、など) |
◎ ・ブラウザの編集画面をそのままリンクで共有できるので簡単 ・カンプ上に直接コメントできる。直感的。 ・プラグインが多い |
◎ ・共有する相手によって見せ方を変えられる。 例）開発の場合、コード・画面遷移 例）デザインレビュの場合、プロト・コメント機能 ・・・機能、多し。 ・XDはソフトウェア持ってない人にはそのまま共有できない ・ガイドラインを作る必要がない ・XDを採用しているデザインベンダーも多い |
所感
・・・ いい勝負！！
優劣つけがたい結果に。
いままでは・・Figmaメインだった
グッドな点
- いまいるデザインチームではワイヤー・プロトを作る人が私を含めて2名だけなので、Figma（無料版）で事足りていた。
- 微修正にデザイナーの手がとられにくい。
- 学習コストも低めなので、開発チームにそのまま渡して、細かい修正などは開発チームにやってもらうことも可能。
- リアルタイム同時編集はテレワークとの親和性◎
- デザイナーサイドの思考のプロセスをそのままZOOM会議で共有しながら、ブラウザ上でリアルタイムで変更できるのって
こんなに楽で早いのか！と言う感じ。
- デザイナーサイドの思考のプロセスをそのままZOOM会議で共有しながら、ブラウザ上でリアルタイムで変更できるのって
- ドキュメント更新もしなくてよい。
- 画面遷移をFigmaで書いて、そのままの作業画面をリンクで手軽に共有できるのが、意外と重宝している点。
- XDは、開発者向けのリンクをわざわざ作って共有しなきゃなので、遷移を含めたプロトタイプをきっちりつくっておかないと遷移を共有できない。
- XDダウンロードしといてもらわないと、見たままの画面は共有できない・・・
イマイチな点
- デザインガイドラインを別で作る必要性があった。
- 細かいマージンや幅などの伝達のために、ドキュメントを別で作成して渡していたりする。
- 本当は別で作らなくてもFigmaだけでもいいのだが、見方がわからない人のために、一応作ってたり・・・。
- カラーパレットも、別で作って渡していたり・・・。
- Figmaに限った話ではないが、これを元にコードに落とすのは、やっぱり手作業・・・。
- 最近のPJではアプリ開発にFlutterを採用することも多く、
FlutterだとXDのほうが公式な変換プラグインがあったりする。
- 最近のPJではアプリ開発にFlutterを採用することも多く、
- いい意味で、Figmaを触れる人が増えてくると、無料アカウントだと窮屈になってきた。
これからは・・・XDも勉強していくぞ
-
UIデザインを作成してくれるベンダーに外注することが増えてきた。
- 外部ベンダーはXDを採用しているところも多い。
- そのため、ワイヤーをXDで作って渡したほうが、後続作業をやってもらいやすいかも。
-
企画・営業チームとの要件整理に最初からXD/Figmaで画面イメージをつくって会話しちゃいたい。
脱パワポ・エクセルを目指したい。
共通言語としてのデザイン 、というキーワードにこだわっていきたい。 -
XD/Figmaのハンズオン講座とか、社内でやったらウケるかな？やりたいなー。
-
営業、企画、開発、、みんなが触れるようになったら、幸せになれる・・かも
結論
今の時点では、どちらを採用するかは、プロジェクトの規模や、
サービスの画面数によって決めるのがベストでは？と考えてます。
基本、どちらかの操作を学べれば、どっちも触れるはず・・！
それか、部門で「こっち買う！」と決めちゃって、有償アカウントをみんなに払い出したいですね。
ワイヤーフレームをエクセルやパワポで作るの、もうやめようぜ