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

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

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

UXデザイナーが依存する2つの広く認識されているデザインツールは、AdobeXDとSketchです。

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

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

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

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

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

Adobe XD vs Sketch

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

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

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

Photoshopのようなツールに精通しているデザイナーは、Adobe XDやSketchの学習に問題はありません。これらはすべて、同様のUIを共有しているからです。

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

Sketch vs XD ： Sketchには、便利なツールバーの優位性があります。

グリッドを繰り返す

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

Sketch vs XD ： Adobe XDは、ソフトウェアにネイティブなリピートグリッドを備えています。

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

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

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

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

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

Adobe XDは、レスポンシブデザインツールの堅牢なセットを提供します。 優れた機能の1つであるレスポンシブ自動モードは、さまざまなデバイスサイズに画面がどのように反応するかを推測します。

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

Sketchにはこの機能が組み込まれていませんが、AnimaToolkitのような多くのプラグインがあります。

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

アドオンとプラグイン

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

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

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

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

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

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

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

共有とコメント

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

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

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

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

設計仕様

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

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

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

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

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

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

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

機能の概要：AdobeXDとSketch

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

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年のアプリのウェブバージョンなどの重要な機能を約束しています。

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

Toptal Designブログでさらに読む：

• Adobe XDとSketch-どちらのUXツールがあなたに適していますか？
• アトミックデザインとスケッチ-ワークフローを改善するためのガイド
• 精度の高いデザイン-AdobeXDレビュー
• Sketchのタイポグラフィについて知らないかもしれないこと
• スケッチプラグインの開発に精通する