Adobe XD vs Sketch – Showdown 2020

2人のヘビー級の候補者が、最も人気のあるデザインツールであるAdobeXDとSketchのトップの座を獲得するために戦い続けています。 どのツールがそれらすべてを支配しますか？ 答えは簡単ではありません。 どちらも近年驚異的な進歩を遂げているため、機能、パフォーマンス、使いやすさに関する包括的な設計ツールの比較は遅れています。

スケッチはXDのデビューの何年も前にすでにありました：正確には6つ。 幅広い専用のファンベースがあり、機能が豊富で、広範なプラグインエコシステムがありました。 しかし、Sketchにはアキレス腱がありました。Macでしか機能しませんでした。

2016年、アドビは熱を上げ、争いに飛び込みました。 SketchをXDの同様の機能と一致させただけでなく、Windowsでも利用できるようにしました。 世界のデスクトップコンピューターの約78％がWindowsで実行されているため、これは大胆で競争力のある動きでした。

Adobe XDは、CreativeSuiteラインナップの大きな穴も埋めました。 Fireworksにはゴールデンハンドシェイクが与えられ、XDが提供する機能はIllustratorやPhotoshopなどの他のアプリケーションでは利用できませんでした。 XDは、Sketchと同じ軽量のベクターベースのデザインツールであるだけでなく、AdobeCreativeSuiteエコシステムの他の部分との統合も優れています。

ただし、設計者の間では、どちらのツールが優れているかについての意見は依然として異なります。 両方のツールに機能が急速に追加され、しばしば追いつき、頻繁にお互いを模倣するため、戦いは最近全面戦争に成長しました。

AdobeXDとSketchの次の機能を詳しく見てみましょう。

• ユーザーインターフェース
• シンボル/マスターコンポーネントの操作
• アセットおよびコンポーネントパネル
• レイヤーとコンポーネントのスケーリング
• 要素の複製と配布
• レスポンシブデザインツール
• プラグイン
• プロトタイピング
• チームコラボレーション
• 開発者ハンドオフ
• バージョン管理と共有ライブラリ
• ダークモード

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

SketchとAdobeXDは同様のインターフェイスを共有していますが、 SketchのUIはXDよりも優れています。 XDはIllustratorとPhotoshopのスリムな組み合わせのように感じますが、堅牢でプロフェッショナルなデザインツールのように感じます。

Adobe XDの重大な不便は、デフォルトでアセットパネルが開いた状態で表示されることです。 これは、ほとんどの設計者が期待するものではありません。 設計ドキュメントを開始するとき、ほとんどの設計者は、アセットやプラグインではなく、レイヤーパネルがすぐに表示されることを期待しています。

➠直感的なインターフェイスのためにSketchに+1します。

シンボル/マスターコンポーネントの操作

再利用可能なデザインライブラリの「シンボル」は、SketchとAdobe XDの両方で使用できます（XDでは「マスターコンポーネント」と呼ばれます）。 シンボルまたはマスターコンポーネントが更新されると、プロジェクト内のそのコンポーネントの他のすべてのインスタンスが更新を反映します。

ただし、Adobe XDとは対照的に、Sketchのスマートレイアウト機能は、このようなマスターコンポーネントを操作する場合により強力です。 これにより、柔軟性とワークフローが高速化されます。

Sketchでは、特定のレイアウトをコンポーネントに割り当てることができます→コンポーネントをキャンバスにドラッグします→オーバーライドを使用してコンテンツをカスタマイズすると、コンポーネントは新しいコンテンツに基づいてサイズ変更されます。

➠シンボルのパフォーマンスが向上するため、スケッチに+1します。

アセットおよびコンポーネントパネル

SketchとAdobeXDは、いくつかの違いはあるものの、類似したアセット/コンポーネントパネルを共有しています。

アセットの場合、XDにはドロップダウンメニューがあり、デザイナーは「すべて」以外の特定のカテゴリのみを表示できます。 設計者は、「グリッドビュー」と「リストビュー」を切り替えることもできます。 これらのオプションにより、XDのアセットパネルが大幅に使いやすくなります。 また、特定のカテゴリを表示するためのドロップダウンを使用すると、将来的にカテゴリを追加するための柔軟性が高まります。

スケッチは柔軟性がありません。 3つのボタンでセグメント化されたコントロール（シンボル、テキストスタイル、およびカラースタイル用）の下にプロジェクトアセットを表示します。 Sketchを使用すると、コンポーネントは検索可能ですが、カテゴリ間では検索できません。 XDは、すべてのアセットのすべてのコンポーネントを検索することで、より適切に検索できます。

➠資産をより適切に管理するため、AdobeXDに+1します。

