結局、UIデザインの実務に使えるプロトタイピングツールはどれなの？？
【読み終わるまでの所要時間：約5分】
こんにちは！MoQupの原田紘希です！
今回は、
UIデザインの実務に使えるプロトタイピングツールは？？ という所に対して実体験を交えてお伝えいたします。
これを書こうと思った経緯は、XDで作成したデザインファイルをFigmaに移行するために四苦八苦しているところから、UIデザインのプロトタイピングツール選定間違えたかも？と感じてしまったので、同じような境遇の方の参考になればと思ったというのが大きな理由です。
それでは本題、
実務上UIデザインしていく上で、一番使えるプロトタイピングツールはどれなんでしょうか？？
よくプロトタイピングツール〇選、ワイヤーフレームツール〇選などの記事を目にしますが、正直な話、UIデザインの現場で実務に使ったプロトタイピングツールは3つしかありません。
プロダクト開発のご依頼を受けた際に、
上記のプロトタイピングツールを実際に使用し、一度デザインファイルまで作ってみた上で選定を行いました。全てのサービスを試したわけではありませんのでそこは悪しからず。
早速結論ですが、
Adobe XDかFigmaを使って、mac向けであればSketchの使用もアリ
というのが実務上での結論です。
理由としてはシンプルで、
ワイヤーフレーム作成 →プロトタイピング→ デザイン作成
というUIデザインに欠かせないフローを考慮した時に、
プロトタイピング（リンク設定やアニメーション設定）が可能な事
デザインの作成まで一貫して出来る事
ユーザーや開発とのデザイン共有やコミュニケーションがスムーズな事
という条件を満たしているのが、AdobeXD、Figma、Sketchの3つに絞られてしまうからです。
特にデザイン作成まで考えたときに、他のツールでは機能不足だったり、学習難度が高かったことが大きな要因です。
2021年5月頃に選定したので、他サービスの現状知識が薄い部分はありますが、実務上でこの3サービス以外を使用するケースが必要になる事はありませんでした。
ただ3つのサービスに触れてみて、線引きラインはいくつかあると感じたので、それをお伝えします！
UIデザインに携わる方々は参考にしてみてください。
各プロトタイピングツールの優位性
製品紹介をしたいわけではないので詳細は省きますが、
ざっくりと強みをおつたえすると、
Adobe XDの優位
💡 デザインのしやすさ（アドビ製品との親和性）
💡 プロトタイピングのしやすさ（リンク接続のしやすさ、リンク管理のわかりやすさ）
💡 学習コストの低さ
Figmaの優位
💡 コンポーネント管理のしやすさ
💡メンテナンスのしやすさ（一覧性）
💡 機能が増えた際のファイル管理のしやすさ
Sketchの優位
💡 Macでの使用に親和性が高い
💡 他サービスとの連携数が多い
というよう各サービスで優位はあるものの、「アプリのデザインだからXD！」とか「WebサービスだからFigma！」の様に明確に線引きして選定ができるわけではありません。
ここはチームの規模感や習熟度でどのツールを選んでも問題なくプロトタイプを作成して、ユーザーへの検証が可能です。
あえて線引きをするなら…
XDをツールとして選定する場合は…
「デザイン初心者やアニメーションクオリティ重視：アプリや小規模なWebサービス向け」
プロトタイピングツールの経験が浅い方。
他のツールに比べると圧倒的に初心者向け。アドビが公式でだしている動画を3つか4つ見ると使い始められます。
現在イラレやフォトショップでデザインを行っている方。
イラレやフォトショとの連携が楽（コピペでＯＫ）
アニメーションにこだわったプロトタイプを作成したい。
アドビ製品全体でデザインパーツを共有して使いたい。
などに当てはまるとXDがハマります。
ただ、XDはコンポーネントやデザインパーツが増えてくると、目に見えて速度が遅くなってきてしったり、Adobe製品の共通コンポーネントの形でライブラリを作成するために、参照するのにも時間がかかります。
継続的にアップデートを加えていくサービスよりも、画面数や拡張性の少ない、Webサイトやアプリケーションの開発に使うのに利点があります。
Figmaをツールとして選定する場合は…
「保守性やメンテナンス性重視：小～大規模Webサービス向け」
複数人のデザイナーが関わって、デザインガイドラインやコンポーネントを作成・利用・更新していく場合
複数の機能やコンポーネントを一つのデザインファイルで管理可能
メンテナンス性が高い
コンポーネントごとの条件付けが細かく出来る
開発メンバーやクライアントと継続的に議論を行う必要がある場合
Figjamを使ったコミュニケーションで開発スピードを上げたい
デザイン製作以外の部分で明らかに優位があって、デザインファイルの管理や運用以外の面でメリットが多いです。
Sketchを使用する場合は
「チームメンバーがMacで開発しているならFigmaと比較してもいい」
昔からSketchを使用していて慣れている。
デザインチームや開発チームがMac製品を使ってを開発を行っている。
Sketchのサイトでは機能比較を出していたりするので機能面での差分をだしてくれているのですが、正直FigmaとXDの方が使い勝手や管理の面でも上に感じています。
サービスの歴が長いため、現行のデザインツール以外との連携プラグインは、かなり豊富です。使い勝手は分かりませんが。。エンジニア寄りのデザイナーの方を中心に使っていく分には選択肢にあげても良いと考えてます。
まとめ
各サービスの線引きを簡単にまとめるとこんな形ですね。
小規模な開発チームではXDかFigmaのどちらを使っても一長一短あると思いますが、
将来的にどれぐらいの規模のサービスになる想定か？
どうやってデザインファイルを管理するか？
どうやって開発・デザインメンバーと共有するか？
などサービスや規模、フェーズによって課題は様々だとは思います。
現状で選定のポイントは「デザインスキルの習熟度」「将来的な運用方法や規模」を天秤にかけて選定をおこなうとスムーズだと考えています。
開発・デザインメンバーと共有に関してはXDもFigmaもそこまで大差ないのですが、FigmaはFigjamを使えるのが大きなアドバンテージです。
実際の案件進行においては、Miroなどのコラボレーションツールを使用してメンバーやクライアントとコミュニケーションを取る事が多いので、そこにシームレスに接続できるFigmaが現状では1番安パイのプロトタイピングツールだと思っています。
Figmaであれば、デザインしつつFigjamへリアルタイムでデザイン共有、編集を行うなど、開発とのコミュニケーションが爆速なので。
実は各ツールで出来る事にはこまで変わりがないのですが、Figjamの存在がかなり大きいので、Sketchを使うメリットを感じられていないのが現状です。
来週の火曜日には、「エンジニアメンバーとどのようにコミュニケーションをとっていくのが良いのか？」コラボレーションツールを使ったエンジニアとのやり取りについて。
を実務上の経験を交えてお話しします。
また次の記事でお会いしましょう！
皆様の良きデザインライフを！！
この記事が気に入ったらサポートをしてみませんか？