UIUXの改善にどんなツールが役立つのか、デザイナーはどんなツールを使っているのか、といった情報は、非デザイナーには難しいもの。ですがUIUXの改善業務を任されたら、そんな悠長なことを言ってはいられないでしょう。

そんなあなたのために、今回はデザイナーが日頃どのようなツールで、どんな風に作業を進めているのか、といった情報をお届けします。このツールで作ったこの成果物のチェックをお願いします。とだけ言われて、「ああ、これはデザインの完成図を作ったのだな」と理解できるようなところまで、一緒に辿り着ければ幸いです。

では早速見ていきましょう。今回ピックアップするのは、以下のツールとなります。

・Adobe XD
・Sketch
・Figuma
・InVision Studio
・Drama
・Framer
・Draw.io

それぞれ説明していきます

Adobe XD  

Adobe XDは、webサイトやモバイルアプリ、音声デバイスのUIUXのためのデザインツールです。

Adobe XDの特徴は、出来ることの汎用性の高さでしょうか。手軽に使えるため、デザイン業界ではAdobe従来のデザインソフト、PhotoshopやIllustratorを押さえて主流のデザインソフトに躍り出ました。

XDは大まかに分けて、以下のことが出来ます。

・デザイン作成
・プロトタイプ作成
・共有、コメント

まずデザイン作成について説明します。

XDでのデザイン作成は直感的な操作が可能で、ここがPhotpshopやIllustratorよりも優れています。

例えばUIによくある特定のボタンデザインの繰り返しなどは、リピートグリッドという機能を使用するとドラッグ一つで出来てしまいます。他にもアセット機能が優れていて、何度も使うアイコンなどを登録しておくと、すぐに取り出せたりと便利です。

次にプロトタイプ作成について説明します。

XDでは実際の挙動に近い行動をさせられる、プロトタイプの作成が可能です。アニメーションしたり、画面遷移したりと、UIに必要な挙動を簡単に作成することが出来ます。

最後に共有、コメントについて説明します。

XDでは、チーム間やクライアントへの共有もスムーズに行えます。作成したプロトタイプをURLで共有ができ、パスワードも設定できます。もちろんコメント機能も存在しているため、直接どこにどんな修正が必要であるかが書き込めます。

このように、汎用性が高く、総合的に優れたデザインツールであるのかAdobeXDなのです。

Sketch  

Sketchは、アプリのUIデザインにもっぱら使用されるツールとなります。Mac用のグラフィックデザインツールですので、Windowsユーザーには向きません。

Sketchの特徴は、UIデザインに特化している点です。以下のような点が例に挙げられます。

・ベクターデータなのでファイル容量が小さく、拡大縮小しても線が汚くならない
・テンプレートが多いので、効率的にUIデザインが可能
・iOSアプリを使用して、迅速に実機確認ができる

特に実機確認の迅速さがSketchの特に優れた点として挙げられます。

Figma  

Figmaは、先に挙げたAdobe XDやSketchと比較しても引けを取らないデザインツールです。さらに便利な機能が備わっているので、そちらを紹介していきたいと思います。

Figmaはブラウザ上でデザインが出来るツールで、ブラウザさえ起動できればどこでも作業可能、チームでの共有がスムーズ、そしてフリープランが存在するなど、非常に気軽に導入が出来るデザインツールです。

非デザイナーが触るという観点では、1,2を争うほど敷居が低いツールともいえるでしょう。

特徴としては前述のブラウザでの作業が可能という点でしょうか。いわゆるSaasで、アカウントさえ持っていればオフィスでも自宅でもすぐに業務を続けられます。そのため、リモートワークの盛んなご時世では特に活躍する要素なのではないでしょうか。

また同じチームで1つのファイルを編集可能ですので、様々な業種の人間が手に触れることが出来る、という点も特筆すべきでしょう。

InVision Studio

InVision StudioもXD同様に様々な機能を有するデザインツールです。Macのみ対応ですので、Windowsユーザーは注意です。

InVision Studioでは画面遷移、アニメーションの作成が可能、とXDに並ぶ機能を有しています。また運営元であるInVisionの提供する各種サービスとシームレスに接続可能だったり、サードパーティによるプラグインの作成が可能だったりと、拡張性が高いツールとなっています。

