はてB!PinterestFeedlyUXデザインで必須のプロトタイピングを効率良くこなせる最新ツールまとめ。プロトタイピングツールは以前からあったのですが、最近はUXデザインが主流になってきたこともあって、かなり実用的なものが増えてきています。この記事ではよく使われるプロトタイプツール7つとそれぞれの評価をまとめてみました。プロトタイピングツールの評価プロトタイピングツールの中でもとくに高機能なもの7つを選びそれぞれ次のような項目で評価してみました。無料で使えるか、期間限定は△3段階でそれぞれ以下のように評価しました。Framer,Overflow使い勝手や導入しやすさ、ライブラリの豊富さなどで最優秀賞はXD。Framerはコードも書けるプロトタイプツールとして、Overflowはプロトタイピング特化でどこまでいけるかに注目。XD無料から使えるプロトタイプツール。リピートグリッドや簡単に登録、再利用ができるアセットなど使い勝手の良い機能が盛りだくさん。パスツールがあるのでちょっとしたアイコンの作成とかも可能で、ワイヤーフレーミングからビジュアルデザインまでこなせます。Studio無料から使えるプロトタイピングツール。XDよりも細かいアニメーションの作成ができ、レスポンシブデザインも作りやすいのが特徴。バージョン管理機能があるので保存した後もデザインをやり直すことができます。Studioの他にデザインシステムマネージメントやクラウドもあり総合的に使えるプロ御用達のツール。FramerFramerSketchのインポートができ、レスポンシブデザインにも対応。ここでつくったアイコンはSVG書き出しできるのがGood。コードを使ったアニメーションの作成など他とは違った機能もあります。OverflowOverflowプロトタイピング(画面遷移などのユーザーフロー)に特化したツール。Sketchから取り込んだアートボードを使ってユーザーフローを細かく設定可能。SketchSketch最近プロトタイピング機能が追加されたMacの定番デザインツール。元がデザインツールなので、ワイヤーフレームから細かいデザインまでこなせます。プラグインが豊富でSketchにはない機能を追加できるのが魅力。inVisionCraftやOverflowと組み合わせて強力なプロトタイピングツールに拡張することができます。ProtopieProtopieコードを書かずに細かいアニメーション、インタラクションの作成ができるツール。UXPinUXPinプロトタイピングだけでなく、デザインのドキュメントも含めたデザインシステム全体を提供しているツール。デザインを作った後のスタイルガイドやドキュメントの作成はすごく手間のかかる作業ですが、UXPinを使うことで自動生成できます。まとめWebでもアプリでもUXデザインが必須になってからツールもかなり進化してて、どれがいいか迷うほど。プロトタイピングに関してはやっぱりXDが一番手軽で使いやすいですね。難しい機能もなく、何より無料でほとんどの機能が使えるのがポイント高いところ。アニメーションが弱いところがマイナスですが、凝ったアニメーションのアプリでなければ十分使えるレベル。WebデザイナーフリーランスWebデザイナー。レスポンシブサイトの作成、Wordpress、EC-CUBEやカラーミー、BASEなどのネットショップのデザイン・構築を担当。EC-CUBE4プラグイン「UICube」開発者。このブログでは初心者がつまずきやすいポイントや、制作で得た知識をわかりやすく解説します。おすすめ無料プラグイン10選Web制作のことでお困りですか?・急に案件が増えて手伝ってくれる人を探している・担当していたデザイナーがやめてしまった・新しくホームページを作りたいこのようなことでお困りでしたら、お気軽にご相談ください。デザインからコーディング、WordpressなどのCMSの構築まで対応させていただきます。homupedia.com。