他のライブラリのマスターコンポーネントを使用する

Sketchを使用すると、デザイナーは、ローカルまたはオンラインで共有されている多数のリンクされたライブラリからアートボードにマスターシンボルをすばやく簡単に追加できます。 Adobe XDでは、「リンクされたアセット」を「XDクラウド」のデザイン（コンポーネント、色、文字スタイル）に配置できますが、この厄介なワークフローのため、AdobeXDの柔軟性ははるかに低くなります。

➠マスターコンポーネントを操作するときのUXを向上させるためにSketchに+1します。

カラースタイルの編集

アセットライブラリに追加されると、Adobe XDを使用すると、デザイナーはカラースタイルを編集し、アートボード全体で色の変化をリアルタイムで確認できます。 Sketchには、色をグローバルに編集するための回避策がありますが、AdobeXDほど直感的ではありません。

➠色のスタイルをより適切に編集するには、AdobeXDに+1します。

設計システムの設定

Sketchには、デザインシステム（アイコン、ボタン、カラースタイル、テキストスタイルなど）を構築するときにコンポーネントを整理するための優れた方法があります。 これらのアセットを作成して名前を付けるときにスラッシュ「/」を使用すると、アセットはコンポーネントパネルにグループ化され、挿入メニューに階層的に配置されます。 これは、コンポーネントを論理的に整理するための優れた方法であり、何百もの設計要素を扱う設計者にとっては理にかなっています。

AdobeXDはこの柔軟性を提供しません。

➠デザインアセットを簡単に管理するためのスケッチへの+1。

レイヤーとコンポーネントのスケーリング

複数のコンポーネントを含むオブジェクトのスケーリングは、AdobeXDでは適切に処理されません。 一般に、Sketchはこれをはるかにうまく処理します。 たとえば、シンボルをスケーリングするときに、要素間の比例した間隔を適切に維持します。

さらに、Sketchには便利なスケールレイヤー機能（ Command + K ）があり、どの原点からスケーリングするかを指定しながら、要素のグループをパーセンテージまたは数値を使用してスケーリングできます。 Sketchは選択したレイヤーのサイズを変更しますが、境界線の太さ、影のサイズ、半径などのスタイル属性は適切に拡大縮小されます。

Sketchのもう1つの便利な機能は、インスペクターの要素のサイズを数値またはパーセンテージで変更できることです。 これは、上記の[レイヤーのスケール]コマンドとは少し異なります。 次の文字をパーセンテージまたは数値に追加することにより（ c / m、t、b、r）、 Sketchは選択された要素をその原点からスケーリングします。 たとえば、「 50％c 」は、選択した要素を中心から50％スケーリングします。

• c / m：中心からのスケール
• t：上からスケール
• b：下からスケール
• r：右からスケール

注：「左から拡大縮小」オプションは、Sketchのデフォルトの動作であるため、表示されていません。

Sketchでレイヤースケーリングがどのように機能するかを確認→

➠要素をスケーリングする際の多様性と精度を高めるために、スケッチに+1します。

要素の複製と配布

Adobe XDのリピートグリッドは、要素のグループをそれらのオブジェクトを繰り返すグリッドに変える便利な機能です。 ほとんどの設計者は、XDを探索するときにおそらく数回試しましたが、設計者は何回使用しますか？ 残念ながら、 Repeat Gridはレイヤーにスナップしません。これは、重大な欠点です。

一方、Sketchでは、 Optionキーを押しながらレイヤーをドラッグして複製することができます（ Shiftキーを押したままにして拘束します）。 その後、 Command + Dは、複製間の正確な間隔を同じにして、要素を必要な回数繰り返します。

さらに、SketchはSmartDistributeを使用して設計ワークフローを高速化します。 これにより、設計者はグリッドの作成、間隔の調整、およびレイヤーの並べ替えをより細かく制御できます。 Smart Distributeが行う多くの便利な小さなこととは別に、インスペクターには魔法の「整頓」ボタンがあります。

アートボード上にランダムにいくつかのオブジェクトを配置した後、 Tidyボタンをクリックすると、それらがグリッド上に魔法のように均等に分散されます。 表示されるハンドルをドラッグするか（グループにカーソルを合わせた場合）、絶対精度の手動値を入力することで、間隔をさらに調整できます。

Smart Distributeに加えて、グリッド、ガイド、および配布を使用して設計者を支援するために、いくつかのSketchプラグインが作成されています。 ここに3つあります：

レイヤーの分散•SketchDistributor•均等に分散されたガイド

➠要素をより適切に複製および配布するためのSketchへの+1。

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

