ツールとチュートリアル

デザインツールの対決– Adobe XDとSketch（2019）

確立されたデザインツールであるSketchは、2010年の導入以来、驚異的な成長を遂げてきました。2016年、AdobeはXDを手ごわい競争相手として導入しました。 3年近くの開発の後、Adobe XDは、設計者が変更を検討するのに十分な課題を提供しますか？

UXの設計プロセスは複雑であり、特定のツール、方法論、およびフレームワークを使用する必要があります。ユーザー調査、分析、ワイヤーフレーミング、モックアップ、反復、ユーザビリティテスト、およびUIプロトタイピングは、開発者、利害関係者、および他のチームメンバーと通信するときに設計者が使用するアーティファクトとプロセスのほんの一部です。

UXデザイナーが依存している2つの広く認識されているデザインツールは Adobe XD そしてスケッチ。

Sketchは、そのシンプルなインターフェイス、膨大な数のプラグイン、完全なツールキット機能、および頻繁な更新により、大多数のデジタルデザイナーの事実上の業界標準になっています。

Sketchが UXデザイナー、アドビは、受賞歴のあるデザインソフトウェアとデザインコミュニティとの深いつながりで長い間知られており、同様のオプションはありませんでした。 Photoshop、Illustrator、Fireworksがありましたが、設計者は3つのツールを使用してSketchが1つのアプリケーションで提供できるタスクを実行することに意欲がありませんでした。

2016年、アドビはXD（エクスペリエンスデザイン）を発表しました。 Sketchの真剣な競争相手であり、彼らはまだやるべきことがたくさんありました。当時、Sketchは6歳で、幅広いユーザーベースとプラグインのエコシステム全体を備えていたため、強力な設計ツールになっています。ライバル関係は次の2年間でエスカレートし、Adobe XDは機敏な競争相手から、多くのプロのデザイナーに勝った高く評価されているデザインツールに成長しました。

ApeeScapeデザインブログ Sketch vs AdobeXDに関する記事を公開それがまだベータ版だった2017年に。 2年後の今、Adobe XDは、UXデザイナーがネイティブに必要とするすべてのものを優れたパフォーマンスで提供するという、明確な目的を持った複数の改訂を目にしました。

UXデザイナーがSketchからAdobeXDに切り替える時が来ましたか？

Adobe XD vs Sketch

AdobeXDとSketchの比較を見てみましょう。次の機能を比較します。

ソフトウェアの技術文書の書き方

ユーザーインターフェース
グリッドを繰り返す
シンボルとアセットパネル
レスポンシブデザインツール
アドオンとプラグイン
自動アニメーションによるプロトタイピング
共有とコメント
開発者との協力
バージョン管理とリアルタイムコラボレーション

ユーザーインターフェース

Photoshopなどのツールに精通しているデザイナーは、すべて同じUIを共有しているため、AdobeXDやSketchの学習に問題はありません。

AdobeXDとSketchのユーザーインターフェイス

Adobe XDとSketchは、2つの要素が異なる点を除いて、同様のユーザーインターフェイスを共有しています。

注目すべきUIの違いの1つは、 ツールバー AdobeXDで。 UIの上部にあるツールバーは、オブジェクトのグループ化など、一般的に使用される関数やツールへのカスタマイズ可能なショートカットを備えたSketchの便利な機能です。アドビは、同様の縮小された機能を提供しています。 ツールボックス 、ソフトウェアの右側にあります。

スケッチvsXD ： Sketchには、便利なツールバーの優位性があります。

グリッドを繰り返す

Adobe XDの注目すべき機能は、リピートグリッドです。これは、調整可能なリストとグリッドベースの画面を簡単に作成できる便利なツールです。 Sketchにはこの機能がありませんが、プラグインを使用して多かれ少なかれ複製できます。

AdobeXDでグリッド機能を繰り返す

Adobe XDのグリッドの繰り返し機能により、リストとグリッドベースの画面をすばやく作成できます。

スケッチvsXD ： Adobe XDは、ソフトウェアにネイティブなリピートグリッドで優位に立っています。

シンボルとアセットパネル

シンボルは、Sketchの成功に大きく貢献した初期の機能でした。シンボルはCSS（Cascading Style Sheets）がウェブサイトのデザインにあるようにスケッチすることです。設計者はアセットを簡単に再利用および一括編集できるため、多くの時間を節約でき、既製の設計システムを作成でき、すべての画面で一貫性が保たれます。

AdobeXDアセットパネルとスケッチシンボル

Sketchの成功は、主にシンボル機能によるものでした。 Adobe XDは、アセットパネルで同様の機能を提供します。

アドビは基本的な記号から始めて、次に アセットパネル 記号、フォント、色を1か所にまとめました。これらの要素のいずれかを編集すると、結果の更新がリアルタイムで表示されます。 Sketchにはこれらの機能がありますが、AdobeXDはよりまとまりのある改善されたユーザーエクスペリエンスを提供します。

スケッチvsXD ： Adobe XDは、アセットパネル内のUI要素が組み合わされているため、わずかなエッジがあります。

