36
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ClassiAdvent Calendar 2018

Day 12

SketchとXD、結局どっちが良いの問題

Last updated at Posted at 2018-12-11

はじめに

1年ぶりです、デザイナーのshio312です。これは平成最期の☆Classi Advent Calendar 2018 12日目の記事です。

今回はUIデザイン2大ツールSketchとXDとで、意外に多い**「結局どう違ってどっちが良いの」「デザイナーじゃないけど触りたい」**と思われている方のために、2018年末の最新バージョンで比較してみました。

Sketch
https://www.sketchapp.com/

XD
Adobe Experience Design
https://www.adobe.com/jp/products/xd.html?sdid=19SCDRPN&mv=search&s_kwcid=AL!3085!3!314993583283!e!!g!!xd&ef_id=WXakMQAAAH2itgQF:20181207111834:s

比較1_純粋な導入コスト

  • Sketch=年99ドル
  • XD=無料(ただしAdobeアカウントの作成が必要)

Sketchは単体で見ると高くはないですが、チーム導入となると結構な額になります。
その点XDは無料。現状有料化するアナウンスはされていません。

比較2_UI

Sketch

スクリーンショット 2018-12-07 21.54.20.png XcodeのUIと似ていて、iOSエンジニアが触るには優しい構成のはず。 ショートカットが充実していたり「知っていたら使える要素」が結構あり、「使えば使うほど手に馴染む」道具の感じ。

XD

スクリーンショット 2018-12-07 21.57.29.png ぱっと見機能数が少ないように見えますが、クリックするとUIが変化したり、特定の操作だけがフォーカスされるなど、わりと直感的な操作が可能になっていて、デザイナー以外のプロジェクトメンバーが触るのにも向いています。

比較3_機能

Sketch

画面作成コスト削減に命をかけている

XDに比べて多少重かったSketchが秋のバージョンアップで改善され、よりサクサクに。
ライブラリのテキストスタイルに直接アクセスできるようなったりと、画面作成の速さ・便利さに磨きがかかりました。
外部プラグインの数もXDに比べて圧倒的な数です。

デザインバージョン管理・共有ツール「Abstract」に対応している

Sketchデータのバージョン管理とデザイン共有に特化したツール。
実は弊社ではSketchと組み合わせてAbstract使用していて、非デザイナーのメンバーをゲストとして招待し、レビュー依頼を行うフローを導入しています。

Googleの「Gallery」がアツいぞ

Google提供のデザインコラボレーションツール「Gallery」がリリースされ、Sketchとの連携が可能になりました。
CECF7AAB-D862-4AC7-90B8-1ED3E48F33B8.jpeg

デザイン共有、レビュー、バージョン管理が無料で提供されています。
Galleryを使うと、Sketchの少しまだ未熟なプロトタイプ機能を我慢さえすれば、デザイン、プロトタイピングから実装指示、バージョン管理までが可能になります。

XD

機能が揃ってきた

去年まではSketch優勢と言われていた部分(外部ファイル連携)やレスポンシブ機能が補完され、Sketchとの差が無くなってきています。

自動アニメーションというキラーツール

さらに、自動アニメーションという機能が実装され、マテリアルデザインを意識したアニメーションや、インタラクティブな遷移の表現がXD完結で可能になりました。
デザイナーの「なんかこういう感じでニューッて出したい」という無茶振りに対応しやすくなりました。
外部プラグインがユーザー自身で開発できるようになり、今後増えていく見込み。すでにSketchプラグインの有名どころの一部はXDに対応されています。

デザイナー(作業者)以外がUI 開発にコミットできる

無料かつWindowsにも対応していて、かつ直感的なUIを持つXDのみで設計・プロトタイピング・実装指示が可能になったことで、企画からデザインまでが一貫して行えるようになりました。多数の企業がXDを利用したワークフローを導入しています。
参考)無料で使えるAdobe XDの社内導入を後押しする活用事例5選

余談ですが今年のAdobeMAXJapanでは、来年の展開として「バージョン管理」「共同管理」「アニメーションのコード吐き出し」などの機能追加を宣言しており、来年あたりに、純粋な機能面でSketchを超える可能性が出てきています。

結論

Sketch
デザイナーが、UIを品質良く・早く作ることに最適で、サードパーティを使うことで可能性が広がる
XD
直感的なUIを持ち、事業を横断するプロジェクト、ブランディング含めた総合開発に最適

SketchとXD、2018年末の段階では**「どちらが優れているのか?」ではなく、「どちらが自分たちの課題解決に向いているか」**で判断すべき時期になったと言えます。

まずは、どちらのツールも一度使ってみてください。
両者ともたくさんの機能が備わっており、使い方と目的次第で皆さんのプロジェクトを圧倒的に効率よく回す事ができるツールのはずです。

36
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?