AdobeXDとSketchはどちらも同様の自動応答機能を備えています。 どちらも、要素をバウンディングボックスの特定の原点に固定しながら、要素の固定幅と高さを手動で制御できます。 Adobe XDには、要素とグループのサイズ変更を自動的に決定する巧妙な「レスポンシブサイズ変更」ツールもありますが、完全ではありません。

Sketchには、SmartLayoutと呼ばれるスマートレスポンシブツールがあります。 設計者はレスポンシブコンポーネントを構築でき、コンテンツが調整されるたびに、コンポーネントは変更に対応し、より柔軟でより高速なワークフローを可能にします。

スマートレイアウトを使用すると、デザイナーは、テキストラベルの長さに関係なく、一貫した余白とパディングを維持しながら自動的にサイズ変更するボタンを簡単に作成できます。 スマートレイアウトはグループでも機能します。

Adobe XDは最近「レスポンシブサイズ変更」機能を実装しましたが、それでもSketchに遅れをとっています。

➠+1をスケッチして、スピーディーで簡単なレスポンシブデザイン機能を実現します。

プラグイン

豊富なデジタルデザインツールの中で、Sketchには最も堅牢なプラグインエコシステムの1つがあります。 何千ものプラグインを持つことはSketchの最も魅力的な機能の1つであり、開発者はSketchの機能を拡張する便利なプラグインを継続的に作成しています。

AdobeXDのプラグインのコレクションは比較すると見劣りします。 同じ開発者がSketchプラグインのXDバージョンを作成したとしても、XDはプラグインを広く採用するには新しすぎます。 さらに、多くの新しいXDプラグインは、設計者がそれらを受け入れるのに十分な価値を追加していません。

➠広範なプラグインエコシステムのSketchに+1。

プロトタイピング

Auto-animateにより、AdobeXDはプロトタイピングの可能性を高めました。 「インテリジェントな」自動アニメーション機能を使用すると、設計者はプロトタイプで見栄えの良いトランジションを作成して、画面間のコンテンツの動きを視覚化できます。 XDは、トリガーに応答して効果音やその他のオーディオファイルを再生する新しい「アクション」を使用して、プロトタイプにサウンドを追加することもできます。

Sketchには、プロトタイピング用の画面間の基本的なワイプがいくつかありますが、マイクロインタラクションと同じ流動性は提供されません。 Sketchがいつそれらを追加するかは定かではありません。 焦点は、アシスタントなどの他の貴重な機能をSketchに組み込むことにあるようです。

Sketchのメーカーは、ProtoPieなど、非常に詳細なマイクロインタラクションを備えたプロトタイプを作成するためのツールが他にもたくさんあると感じている可能性があります。 強力で、Sketch、Figma、AdobeXDからデザインを簡単にインポートできます。

SketchとAdobeXDはどちらも、モバイルでプロトタイプをプレビューするためのアプリを提供するという点で首を絞めています。SketchMirrorとAdobeXDです。 アプリは、デスクトップで設計されたプロトタイプをUSBケーブルまたはwifi経由でモバイル画面にプルします。

➠プロトタイプを視覚化するための自動アニメーショントランジション用のAdobeXDへの+1。

チームコラボレーション

どちらのツールもチームコラボレーションを提供します。 SketchにはSketchforTeamsがあり、共有クラウドワークスペースを使用する設計者は、アイデアの共有、共有クラウドライブラリとの同期の維持、他のチームプロジェクトの進捗状況の確認、設計に関するフィードバックのフィードバックをすべて1か所で行うことができます。

さらに、Sketchアプリにアクセスできない招待された利害関係者や共同作業者は、ブラウザーでデザインを表示、検査、コメントすることができます。 開発者ハンドオフは、SketchforTeamsを使用してSketchにも統合されています。

この記事の執筆時点で、Adobe XDのプレミアムバージョンを使用すると、チームはCreative Cloudを介して他のデザイナー（オンラインおよびオフライン）とXDファイルを共同編集し、レビュー用にファイルを共有し、開発者に仕様を簡単に渡すことができます。 これらの機能はすべて現在ベータ版です。

➠+1でSketchを実行すると、チームのコラボレーションが簡単になります。

開発者ハンドオフ

デザインを開発者に渡すことは重要なステップであり、AdobeXDとSketchの両方が同じようにうまく処理します。 オンラインプラットフォームを介してプロジェクトを共有することにより、設計者は仕様を生成し、開発者と協力して、設計をWebサイトやアプリに変えることができます。

➠開発者の引き継ぎのために、AdobeXDに+1およびSketchに+1。

バージョン管理と共有ライブラリ

