こんにちは！久米川です！

会社でのあだ名は「くめちゃん」なんですが、人によっては「くめ」と呼ばれます。

その違いはなんだろうと考えたところ、目上の人ほど「くめ派」が多いことがわかりました。

‥‥‥‥

そんなどうでもいい話はさておき、本番にいきましょう！

これまでの記事ではデザインの4原則や勉強法について書いてきましたが、今回はより技術的なデザインツールの話をしていきたいと思います！

UI&WEBデザインツールについて

近年、通常のデザインツールとは違う、WEBサイトやアプリケーションの作成に特化したUIデザインツールというものが数多く出てきています。

通常のデザインツールとは違い、画像の補正機能などは基本的になく、コンポーネント機能やプロトタイピング機能、アニメーションの作成、コメント機能による修正や更新対応の連携など、WEBサイトやアプリケーションを作る上で役に立つ機能が多く備わっています。

今回の記事では、「Sketch」や「XD」をはじめとした数々のツールの中で、どのツールが一番優れていて、どのツールがどんな人に向いているかを徹底解説していきたいと思います！

それでは早速いってみましょう！

Sketch

UIデザインツールの火付け役

「UIデザインツールが世の中に広まったのはSketchがきっかけ」

そういわれているほど人気が高く、長く愛されているツールです。その理由は機能を見れば明らかで、まずはチュートリアルや素材などが他のソフトと比べて豊富です。さらに、UIデザインだけでなく、企画書やプレゼンテーションなどの作成にも使えるという便利さがとても魅力的です。

今やUIデザインツールの代名詞となっているSketchですが、欠点もあります。macOSでしか使用できないところです。そういう意味でWindowsユーザーは手が出しづらいツールですが、macユーザーには自信を持ってオススメできるソフトです。

メリット
・有名なソフトなので、情報が多く学習しやすい
・チュートリアルやデザイン素材が豊富
・企画書やプレゼンテーションにも使える

デメリット
・macOSにしか対応していない
・無料ではない。年間99ドル(約12,000円)のライセンス料を支払わなければいけない

こんな人におすすめ
使いやすさを重視したい人、MACユーザーの人

Adobe XD

シンプルで軽快な動作 Adobeが提供するUIソフト

XDはAdobeが提供するUIデザインツールソフトです。同じAdobeソフトのIllustratorやPhotoshopと比べて機能は限られていますが、その分シンプルなUIが実現されています。

動作がとても軽いので、ロード時間などで作業を邪魔されることはほとんどなく、使い勝手の良いソフトとなっています。

また、IllustratorやPhotoshopを一通り操作できる人であれば、操作方法が似ているため、1から勉強しなくてもスムーズにソフトを使うことができます。

Adobeソフトとの連携に強い

Adobeが提供しているソフトなので当然、同じAdobeソフトとの連携は強いです。

例えば、画像をphotoshopで開いて直接画像の編集ができたり、Illustratorのオブジェクトをコピーできたり、After effects用にアニメーションを書き出せたりと、他のソフトにはない連携の強みがあります。

ただ、他のAdobeソフトとは違い、カラーマネジメントに対応していないので、XDでの色の見え方は他のソフトと少し異なります。デザインを作る際には注意が必要です。

メリット
・動作が軽く、操作しやすい
・Adobeソフトとの連携が強い
・リピートグリットやスタックなどの便利な機能が多い

デメリット
・カラーマネジメントに対応していない
・Windows版ではUIが異なる
・チームでの同時作業には弱い

こんな人におすすめ
Adobeソフトに慣れてる方、Adobe系でソフトを統一したい方

Figma

チームでの作業に最適なツール

Figmaの大きな特徴としては、他のソフトと違いブラウザ上で作業ができるという点です。アプリのインストールが不要なので、インターネット環境さえあればどこからでも操作できます。

また作成したデザインをURLを送るだけで公開することも可能です。よく複数人での作業で「どのファイルが最新かわからない…」「バージョン管理が大変…」と悩んだことがある人、いますよね。その長年の問題をバッチリ解決してくれるのがFigmaです。

また、リアルタイム同時編集機能を使ってリモートワーク中でも画面越しの説明がスムーズに行えることや、作業履歴を残せる機能、プロジェクトの進捗状況が管理できる機能など、チーム作業に便利な機能が多数搭載されています。

メリット
・WEBブラウザ上で作業ができる
・連携に強い
・データ容量がとても軽い
・プラグインが豊富

デメリット
・開けない拡張子が多い(AI、EPS、PSD)
・画像の加工などができない

こんな人におすすめ
チーム体制で作業したい人、WEBブラウザ上で作業したい人、バージョン管理が嫌いな人

In Vision Studio

アニメーションに強いUIデザインツール

全体が真っ黒なUIで異彩を放つInVision Studio。FigmaやXDに比べてまだまだ使っている人が少ない印象ですが、他のソフトにはない強みがあります。それはアニメーション機能です。

