UI/UXデザインツールの選び方と主要ツールの比較

UI/UXデザインツールを選ぶときは、画面の作成だけでなく、共同編集、プロトタイプ、開発者への共有まで比べることが大切です。個人で使いやすい機能と、チーム全体に必要な機能を分けて整理しましょう。

この記事では、主要なツールの特徴と選ぶときの観点を紹介します。提供を終了したInVision Studioについては、既存ファイルの移行を考えるための情報として取り上げます。

1、UI/UXデザインツールについて

まずは、UI/UXデザインツールの役割と、導入前に確認したい機能を整理します。

1.1 UI/UXデザインツールとは 

UI/UXデザインツールは、Webサイトやアプリの画面を設計し、プロトタイプで操作の流れを検討するためのツールです。文字、色、レイアウト、コンポーネントを組み合わせて、ユーザーが使う画面を具体化します。

また、UI/UXデザインツールは無料のものから機能が豊富なものまでさまざまな種類があり、目的やチームの進め方に合うものを選べます。

1.2 UI/UXデザインツールの基本的な機能

基本的な機能は以下の通りです。

• デザイン機能

• デザイン共有機能

• コンポーネント・シンボル機能

• プロトタイピング機能

• モバイルプレビュー

それぞれ解説していきます。

1-2-1 デザイン機能

文字、図形、画像を配置し、画面のレイアウトを作成する機能です。コンポーネントやスタイルを再利用すると、複数の画面で一貫したデザインを保ちやすくなります。

1-2-2 デザイン共有機能

チームで作業を行う際にデザインの案などを共有できる機能です。複数人のチームでUI/UXデザインを構築する際に必要不可欠になります。

1-2-3 コンポーネント・シンボル機能

UI/UXデザインで繰り返し利用するデザインの管理を行う機能です。繰り返し使う要素をまとめて管理できるため、画面間の一貫性を保ちやすくなります。

1-2-4 プロトタイピング機能

画面をつなぎ、クリックやタップに応じた遷移を確認する機能です。実装前のレビューで、操作の流れや案内の分かりやすさを検討できます。

1-2-5 モバイルプレビュー

デザインしたWebサイトやWebアプリをスマホ画面で確認する機能です。現在は、スマホからWebサイトやWebアプリを利用する方が多い時代ですのでモバイルプレビューで確認することがとても重要になります。

1.3 UI/UXデザインツールの選び方

選び方は以下の通りです。

• デザインを行うチームの人数で選ぶ

• ツールの利用率で選ぶ

• 連携機能で選ぶ

それぞれ解説していきます。

1-3-1 デザインを行うチームの人数で選ぶ

個人でデザインする場合には、自分が一番使いやすいツールを選択することがおすすめです。しかし、チームでデザインを行う場合には、人数やチームで編集する際に便利な機能が搭載されているツールを選択することがとても重要になります。

同じファイルを共同編集し、画面上にコメントを残せるツールなら、チームで修正内容を共有しやすくなります。

1-3-2 ツールの利用率で選ぶ

利用者が多いツールは、学習資料や連携先を見つけやすいことがあります。ただし、知名度だけで選ばず、チームで実際に使う機能と作業方法を比べましょう。

日本語で作業する場合は、表示言語、フォント、ヘルプやサポートの範囲を確認しておくと導入しやすくなります。

1-3-3 連携機能で選ぶ

他のツールと連携できるツールを選択することで行える作業の幅が増えます。そのため、必要な連携先を先に洗い出し、実際の作業で使う連携が提供されているかを確認しましょう。

2. 主要UI/UXデザインツールの特徴と提供状況

Pixso、Figma、Sketch、Adobe XDの特徴と、提供を終了したInVision Studioの位置づけを整理します。

2.1 Pixso

Pixsoの特徴と、チーム導入時に確認したい項目を見ていきます。

2-1-1 機能

基本的な機能は以下の通りです。

• 各OSに対応

• 洗練されたベクトルデザイン

• インテリジェントなレイアウト

• ロジックのインタラクティブ接続線

• コンポーネントライブラリの共有

• コミュニティとリソースライブラリ

• リアルタイムの共同編集

• インタラクティブなプロトタイプ

• 開発者への共有・引き渡し

機能や提供条件は更新されることがあるため、導入前に公式情報も確認してください。

  2-1-2 特徴

Pixsoは、ブラウザでUIを作成し、プロトタイプや共同編集まで進められるデザインツールです。既存のデザインファイルを取り込み、チームで同じ画面を検討できます。

画面を作る人、レビューする人、実装する人が同じデザインを確認できるため、ファイルとフィードバックをまとめて管理しやすくなります。

導入時は、代表的な画面を一つ作り、文字、画像、コンポーネントと共有の流れを試してみましょう。チームの作業に合うかを具体的に判断できます。

 2-1-3 料金

