デザインツールの種類と選び方(特にUIデザインツール)

こんにちは、ajikeデザインチームです。
弊社はデザイン会社なので様々なデザインツールを使用してきました。
これまでデザインツールといえばAdobeの一強でしたが、最近では様々な企業から展開されており、一体何を使えばよいかわからないという状況に陥っている方も多いのではないでしょうか。

今回は初めてデザインツールを触る方に向けてツールの種類と選び方をご紹介します。

デザインツールの分類

デザインツールは用途に応じて様々な種類がありますが、大きく分類すると、次のようになるかと思います。

- グラフィックデザインツール
- 画像編集ツール
- UIデザインツール

まずはそれぞれの特徴をご説明します。

グラフィックデザインツール

Adobe Illustratorを代表とするグラフィックデザインツールは複雑で自由度の高いグラフィック制作ができるのが強みです。
主に以下に使用されることが多いです。

- ポスターやパンフレットなどの印刷物のデザイン作成
- キャラクターやイラスト作成
- Webサイトのアイコン、企業ロゴ等の作成

キャラクターを描きたい、ロゴを作りたいという方は迷わずIllustratorをおすすめします。

 画像編集ツール

Adobe Photoshopを代表とする画像編集ツールは写真を編集することに特化したデザインツールです。元々は写真のリサイズやレタッチ、色調補正などに使用することを前提に作られたツールですが、文字の挿入や装飾機能などから、バナーのデザインやWebサイトのデザインにも使われてきました。

写真の複雑なレタッチ等を行いたいという場合には...
　⇛Photoshop
シンプルな基本補正、raw現像のみといった場合は..
　⇛Adobe LightroomまたはLuminar4等の現像ソフト

をおすすめします。

※今後Webサイトやアプリのデザインを行っていきたい方は画像編集ツールではなく、後述するUIデザインツールをぜひ検討してみてださい。

UIデザインツール

UIデザインツールはWebサイトやアプリのデザインに特化したツールです。Sketchというデザインツールが登場したあたりから普及してきました。
またアプリやサイトの動きを即座に確認できるという点でプロトタイピングツールを兼ねていることもあります。
昨今、多くの企業が開発・発表し、ツールが乱立し始めたのはこの分野です。

Photoshopなどの画像編集ツールでもWebサイトのデザインは行なえますが、それらのツールから必要な機能だけを取り出し、かつ使いやすく、より効率的にデザイン作業が行えるようになったのがこのUIデザインツールです。
UIデザインツールに関しては少し詳しく紹介します。

UIデザインツールにはどんな物がある？

UIデザインツール、プロトタイピングツールと呼ばれるこの分野は様々なツールが乱立しているのが現状で、多くの方が何を使うのがベストなの？と頭を悩ませているところでしょう。

ここでは代表的な5つのツールの特徴を紹介します。

Sketch

UIデザインツールの火付け役的な存在、Sketchの登場でPhotoshopでWebデザインを行っていたデザイナー達がごっそり乗り換えていきました。

Sketchがデザイナーに受け入れられた要因には、

- 買い切りで価格が安いこと
- 動作が軽いこと
- シンプルなUI
- アートボード機能（同じファイルで複数のページを管理できる機能）
- Symbol機能（繰り返し使用するパーツを一括管理する機能）

などだと思います。これらの機能は現在のUIデザインツールのスタンダードになっています。
非常に素晴らしいツールですが、Figmaの登場により弊社では徐々に活躍の場が失われてきています。。

Adobe XD

XDはSketchにPhotoshopユーザーが流れているのを横目で見ているわけにはいかないAdobeが本気で開発したUIデザインツールです。リリース当初はついにAdobeからUIデザインツールが出たと盛り上がりました。

XDは他のAdobe製ツールと違い、非常に軽量でシンプルなUIになっており、「いろんな機能があるけど使いこなすのは難しい！」というAdobeツールのイメージが覆されました。
リリース当初はSketchにはないプロトタイプ機能があり、Sketchとの差別化を図っていました。（現在ではSketchでもプロトタイプ機能があります。）

Adobe製ということでIllustratorやPhotoshopとの連携がスムーズで、Creative Cloud（Adobe製品を使える月額制のサービス）に加入している方は導入のハードルが低いのでおすすめです。また、XD単体ではなんと無料で使用することができます。
弊社では一部のプロジェクトにXDを使用しています。

Figma