レスポンシブデザインツール

Adobe XDは、レスポンシブデザインツールの堅牢なセットを提供します。レスポンシブな1つの傑出した機能 オートファッション 、さまざまなデバイスサイズに画面がどのように応答するかを推測します。

これは、シンプルなスライダーボタンを使用してオンとオフを切り替えることができる非常に便利な機能です。自動モードが期待される動作に達しない場合、設計者はレスポンシブプロパティを手動で変更できます。

Sketchにはこの機能が組み込まれていませんが、次のような多くのプラグインがあります。アニマツールキットそれはうまく仕事をします。

Sketch vs XD：AdobeXDでのレスポンシブデザイン支援

Adobe XDは、プラグインを使用せずにSketchに欠けている堅牢で自動化されたレスポンシブデザインシステムを提供します。

スケッチvsXD： ここでは、AdobeXDに利点があります。これらは、UI要素に対するレスポンシブ効果を確認するための組み込みの方法を提供します。

アドオンとプラグイン

ザ・プラグインエコシステム Sketch内は、間違いなくその最大の機能の1つです。 Sketchの機能を拡張し、設計者がSketchエコシステム内にとどまりながら拡張機能を使用できるようにするプラグインは数百あります。

アドオンは、プラグインと同等のAdobeXDです。アドビは2018年にアドオンエコシステムを開始したため、Sketchほど堅牢ではありません。アドビの目標はアドオンの必要性を減らし、ソフトウェアに組み込まれている機能の作成に集中することであるため、これはアドビにとって懸念事項ではありません。

スケッチvsXD： Sketchには、プラグインの豊富なライブラリという利点があります。

自動アニメーションによるプロトタイピング

アドビは最近、UXデザイナーにとって非常に便利な機能でXDを更新しました。 アニメ車 。これは、異なる画面の要素間で巧妙でスムーズな遷移を行うことによって機能します。結果は印象的であり、プロトタイピングは潜在的なクライアントを引き付けるための楽しい経験になります。 Sketchは、プラグインを使用しても、この機能を提供しません。

Sketch vs XD：AdobeXDの自動アニメーション機能

Adobe XDは、自動アニメーション機能により、プロトタイピングを簡単かつシンプルにします。

アドビが導入したもう1つの優れたプロトタイピング機能は、画面の端からパネルを引っ張ったり、キーボードを表示したりするなど、マイクロインタラクションのサポートです。 Adobe XDは、音声ベースのUI（AlexaやGoogle Homeなど）のプロトタイピングもサポートしています。

スケッチvsXD： Adobe XDには、時間の節約になる自動アニメーション機能と、Sketchにないマイクロインタラクションのサポートという利点があります。

米国を拠点とするフルタイムのフリーランスUIデザイナーが望んでいた

設計者は、他のチームメンバー、開発者、および利害関係者と頻繁に連携します。設計を共有し、フィードバックを受け取る機能は、設計プロセスの重要な部分です。そのため、Adobe XDには、モックアップとプロトタイプをオンラインで共有するための組み込み機能が含まれているため、誰でも一般的なコメントを追加したり、レイアウト上の特定の場所をポイントしてフィードバックを残したりできます。

これらの機能をAdobeXDの動的プロトタイピングモードと組み合わせると、ネイティブのAdobe XDアプリを使用して携帯電話でテストしたり、非インタラクティブなデモ用に記録したりすることもできます。

デザインにおいて、パーツ同士や全体との調和のとれた関係とは何ですか？

Sketchは、次のようなコラボレーションツールを使用して共有とコメントを利用できます。 Zeplin またはInvisionなどのサードパーティツールとの統合。

スケッチvsXD： アドビは、組み込みのオンライン共有とコメントでここにわずかな優位性を持っています。

設計仕様

設計プロジェクトの過程で、UXデザイナーは多くの場合、開発者と設計仕様を共有する必要があります。 Adobeはこの機能をXDに含めましたが、Sketchユーザーは次のような統合を使用する必要があります Zeplin または InVision 。

Adobe Experience Design vs Sketch：AdobeXDは組み込みの設計仕様を提供します

Adobe XDの組み込み設計仕様は、開発者と設計者の間でスムーズで一貫した作業環境を提供します。

スケッチvsXD： 設計仕様が組み込まれており、サードパーティの統合を必要としないため、AdobeはSketchよりも優れています。

バージョン管理とリアルタイムコラボレーション

設計者と開発者が依存する2つの重要な機能は、バージョン管理とリアルタイムコラボレーションです。同じプロジェクトで一緒に作業する大規模な設計チームは、変更がいつ行われたかを確認し、それらの変更の履歴にアクセスできる必要があります。

アドビは、 クラウドドキュメント 。これにより、開発者を含むチームの全員が中心的な作業場所になります。 Adobeによると、クラウドドキュメント機能の次のステップはバージョン管理です。

Sketchは、バージョン管理とプラグインとのリアルタイムコラボレーションを提供しますが、これらの機能は製品に組み込まれていません。

スケッチvsXD： スケッチがこれに勝ちます。プラグインはありますが、バージョン管理があります。これは現在XDでは提供されていません。

