UXチームのUIデザイナーとしてオススメデザインツール10選

UXの仕事を始めた時、私はUIデザイナーとしてどんなソフトウェアを使うのか迷っていました。デザインツールの選択は、デザインに関わる分野で活躍されている方々にとっても、これからキャリアスタートを考えられている方々にとっても一番最初の重要なステップになると思われます。私が利用したツールを含めご紹介したいと思います。
（*2020年10月21日更新）

初心者の場合：

• どのツールから使い始めるとわかりやすいのか
• どんなツールがすぐに手に入りやすいのか
• デザインツールの費用はいくらなのか
• 実用性があるのはどのツールなのか
• どんな場面で使用するのか

経験を持つデザイナー:

• もっと使いやすいツールが欲しい
• チームワークの機能が欲しい
• 素材やプラグインが不足しているので、仕事が進めない
• 今流行のツール等を知りたい

今回は、最新のおすすめデザインツールについてピクアップしました。機能性に優れた10個のデザインソフトについてお勧めします。ぜひ、活用してみてください★。

【URL】

Adobe XD

【価格】

【利用環境】

 ・Mac：◎
 ・Win：◎
 ・Linux：×
 ・タブレット：×

【特徴】

ワンストップUX/UI設計プラットフォームで、この制品の上でスマホアプリケーション、WEBデザインとプロトタイピングを行うことができます。
操作は簡単です。インタフェースのデザインに特化したこのような機能は、かなりシンプル且つ簡単です。ソフトウェアに触れていなくても,基本機能は初心者にとっても使いにくいものではありません。

【オススメポイント】

 ・多くのプラグインが支援されています。
 ・使いやすい
 ・Adobeの他のソフトと連携できます。
 ・共有、コメント機能が標準搭載されています。

【初心者デザイナー向けプラン】

-　作業性が直感的に使用できるくらいに快適であり大量のプラグインも対応されています。プラグインのインストールも簡単であり、チュートリアルも見つけやすいため非常に便利なツールです。

【経験デザイナー向けプラン】

-　多くのプラグインが対応されているため、業務の作業効率が上がることができます。AI/PS/Adobe After Effectsとの連携もできます。

初心者デザイナー向け：★★★★★

経験デザイナー向け：★★★★★

【URL】

Sketch

【価格】

【利用環境】

 ・Mac：◎
 ・Win：×
 ・Linux：×
 ・タブレット：×

【特徴】

Sketchは専用のUI設計ツールで、プロトタイプデザインの作成等では非常に有効的なツールです。Sketchは長年macOSシステムにしか対応していなかったため、初期購入時にはMacBook proやiMacなどを使うことを推奨するデザイナーが多かったです。ベクトル描画がsketchソフトウェアの機能においてはXDよりも豊富な為より効率的な設計を可能としています。

【オススメポイント】

 ・バージョン管理とマルチプレイヤーデザインという機能が搭載されています。
 ・プラグインが豊富なため
 ・ツールバーが充実しています。

【初心者デザイナー向けプラン】

-　個人：＄99（買い切り）：MACをお持ちの方が、Sketchを試してみてください。動きが軽快であり、学習コストも低いです。

【経験デザイナー向けプラン】

-　チーム＄9/月（99ドル/年間）：コーダーとの連携がしやすい。シンボルやカラーパレットの管理が便利です。

初心者デザイナー向け：★★★★☆

経験デザイナー向け：★★★★★

【URL】

Invision Studio

【価格】

【利用環境】

 ・オンラインWeb：◎
 ・Mac：×
 ・Win：×
 ・Linux：×
 ・タブレット：×

【特徴】

InvisionはWebデザインのUI/UXでプロトタイピングを複数のプロジェクトチームメンバーで作成したり確認できるツールです。Sketchで利用している機能の一部を代替することが可能なのも特徴の一つです。Invisionは主にPrincipeに代わるアニメーションのインタラクティブ機能が搭載されています。1人称ではなくチームで効果的に作業ができるツールとして日本よりも海外でよく使われているプロトタイピングツールの一つです。

【オススメポイント】

 ・どこでも使えます。
 ・優れたLIVE SHARE機能
 ・ユーザーテストが行えます
 ・Sketchと連携できます

【初心者デザイナー向けプラン】

• 個人無料：使いやすいし、簡単にプロトタイプを作成できます。

【経験デザイナー向けプラン】

チームのメンバーでInVisionに集合し、リアルタイムでのコミュニケーションを取りながらデザインをすれば、作業効率をあげることができます。また簡単にユーザーテストを行うことができるので、ユーザーの目線で、自分のものを検討することもできます。プロジェクトの進捗がわかりやすいです。

初心者デザイナー向け：★★★☆☆

経験デザイナー向け：★★★★☆

【URL】

Figma

【価格】

【利用環境】

 ・ オンラインWeb：◎
 ・Mac：×
 ・Win：×
 ・Linux：×
 ・タブレット：×

【特徴】