同じプロジェクトで他の設計者と作業する場合は、設計ファイルのバージョンを制御することが不可欠です。 また、チームのコラボレーションと設計フィードバックをより効率的に促進します。 Sketchは最近、これらの機能をSketchforTeamsに統合しました。 Sketch Cloudを使用すると、設計者は設計ファイルとライブラリを共有できるため、分散したチームで設計システムを簡単に操作できます。

Adobe XDには、AdobeCreativeCloudを使用したクラウドファイルバージョン管理システムもあります。 Creative Cloud WebサイトはXDファイルのバージョンを保持していますが、以前のバージョンに戻すことはできません。 以前のバージョンに戻すには、デザイナーはCreative CloudWebサイトからAdobeXDでファイルを開き、コンテンツをコピーして現在のドキュメントに貼り付ける必要があります。 名前やブックマークを付けない限り、ファイルバージョンも30日後に自動的に削除されます。 言い換えれば、それはシームレスなプロセスではありません。

Sketchと同様に、XDを使用すると、チームはCreativeCloudライブラリを使用して共有アセットを簡単に使用できます。 設計者は、これらのライブラリからXDに色、文字スタイル、およびグラフィックを取り込むことができます。

➠クラウドでのファイルのバージョン管理と共有ライブラリを簡単にするためのSketchへの+1。

ダークモード

見栄えが良く、デザインを際立たせます

多くのデザイナーは、反射やまぶしさなしに自分の作品を画面に表示するために、薄暗い部屋で作業することを好みます。 ダークモードのUIは、その環境にうまく適合します。 ほぼすべての色に優れたコントラストを提供し、視覚的なコンテンツをより印象的にします。

ダークモードは見栄えが良いだけでなく、「デジタル眼精疲労」を最小限に抑えることが知られています。 それに直面しましょう、デザイナーは一日のほとんどの間スクリーンを見つめます。 デジタル眼精疲労は、何百万人もの人々に影響を与える一般的な状態です。 コンピュータの過度の使用から明るい光への定期的な曝露まで、あらゆるものが原因で、頭痛、首の痛み、かすみ目、目の灼熱感/刺痛を引き起こす可能性があります。

アクセントとハイライトの色

Sketchは、Sketch 52（2018年10月）以降、ダークモードをサポートしています。 また、macOSMojaveのグローバルなアクセントとハイライトの色設定もサポートしています。 レイヤーパネル、インスペクター、およびアプリの他の場所で強調表示されている選択されたオプションは、システム環境設定と一致します。

ダークモードは、MacOSでも、AdobeXDでは使用できません。

➠ダークモードのスケッチに+1します。

Adobe XDvsSketch対決の勝者は…Sketch

Sketchは、Adobe XDを大きくリードして、デザインツールの優位性の戦いに勝ちました。

一部のシナリオでは、選択は明白です。SketchはWindowsでは使用できません。 Adobe Creative Cloudサブスクライバーにとっての注目すべき利点は、XDの「スタータープラン」が無料で提供されることです。ただし、かなりの制限があります。

Sketchの多様性により、macOSの設計者はXDではなくSketchを選択する必要があります。 そのインターフェイス、プラグイン、コラボレーション機能、レスポンシブデザインツール、再利用可能なシンボル、共有ライブラリ、およびその他の便利な機能は、AdobeXDの機能よりも優れています。

デザインファイルをXDからSketchに移動することはできません。 XDはSketchファイルを開くことができるため、Sketch（およびPhotoshopまたはIllustrator）からXDへの移行は簡単です。 AbstractやInVisionCraftなどのSketchのみのプラグインを使用すると、いくつかの問題が発生する可能性がありますが、これは少しクリーンアップすることで回避できます。

一部の設計者は、自動アニメーション機能でAdobeXDを気に入っています。 これは、プロトタイプの見栄えを良くする魅力的な機能です。 ただし、設計者は、これが1つの派手な属性にすぎないことを覚えておく必要があります。 SketchとXDの利点を考えると、トレードオフはそれだけの価値はありません。 Sketchとシームレスに連携する多くの洗練されたプロトタイピングツールが利用可能です。

戦いはまだ終わっていません。 今後数年間は、AdobeXDとSketchの間で激しい全面戦争が発生するはずです。 結局、両方の設計ツールにさらに多くの機能が追加されるときに恩恵を受けるのは設計者です。 それは彼らの日常の仕事の生活をはるかに楽にするでしょう、そしてそれは楽しみです。

ご意見をお聞かせください。 以下にあなたの考え、コメント、フィードバックを残してください。

•••

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

• 正確なデザイン–AdobeXDレビュー
• マルチモーダルデザインの調査–AdobeXDチュートリアル
• フォームと機能–トップワイヤーフレームツールのガイド
• これらのトップUXツールであなたの技術をマスターする
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例