これまで「デザイン」というとデザイナーが行う工程とされてきましたが、昨今のデザイン工程はデザイナーはもちろんディレクターやプロダクトマネージャー、エンジニアなど多くのチームメンバーが関わる工程となっています。
多彩なメンバーがデザイン工程に関わることの大きな手助けになるのが、「プロトタイピングツール」です。プロトタイピングツールは、施策品（プロトタイプ）を作り、そのデザインの検証→改善のサイクルを行うことを助けるツールです。プロトタイピングツールは、高機能なデザインソフトとは異なり、よりかんたんに誰でもデザインの大枠と画面の遷移などを設計することができます。
そこで、今回は今注目されている国内外のプロトタイピングツールをご紹介します。

万能プロトタイピング！「Adobe XD」

Adobeは「Photoshop」や「illustrator」 などを提供する、世界的なソフトウェアメーカーです。デザインに直接関わりのない方でも、一度は名前聞いたことはあるのではないでしょうか？デザイナーにはおなじみのソフトを提供するAdobeが2017年10月に満を持して提供を開始したのが、「Adobe XD」です。
Adobe XDの特徴としては大きく2つあります。1つは同じくAdobeが提供するPhotoshopやillustratorとの連動ができること、もう1つは動作もファイルも非常に軽快なことです。Adobe XDでプロデューサーがワイヤーフレームをざっくり作り上げ、デザイナーがPhotoshopで細部のチューニングをするプロセスも現在は広がってきました。
また、Adobe製品はCreative Cloud（コンプリートプラン5,680円／月）というパッケージで、月額課金型で利用できるため、すでに同プランでPhotoshopなどを月額課金で利用していれば無料で利用することができます。

UIデザインツールの先駆け！「Sketch」

「Sketch」はオランダのBohemian Codingが提供する、プロトタイピングツールです。前述のAdobe XDが2017年の本リリースであったのに対し、Sketchのサービス自体は2010頃から提供されています。もっともその当時はillustratorに近い単なるベクターによるデザインソフトでした。
しかし徐々にSketchモバイルアプリ中心のUIデザイン機能が増えていったことに加え、Adobeが「Fireworks」という類似ソフトの開発を終了したことで、Sketchは大きく市場に広がっていきます。UIが英語ということも難点もありますが、その動作の軽快さを武器に、 日本でもスタートアップなどの制作シーンでは使われることが徐々に増えていきました。

現在は軽快なAdobe XDがリリースされたことで、競合関係にはありますが、価格については年間ライセンスが＄99とAdobeに対し安価な点は強みとなっています。また後述するInVisionやZeplinなどのデザインツールとの連携が容易である点も、Sketchの優位な点と言えるでしょう。ただしAdobe XDがWindows/Macの両方に対応しているのに対し、SketchはMacOSのみとなります。

プロトタイピングに特化！「InVision」

「InVision」は、UIデザインを制作することよりも、ベースのデザインを下敷きに画面遷移やチームでのコメントなど、プロトタイピングにかなり特化したツールです。現在のAdobe XDよりも先に提供され、以前はSketchに画面遷移機能などがなかったため、プロトタイピングツールとしては走りの製品と言えるでしょう。

InVisionのプロトタイピング機能は現在もAdobe XDやSketchよりもかなり優位にあります。具体的にはアンカーリンクによるページ内遷移、ヘッダーやフッターの固定などは現在はInVisionでしか実現されていません。Adobe XDとかなり世界観も近い（Adobe XDもPhotoshopなどで作成したベースデザインが下敷きになるため）ですが、プロトタイピングとしてのかゆいところに手がとどく機能は、まだまだInVisionに一日の長があります。

InVisionはそのプロジェクト数での月額課金で3プロジェクトで＄15／月で利用することができます。またInVisionも英語のツールにはなります。なおプロトタイピングソフトのInVisionに対し、デザインまでまかなうInVision Studioというソフトも提供されています。

コラボレーション機能が魅力！「Figma」

「Figma」は現在のデザイナー界隈では最も注目されているプロトタイピングツールといっても過言ではないのでしょうか。Figmaの特徴としては、2つあります。1つはInVisionと同様にブラウザベースで利用できるため、Chromeだけインストールすれば利用することができます。（デスクトップ版も用意されています）また複数のメンバーが同時に確認編集できる「コラボレーション機能」が充実しています。
Figmaのコラボレーション機能では具体的にどのようなことができるのでしょうか？かんたんに言うと複数人で同一ファイルのデザインを行い、お互いの作業がぶつかることなく、デザインの共同制作が可能になります。プロダクトに関わるチームの力を最大化するのに役立つツールと言えるのではないでしょうか。
なお価格は無料で利用できる範囲もありますが、月額課金かつ編集者アカウント単位の課金になり、＄15／月から利用することが可能です。

国産プロトタイピングツールの雄！「Prott」

国産のプロトタイピングツールとしては、UIデザインカンパニーであるGoodPatchが「Prott」を提供しています。Prottのサービス自体の特徴としては、多数のグローバル企業のサイトやアプリデザインを手がけるGoodPatchらしく、日本語で非常にわかりやすいUIにあります。逆にデザインソフトではなく、プロトタイピングツールと明確に定義されているため、逆にデザイン機能は絞り気味で検証と改善のサイクルに重きを置いたツールと言えるのではないでしょうか。
海外ツールでいうとInVisionに近いですが、そこは国内の企業らしく万全なカスタマーサポートや無料セミナーによる導入支援など、サポートが充実しています。価格設定もInVisionに非常に近く、3プロジェクトで1,900円／月となっています。


プロトタイピングは現在のWEBやアプリのプロダクトでは当たり前のように使われる考え方となってきました。一方でそのツールは出来ることや成り立ちの背景も異なり、SketchとInVisionのように必ずしも競合しあうことなく、協働するような連携がとられているのがなんともデザインツールの世界らしいなと感じます。デザイナー以外でもデザインに触れる昨今では、どんなツールがどんな世界観に基づいて作られているか、実際に使って体験する意味も非常に高まっています。ぜひ触れたことがないツールがあれば、これを機会に一度利用してみてはいかがでしょうか？

▼関連記事
・Googleが開発した最速メソッド「デザインスプリント」導入のポイント
・UI/UXの素晴らしいサービスとは？先行サービスから学ぶ良いUI/UX
・現役UI/UXデザイナーに聞く面接対策！採用したいUI/UXデザイナーはどんな人？
・今注目のWebクリエイティブ職種！UI/UXデザイナーになるためには？