FigmaはブラウザベースのコラボレーションUI設計ツールであり、発売以来、UIデザイナーに愛用されています。ファイルは同期する必要がなくどのパソコンからでもアクセスできます。デザイン原稿ファイルを常に最新状態にでき強力なオンライン・コラボレーション機能を備えており、1つのファイルを同時に処理することで、画面を共有することなく、ファイルを一緒に見ることができ、誰でもデザイン原稿にコメントすることができます。こちらもビジネス目線で効果的なツールの一つです。

【オススメポイント】

 ・使いやすい
 ・作成や共有が速い
 ・無料
 ・共同編集機能とコメント機能が強い

【初心者デザイナー向けプラン】

-　個人無料：費用がかかりませんし、プロトタイプ機能もついています。学習をしやす、どこでも使えます。

【経験デザイナー向けプラン】

-　企業：＄45/月：もしデザイナーとエンジニアの共有ファイルと連携のプロセスを向上させたいのであれば、このプランは非常に良い選択です。

初心者デザイナー向け：★★★★☆

経験デザイナー向け：★★★★★

【URL】

Framer X

【価格】

【利用環境】

 ・オンラインWeb：◎
 ・Mac：×
 ・Win：×
 ・Linux：×
 ・タブレット：×

【特徴】

Framer Xはアイコンや複雑なイラストの作成に必要な機能の多くを直感的に操作することができます。キャンバスを引き伸ばしたときに自動レイアウトをサポートすることもできます。コンポーネントストアがあり、インタラクションシステムからアイコンまで豊富なデザインリソースを見つけるや購入することもできます。また、自身のデザインを共有することやストアにリリースすることもできます。また、Framer Xは2つの方法でコンポーネントを作成することが可能です。
　1.デザイン（ビジュアル）領域からのデザイン作成
　2.コードからのデザイン作成
自身の得意分野からのデザインへのアプローチが可能なツールとして、デザイナーだけではなくプログラマーからデザインの勉強をすることも行いやすいツールです。

【オススメポイント】

 ・コンポーネントのカスタマイズ
 ・スクロールやリンクなどを自動でコーディング
 ・レイアウト構築
 ・コンポーネントストア

【初心者デザイナー向けプラン】

-　個人無料：コードがある程度読めるなら、このツールをお勧めします。個人版無料ので、コーディングとデザインの能力を同時に高めるために使うことができます。

【経験デザイナー向けプラン】

コーディングできるデザイナーに対して、このソフトウェアはあなたのデザイン作品をより強力にすることができます。もしコーディングについてよく知らないならば、このソフトウェアはあなたに設計の過程の中でゆっくりとコーディングの知識を理解させ、もっと多くの知識の含有量を高めることができます。

初心者デザイナー向け：★★★★☆

経験デザイナー向け：★★★★★

【URL】

Adobe Photoshop

【価格】

【利用環境】

 ・Mac：◎
 ・Win：◎
 ・Linux：×
 ・タブレット：iPad

【特徴】

PSは最も広く知られている画像処理や描画ツールです。ブラシの種類がたくさんあり、強力なプラグイン機能もおサポートしています。フィルタプラグもたくさんあり、重宝されています。中でもショートカット機能が豊富な為仕事効率化にもつながります。

【オススメポイント】

 ・Adobe IllustratorとPSの組み合わせ作業も強力であり, Adobe Illustratorファイルは PSで直に接開くことができ、ツールの書き換えの手間が省けます。
 ・初心者の方にとって、チュートリアルを探しやすいところが魅力的です。
 ・経験者に対して、PSは毎年新しいバージョンをリリースし、より多くの機能を強化します。

【初心者デザイナー向けプラン】

-　フォトプランやPS単体プラン：フォトプランやPS単体プランでまずは機能練習等を行うことをお勧めします。

【経験デザイナー向けプラン】

-　Adobe中での全部のソフトが使えます、またどのPCからでもアクセスできます。

初心者デザイナー向け：★★★★★

経験デザイナー向け：★★★★★

【URL】

Adobe Illustrator

【価格】

【利用環境】

 ・Mac：◎
 ・Win：◎
 ・Linux：×
 ・タブレット：iPad

【特徴】

AIは非常に良いベクトル図形処理ツールで「印刷出版・ポスター書籍の組版・専門のイラスト・マルチメディア画像処理・インターネットのWEBサイト制作」等様々な分野で応用が利くツールであり分野に特化した強力なプラグインがあることでも日本では利用者が非常に多いツールです。また、PSと同じく、広く利用されているツールであるため、チュートリアルやリソースなどインターネット上で見つけやすいです。

*2020年10月21日、Adobe社は最新AI iPad版を発表されてましたが、初心者が使い方を熟知するには少し時間がかかるかもしれません。

【オススメポイント】

 ・ロゴやアイコンデザイン、また雑誌の表紙やページ、広告のデザイン・編集などもできます。
 ・図や表をキレイに並べるのはIllustratorのほうがオススメです。
 ・ベクトルデータはAIで作成できます。
 ・iPad対応できます