個人で試す場合と、チームで共有ライブラリや管理機能を使う場合では、必要なプランが変わります。編集者の人数、ファイル数、履歴や権限管理の要件を整理して選びましょう。

2.2 Figma

Figmaの機能、特徴、料金について解説していきます。

2-2-1 機能

基本的な機能は以下の通りです。

• ワイヤーフレーム作成

• モバイルアプリインターフェースの設計

• プロトタイピングデザインの作成

• グラフィックデザインの作成

• SNSの投稿の作成

• データの保存

• オートレイアウト機能

• スマートセレクション

• ペイントバケット機能

 その他にも、便利な機能があり、プランによって追加機能を利用できます。

2-2-2 特徴

プロトタイピングやUIデザインに特化しているツールであることが特徴です。また、1つのURLで作業しているデータの共有が可能であるため、バージョン管理が楽なことやリアルタイムでチームで共同編集が行えるため、チーム開発にも向いているツールになります。

2-2-3 料金

Figmaの料金はプランとシートの種類で変わります。デザイン編集、開発者向け機能、共同作業で必要な役割を分け、人数と契約期間をそろえて比較しましょう。

2.3 Sketch 

 Sketchの機能、特徴、料金について解説していきます。

 2-3-1 機能

基本的な機能は以下の通りです。

• ベクター編集

• ピクセルレベルでの設計

• 数学演算子の使用

• 可変フォント

• OpenTypeフォント

• スマートコンポーネント

• リアルタイムの共有

• エクスポートオプション

• プロトタイプ

• シンボル機能

機能や提供条件は更新されることがあるため、導入前に公式情報も確認してください。

2-3-2 特徴

動作がスムーズであり、無駄な機能が少ないことが特徴です。プラグインが多く存在しているため、自分好みにカスタマイズすることが可能です。また、さまざまなツールと連携することができるため、作業効率を高めることが期待できます。

2-3-3 料金

SketchにはサブスクリプションとMacアプリ向けライセンスがあります。リアルタイムの共同編集や共有Workspaceを使う場合は、チームで必要な利用形態を確認しましょう。

2.4 Adobe XD 

Adobe XDはメンテナンスモードです。既存のファイルを扱う場合は、アカウントの利用権限と作業環境を確認したうえで、編集や移行の方法を検討します。

2-4-1 機能

基本的な機能は以下の通りです。

• 3D変形

• コンポーネント

• ステート

• リピートグリッド

• Photoshop、Illustrator、Sketchからの読み込み

• ビデオやLottieの再生

• 自動アニメーション

• 音声認識プロトタイプ

• デザインスペック

• 共同編集

• リンクの共有

 機能や提供条件は更新されることがあるため、導入前に公式情報も確認してください。

2-4-2 特徴

PhotoshopやIllustratorの素材と組み合わせて、UIやプロトタイプを作成できる点が特徴です。既存のXDファイルを使うチームでは、クラウド文書の共同編集や共有機能も確認しましょう。

2-4-3 料金

Adobe XDの利用可否は、現在のアカウントと契約内容で確認します。新しいチームの導入候補として比較する場合は、提供状況とファイル移行の条件を先に整理しましょう。

2.5 InVision Studio（提供終了）

InVision Studioは、画面デザインとアニメーションを扱うツールとして利用されていました。現在は新規導入やプラン変更の候補には含めません。

2-5-1 提供されていた主な機能

以前は、次のような機能が提供されていました。

• ベクター編集

• レイヤースタイリング

• アダプティブレイアウト

• インタラクティブデザイン

• 組み込みアニメーション

• 共有デザインライブラリ

これらは過去の機能情報です。既存の作業データを整理する際の参考にしてください。

2-5-2 既存ファイルを整理するときの観点

手元に残るファイル、書き出した画像、画面遷移の記録を整理しましょう。移行先では、必要な画面とインタラクションを順に再構成し、チームで確認できる状態にします。

2-5-3 提供状況

InVision Studioは提供を終了しているため、新規利用や有料プランへの変更は案内しません。現在利用できるツールを、共同編集と既存データの移行条件で比較してください。

2.6 主要ツールの比較

3. チームの作業で試して選ぶ

Pixsoで代表的な画面を作り、同僚を招待してレビューを進めてみましょう。作成から共有までの流れを試すと、チームに必要な機能が分かります。

例えばログイン画面なら、入力欄、エラー表示、完了後の画面を作成し、プロトタイプでつなぎます。コメントを受けて修正するところまで試すと、日々の作業を具体的に比較できます。

Pixsoを無料で体験

 まとめ

UI/UXデザインツールは、編集環境、共同作業、プロトタイプ、開発者への共有を同じ条件で比較して選びましょう。小さな画面から試すと、必要な機能と運用上の課題が見えてきます。Pixsoで代表的な画面を作成し、共同編集とプロトタイプの流れを試してみてください。