現状ではやはりXDが強いのがデザインツールの市場ですが、InVision Studioも拡張性の広がり方次第では決して劣る媒体ではありません。ただ、非デザイナーの立場から考えると、どのようなプラグインがおススメとか、InVisionのこのサービスと連携すべき、などを考えると、敷居は高くなってしまうでしょう。

Drama  

Dramaは、デザイン、アニメーション、インタラクティブプロトタイプを吐く精できる、Mac用デザインツールです。まだβ版ですので発展途上な部分がありますが、人によってはXDやSketchよりも良いとする人もいるようです。

上に挙げたSketchやFigmaに近い使用感で、特徴としてはアニメーション機能の強さが挙げられます。

DramaはもちろんUIデザインツールなのですが、高度なアニメーション機能が搭載されています。

強調したいのが、タイムライン機能でしょう。デザインツールなのに動画のタイムライン機能でどのように挙動するかを確認できる、というのは、現状唯一無二の機能と言えます。

Framer  

Framerはここまでに列挙した通り、デザイン、プロトタイピングツールの一つです。ただ経緯が特殊で、他のツールがデザインからスタートしたのに対して、Framerはコードベースのプロトタイピングツールがスタートしたという点です。

XDなどは直観的な操作でプロトタイプを作成できる一方で、Framerはコードによってこプロトタイプを作成する、という特徴があります。その意味では、Framerで一度作成したプロトタイプは、そのまま本番に移植できるという利点がありそうです。

Draw.io  

ここまでのデザインツールの流れから少し外れて、Draw.ioは無料の作図ツールです。もしかしたら非デザイナーの立場では、実際に使用に適しているのはDraw.ioかもしれません。

Draw.ioでは、フローチャートやレイアウト、そして図を作成することが出来るツールです。ブラウザで作業が可能で、Googleドライブなどに保存してどこからでも作業を再開させることが出来ます。

デザインそのものというよりも、設計図を作成するのに向いたツールと評価できるツールに当たるでしょう。デザイナーも使用することはあるでしょうが、それ以上に非デザイナーがメインで使用するツールと言えそうです。

まとめ  

以上が、UIUXの改善に役立つツールです。では、まとめていきたいと思います。

・Adobe XD
Adobe XDは総合力に優れたUIを含む様々なデザインを可能とするデザインツールです。特徴はデザイン作成、プロトタイプ作成、共有、コメント機能で、デザイン作成はもちろん画面遷移やアニメーションなどが可能。そしてコメント機能でスムーズに修正作業に移行できます。
・Sketch
SketchはUIに特化したMac用デザインツールです。ベクター画像で軽くて画質が崩れないデザインを作成でき、テンプレートが豊富なので効率的にデザイン可能で、アプリですぐにUIを確認できるなどの特徴があります。XDに並んで代表的なUIデザイン作成ツールです。
・Figuma
Figmaは非デザイナーが触るデザインツールの入門に非常におススメできる、敷居の低いデザインツールです。ブラウザで複数名で作業可能なデザインツールで、かつフリープランが存在するため無料で始めることが出来ます。ブラウザが立ち上がればどこからでも作業可能なのも、リモートワークの多いご時世では嬉しいところでしょう。
・InVision Studio
InVision Studio拡張性に優れたデザインツールです。InVision運営の別サービスとシームレスに連携可能で、かつサードパーティ開発のプラグインを活用できるため、運用次第では他大手のデザインツールを超える使用感にカスタマイズ可能かもしれません。
・Drama
β版のため発展途上なところがあるものの、完成すれば大手デザインツールを凌駕しかねない、これからに期待の持てるデザインツールです。現時点でもUIデザインツールながら、アニメーションのタイムライン機能が存在しているため、この機能が使いたい方にお勧めです。
・Framer
コードの書けるデザイナーにはおススメなデザイン、プロトタイピングツールです。他ツールと違いマウスなどでのプロトタイピングではなく、コードでのプロトタイピング作成をする仕様を実装しています。
・Draw.io
ある意味最も非デザイナー向けの、高性能な作図ツールです。ブラウザで操作可能な無料のツールで、UIの設計図などを作成する場合に適しています。

以上が、UIUX改善に役立つツールです。ご活用いただければ幸いです。