【初心者デザイナー向けプラン】

-　フォトプランやPS単体プラン：単体のツール練習に十分でコストも低いです。 AIに慣れたら、他のツール一緒に他の製品を追加することがオススメです。

【経験デザイナー向けプラン】

-　最新機能をすぐにかつ無料で利用できます。

初心者デザイナー向け：★★★★★

経験デザイナー向け：★★★★★

【URL】

Affinity Designer

【価格】

【利用環境】

 ・Mac：◎
 ・Win：◎
 ・Linux：×
 ・タブレット：iPad

【特徴】

ADはSerif (Europe) Ltdにより開発されたWindowsとmacOS用のベクトルグラフィックスデザインツールです。2015年には「Appleデザイン賞」を受賞しています。そのインタフェースはAIと比較すると直感的に操作できることもあり分かりやすいというデザイナーの声も多いです。インタフェースのビジュアルスタイルはPSに似ており、タッチパッドの操作をサポートし、タッチパッドのスクロールもサポートしています。

【オススメポイント】

 ・多くのレイヤがあるPSDファイルを開く処理もスムーズできます。
 ・Adobe Photoshopのようにピクセル（ラスター）も扱うことが可能なところです。
 ・操作性が高いのため、イラストなどの制作ができます。
 ・ベクターやピクセルも切り替えできます。

【初心者デザイナー向けプラン】

-　iPadでのプラン：買い切りで使えるので、費用が低いです。また、iPadはサイズに優　　れていて、外に出て練習しやすくなります。

【経験デザイナー向けプラン】

-　現在デザイナーが使用しているデバイスを購入することができます。

初心者デザイナー向け：★★★★☆

経験デザイナー向け：★★★★★

【URL】

GIMP

【価格】

【利用環境】

 ・Mac：◎
 ・Win：◎
 ・Linux：◎
 ・タブレット：×

【特徴】

GIMPはGNU Image Manipulation Program (GNU画像処理プログラム)の略であり、オープンソースの画像処理ソフトです。PSはwin / macのみですが、GIMPはそれ以外でも利用利用できるようにサポートされているのも特徴です、機能的や処理速度的にもGIMPとPSで大差はないなく図の修正での容易さがGIMPの利点です。但し印刷物の原稿作成時には、GIMPはシステム的な色彩管理が不足しているため、GIMPは印刷業界での利用は難しいツールです。

【オススメポイント】

 ・利用環境が全部対応されています。
 ・多くのプラグインがあります。
 ・写真加工が得意
 ・GIMPは「ファイル変換機能」や「SVGパスのインポート/エクスポート機能」なども備えています。

【初心者デザイナー向けプラン】

-　GIMPはPSの機能を大部分実現することができるが、練習に利用するだけであれば、より良い選択となります。

【経験デザイナー向けプラン】

-　PSのバックアップツールとして利用できます。異なる種類のプラグインのサポートを必要とするベテランデザイナーにとって。

初心者デザイナー向け：★★★★☆

経験デザイナー向け：★★★★☆

【URL】

Inkscape

【価格】

【利用環境】

 ・Mac：◎
 ・Win：◎
 ・Linux：◎
 ・タブレット：×

【特徴】

Inkscapeは、CorelDRAWやAIのような、WindowsやMac OS X、 Linux上で動作するベクトルマップ編集を専門とするツールです。オープンソースのフリーソフトな為「インターフェースの一貫性と使いやすさ」「ユーザビリティ向上」を優先事項として開発されています。Inkscapeでサポートされている一般的なインプットフォーマットはSVGですが、AI、PDFなどとの互換性があるのも使いやすいポイントです。

【オススメポイント】

 ・便利なキャンバス編集機能
 ・ドロー系ツールは、数値計算により図形を描画するので、拡大しても画像は荒くなりま
　せん。
 ・どんなシステムでも利用できます。

【初心者デザイナー向けプラン】

-　AIの機能の大部分をInkscapeで実現することができます、費用の負担もありません。毎日楽しく練習できます。

【経験デザイナー向けプラン】

-　さまざまなシステムをサポートしています、利用環境の制限はありません。そしてAI画像を開く必要があるときとても役に立ちます。

初心者デザイナー向け：★★★★☆

経験デザイナー向け：★★★☆☆

今回、お勧めした10個のデザインソフトの中で気になるツールは見つかりましたか。インターネットの発展に伴い、情報化が進み、デザイン業界でもスピーディーな対応が求められることが多くなってきました。今回ご紹介したツールを活用することができれば、高クオリティのデザインをスピーディーに形として表現できるため仕事の効率が格段によくなることでしょう。
エスペーログループのUX事業部でもご紹介したデザインソフトを使用しています。高品質なUI/UXに関する商品・システム・サービスの情報設計やデザインなどのご相談がある企業様やUXをプロジェクトに取り入れたいと思われている方は、エスペーログループのUX事業部までご気軽にご相談ください。