Q&A デザインツールの見方・選び方

似たようなツールが多くて一長一短で、「〇〇(What)をするならコレを使う」というよりも、「状況 (Where, Who, How) によって今はコレを使う」といった目線で見ています。
ただ、どんどん新しい (けれども似たような) ツールが出てきている中、それぞれのツールの特徴を見出して、差別化するまでにモヤモヤしています。 ヤスヒサさんは新しいツールや類似のツールを触る時、どういった目線で見ていますか？

匿名

注目は実装目線のデザインツール

デザインツールの評価は非常に難しいトピックです。

Sketch、Adobe XD、Figma、InVision Studio などツールが出揃った感がありますが、今でも新しいツールが出て続けています。次世代デザインツールはどこへ向かうのかでも指摘しましたが、今年はデザインと実装（コード）の溝を埋めるためのツールがいくつか出てきたのが印象的です。デザインからコードへ転換するためのワークフローやツールを自社開発するところもありますが、そういったリソースがない組織にとって今後のデザインツールの動向は注目です。

デザインツールでつくられた成果物は厳密に言えば途中成果物であって、完成品とはほど遠いものです。つまり、他の専門家の力を借りなければユーザーが手に取れるプロダクトにはなりません。

Sketch と Figma が少し突出しているように感じるのは、UIの一貫性や画面遷移など実装視点で考慮しておきたい部分を設計できるところだと思います。プラグインや連携サービスを使えばコードに書き出すこともできますし、コマンドラインでデザインファイルの操作もできます。

今年はデザインとコードの間を埋めるツールが増えてきたと書きましたが、そのなかでも「Reactデザインツール」という新しいジャンルが生まれた年でもあります。デザインツールで作られた UI をそのまま React Components として書き出すことができます。高い注目を浴びている Framer X や React Studio 以外にもいくつかあります。

• Pagedraw
• Modulz
• BuilderX
• Alva

今年改訂された Haiku になると React はもちろん、Angular, Vue との連携もとれるそうです。デザインツールが実装に縛られてしまうという弱点がありますが、デザインからコードの間にある深い溝を埋めるためのトレードオフなのかもしれません。

Webflow も STUDIO も web サイト制作に限定してしまいますが、デザインをどうやってコーディングしようかと考える手間が省けます。また、あらかじめ「web でできること」という制約が課せられているので、実装不可能なものがデザインされてしまうこともありません。

必要なのは選べる自由

質問されている方にように「状況 (Where, Who, How) 」によって最適なツールを選ぶことが多いです。自分の好きなツールではなく、置かれている環境において組織が円滑に動くには何が良いか考えるようにしています。

デジタルプロダクトと一言でいっても、プラットフォーム、ジャンルによってアプローチが変わりますし、開発チームの大きさや成熟度でも変わります。よって、どんな状況にも耐えられる最強ツールというものはなく、適材適所でツールを選びたいわけですが、現実は厳しいです。基本 JSON ファイルでできている近年のデザインファイルですが、ツールを横断してファイルを操作できるほどの自由はまだありません。

Avocode がオープンなデザインファイルにするための取り組みをしていますが、こうした動きはデザインツール開発会社も積極的に参加していただきたいところ。Sketch ファイルを読み込む機能だけ実装するのではなく、Sketch をはじめ様々なデザインツールに向けて書き出すことができる寛容性も欲しいですね。今後ツールを選ぶポイントにもなりそうです。

質問を募集しています

デザインのこと、コンテンツのこと、ツールのことなど質問を募集しています。投稿していただいた質問は、こうした記事にして詳しい解説をしています。Web デザイナー、UI デザイナーと言っても働き方は多種多様なので、「一般論」ではないピンポイントな回答を提供できればと思います。