これらのトップUXツールであなたの技術をマスターする

公開: 2022-03-11

適切なUXツールを手元に用意することは、協調的でシームレスで全体的に非常に効果的な設計ワークフローと、低速で非生産的で説明のつかないワークフローとの決定的な違いになります。

最新のツールとテクノロジーを常に把握し、デザイナーがそれらを使用してより効率的に作成およびコラボレーションできる興味深い方法について学ぶことが重要です。チームの規模、設計プロセスの段階、およびワークフローにすでに含まれている他のツールによっては、一部のツールが他のツールよりも効果的です。

ワイヤーフレーミングやプロトタイピングからUXの調査や分析に至るまで、チームが2018年に素晴らしいことを行うのに役立つトップUXツールを見てみましょう。

デザイン+プロトタイピング+デザインハンドオフツール

InVision / InVision Studio

プラットフォーム：Web（SketchおよびPhotoshopと統合）、およびmacOS
価格：個人の場合は月額13ドルから、5人のチームの場合は月額89ドルから

注：価格は、無料のInVision Studioではなく、コアのInVisionWebアプリに適用されます。

最高のUXツールの1つ：InVision — さまざまなアプリ画面のステータスを表示するInVisionWebアプリ。

InVisionは間違いなくこれまでで最も強力なUXツールです。 これにより、SketchおよびPhotoshopの設計者は静的な画面をインポートして動的なプロトタイプに変換でき、利害関係者は建設的なフィードバックを提供して、実用的で管理しやすいタスクに変換できます。それをユーザーテストと共同ホワイトボードテクノロジーと組み合わせると、InVisionWebアプリは非常に貴重で非常に印象的なツールになります。

2017年にInVisionは新しいデザインハンドオフ機能を出荷し、2018年にはInVisionが完全なオールインワンソリューションになりました。独自のUXデザインツールであるStudioが無料で導入され、高度なアニメーションとプロトタイピング機能が含まれています。

1つのサブスクリプションで完全にストックされたツールボックスが必要なチームの場合、InVisionはここにあります。

InVision Studio、無料のUIデザインツールであり、デザインプロセスへの素晴らしい追加 — スタジオ、InVisionの新しいUXデザインツール。

フレーマ

プラットフォーム：macOS
価格：個人ユーザーの場合は月額$ 12、3人のチームの場合は月額$250から

最高のUXツールの1つ：UXプロトタイピングツールであるFramer Studio

提供するという点では、FramerはInVisionに最もよく似たツールです。どちらも、成熟したWebインターフェイスとまったく新しいUXデザインツールを組み合わせているためです。これら2つは個人的な好みに帰着しますが、Framerが個人にとってわずかに安い場合、デザインコラボレーションに関してはInVisionが明らかに兄貴です。

フィグマ

プラットフォーム：Web、macOS、およびWindows
価格：スターターチームは無料、または月額$ 12

Figmaは、マルチプレイヤーデザインの主要なツールとして開発の初期段階で際立っていたため、複数のデザイナーが同じデザインファイルで一度に作業することができました。レスポンシブデザインを作成し、ハンドオフ機能を追加する機能により、Web、macOS、およびWindowsバージョンの製品全体でこれらの機能がどのように提供されたかが印象的です。

エネルギッシュでコラボレーティブなデザインワークフローを楽しんでいるなら、Figmaがぴったりです。

Adobe XD

プラットフォーム：WindowsとmacOS
価格：1つのプロトタイプの場合は無料、無制限のプロトタイプの場合は月額$ 20.99

Sketchがワイヤーフレーミングとインターフェースデザインのナンバーワンツールになったとき、AdobeはPhotoshopがデザイナーが必要とするUIデザインツールになることは決してないことを認めざるを得ませんでした。 Adobeは、Sketchでは利用できなかったWindowsユーザーがAdobe XDを利用できるようにすることを決定しました。また、ユーザーフローのプロトタイプを作成してデザインを検査する機能を組み込み、Adobeエコシステムに精通したベテランデザイナーが使い慣れたワークフローを維持できるようにしました。

UXPin

プラットフォーム：ウェブ
価格：1ユーザーあたり月額$ 8.10 /から、チーム向けの他のオプション

UXPinは、設計、ワイヤーフレーミング、プロトタイピング、コラボレーション、ユーザーテスト、ハンドオフなど、すべてを1つのWebアプリケーションで提供する完全な製品設計プラットフォームです。欠点は、UXPinが、機能の数、雑然としたインターフェイス、および（場合によっては）かさばるWebアプリにしばしば悩まされるパフォーマンスの遅れのために、使用するのが難しいツールの1つであるということです。ただし、デザインシステムなどの優れた機能と、BootstrapやGoogleFontsなどのWebフレームワークやテクノロジーを活用する機能を必要とするエンタープライズチームは、それをすぐに見落としてはなりません。

