1. TOP
  2. ツール
  3. Sketch vs AdobeXD ~2018 春の陣~

Sketch vs AdobeXD ~2018 春の陣~

2018年3月1日、Sketchに突如としてPrototyping機能が実装された。

それまでプロトタイプ作成までを一元管理できることで一定の支持を集めていたAdobeXDだが、これによりSketch・XD両者の能力はほぼ拮抗するかたちとなった。

ここからが本当の、ツール戦国時代の幕開けである───

 

 

とまぁ無駄に物々しい雰囲気で始めてみましたが、ようは2018年3月現在でのSketchとXDを比較してみようというのが今回の趣旨でございます。

Webデザインの分野で著名な長谷川恭久さんが自身のwebサイトで書かれた「XD vs Sketch みたいな比較は意味がない理由」という記事があります。
これは今から丁度一年前に書かれたもので、当時はまだXDもリリースされたばかりのβ版の頃でした。SketchとXDを比較したところで、そもそもコンセプトに違いがあるわけで、各種ツールはその環境や状況によって使い分ければよい、といった内容のものでした。

しかし、この一年でツールはどんどん進化し、冒頭にもあった通り、Sketchにもプロトタイピング機能が実装され、両ツールの能力はほぼ拮抗している状態になりました。

実現できることがほぼ同じになった今こそ、結局どちらのツールを使用するのが最善なのか?という疑問も生まれると思います。

なので改めてこのタイミングで、SketchとXDで現状どういった使い勝手の違いがあって、現状どちらの方が優れたツールなのか?というところを比較してみようと思いました。

検証項目

自身が普段メインツールとして使用しているのはSketchです。以前、Sketchに関する所感をまとめた記事も投稿しました。
なのでSketchに比べてXDはどうか?といった観点になりがちになってしまうのはご了承いただけたらと思います。

比較していく項目としては、以下になります。

1.対応OS
2.ビジュアル表現度
3.コンポーネント
4.プロトタイピング
5.こまかい使い勝手

では順に見ていきましょう。

 

【1.対応OS】

▼Sketch
・macOSのみ対応…

▼AdobeXD
・windows&macOS両対応!

3月14日のXDアップデートにより、Sketch→XDへのデータ移行が可能になりましたが、WindowsユーザーはそもそもSketchを触ることが出来ません。Windows&Macユーザーが入り乱れる環境では、データの属人化を避けるためにSketchは必然的にツールの選択肢から外れることになります。やはり両OSに対応しているというのはデータ管理&共有の面でとても重要になるため、XDはそういった環境では重宝されることになります。
SketchはもうWindowsに対応する気はもう無いのでしょうか…?

 

【2.ビジュアル表現度】

▼Sketch
・ビジュアル面でCSSで表現できることは一通りアプリ上でも表現可能!

▼AdobeXD
・borderに対しdottedが設定できない…
・innershadowの設定が無い…
・文字の打ち消し線が設定できない…

CSSでできるビジュアル表現が、XDには機能として足りていないということを知り、少し戸惑いがありました。
というのも僕がXDを使用する上で行った作業というのが、PSDで作成されたページデザインをXDでリプレイスするといった内容のものだったのですが、要所要所で使用されているborder:dottedやinnershadow、文字の打ち消し線(line-through)がXD上で再現できなかったのです。
最近になってXDにも文字の下線付与が対応されたように、こういった細い機能は今後追加されていくと思われますが、現時点ではまだXD側がビジュアル表現能力でまだ少し未達であるという結果になりました。

 

【3.コンポーネント思考】

▼Sketch
・シンボルのオーバーライド機能はネ申!
・リサイジング機能でレスポンシブな表現にも柔軟に対応!

▼AdobeXD
・一応各シンボルで文字内容を書き換えることは出来るけど…
・リピートグリッドの機能はめちゃくちゃ良い!

Atomic Designやコンポーネント思考の設計において、Sketchのシンボルのオーバーライド機能はかなり的を射た仕様だと思います。リサイジング機能と併用することでシンボルを呼び出した側でも柔軟に変化に対応出来るのは素晴らしいと思います。
XDの方もシンボルを呼び出した側で文字内容などを個別に書き換えたりすることは出来るのですが、入れ子のシンボルの表示を切り替えたり、一部を非表示にしたりすることは出来ません。現状ではXDはコンポーネント思考の実現度において、やや劣っているという結果になりました。
ただ、XDのリピードグリッドにおけるコンポーネントの複製・余白の調整はとても使いやすく、非常に優れた機能だと思いました。

 

