結局どっちがいいの？Adobe XDとSketchを9項目で比較してみた【2019年最新版】

2010年に発表されて以来、『Sketch』はその利便性から多くのUIデザイナーに愛されてきました。しかしその後『Adobe XD』が頭角をあらわすと、多くのデザイナーは「結局どちらを使えばいいの？」という問題に直面しました。

今回は2019年の最新の情報をもとに、これら二つのツールを9つのポイントから比較してみました。すでにどちらかのツールを使っている方も、まだどちらにするか決められない方も、ぜひ参考にしてください。

Adobe XD vs Sketch：9つの比較ポイント

この記事では、以下の9つのポイントから両者を比較します。

• UI
• リピートグリッド
• シンボルとアセットパネル
• レスポンシブデザインツール
• アドオンとプラグイン
• 自動アニメーションによるプロトタイピング
• 共有とコメント
• デザインスペック
• バージョン管理とマルチプレイヤーデザイン

では、さっそく比較してみましょう！

1. UI

Photoshopなどのツールに精通しているデザイナーなら、Adobe XDとSketchのどちらでも、UIでつまずくことはないでしょう。

両者のUIは基本的によく似ていますが、異なる点もあります。

たとえばSketchの上部にあるツールバーには、頻繁に使用される機能や、ツールへのカスタマイズ可能なショートカットが装備されています。

一方のAdobe XDには、ツールバーがありません。代わりに「ツールボックス」と呼ばれるタブが画面の右側に配置しています。

【勝者】Sketch

【理由】Adobe XDよりもツールバーが充実しているため

2. リピートグリッド

Adobe XDでとくに注目したいのが、調整可能なエレメントを繰り返し作成できる「リピートグリッド（グリッドの繰り返し機能）」です。

一方のSketchにはリピートグリッドはありませんが、プラグインで補えます。

Adobe XDでリピートグリッドを使うと、グリッドレイアウトが簡単に作成できます。

【勝者】Adobe XD

【理由】ソフトウェア固有のリピートグリッド機能があるため

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

シンボル機能は、Sketchの成功に大きく貢献した機能のひとつです。

WebデザインにおけるCSSのような存在で、オブジェクトを一括で管理できるため、時間の節約にも繋がります。

Adobe XDでは、アセットパネルがこれにあたるでしょう。シンボル、フォント、色などのアセットを、一箇所で一元管理できます。

しかもAdobe XDのアセットパネルは、更新結果がリアルタイムで表示され、Sketchのシンボル機能と比べても使いやすい印象です。

【勝者】Adobe XD

【理由】アセットパネル内にUI要素が一元管理されているため

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

Adobe XDは、とても強力なレスポンシブデザインツールを提供しています。

中でも画面がデバイスサイズに応じてどのように変化するかを把握できる「レスポンシブリサイズ」機能は、とくに便利です。シンプルなボタンでオンとオフを切り替えられるため、もしオートモードで不十分なら、手動で内容を変更できます。

Sketchにはこうした機能はありませんが、『Anima Toolkit』のようなプラグインを導入すれば補えます。

【勝者】Adobe XD

【理由】レスポンシブリサイズ機能が標準搭載されているため

5. アドオンとプラグイン

Sketchには、機能を拡張するためのプラグインが無数にあります。デザイナーはSketchのエコシステム内にとどまりながらも、豊富な拡張機能を使用できるのです。

Adobe XDでは、2018年頃からアドオンが公開されており、これがSketchでいうプラグインにあたります。しかし、そもそもAdobe XDはソフトウェア自体を充実させ、アドオンの必要性を減らすことを目標にしているため、今後もあまりアドオンに注力することはないでしょう。

【勝者】Sketch

【理由】プラグインが豊富なため

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

Adobe XDに最近追加された「自動アニメーション」もまた、非常に便利な機能のひとつです。エレメントになめらかなアニメーションを自動的につけてくれるため、プロトタイプの作成がグッと楽になります。

Sketchはこうした機能は提供しておらず、プラグインで補うことも（今のところは）できません。

またAdobe XDは、マイクロインタラクションや、Alexa、Google Homeなどの音声ベースのUIもサポートしています。

【勝者】Adobe XD

【理由】自動アニメーションと、マイクロインタラクションをサポートしているため

7. 共有とコメント

デザイナーは他のチームメンバーや開発者、ステークホルダーと頻繁にやりとりしながら仕事を進めます。そのためデザインを共有し、フィードバックを受け取るための機能は欠かせません。

Adobe XDには、モックアップやプロトタイプをオンラインで共有するための機能が組み込まれています。コメントを追加したり、レイアウト上の特定の場所についてフィードバックできるほか、実際にモバイル端末でテストしたり、記録することも可能です。

Sketchでもまた、『Zeplin』などのコラボレーションツールや、『InVision』などのサードパーティー製ツールを使用すれば、共有やコメント機能を利用できます。

【勝者】Adobe XD

【理由】共有、コメント機能が標準搭載されているため

8. デザインスペック

開発者とデザインスペックを共有するにあたって必要な機能は、Adobe XDには搭載されています。

一方でSketchユーザーは、『Zeplin』や『InVision』などを使わなければいけません。

Adobe XDのデザインスペック機能は、開発者とデザイナーにスムーズで一貫した作業環境を提供してくれます。

【勝者】Adobe XD

【理由】デザインスペック機能が搭載されているため

9. バージョン管理とマルチプレイヤーデザイン

最後に比較するのは、バージョン管理とマルチプレイヤーデザインです。大規模なチームでひとつのプロジェクトに取り組む場合、こうした機能はとても重要です。

Adobe XDはクラウドドキュメントの導入によって、マルチプレイヤーデザインに対応しています。バージョン管理についてはこれから取り組むようです。

Sketchにはどちらの機能も搭載されていませんが、プラグインを使えば対応可能です。

【勝者】Sketch

【理由】Adobe XDはバージョン管理システムを提供していないため

現時点ではAdobe XDに軍配

ここまでの比較をまとめると、個人的におすすめしたいのはAdobe XDです。

Adobe XDに欠けている唯一の機能は実質的に、プラグインでSketchが補っている「バージョン管理」のみといえるでしょう。そしてAdobe XDがバージョン管理システムを提供するのは、おそらく時間の問題です。

くわえてAdobe XDはSketchファイルを開けるため、Sketch専用のプラグインを利用していない限りは、移行もスムーズに行えるはずです。PhotoshopやIllustratorとの互換性については、同じAdobeのソフトウェアなので言うまでもありません。

WindowsユーザーがSketchを利用できない（※一部のアプリを導入することで利用可能）というのも、Sketchが不利な理由のひとつです。Sketchも2000万ドルの資金を投入してさまざまな機能を追加することを約束しているものの、現時点ではすくなくともAdobe XDに軍配が上がります。

Sketchより後発にもかかわらず、どんどんSketchを追い抜いているAdobe XD。もしもバージョン管理にこだわらないのであれば、まずはAdobe XDの導入を検討してみてはいかがでしょうか。

（原文：Sérgio Estrella　翻訳：Nakajima Asuka）

こちらもおすすめ！▼