2023年UIデザインツール(プロトタイピングツール)の料金・機能や特徴の比較

 

こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。

 

今回は、UIデザインツールの機能や
料金等を比較してまとめてみました。

 

UIデザインツール

はじめにUIデザインツールとは何か
少しだけ説明しておこうと思います。

 

デザインツールと一言に言っても
デザイン分野は広くツールも多種多様。

 

その中でUIデザインツールと言うのは、
一般的にアプリ・Webサービスなどの
ユーザーインターフェイス (UI) 制作に
特化したデザインツールを意味します。

 

もちろんUIに特化したツールでなくても
デザインの制作をすることは可能ですが、

 

UIデザインツールには多くのUIに便利な
機能が整っているものがほとんどなので
UIデザイナーなどを目指すなら積極的に
利用することに越したことはないですね。

 

スポンサーリンク

UIデザインツールの料金(価格)・特徴比較

「UIデザインツールの比較表」

※ 1 Windows環境でのツール利用可能かの有無。
※ どれも無料プランはありますが、機能や期限に制限あり、
デザインを本格的にしていくなら有料版の購入がおすすめ。
※ Illustrator/ PhotoshopはUIデザインに特化したツールではないが、
UIデザイン制作ができない訳ではないので一応比較表に入れている。
※ Illustratorの料金は、学生・教員なら最安値¥,1980/月

 

気になるポイントを比較して見ると
このような感じになりますかね。

 

また、ぼくの周りのデザイナーさん達などに
UIデザインでよく使っているツールを聞くと
SketchとAdobe XDのどちらかの利用率が、
約8〜9割を占めていてこの二つが特に人気。

 

(個人のデザイナーさんが多いので
正確なデータとは言い切れませんが、
ある程度参考になるのではないかと。)

 

① Sketch (スケッチ)

 

Sketchは、UIデザインツールの中でも
人気でかつ利用者もかなり多いツール。

 

Adobe XDやFigmaがリリースする前から
UIデザインツールのポジションを確立し、
Webデザインやアプリの制作のIT企業の
現場で利用され続けているツールの一つ。

 

 

Sketch (スケッチ)

 

② Adobe XD (Experience Design)

 

Adobe XDは、Adobe社が提供する
UI/UXデザインツールになります。
(プロトタイプ・共同作業ツール)

 

Adobeのツール (ソフト) と言えば
IllustratorやPhotoshopなどの方が
実際のところ有名だとは思いますが、

 

デザインの初心者にとっては使いやすい
UI/UXに特化したデザインツールとして、
知名度も徐々に最近は上がってきています。

 

 

「Adobe XDの料金プラン表」(2020年11月現在)

※1 学生および教職員向けのCreative Cloudコンプリートプランは
通常料金より65%offで¥1,980になる。
※2 Adobe DX 以外の Photoshop、Illustrator、InDesign などの
20を超える数のクリエイティブデスクトップおよびモバイルアプリ。
※ CC ライブラリ ＝ Creative Cloud ライブラリ
※ 参考 : 「公式サイトのAdobe XDプラン比較ページ」

 

Adobe XD (Experience Design)

 

③ Figma (フィグマ)

 

Figmaは、オンライン上で利用できる
便利なUIデザインツールです。

 

Adobe XD等と同じく無料プランが有り、
UI/UXデザインツールをお金をかけずに
利用したい人におすすめのものの一つ。

 

 

「Figmaの料金プラン表」(2020年11月現在)

※1 プラスαの機能として、無制限のチーム数、デザインシステム管理、
高度な権限管理、シグナルサイン等の多くの機能がある。
※ 参考:「公式サイトのPricingページ」

 

Figma (フィグマ)

 

④ Framer (フレーマー)

 

Framerとは、元々プロトタイプツールで
2017年のアップデートでデザイン系の
機能も追加されたツールの1つになります。

 

 

Framer (フレーマー)

 

⑤ InVision Studio (インビジョン スタジオ)

 

InVision Studioは、
有名なプロトタイピングツールを提供する
「InVision」が2018年1月にリリースした
最近、話題のUIデザインツールになります。

 

 

InVision Studio (インビジョン スタジオ)

 

⑥ Adobe Illustrator/Photoshop

via  blogs.adobe.com

Adobe IllustratorとPhotoshopは、
世界的に有名なデザインツール。

 

UI/UXデザインに特化したツールと
言われると少し違ってくるのですが、
UIデザインの制作などが絶対できない
わけではないので一応載せています。

 

UIデザインの制作には、UIデザインに
特化したツールを利用した方が効率的。

 

 

Adobe Illsutrator

Adobe Photoshop

 

なお、Adobeのデザインツールを
お買い得に購入する方法は次の記事を参考に。

 

⑦ STUDIO (スタジオ)

 

STUDIOは、無料から使える国内産の
UIデザイン (Webサイト作成) ツール。

 

2018年にリリースされたばかりで、
まだ他のUIデザインツールのように
馴染みはないですが注目すべきもの。

 

一番驚きなのはSTUDIO内で作成した
Webデザインをそのままコードなしで
公開できてしまうということですね。

 

 

「STUDIOの料金プラン表」(2020年12月現在)

※ Growプランは2019年5月現在準備中らしいです。
※ 参考:「公式サイトのPricingページ」

 

STUDIO (スタジオ)

 

UIデザインツールおすすめは?

「特におすすめのUIデザインツール」

※ Sketchは、Windowsで利用できない。

 

今回、紹介したどのUIデザインツールも
機能に優れ素晴らしいものになりますが、

 

「UIデザイン」だけに注目してみると
初心者からプロでも使いやすくて人気な
Sketch・Adobe XDが特におすすめです。

 

チームでの制作だと、オンライン上での
リアルタイム共有機能があるFigmaも
最近は需要が増えているようにも思えます。

 

また、コードが苦手という方は、
UIデザインツールのSTUDIOの利用もあり。

 

最後に

UIデザイン (プロトタイピング) ツールは、
近年次々に多くの新しいものが公開され
アップデートも頻繁に行われています。

 

SketchやAdobe XDよりも更に便利な
機能を搭載したUIデザインツールが、
急に出てくる可能性も否定できませんね。

 

ですが、色んなUIデザインツールの中で、
自分が触りやすいものを探して見下さい。

 

また、その他のUIデザイン関連記事は、
こちらにまとめています。

 

なお、下記事でも他のデザイン系ソフトや
お絵描きソフト・アプリをまとめてるので、
是非、参考にしてみて下さいね。