2019年7月24日2021年2月4日

こんにちは。サービスデザイン部の烏丸です。

前回は 複数人でfigmaを利用してみて良かった点・気をつけたい点 を共有しました。

今回は、「UIデザインツール徹底比較！チーム体制別おすすめツールはこれ！」という内容を共有したいと思います。

• この記事にいたるきっかけ
• チーム体制別おすすめデザインツール
• 2名以上のデザイナーが在籍し、同じデザインデータを触ることがあるチーム
• デザイナーとエンジニアが一緒になってアプリ開発を行うチーム
• デザイナーが1名で、スピード感が求められるチーム
• まとめ

この記事にいたるきっかけ

UIデザインやプロトタイピングに特化したデザインツールとして、一定の人気を獲得してきたのが「Sketch」です。社内でも、1年ほど前までほとんどのデザイナーがUIデザインツールとしてSketchを使用してきました。

ところが最近では、Adobe XD、Figma、InVision Studio といったSketchに代わり得るデザインツールがたくさん登場してきています。

実際に弊社でも複数のチームが「figma」を利用してデザインを作成していますが、社内ではfigma以外にもXDなどチームによって複数のツールが使われている状況です。
その際、色々なデザインツールに関するドキュメントやレビュー記事を調べていたのですが、「価格」や「使用方法」や、それぞれの「機能を比較」などからでは、結局どれが一番良いのか、弊社内やチームにはどのデザインツールが最適なのか一概に決められないと感じました。

そこで、サービスデザイン部のグループミッション（ぐるみ）のひとつのチームである「技術推進チーム」では、以下の目的からデザインツールの比較を行いました。

• 今後、デザイナーがチームの体制や運営サービスの特徴に合わせて最適なツールを選択しやすいようにする。
• ツール選択時の判断材料として、実際に使用してみないと分からない、実践的な使用感を明らかにする。

チーム体制別おすすめデザインツール

今回は以下の3種類のチーム体制ごとにおすすめのデザインツールをご紹介していきます！

• 2名以上のデザイナーが在籍し、同じデザインデータを触ることがあるチーム
• デザイナーとエンジニアが一緒になってアプリ開発を行うチーム
• デザイナーが1名で、スピード感が求められるチーム

2名以上のデザイナーが在籍し、同じデザインデータを触ることがあるチーム

担当デザイナーが複数いて、作業の属人化を防ぐ必要のあるチームの場合は、断然 Figma がおすすめです！
※Figmaには有料版もありますが、今回は無料版の機能をベースにしています

デザイナーが複数名いるチームでは、同じデザインデータを2人以上が編集する（更新する）場合も多いと思います。

例えば、

①Aさんがデザインを作成した
↓
②作成したデザインに対して、後にクライアントから修正依頼が来た
↓
③その修正をBさんが対応する

このような場面がよくあります。
この時、Aさんはお休み！デザインのデータがBさんに共有されていないので修正対応ができない！なんてことは避けたいですよね。チームのメンバーが変わった時なども同じです。

常にGoogleドライブなどクラウド上に最新のデータをあげる習慣があれば良いのかも知れませんが、その場合もどのファイルが最新なのか分からなかったり、フォルダが複雑で保管場所を探すのが大変だったり……
チームのデザインデータの管理には工夫が必要です。

では、なぜFigmaがおすすめなのでしょうか。

リアルタイムで共同編集が可能

Figmaの一番の特徴は、リアルタイムで複数名が同時に編集可能であること。
違うラインで作業を行うという概念がないので、複数名で同じファイルに手を入れても、どれが最新で正しいんだっけ？といった混乱を招くことがありません。
また、 他の人のカーソルが表示されたり、 特定の人の見ている画面をそのまま表示する機能 があったりするので、自分は今はここを触らないでおこう、といった判断もしやすくなります。
その結果、私たちの経験上、他のツールを使用した時と比べて、確実に後戻りが少なくなりました！
データのバージョン管理に関するややこしいコミュニケーションを省けるのは、本当に助かりますね。

保存・更新要らずで最新データを共有できる

ブラウザベースのツールで、URL一つで誰にでも共有ができるというのもFigmaの特徴です。デザインに変更を加えても保存や更新の作業が要らないので、「更新した最新データを再共有し忘れて、認識がずれてしまった！」、「保存をし忘れて直近の変更が消えてしまった！」などといった痛いミスも避けることができます。