他のツールと同様、クリックやタップ、スクロールをしたときの動きはもちろん、4方向へのスワイプ時の画面遷移やホールドタップ（長押し）時の動きまで設定することができます。

デザイナーとエンジニアの連携に強い

画面遷移の種類が多かったり、インタラクションをたくさん盛り込むWEBサイトやアプリをプロトタイプに再現できるInVision Studioは、エンジニアとのコミニュケーションにおいても役に立ちます。

デザイナーとエンジニアとの連携で「こんなアニメーションを作ってほしい」と言っても、なかなか伝わりづらく、方向性がズレる時ってありますよね。

その点InVision Studioは、具体的なアニメーションもデザイナーで作成できるので、エンジニアとの連携がスムーズになり、より精度の高いアプリやWEBサイトを作ることができます。

メリット
・細かなアニメーションに強い
・エンジニアとのコミニュケーションに役立つ
・UIがかっこいい

デメリット
・動作が少し重い
・使っているユーザーが他のソフトと比べて少ない

こんな人におすすめ
アニメーションやインタクションに力を入れたクオリティの高いプロタイプを作りたい人

Framer

プログラミングでも動かせるプロトタイプ

Framerは他のUIデザインツールと同様にデザインとプロトタイプを両方作成することができますが、他のソフトにはない大きな特徴があります。それがプログラミングによるアニメーションです。

マウスの操作でアニメーションを作成しようとしても、どうしても時間がかかってしまうなど、苦労がありますよね。その点Framerはコードを書くことによって、効率よく質の高いアニメーションを作ることができます。

プログラミング未経験の人はとっつきにくいかもしれませんが、プログラミングに慣れているデザイナーや、エンジニアの方は、基本的な操作を覚えるだけで簡単にアニメーションを作成することができます。

表現の幅が広い

Framerは他のソフトと比べて表現の幅がとても広いです。ユーザーに適した理想のプロトタイプを作成することができます。

• 動画の埋め込み
• Youtube動画の埋め込み
• トグルボタンなど動的なコンポーネント
• アプリのフッターに配置されているようなタブメニューの実装
• Reactのコードによるコンポーネントの作成

また、Figmaと同様にWEBブラウザで作業することも可能です。比較的新しいソフトですが、個人的に期待が大きいソフトの一つです。

メリット
・ブラウザ上で作業ができる
・プロトタイプの自由度が高い
・Reactコードによるコンポーネント化
・コードをいじれる

デメリット
・FigmaやXDに比べてまだ知名度が低い
・有料プランでしか使えない機能がある(バージョン管理など)

こんな人におすすめ
リッチなプロトタイプを作成したい方

Adobe Illustrator & Photoshop

逆に、超有名ソフトのこの2つはどうなのでしょうか？

結論から言うと、UIデザインツールとしてはおすすめできません。

なんで？と思うかもしれませんが、そもそもUIデザインやWEBデザインの作成を目的としたソフトではないからです。

Photoshopは写真加工で、Illustratorはロゴや紙媒体などで力を発揮するソフトで、他のUIソフトにある共同作業やプロトタイプ、コンポーネント機能など、UIやWEBデザインをする上で必要な機能が搭載されていないので、どうしても不便を感じてしまいます。

では、この2つのソフトは一切使わないのか？と言われれば決してそうではありません。

写真加工やビジュアルの作成にはphotoshopが必要ですし、タイトルやロゴのデザインを作る場合はIllustratorが最適です。なので、ソフトを使い分けることが大事です。つまり、

「UIデザインツール + photoshop / Illustrator」が一番理想なんじゃないかなと思います。

どれが最強のツールか

さて、ここまでデザインツールを紹介してきましたが、どのツールが一番いいのかを断言するのは難しいところ。ただ、つくりたいプロトタイプやUI別であれば言い切ることはできます。

・Adobe系に統一したい人にとってはXDが最強
・チームで編集したい人にとってはFigmaが最強
・精度の高いプロトタイプを作成したいなら、In Vision StudioかFramarが最強

目的に応じて変わってきますが、こんな感じだと思います。

今後もおそらく新しいUIデザインツールがどんどん出てくるでしょう。

そこで大事なのは自分がしたいことを基準に考えること。そうすれば自ずと最適なソフト選びができると思います。

その上で「自分が何をしたいのかわからない」という方は、始めやすくて使いやすいFigmaをおすすめしたいと思います！

最後に

今回の記事を書くにあたって、いままで使ったことがないUIツールを使ったのでとても勉強になりました。

一つのソフトに縛られず、柔軟の考え方を持ってソフトを選ぶのが大切だなと思いましたね。みなさんもぜひ、自分にあったツールを見つけていただければと思います！

最後まで読んでいただきありがとうございました！