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

Pocket

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Hi Takeshi Sugimori,Nice article. Thank you very much for mentioning Mockplus at this post. We felt honored.