デザイン+プロトタイピングツール

スケッチ

プラットフォーム：macOS
価格：99ドル/年

最高のデザイン、ワイヤーフレーミング、プロトタイピングUXツールの1つ：Sketch

Photoshopは、2015年にワイヤーフレーミングとインターフェイスデザインの両方の主要なデザインツールになったため、Sketchに王冠を渡しました。また、2017年の時点で、彼らは依然として主導権を握っています。スクリーンデザインに対するSketchの革新的なアプローチは、アートボード、シンボル、エクスポートなどの貴重な機能を導入し、Adobe XD、Framer Studio、InVisionStudioなどの新しいデザインツールの波を刺激しました。この信じられないほど直感的な（そして軽量の）ベクターツールは、UIデザイナーがこれまでになく高速に反復するのに役立ちます。

ただし、ここに「しかし」があります（そしてそれは大きいですが）：SketchはWindowsで利用できず、ゲームの後半にプロトタイピングデザイナー向けのツールを実装するという彼らの決定は、競合他社がInVisionでこの市場を急速に引き継いだことを意味します間違いなく、今日利用可能な最も動的なプロトタイピングツールです。スケッチ機能はプラグインの印象的なカタログ（Flinto、Zeplin、Marvel、Principle、さらにはInVision自体との統合を含む）で調整できますが、一部の設計者は、これらの機能をすぐに利用できる、よりネイティブなエクスペリエンスを好む場合があります。箱。

全体として、Sketchは、アイデアやワイヤーフレーミング、またはツールボックスを追加してより優れたプロトタイピングおよびコラボレーションツールを追加することを気にしない人に最適です。

Webflow

プラットフォーム：ウェブ
価格：単一サイトの個人、複数のサイト、およびチームを対象としたさまざまなオプション

Webflowは、コードなしでレスポンシブWebサイトを構築し、それらをすべて1つのサブスクリプションでホストしたい現代のデザイナー向けのWYSIWYGエディターです。 Webflowは、クリーンでセマンティックなコードを出力するため、必要がなく、静的なWebサイトからeコマースストアまで、コンテンツや在庫も同じダッシュボードから管理できる堅牢な機能を提供します。

原理

プラットフォーム：macOS
価格：$129/年

設計ツールというよりはプロトタイピングツールですが、評価の高いPrincipleアプリは、忠実度の高いプロトタイプに焦点を当てた設計者向けであり、タイムラインアニメーションを使用して、SketchやAdobeXDでは不可能な高度なマイクロインタラクションの設計を支援します。デザイン機能がニーズに対して十分に洗練されていない場合、PrincipleはSketchと統合されます。

プロトタイピングツール（のみ）

フリント

プラットフォーム：macOS
価格：99ドル/年

Flintoは、スプリングとイージング、3D回転、スクロールエフェクトなどの高度なアニメーションツールを使用して、トランジションとマイクロインタラクションを次のレベルに引き上げます。さらに、トレンディなデザイナーがアニメーションをビデオ、GIF、ドリブルショットとしてエクスポートできるようにします。

Flintoはプロトタイピングの相互作用にのみ焦点を当てていますが、それはうまくいきます。最良の結果を得るには、Sketchとペアリングしてください。

折り紙

プラットフォーム：macOS
価格：無料/オープンソース

Origamiは、Facebookのデザインチームによって開発されたアプリのプロトタイピングツールです。 Flinto（値札を差し引いたもの）に似ていますが、同様のツールほど頻繁には保守されておらず、相互作用を設計するためのロジックベースのアプローチにより、学習曲線が急になります。

予算の限られたデザイナーにとって、折り紙は一見の価値があります。

プロトタイピング+設計ハンドオフツール

マーベル

プラットフォーム：ウェブ
価格：個人の場合は月額$ 0-12 /、チームの場合は月額$ 42-84

SSOおよびハンドオフ機能を必要とするエンタープライズチームは、直接問い合わせる必要があります。

Marvelは、習得が最も簡単なことで知られるオンラインプロトタイピングツールですが、トレードオフは、動的プロトタイピング機能に関してはInVisionほど洗練されておらず、完全なデザイン+プロトタイピングソリューションになるにはSketchとの統合が必要なことです。。そうは言っても、Lookbackと統合して、ユーザーテストをテーブルにもたらし、設計ハンドオフ機能を備えています。