また、編集画面もURLで共有できて更新も必要ないという点も、作業効率をアップさせてくれる大きな魅力でしょう。他のツールで編集データを他の人に共有する時は、ローカルデータとして保存してチャットツールなどでファイルを添付したり、クラウドに保存したりする必要があります。ファイルサイズによっては圧縮が必要だったり、相手がそのツールを所持していないとひらけないということも多いです。
Figmaなら、一度URLを共有すれば誰でもいつでも編集可能になるため、面倒なフローをかなり省略することができます。

Figmaを利用した”ペアデザイン”で広がる可能性

上で述べたリアルタイムで共同編集ができることを生かして、Figmaを使ったペアデザインを行うのもおすすめです。ペアデザインとは、2名で一緒にデザインをする手法のことで、1名がツールを操作してデザインを整理し、その画面を見ながら2名で意見を出し合って詰めていきます。

Figmaは、他の人が閲覧している画面を自分の画面に映すことができるため、作業者の画面を別の大きなディスプレイに映したりする必要がありません。また、普通ペアデザインは1名が手を動かすものですが、言葉で表現しにくい「こんなのどうでしょう？」といった提案を、もう1名が自分の画面で編集してその場で再現することもできるので、効率よく進めることができます。

デザイナーとエンジニアが一緒になってアプリ開発を行うチーム

アプリ開発をするチームでは、フロント部分や画面遷移時のアニメーションの実装などをエンジニアにお願いすることが多いでしょう。
そのようなチームには、InVision Studioがおすすめです。

InVision Studioとは

InVision Studioは、2018年に正式リリースされた新しいデザインツールで、プロトタイピングの作成や共有ができるサービスを提供している「InVision」が開発・提供しています。
UIデザインを作成するデザインツールとしての機能は割と一般的なもので、SketchやFigma、Adobe XDなどとほとんど変わりません。

こちら からデスクトップアプリをダウンロード可能で、InVisionアカウントでログインして使用することができます。

豊富なアニメーションのパターンを標準搭載

アプリ開発を行うチームにこのInVision Studioがおすすめな理由は、 アニメーションの設定機能 が優れているからです。
他のツール同様、クリックやタップ、スクロールをしたときの動きはもちろん、4方向へのスワイプ時の画面遷移やホールドタップ（長押し）時の動きまで設定することができます。

FigmaやAdobe XDなど、他のツールにもアニメーション設定の機能は存在していますし、Sketchには詳細なアニメーションを設定するためのプラグインが存在していたりもするようです。しかしここまで 高度なプロトタイプを標準機能のみで、しかも簡単に作成できる のは、InVision Studioの優れている点だと思いました。

このように、画面遷移の種類が多かったり、インタラクションをたくさん盛り込んだりするようなサービスであれば、再現性の高いInVision Studioのプロトタイピング機能はとても便利です。
もちろんアプリに限らず、高度なアニメーションを設定したプロトタイピングが必要な場合には、試してみる価値があるでしょう。
反対に、インタラクションの少ないサービスや、精度の高いプロトタイピングを必要としない場合には、他のツールのメリットを優先しても良いかもしれません。
（後に記載するような不具合の報告もあるため、チームにとっての優先順位を考慮してツールを選択しましょう。）

コミュニケーションツールとしても使える

UIデザイン・プロトタイプを作成したら、エンジニアにそれを共有して、実装をお願いしますよね。
InVision Studioのプロトタイプの共有方法は、とても簡単です。共有メニューを押して、表示されているURLを共有するだけ。それをブラウザで開けば、作成したプロトタイプを確認することができます。
さらに、1つのURLで、画面遷移やアニメーションを確認するプロトタイプ、カラーやマージンなどを確認できるインスペクタ機能、文字を任意の箇所にピンを立てて入力できるコメント機能を全て使えてしまうのです。

インスペクタでは、実装方法などに合わせてコードの種類やカラースペースの表示設定を変えることができるので、iOSアプリやAndoroidアプリの実装もサポートしてくれます。

任意の箇所にコメントを入力し、画面上にピンを立てておけるので、実装時に考慮してほしいことをメンションを付けてエンジニアさんに送ったり、逆にエンジニアさんがデザインについて疑問に思ったことを質問したりすることもできます。

デザインツールとコミュニケーションツールが合体した、これひとつで全てが完結するようなツールだと思いました。