【4.プロトタイピング】

▼Sketch
・シンボル側で遷移先の設定が出来る!

▼AdobeXD
・イメージ作成とプロトタイプ作成でモードが別れているため、シンボル側で遷移先の設定は出来ない…

Sketchはシンボル側の要素に対し画面遷移を設定できるため、プロトタイプ設定にかかる作業コストが軽減されます。これはページ数が多ければ多いほど威力を発揮すると思います。例えばどのページでも表示されるようなグローバルナビゲーションだと、ページごとに毎回同じ遷移設定を行わなければならず非常に手間だったのですが、これがシンボル側での一度の設定で済むというわけです。これはわりと画期的だと感じます。
プロトタイプ機能面で、Sketchは自身のツールの仕様に合わせた非常に使いやすいプロトタイピング機能を実装したことにより、プロトタイプ作成の面においてもXDをリードする形となりました。

 

【5.こまかい使い勝手】

▼Sketch
・オートセーブ機能で安心!
・外部プラグインが豊富!
・オブジェクトを選択し、command+矢印キーでサイズ調整ができる!
・数値入力枠の右端の▽△ボタンで数値調整出来る!
・デザインスペックが確認出来る機能は無い(Invisionを併用すれば可能)

▼AdobeXD
・オートセーブ機能は無い…
・複数レイヤを選択したいとき、同じフォルダ階層にないと選択できない…
・デザインスペック機能が標準装備されている!

実はこの「こまかい使い勝手」というところが、デザインを高速で作成するうえでわりと重要になってくると個人的には思っています。痒いところに手が届くかどうかで、蓄積される作業ストレス量も変わってきます。
Sketchのオートセーブは地味な仕様に思われるかもしれませんが、「セーブしなければ」という余計な意識が一つ無くなっただけで作業の集中力がかなり違います。
Sketchはオブジェクトのサイズを変更したい時、選択した状態でcommand+矢印キーでサイズ調整ができたり、数値入力枠の右端の▽△ボタンで調整することで手をキーボードに移動させなくてもクリックで数値を変更することができてフットワークが軽いのですが、XDではそれらが出来ません。
Sketchはcommand+Shiftを押しながらオブジェクトをポチポチ押していけば複数選択出来ますが、XDでは同じ階層のフォルダにあるオブジェクトじゃないと選択することができず「ぐおお」となる場面が多かったです。
XDはデザインスペックを確認できる機能を標準装備しているため、FEへのデザイン受け渡しがスムーズです。現状ではSketchにデザインスペックを確認できる機能は無いのですが、InVisionを併用することで、InVision内のinspect modeでFEへデザインスペックを受け渡すことは可能です。

 

結論

ざっくりになりますが、今回の検証内容は以上になります。

結果として、UIデザインツールとして見た際にまだSketchが一歩リードしているなという印象ですが、最大の弱点はMac専用のアプリだということ。Windowsユーザが交じる環境ではデータの共有が難しいという理由で利用しづらいケースもあるかと思います。

XD側も日進月歩で進化しています。adobexd.uservoice.comではユーザーが改善依頼をAdobe側へ投稿することができ、今後対応されるであろう項目が可視化されています。

この間参加したWDF vol.29でアドビ システムズ 株式会社マーケティングマネージャーである轟啓介氏が、「XDはとっととプロトタイプを作るツール」ということもおっしゃられていたように、やはりまだプロトタイプ作成寄りのツールであるのかなと思いました。
しかしAdobeという偉大なエコシステムの中でPhotoshopやIllustratorとシームレスに併用できるというのは大きな強みであると思います。
今後の動向に期待ですね!

今回はSketchとXDにツールを絞って記事を書きました。
同様のUIデザインツールであるFigma等は、自分はまだ使用したことはありません。
どなたかがツール比較をナレッジ化してくれることを願っております!

 

今回のまとめ

 

Invision Studioマダー?