ブラウザ上で起動でき、複数人で作業ができるデザインツールとしてUIデザインツール界に革命を起こしたツールです。
これまでのデザインツールというとデザインファイルは作業者のローカルファイルとして保存され、共通サーバーなどで管理するのが一般的でしたが、Figmaではローカルファイルの概念がなく、全てクラウド上に保存され、まるでGoogleスプレッドシードを編集するかのように複数人でデザイン作業が行えるようになりました。
これにより、「どのファイルが最新のものかわからない」、「デザインのマージ作業が大変」といったデザイナーが頭を抱えていた夜しか眠れなかった問題もすべて解決されました。

またSketchはMac版しかなくWindowsユーザーはデザイン作業の確認も出来ませんが、FigmaはWebベースのアプリケーションのため、URLさえ知っていればどんなデバイスでも確認できるので、共有が非常にスムーズに行えます。

ただオンライン上での作業が前提なので、基本的にはインターネット環境がないとデザインが行えない点、またローカルファイルの概念がないので、ファイルとして納品しなければならないプロジェクトでは少し扱いが難しいという点はデメリットになるかもしれません。
（一応オフラインで作業することが出来ますが、主流なやり方ではないです）
弊社では現在最も使用しているUIデザインツールです。

InVision Studio

画像共有、プロトタイプツールとして有名なInvisionからリリースされた本格的なUIデザイン・プロトタイピングツールがInVision Studioです。

高度なインタラクションの設定が行えるものとして話題になりました。実装前の段階で細かいインタラクションの検証を行いたい場合や、デザイナーの想定するアニメーションを忠実に可視化したい場合はおすすめのツールです。
弊社ではInVision自体はよく使うツールですが、このStudioはまだプロジェクトで使用したことがありません。今後の伸びに期待。

FramerX

コード（React）を書きながらデザインができるというかなり独自路線のデザインツールです。もちろんコーディングが出来ない方でも使用できるツールですが、細かいインタラクションやアニメーションは実装した方が早いというクールな凄腕デザイナーにはとてもマッチするツールだと思います。

こちらのツールは個人的にとても注目していたツールなのですが、残念ながら私の周りでは使用しているという声をあまり聞きません。悲しい。コードを書けるという点が敷居が高いのでしょうか（書かなくてもいいんですけどね）
とにかくコードを書けるUIデザイナー、デザインができるエンジニア、または両者が密接に関わる現場では活躍しそうなデザインツールです。

以上が私の独断で選んだ5大UIデザインツールでした。
現状はSketch, XD, Figmaが3強なので、迷ったらその3つから選べば問題ないと思います。

で、何を選べばいい？

結局何を選ぶのという話ですが、まずツールを選定する上で「最終アウトプットは何か？」というところを考えてみましょう。印刷物なのかデジタルなのか、コンテンツはキャラクターデザインなのかWebサイトなのか。それによって適したデザインツールが異なります。あなたはどのようなデザインをしたいのかということです。

残念ながらすべての状況に対応できる万能なツールはありません。正確に言うとやろうと思えばできるのですが、非常に効率が悪くなります。
デザインツールはデザイン作業の効率を上げるためのものなので、やはり用途に応じて使い分ける方が無難です。

アウトプットのイメージが湧いている方は以下の選び方で大きく間違えることはないと思います。

- イラスト制作、ロゴ制作したい→Illustrator
- 写真レタッチ&バナー制作したい→Photoshop
- Webサイト、アプリデザインしたい→Sketch, XD, Figma

なんでもいいからとりあえず使ってみましょう

自分がデザインするものがどんなものになるかわからない、色々なアウトプットをしたいという方にはとりあえず無料で使えるFigmaかXDからデザインツールに触れてみましょう。デザインツールを使うためだけにAdobeに数万から数十万払わなければいけなかった時代と比べると、こんなにいい時代はありません。

また使っている中で、ツールの向き不向きが細かい点でわかってくると思います。
デザインツールはその名の通り道具でしかありません。その道具を使って何を作るのかが最も重要になってきます。とにかくたくさん作る。それだけ。

以上デザインツールのお話でした。デザインツールは種類が多くややこしいので少しでも初学者の参考になればと思い記事を書かせていただきました。

アジケではデザインツールの選定から、デザインプロセスのご相談等もさせていただきます。どんな些細なことでもお気軽にご相談ください。
また一緒に働いてくれる方も、興味を持って頂いた方はぜひご連絡ください。(採用サイトはこちら)
ありがとうございました。