Marvelを使用すると、チーム（デザイナー以外でも）がアートボードを選択し、形状とテキストを使用して忠実度の低いアイデアを説明できるため、デザインスプリントに最適です（特に、ユーザーが紙のプロトタイプを忠実度の低いMarvelプロトタイプに変換できるため）。

ハンドオフツールの設計（のみ）

Zeplin

プラットフォーム：ウェブ
価格：1つのプロジェクトで無料、3つと12のプロジェクトで月額$ 17、月額$ 26

大規模な組織の場合、月額$ 7.65のオプションにより、より高度なユーザー権限と、プロジェクト間で色とテキストのスタイルをコピーする機能が提供されます。

Zeplinを使用すると、Sketchユーザーはシームレスな設計ハンドオフを実行でき、設計プロセスを支援します。

Zeplinは、競合他社のSympliおよびAvocodeを一貫して上回っています。最近、既存のSketchおよびPhotoshop CC統合に加えて、AdobeXDおよびFigma統合を追加しました。多くのオールインワンツールが機能のリストにデザインハンドオフを追加しましたが、Zeplinは、まだ機能していないツール（Sketch、Photoshop）、およびハンドオフ機能をまだ試しているツール（Adobe XD、Figma）の空白を埋めます。

ワイヤーフレーミング+プロトタイピングツール

Axure

プラットフォーム：WindowsとmacOS
価格：プロ/チーム/エンタープライズユーザーの場合、それぞれ$29/49/99/ユーザー/月

AxureRP8の1回限りの購入も495ドルからご利用いただけます。

Axureは、最高のワイヤーフレーミングおよびプロトタイピングツールの1つです。

Axureは、ワイヤーフレームとラフプロトタイプの設計用に特別に構築されており、データ駆動型、動的、および適応型のモックアップを簡単に作成できる機能が付属しているため、忠実度の高いUXプロトタイピング機能がないツールであることを忘れてしまいます。ワイヤーフレームとプロトタイピングのみに焦点を当てている設計者にとって、Axureは、フォーチュン100企業の87％が使用している最上位の選択肢です。

Justinmind

プラットフォーム：WindowsとmacOS
価格：ユーザーあたり月額19ドル、エンタープライズチームの場合はユーザーあたり月額39ドル

Justinmindは、高度なUXプロトタイピング、コラボレーション、いくつかの基本的なデザインツール、およびワイヤーフレーミング用の500以上のWebおよびモバイルウィジェットである、提供するものに対して十分な愛情を受け取っていません。ワイヤーフレーミングは、多くの競合するプロトタイピングアプリが焦点を当てているものではなく、Justinmindを数少ないUXツールの1つにしています。

ワイヤーフレーミングツール（のみ）

OmniGraffle

プラットフォーム：macOS
価格：100ドル、またはProライセンスの場合は200ドル

OmniGraffleは、ダイアグラム作成機能を備えたワイヤーフレーミングツールであり、ユーザーフローや情報アーキテクチャにさらに注意を払う必要があるアプリやWebサイトに役立ちます。ネイティブmacOSアプリとして、インターフェイスは非常に使いやすく、習得が容易なUXツールになっています。

OmniGraffleには非常に便利な機能があります。「ステンシル」は、設計者がワイヤーフレーム、モックアップ、さらには最終的なビジュアルデザインを作成するために使用できる、「ステンシルライブラリ」内のすぐに使用できるドラッグアンドドロップで再利用可能なデザインコンポーネントです。ユーザーは独自のライブラリを作成できます。また、Web上には何千ものステンシルライブラリをダウンロードできます。それらの多くは無料で、時間と労力を節約できます。

Graffletopiaは、無料と有料のライブラリが混在するWeb上で最大のステンシル保管庫の1つです。 1,100を超えるステンシルを備えたGraffletopiaには、モバイルアプリ、ウェブサイト、ネットワークダイアグラム、フローチャートなどのデザインなど、あらゆる用途に対応するステンシルがあります。

Balsamiq

プラットフォーム：Web、macOS、およびWindows
価格：クラウドアクセスの場合はユーザーあたり年間90ドルから、デスクトップアプリの場合は89ドルから

BalsamiqはJustinmindの反対であり、プロトタイピングよりもワイヤーフレーミングに重点を置いています。組み込みのUI要素は、スケッチアウトされた視覚的な美学を使用してブレーンストーミングを促進し、製品マネージャーと開発者、およびワイヤーフレーミングデザイナーを独自に対象としており、チーム全体が設計プロセスの早い段階で参加できるようにします。

UXリサーチおよびテストツール

ルックバック

プラットフォーム：ウェブ
価格：機能に応じて$49/ユーザー/月または$99/ユーザー/月

