Adobe XDがSketchよりも優れている理由

Post on:2019年9月19日

はじめに

私の前回の記事では25,000を超える閲覧と共有があり、SketchとAdobe XDの2つのツールの比較について補足したいと思いました。
前回の記事を読んでいない人は、下記をご覧ください。

Sketch vs Adobe XD: A designers view.

基本的なことは予想通りで、Adobe XDの継続的なアップデートの後、私が反対したことはすべて取り戻されました。その理由はこの記事で解説します。

この記事では、Adobe XDに重点を置いていますが、UI/UXのソフトウェアに関する意見はすべて個人的な好みに基づいています。この2つはほとんど同じことができますよね？さらに、コラボレーションツールとしても機能します。
それでは、SketchとAdobe XDの比較を始めましょう。

Sketchの特徴

Sketchはすでに何年も前から存在しています。8年ほど前に仲間のデザイナーから「みんなが使っている」という理由で、これからはPhotoshopを使わずにSketchを使うように言われたことを覚えています。

私はSketchに飛びつくまでに時間がかかりました。それは躊躇していたからではなく、Sketchや他のツールを試すのに時間がかかったからです。

プラグインについて

プラグインは作業を効率的にするツールとしては素晴らしいものです。しかし、ソフトウェアを継続的に破壊したり、クラッシュさせたり、アップデートが必要だったりする場合、効率的と言えるでしょうか。

60以上のアートボードとモバイルデザイン、シンボル、スタイルを備えたUIをデザインしようとしても、思っているほど効率的には機能しないかもしれません。納品直前にSketchファイルを開いたことが何度もありますが、プラグインが壊れていたり、起動する前にアップデートに時間がかかったり、最悪の場合Sketchがクラッシュしたこともあります。

現在、ほとんどのプラグインはサードパーティが開発したもので、信頼性が低いことが分かっています。そのため、Sketch自体を非難することはできません。

しかし、Sketchユーザーにとってプラグインは重要な存在です。プラグインなしでは、Sketchは単なるベクター形式のデザインツールです。

信頼性について

前述の通り、Skecthは私自身そしてチームのメンバーにとってあまり効率的ではありません。大規模なプラットフォームで作業する場合、すべてを1つのファイルに収めてデザイナー間で共有できることは素晴らしいことです。しかし、プロジェクトがモジュールの再利用に依存している場合、シンボルは非常に便利ですが、ソフトウェアは永遠にクラッシュします！

「その理由はソフトウェアではなく、マシンだ」とあなたは考えるかもしれません。念のために言っておくと、私とチームのメンバーは現在、最新のMacBook Pro 15inchを使用しています。マシンパワーが不足しているとは思いません。

Sketchはクラッシュすることが多いだけでなく、ファイルがかなり破損します。Sketchファイルをパッケージ化していますが、別のマシンで開くとシンボルが壊れていたり、フォントスタイルが消えていたりします。納品直前に、他のデザイナーと一緒に仕事をしなければならない時は、効率的とは言えません。

エクスペリエンスについて

Sketchは全体的にかさばっているように感じられます。長い間Adobeに追加されてきたPhotoshopと同じくらいかさばっています。5ページ以上のWebサイトをデザインすると、遅れが感じられます。インポートする前に画像やアセットを圧縮しても、納品が迫っているときに作業するのはあまり良いことではありません。このツールはかさばってくると、ラグが大きくなるので、ソフトウェア自体のUIもますます使いづらくなるように感じられます。キャンバスにはたくさんのオプションや機能が詰め込まれており、デザインするスペースがほとんどありません。

Sketchが、Photoshopと同じ道を進んでいると感じずにはいられません。誰もが遅いソフトウェアを使いたくなりません。

総括

テンプレートやモジュールを使用して、同じように見えるWebページをすばやく作成したい場合は、Sketchをぜひお試しください。シンボルやフォントスタイル、Abstractのようなプラグインは効率性に優れています。しかし、もしデザインの可能性を広げ、既存にはない独自のデザインで作りたいと思っているタイプのデザイナーには、私はSketchを勧めません。

Sketchはどれだけアップデートされても、他のソフトウェアと比べて時代遅れで、かさばり、使いづらいものになっていると感じます。

Sketchは長続きしましたが、エクスペリエンスデザインの世界ではあまり歓迎されていないのかもしれません。個人的にはSketchを使用するのが好きではありません、そしてチームのメンバーも使用していません。

Adobe XDの特徴

Adobe XDは比較的新しいソフトウェアで、私を興奮させます！

以前の記事ではまだベータ版でしたが、Adobe XDは正式版がリリースされ、毎月のアップデートによる改善も含めて、本当によくなりました。Figmaと並んでUI/UXのための最高のツールだと思います。

信頼性について

Adobe XDを12ヵ月間使ってきましたが、私とチームのデザイナー6人を含めてクラッシュしたことは一度もありません。どんなサイズの画像を入れても、アートボードやシンボル・コンポーネントがいくつあっても問題なく、本当に信頼できるソフトウェアです。

Adobeは最近、Sketchと同様にサードパーティのプラグインを導入しましたが、プラグインをいくつ追加してもソフトウェアの信頼性は維持されているように感じます。ラグもクラッシュもなく、シームレスに動作します。少なくとも、私はまだラグもクラッシュも経験していません。

また、ドキュメントの共有も最小限の作業ででき、ファイルサイズが大きくならないように圧縮されます。そして、他のマシンでファイルを開いても、シンボルやフォントやアートボードが破損することはありません。チームの他のデザイナーにすぐに引き継ぐことができ、非常に効率的です。シンボルやコンポーネントは、クラウド上のドキュメントにリンクしているため、オリジナルのデザインがマシンにない場合でも、「リンクがありません」と表示されるのではなく、正しく表示されます。