InvIsion Studioの注意点

そんな便利なInVision Studioですが、まだまだ新しいツールのためか、不安定な部分もあります。
例えば、日本語フォントへの対応が十分でないところです。使用してみてわかったのですが、ヒラギノフォントを使用すると、見た目がなんだかおかしく、、さらに、ヒラギノフォントを使用した瞬間、何度試してもフリーズしてしまうなんてこともありました。

またフォントによっては、1箇所でも使用していると、プロトタイプモードで共有した際に、ほとんどのオブジェクトがうまく表示されなくなってしまうという現象も起きました。

現時点で私が確認できた解決方法としては、游ゴシック・游明朝体を使用するというものだけです。全てのフォントを游ゴシック・游明朝体に置き換えてみたところ、全てのオブジェクトが正しく表示されました。

なかなかに致命的な不具合はありますが・・・、2019年中に共同編集機能が追加されオンラインでの同期も可能になると予告されおり、今後のアップデートが楽しみなツールです。

デザイナーが1名で、スピード感が求められるチーム

チームにデザイナーが1名しかいなく、デザイン作成もコーディングも1名で行うという場合、コンフリクトやバージョン管理を心配する必要はあまりありません。
ツール選びの軸の一つとなるのは、人数が少ない分、スピード感や一貫性になってくると思います。
このような場合におすすめなのがAdobe XDです。

Adobe製品のライブラリ機能で作業効率アップ

XDの一番の特徴は、他のAdobe製品との連携がとんでもなく便利なところです。Adobeアカウントさえあれば、UIを作成した後の細かいグラフィック作成に使用する「Illustrator」や「Photoshop」との連携がとても簡単にできます。

例えば、このような状況ってよくありますよね。

①UIデザインツールで画面レイアウトを作成する
↓
②画面に差し込む画像をPhotoshopで作成する
↓
③UIデザインツールに画像を取り込み、画面レイアウトの中に差し込む
↓
④やっぱり画像を微調整したい！Photoshopで編集する
↓
⑤UIデザインツールに調整後の画像を反映させる

このような、「ツールを切り替える→編集して書き出す→もう一度ツールを切り替えてデータを挿入する……」という面倒なフローも、Adobeアカウントにログインして「ライブラリ機能」を使用すれば、とてもスムーズになります。
ライブラリ機能とは、カラーやテキスト、画像などのアセットを管理しておけるもので、個人ではもちろん、メンバーを招待すれば複数名と共有しても使うことができます。ライブラリに1度保存したものは、変更を加えると自動的に更新されるようになっているので、常に最新のアセットを利用することができます。

Photoshopで編集した画像をいちいち書き出して、もう一度XDファイルに取り込んで位置を調整する、という面倒な工程を省くことができるのです。

ライブラリを使用してPhotoshopで編集した写真をXDに取り込む

UIコンポーネントだけでなく、よく使用する画像やビデオが存在するサービスの場合、とても便利な機能ですね。

まとめ

チーム体制別のツールおすすめ度

改めて、上で説明したチームの体制やサービスの特徴ごとの各ツールのおすすめ度をまとめます。

Adobe XD ：Adobe製品との相性が抜群。ライブラリ機能を使えば設計からグラフィックデザインまで1名でもスムーズに行えます。
Figma ：共同編集機能で複数人で効率のよいデザイン作成が可能です。URL1つで共有でき、保存や更新も不要なのでデータの管理がとっても楽。
InVision Studio ：画面遷移やアニメーションの高度な設定機能があるので、ネイティブアプリ実装前の忠実なプロトタイピング作成に最適。

押さえておきたい基本情報で比較する

ツール導入時には上記の比較と合わせて考えたい、各ツールの基本情報をまとめます。

チームの体制別に、重視する事柄にとって役立ちそうなおすすめデザインツールを紹介しました。
全てのチームが以上の3種類のチームに当てはまるわけではありませんし、また今回挙げたいずれかのチーム体制に当てはまる場合でも、サービスの特徴やその他の環境に合わせて、より良いツールを選ぶのが最適だと思います。

今回比較対象とした3つのデザインツールは、UIデザインとプロトタイプ作成を行うツールとして、基本的な機能は大きく変わるわけではありませんでした。
個人・またはチームが最も重視したい機能の精度などによって、デザインツールの導入時に最適なツールを選択する参考になれば嬉しいです。