機能の概要：AdobeXDとSketch

AdobeXDとSketchの現在のバージョンには類似点と相違点があります。各製品の比較は次のとおりです。

特徴	Adobe XD	スケッチ
ベクトルグラフィックス	はい（CCサブスクリプションにAdobe Illustratorが含まれています）	はい
画像編集	いいえ（ただし、CCサブスクリプションにAdobe Photoshopが含まれます）	はい、基本的な編集
軽量	はい	番号
プロトタイピング	はい、自動アニメーションと音声プロトタイピングを含みます	はい
資産のエクスポート	はい	はい
オンライン検査官との引き継ぎ	はい	いいえ（ただし、サードパーティのプラグインで利用可能）
シンボルとスタイル	はい	はい
グリッドを繰り返す	はい	いいえ（ただし、サードパーティのプラグインで利用可能）
特徴	Adobe XD	スケッチ
レイアウトグリッド	はい	はい
レスポンシブデザインツール	はい	いいえ（ただし、サードパーティのプラグインで利用可能）
リアルタイムコラボレーション	いいえ（将来の機能として発表）	いいえ（サードパーティのプラグインで利用可能）
バージョニング	いいえ（将来の機能として発表）	いいえ（サードパーティのプラグインで利用可能）
プラグイン/アドオン	はい	はい、優れた多様性
MacOSバージョン	はい	はい
Windows版	はい（Windows 10）	番号
価格とライセンス	スタータープランは無料で、すべての機能と1つのアクティブな共有プロトタイプが含まれています。プレミアムバージョンは月額9.99米ドルで、無制限の共有プロトタイプがあります。他のすべてのAdobeアプリのCCサブスクリプションは月額52.99米ドルです。	1年間の更新で99米ドルですが、その後も更新なしで使用できます。

UXデザインツールを変更する時が来ましたか？

機能を比較すると、SketchとXDは近いです。 Sketchには、自動アニメーション、自動レスポンシブデザイン、繰り返しグリッドなど、すべてXDにネイティブな機能がいくつかありません。

Adobe XDにまだ欠けている唯一の重要なことは、Sketchがプラグインのおかげで持っているバージョン管理です。アドビがクラウドドキュメント機能セットの開発を続けるとすぐに、これがXDに到着することを期待してください。

XDはSketchファイルを非常に忠実に開くことができるため、Sketch（およびPhotoshopまたはIllustrator）からXDへの移行は他の方法よりも簡単です。 AbstractやInVisionCraftなどのSketchのみのプラグインに依存している場合、いくつかの問題が発生する可能性があります。

一部のシナリオでは、選択が明白です。Windowsユーザーの場合、Sketchは利用できません。また、Adobe Creative Cloudサブスクライバーの場合、XDは無制限の共有プロトタイプとともに無料で含まれています。それは偶然ではありませんでした。

しかし、Sketchは反撃しています。ザ・同社は最近、2,000万ドルの資金調達を完了しました、2019年には、チームコラボレーション、ネイティブハンドオフ、アプリのウェブバージョンなどの重要な機能をお約束します。

AWSの認定を受けるにはどのくらい時間がかかりますか

バージョン管理が重大な問題ではない場合、AdobeXDの使用を検討するのに最適な時期ではありません。ユーザーエクスペリエンスデザインコミュニティへのアドビの取り組みは、自動応答モード、リピートグリッド、組み込みのプロトタイピングなどの機能で明らかです。開始が遅れたにもかかわらず、AdobeはSketchに手ごわい挑戦を提供できることを証明しました。

•••

ApeeScapeデザインブログの詳細：

基本を理解する

UXデザイナーはどのようなツールを使用していますか？

UXデザイナーは、デザインプロセスの目標とフェーズに応じて、ユーザーリサーチ、ワイヤーフレーミング、モックアップ、プロトタイピング、および開発者との共同作業にツールを使用します。人気のあるツールは、Sketch、Adobe XD、InVision、Zeplin、およびFigmaです。

UXデザインソフトウェアとは何ですか？

UXデザインソフトウェアは、UXデザイナーに、コミュニケーション、ワイヤーフレーム、プロトタイプ、およびモックアップのデザインを行う機能を提供します。 UXデザインソフトウェアはますます、デザインシステムの作成を容易にします。

スケッチとは何ですか？

2010年に導入されたSketchは、UXおよびUIデザイナー向けのベクターグラフィックデザインツールキットです。 SketchはMac専用のアプリケーションであり、設計者はワイヤーフレーム、モックアップ、およびプロトタイプを作成できます。また、アプリケーションの機能を拡張するプラグインの広範なライブラリもあります。

Adobe XDとは何ですか？

2017年に発表されたAdobeXDは、UXおよびUIデザイナー向けの新しいベクターグラフィックスデザインツールキットです。 XDは、Mac、Windows、およびAndroidプラットフォームで動作します。ワイヤーフレーミング、モックアップ、および単純なクリックスループロトタイピングに使用されます。 XDには、拡張機能用のアドオンのライブラリも増えています。