Lookbackは、UXデザインプロセスにライブのモデレートユーザーテストを導入し、デザイナーが世界中の誰の顔、画面、声も録音できるようにします。マーベルをプロトタイピングツールとして使用しているチームの場合、ルックバックはマーベルとシームレスに統合されます。

UserTesting

プラットフォーム：ウェブ
価格：$ 49 /テスト（最低15テスト）、エンタープライズオプションが利用可能

UserTestingは、機能の点でルックバックに似ています。これは、経験豊富なユーザーテスターの膨大なレパートリーを備えた素晴らしいスタンドアロンのユーザーテストツールですが（Marvelでは、ユーザーテスターを自分で見つける必要があります）、UserTestingはInVisionともシームレスに統合されます。

Eyequant

プラットフォーム：ウェブ
価格：個人の場合は月額499ドル、10人のチームの場合は月額999ドル（+エンタープライズオプション）

Eyequantは機械学習を使用して、チームがより適切な設計上の決定を下し、CROの取り組みを改善できるようにします。その高額な値札は一部の顧客を思いとどまらせるかもしれませんが、投資する顧客は、ユーザーのシミュレーション、メトリックの分析、A/Bテストの活用などのトレーニングを受けます。

Hotjar

プラットフォーム：ウェブ
価格：1日のページビュー数に応じて変動する価格

Hotjarを使用すると、ユーザーフィードバックを分析、ヒートマップ、クリックマップ、スクロールマップ、訪問者の記録と組み合わせることで、チームがユーザーエクスペリエンスを簡単に最適化できます。ヒートマップとクリックマップは、ユーザーがそれぞれマウスを動かしたりクリックしたりする場所を示していますが、スクロールマップは、ユーザーが興味を失っている可能性のあるポイントを示しています。

クレイジーエッグ

プラットフォーム：ウェブ
価格：20,000ページビューで月額29ドルから

Crazy Eggは、A / Bテストと分析を組み合わせて、最高のUXデザインプロセスを実現します。

Hotjarと同様に、Crazy Eggは、ヒートマップと訪問者の記録を使用してユーザーの行動を分析することにより、ユーザーエクスペリエンスとコンバージョン率を最適化するために使用されますが、機能しているものと機能していないものを解読するのに役立つ使いやすいA/Bテストツールも含まれています。

最適なワークショップ

プラットフォーム：ウェブ
価格：ユーザーあたり月額166ドル、無料およびエンタープライズオプションを利用可能

Optimal Workshopは、カードの並べ替え、調査、ツリーテスト、ファーストクリックテスト、および定性的データの発見に焦点を当てたユーザー調査ツールキットです。

分析ツール

グーグルアナリティクス

プラットフォーム：ウェブ
価格：無料

Google Analyticsは、最も刺激的で使いやすいインターフェースを備えていませんが、無料のツールでかなりの量のデータを提供するため、ユーザーの調査や、別のツールでさらに調査したい洞察を得るのに適した出発点になります。。

ミックスパネル

プラットフォーム：ウェブ
価格：100万データポイントあたり99ドルから、無料およびエンタープライズオプションを利用可能

Mixpanel、ユーザー調査とUXデザインプロセスのための人気のあるウェブサイト分析ツール

Mixpanelを使用すると、経営幹部から単純な寄稿者まで、誰でもデータを使用してより戦略的な意思決定を行うことができます。 Google Analyticsと比較して使いやすいインターフェースを使用すると、設計者は、ユーザージャーニーの分析、ユーザーの製品への関与方法の学習、Mixpanelを使用した複雑な行動分析の解読が容易になる場合があります。

ペンド

プラットフォーム：ウェブ
価格：価格は、必要なユーザー数と機能に基づいて決定されます

Pendoは、他のほとんどの分析ツールと比較してはるかにシンプルなインターフェイスを備えているため、デザイナーはNPS（ネットプロモータースコア）の追跡、ユーザーのセグメント化、目標到達プロセスとユーザージャーニーの最適化など、トップのウェブサイト分析ツールに期待するあらゆることを行うことができます。それに加えて、設計者は、追跡されたデータに基づいて、的を絞ったアナウンス、状況に応じたヘルプ、および調整されたエクスペリエンスを提供できます。

結論

適切なUXツールを選択するには、慎重に検討する必要があります。コスト、他の設計者や利害関係者との必要なコラボレーションレベル、プラットフォーム、およびシームレスなワークフローを維持するために統合する必要のあるその他のツールを考慮する必要があります。選択肢を絞り込んだら、無料トライアルにサインアップして、5日間のデザインスプリントを実行して水域をテストすることを検討してください。