エクスペリエンスについて

Adobe XDでUIのレイアウトをするのは、非常に直観的です。Adobeは基本にこだわっており、私はデザイナーとしてそのやり方は大好きです。必要な時に必要なツールさえあれば、インターフェイスの設計に特別なものは必要ありません。

ソフトウェアが処理するスピードは信じられないほど速く、効率を大幅に向上させています。Adobeがどのように管理してきたのかは知りませんが、非常に堅牢なものに取り組むことは素晴らしいことです。

Adobe XDでは写真を図形にドラッグするだけで、簡単にマスクが作成できます。SVGアイコンをドロップすると、すぐに編集可能なベクター形式に変換され、モジュールのサイズ変更もレイヤーを操作する必要はありません。これらはデザイナーとしての時間を節約するもので、Adobe XDで体験するまではこれらがいかに素晴らしいものであるかを実感することはできませんでした。

Restaurant Finding App Concept

自動アニメーション

Adobe XDの機能を見てましょう。
「自動アニメーション」というだけで、UIデザイナーは鳥肌が立つかもしれません。ボタンのアニメーションを表示したり、カルーセルがどの方向にスクロールするかクライアントに実演する時などに、フラットなグラフィックだけでなく、UIのエクスペリエンスを見せることができます。アイデアを売り込むこと、デザインだけでなくエクスペリエンスを売り込むこと、実際に素晴らしい体験をすることは必要な予算を増やすことに繋がります。

Adobe XD以前は、After FXやPremier Proなどが必要でした。しかし、現在は違います、Adobe XDがあります。Adobe XDでインタラクティブを作成するのは非常に簡単なので、時間をとられる必要はありません。

Adobe XDでは、プロトタイプの自動アニメーションをスクリーンに記録し、動画にエクスポートすることもできます。これはプレゼン時にも、デベロッパーに渡す時にも役立ちます。

この記事はチュートリアルではないため、自動アニメーションのやり方については説明しませんが、非常に簡単で効果的なので、まだの人は試してみてください。

自動アニメーションは非常に強力で、群を抜いた最高の機能です。プラグインは不要です、Adobeはよくやったと思います。

参考: Adobe XDの自動アニメーションとドラッグジェスチャー機能を使って、UIのインタラクションを実装したまとめ

プロトタイプ

私は以前に、画像をInVisionにアップロードするためにPhotoshopとSketchからエクスポートする必要がありましたが、ちょっとした修正があるたびに同じことをしていました。最初はCraftプラグインを使用していましたが、アートボードが表示されない、誤って上書きされる、コメントが消えてしまうなど、多くの問題がありました。なんて面倒なことでしょう！私はほとんどすべてのクライアントでOverflowを使用しています、Overflowはユーザージャーニー用のアプリです。

Adobe XDを使用すると、これらすべての機能が組み込まれているため、心配する必要はありません。プロトタイプとデザインをいつでも、素早く切り替えることができます。テキストを素早く変更し、ビジュアルをエクスポートすることなく、数秒で公開できます。エクスポートや置換がないので、複製は作成されません。プロトタイプのタブにリンクすると、ユーザージャニーが表示され、これらのために別のソフトウェアは必要ありません。

Adobe XDで一番のポイントは（私の意見では）、ブラウザでクライアント用に開くプロトタイプのリンクをエクスポートすると、すべてがベクター形式で表示されることです。InVisionでエクスポートしたときに比べて、数倍も優れています。

しかし、Adobe XDにはまだ欠点があり、今後のアップデートで修正されることを望んでいます。

プロトタイプのリンクの保存は問題です。InVisionを使えば簡単にログインでき、すべてのプロトタイプが1ヵ所にあります。しかし、Adobe XDの場合は、リンクはAdobeアカウントの複数ページにネストされているように見え、急いでいるときには見つけにくいことがあります。ほとんどの場合、コアのXDファイルを見つけて開き、リンクを再度エクスポートする方が簡単です。
デザイナーとして、プロトタイプにコメントをつけるのは好きではありません。個人的には口頭でチーム内で議論しながらコメントするのが素晴らしいことだと思っており、クライアントからデザイナーまでの観点からすると、コミュニケーションとクライアント管理が不十分だと考えます。どのような修正が行われたのかを正確に把握するのは難しく、クライアントが忍び込むのは簡単です。また、ビジュアルを更新する際にコメントを失う危険性が常にあります。つまり、将来的に信頼できるバックアップのドキュメントがないということです。これはInVisionのような複数のプロトタイピングツールにまたがる大きな問題です。

デベロッパー用のデザインスペックを共有

初めてSketchのプラグインとしてZeplinを使用した時は驚きました。デベロッパーに渡すためにすべてのアセットをエクスポートする必要がなくなり、フォントサイズやパディングや配置に関するすべての決定を説明する必要がなくなり、SketchファイルをZeplinにドラッグしてデベロッパーを招待するだけで、開発時に必要なものがすべて揃います。

Adobeは（ありがたいことに）Zeplinの良いところをソフトウェアに組み込みました。Adobe XDからエクスポートする必要がなく、リンクを生成するためにファイルを任意の場所にドラッグする必要もありません。「共有」をクリックし、ドロップダウンから「開発用に共有」を選択するだけです。URLが自動生成され、すぐに使用できます。繰り返しになりますが、これはAdobe XDに標準で組み込まれている機能で、Zeplinに毎月の料金を支払う必要はなくなります。