Blog Subscribe

SUBSCRIBE TO OUR NEWSLETTER

WHAT IS MOCKPLUS?

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Tell me more

Webデザイナーのための最新UXツール 10選

Mockplus Team designup.jp

Here comes a new list of UX design tools which are super easy-to-use both for your wireframes and prototypes! - by Takeshi Sugimori


めちゃくちゃ便利で使いやすくなった最新UXデザインツールを見つけたので紹介します。


一昔前のUXデザインといえばワイヤーフレーム使ったり、ペーパープロトタイプやったり、無駄な作業が増えるだけで誰もやらないイメージ。ところが最近公開されたAdobeXDのように、Photoshopとの連携はもちろん、より実用的なUIコンポーネント(リアルに動く!)が用意されていたりとかなり進化しています。

ここまで進化していれば、ツールとしてもかなり実用的。新しいWeb制作のワークフローに組み込んでみるのも悪くないかも。


最新UXデザインツールまとめ 10選

Adobe XD
最近出たばかりのAdobe XD。まだプレビュー版ですが、機能も豊富ですごく使いやすくできてます。画面ごとのアートボードの作成や、Illustratorのようなオブジェクトツール、画像のマスキングなどこれまでのツールにはなかったような機能が満載。Photoshopとの連携や実際のデバイスを使ったリアルタイムプレビューなども追加されるようなので今後に期待。


Sketch

SketchはPhotoshopに変わるWeb制作ツールとまで言われた便利なツール。Webデザインはもちろん、UXデザインのためのツールとしてもすごく使いやすく作られている印象です。


Pidoco
オンラインで使えるUXプロトタイピングツール。UIパーツを選んでページレイアウトを作成するだけでなく、作成したUIをテンプレートとして再利用することができるため、自分用に使いやすくカスタマイズしていくことができます。SVGイメージやHTMLファイルとして出力も可能。


Mockplus
MockplusはUX/UIデザインのプロトタイピングツール。ツールとしての完成度はもちろんの事、デザインがすばらしい。QRコードを読み込むだけで画面のプレビューができたり、線やテキストなどのワイヤーフレームだけでなく、スライダーやDrawerなど実践的なUIコンポーネントが用意されているのも魅力。



UXPin
UXpinもMockplusと同様、アニメーションで実際に動くUIコンポーネントが用意された高品質なツール。アニメーションの種類も多く、このツール内でなんでも作れてしまうのがすごいです。PhotoshopやSkechからのインポートができるので、PhotoshopでデザインしてUXPinで動かしてテストといった使い方も可能。


Cacoo
CacooはWebに限らずフローチャートやマインドマップなど様々な図を作成できるツール。チャットや作成した図のシェアが簡単にできるため、チーム内でのコミュニケーションツールとして使うのと便利です。



GIMP
GIMPはPhotoshopでできることなら大抵のことはできる、とんでもないフリーツール。もちろんWebデザインも可能なので無料ツールを探しているならならGIMPオススメ。



Instant Wireframe
Instant WireframeはChrome拡張機能として提供されている、Webサイトのワイヤフレーム化ツール。今見ているサイトのフレームワークを1クリックで作れてしまいます。



Wirify
Wirifyブラウザで見ているサイトをワイヤーフレーム化してくれるツール。リンクをブックマークに登録してワイヤーフレーム化したいサイトでクリックするだけで簡単に使えます。無料版では画像として出力され、Pro版ならIllustratorで編集できるSVGや以下で紹介するbalsamiq用データで出力することができます。



Balsamiq
balsamiqは先ほど紹介したWirifyのデータを取り込むことができるモックアップツール。数多く用意されたUIエレメントを使って、PC向けのWebサイトやスマホサイトのレイアウトを作成できます。



STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

DOWNLOAD FREE
Mockplus Summer Sale 2017