UXデザインのための最新プロトタイピングツール 7選

UXデザインで必須のプロトタイピングを効率良くこなせる最新ツールまとめ。

プロトタイピングツールは以前からあったのですが、最近はUXデザインが主流になってきたこともあって、かなり実用的なものが増えてきています。

この記事ではよく使われるプロトタイプツール7つとそれぞれの評価をまとめてみました。

プロトタイピングツールの評価

プロトタイピングツールの中でもとくに高機能なもの7つを選びそれぞれ次のような項目で評価してみました。

  • リソース: UIkitやライブラリの多さで評価
  • デザイン: そのツールだけで細かいデザインを作れるか
  • プロトタイプ: 画面遷移やキーボードの表示など実機に近いことができるか
  • アニメーション: ボタンを押した時の反応などを細かく指定できるか
  • プレビュー: 実機でプレビューできるか、コメントなどを追加できるか
  • 無料枠: 無料で使えるか、期間限定は△

3段階でそれぞれ以下のように評価しました。

  • △: できない、もしくは弱い
  • ◯: できる
  • ◎: かなりよくできる
ツール名 リソース デザイン プロトタイプ アニメーション プレビュー 無料枠
Adobe XD
inVision
Framer
Overflow
Sketch
Protpie
UXPin

総合評価

  • 最優秀賞: Adobe XD
  • 優秀賞: inVision Studio
  • これから注目賞: Framer,Overflow

使い勝手や導入しやすさ、ライブラリの豊富さなどで最優秀賞はXD。次いで無料枠もあるinVision Studio。

Framerはコードも書けるプロトタイプツールとして、Overflowはプロトタイピング特化でどこまでいけるかに注目。

最新プロトタイピングツール・サービスまとめ

Adobe XD

Adobe XD UXデザインのための最新プロトタイピングツール Adobe XD

無料から使えるプロトタイプツール。リピートグリッドや簡単に登録、再利用ができるアセットなど使い勝手の良い機能が盛りだくさん。

パスツールがあるのでちょっとしたアイコンの作成とかも可能で、ワイヤーフレーミングからビジュアルデザインまでこなせます。

inVision Studio

inVision Studio UXデザインのための最新プロトタイピングツール inVision

無料から使えるプロトタイピングツール。XDよりも細かいアニメーションの作成ができ、レスポンシブデザインも作りやすいのが特徴。

バージョン管理機能があるので保存した後もデザインをやり直すことができます。

Studioの他にデザインシステムマネージメントやクラウドもあり総合的に使えるプロ御用達のツール。

Framer

Framer UXデザインのための最新プロトタイピングツール Framer

Sketchのインポートができ、レスポンシブデザインにも対応。ここでつくったアイコンはSVG書き出しできるのがGood。

コードを使ったアニメーションの作成など他とは違った機能もあります。

Overflow

Overflow UXデザインのための最新プロトタイピングツール Overflow

プロトタイピング(画面遷移などのユーザーフロー)に特化したツール。

Sketchから取り込んだアートボードを使ってユーザーフローを細かく設定可能。

Sketch

Sketch UXデザインのための最新プロトタイピングツール Sketch

最近プロトタイピング機能が追加されたMacの定番デザインツール。元がデザインツールなので、ワイヤーフレームから細かいデザインまでこなせます。

プラグインが豊富でSketchにはない機能を追加できるのが魅力。inVisionCraftやOverflowと組み合わせて強力なプロトタイピングツールに拡張することができます。

Protopie

Protopie UXデザインのための最新プロトタイピングツール Protopie

コードを書かずに細かいアニメーション、インタラクションの作成ができるツール。

アプリ制作向き。

UXPin

UXPin UXデザインのための最新プロトタイピングツール UXPin

プロトタイピングだけでなく、デザインのドキュメントも含めたデザインシステム全体を提供しているツール。

デザインを作った後のスタイルガイドやドキュメントの作成はすごく手間のかかる作業ですが、UXPinを使うことで自動生成できます。

まとめ

WebでもアプリでもUXデザインが必須になってからツールもかなり進化してて、どれがいいか迷うほど。

プロトタイピングに関してはやっぱりXDが一番手軽で使いやすいですね。難しい機能もなく、何より無料でほとんどの機能が使えるのがポイント高いところ。

アニメーションが弱いところがマイナスですが、凝ったアニメーションのアプリでなければ十分使えるレベル。

@takeshi_du

TAKESHI

フリーランス Webデザイナー

フリーランスWebデザイナー。レスポンシブサイトの作成、Wordpress、EC-CUBEやカラーミー、BASEなどのネットショップのデザイン・構築を担当。

EC-CUBE4プラグイン「UICube」開発者。

このブログでは初心者がつまずきやすいポイントや、制作で得た知識をわかりやすく解説します。

Web制作のことでお困りですか?

・急に案件が増えて手伝ってくれる人を探している
・担当していたデザイナーがやめてしまった
・新しくホームページを作りたい

このようなことでお困りでしたら、お気軽にご相談ください。デザインからコーディング、WordpressなどのCMSの構築まで対応させていただきます。

Copyright © 2020 homupedia.com