見出し画像

一人で「UIデザインツールどれがいいのか論争」をしてみる

UIデザインツールが増えて、それぞれの特徴とか混同してきたんで一回整理します。随時更新するかも。しないかも。

Adobe XD

コラボレーションツールとしては優良なのだけど、UI構築ツールとしては機能不足。
他のAdobeツールとの連携が効くからUI構築作業は他ツールで行えばいいのだけど、できれば一つのツールでUI構築からプロトタイプの共有までやりきりたいところです。

アトミックデザインに向いてないとかって話もありますね。(このへん私はあまり踏み込んでいないので詳細わかりませんが、以下URL参照)

Sketch

UI構築ツールとしては文句なしで最優良。反面、コラボレーションツールとしては弱い。情報のシェアのためにはzeplinやInVisionが必要です。

豊富なプラグインでカスタマイズできるのが強みではあるけど、カスタマイズできることがコラボ作業の枷になってもいるような感あり。(個々のデザイナーの作業フローや制作スキルのバラツキが大きくなります。)
プラグイン駆使して画面にアニメーション入れ込んでもプロトタイプには書き出されなかったりと、不便あります。

あと、版管理には別ツール(Abstract)が必要ですね。

Macでしか使えないことなども含めて、全体的に「コラボ作業に向いてない」感あります。

InVision Studio

UI構築からプロトタイプ共有まで一貫して行えます。
概ね問題ないのですが、どうも全体的に使いづらいです。私の練度が低いだけかもしれませんが、作業していてどうもストレスを感じる点が多い。
(画面をプレビューしながらシンボルを修正できない点とか、Scrollingを設定してもスクロールしてくれなかったりとか。)

アニメーションを作成できるということが注目を集めていますが、扱えるパラメータが少ないこと、アートボードが増えすぎてしまうことからあまり実用的ではないです。
そもそも、UIの構築・コンポーネント管理・プロトタイピングを行うツールの中に、アニメーションまで入れ込むのは無理があるような感あります。

あと、版管理機能は無いようです。

Figma

UI構築からプロトタイプの共有まで一通り行えて、版管理も出来ます。ブラウザで操作できるので作業環境は選びません。2018年7月時点で、これが最良と思われます。

ただ、日本語入力にバグがあるので、手放しに人にオススメできるものはないです。

共通で言えること

いずれも、プロトタイピング機能がまだまだ弱いです。
プロトタイプはどこまで作り込むべきか、というのはケースバイケースですが、UI検証を十分に行えるレベルとは言えません。

アニメーションの細かな作り込みは出来ないし、ドラッグ&ドロップのようなインタラクションは検証できません。そもそもそれらに対応するならスクリプトによる細かな調整が必須になるので、結局FlashやDirectorと同様の、学習コストの大きなツールを内包する必要が出てきます。

なので、UIデザインツールに期待するのは
・コンポーネント管理
・レイアウト作成
・画面遷移確認と共有
・座標、色等の画面仕様を共有
に止め、アニメーションやインタラクションの検証は別で行うべき
と考えています。

どのツールがいいのか

UIデザインツールと従来のデザインツールの大きな違いは、「コラボ作業のしやすさ」が重要である点です。なので、学習負荷をどれだけ軽減できているかが肝になります。

Adobe XDは、他のAdobeツールを使いこなせていないと威力半減、という点で難あり。
Sketchは多様なプラグインとの連携が生じる点でやはり難あり。
InVision Studioは、期待する機能を一通り備えているものの、どうも使いづらい(主観ですが)。
Figmaは、InVision Studio同様オールインワンであり、かつ手軽。

ということから、2018年7月現在としては、Figmaが最良と考えています。必要なことは一通り行える上に、うまいこと機能が絞り込まれていて学習負荷が低いです。(今後のバージョンアップによって機能が煩雑化しないことを祈る限りです。)

ただ、どれもどんどんアップデートしてる最中なので、引き続きウォッチは要りますね。とくにXDは進化早い。

アニメーションとインタラクションの検証はどうするか

アニメーションとインタラクションについては、UIデザインツール上では作成も検証もできるべきではないと考えています。

双方とも「こだわりだすとキリがない」ものであり、クリエイターの欲求を満たすとなると旧Flash(現Adobe Animate)クラスの大規模ツールを丸ごと内包する必要があり、ツールが肥大化してしまいます。

● アニメーションに関しては、AffterEffectsで作って検証する。

● インタラクションに関しては、HTML/CSS/JSなり、Swiftなり、XML/Javaなりを使って、その時の開発対象にあわせたデモを作って検証する。
(インタラクションが複雑なアニメーションを含んでいるなら、AfterEffectsで作ってgifアニメに書き出してデモに組み込む。)

ということになるかと。
無論、よほどの超人でないと上記全部一人でやるのは無理なので、他のデザイナーやフロントエンジニアと協業して作成・検証する前提です。

願望

UIデザインツールで作ったプロトタイプに、別で独自に作成したHTMLとかGIFアニメをオーバーレイしてより細かいインタラクション検証ができるような仕組みって出来ないか、とか思っています。

iframeとか使ったら出来そう。
試してみたいけど、その前にFigmaとAfterEffectsの修行しないと...。

ーーー追記ーーー

UIデザイン全般のツールとしてでなく、デザイン共有機能に絞ってInVisionについて考えてみました。

■Sketch + InVision、という使い方

単純に、ツールが別れることで手間が若干煩雑。

オーバーレイなど使えて便利ではあるが、SketchとInVisionの2つに操作対象が別れる上、両方にプロトタイピング機能があって混乱の元となりそう。

Sketchに使い慣れていない非デザイナーもレイアウトに手を入れるような状況を考えたら、あまり好ましい形ではない。

■InVision Studioの使用

まだまだ不安定で、使えば使うほど粗が見えてきて使いづらさを感じる。(Scrollingがうまくきかない、カーソル表示がおかしくなる、アートボードの追加が行いづらい、等...。)

また、InVision Studioを使った方がSketch + inVisionよりも出来ることが少ない。(Overlayで開けない、など)

2018年7月現在、InVision Studioは実用レベルに達していない。

■結論

デザイン共有だけについて考えれば(共有される側の目線に立てば)InVisionで問題ないが、共有する側の手間や協業の煩雑さへの配慮、および共有された側も画面デザインに手を入れる可能性があることを鑑みると、InVisionは難あり。

非デザイナーのデザインへの参加しやすさを考えると、やはりFigmaが一番好ましい。

デザイナーと非デザイナーの役割がはっきり分かれている場合:
Sketch + InVisionの組み合わせが、機能的に充実していて好ましい。

非デザイナーもデザイン作業に参加する場合:
Figmaが好ましい。

この記事が気に入ったらサポートをしてみませんか?