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

スポンサーリンク
ui-design

こんにちは、美大卒・元アパレル店員の
ゆっきー(@elcielo_design)です。

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

UIデザインツール

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

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

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

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

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

スポンサーリンク

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

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

 ツール名  料金
 (価格)
 プロトタイプ
 作成
 シンボル
 機能
 プラグイン  Win 
 利用 ※1
 Sketch
 (スケッチ)
 $99
 無料プラン有
 ◯  ◎  ◯  ×
 Adobe XD
 (エックスディー)
 ¥1,180/月〜
 無料プラン有
 ◯  ◯  ×  ◯
 Figma
 (フィグマ)
 $12/月〜
 無料プラン有
 ◯  ◯  ×  ◯
 Framer
 (フレーマー)
 $12/月〜  ◯  ◯  ×  ×
 InVision
Studio
 $15/月〜
 無料プラン有
 ◎    ×  
 Illustrator
 Photoshop
 ¥2,480/月〜
 ¥980/月〜 
 ×      ◯
 STUDIO
 (スタジオ)
 $9/月〜
 無料プラン有
 ◯  ◯  ×  ◯

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

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

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

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

① Sketch (スケッチ)

sketch

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

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

 ツール名  Sketch (スケッチ)
 開発元  Bogemian Coding社
 利用環境  macOS
 料金 (価格)
$99/月 (1年間アップデート保証)
 ※1年後アップデートしなければライセン失効でなく、
 以前のバージョンを使い続ける形になるので注意。)
・無料プラン1ヶ月有り
 入手方法  公式サイトからダウンロード
 チュートリアル
 (基本操作)
・Sketchついての書籍・ネット情報多数
・チューリアルの記事 (準備中)
 特徴 ・インターフェースがシンプル。
・優れた機能や使いやすさから企業で使われる
 UIデザインツールとして圧倒的人気を誇る。
・チュートリアルやデザイン素材あり。
・書き出しの機能が簡単でかつ便利。
・アートボードとページで画面管理が楽。
・プラグインで機能追加や外部サービス連携可
 (アニメーションの作成もできる。)
・高機能なシンボルやライブラリー
・Windowsでの利用ができない。
・素材データが全てベクターデータ。
 その他 ・GoogleのGalelryというツールと連携でき、
 そこにアップロード・共有ができる。

Sketch (スケッチ)

Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork.

② Adobe XD (Experience Design)

adobe-xd

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

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

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

 ツール名  Adobe XD (Experience Design)
 開発元  アドビシステムズ株式会社
 利用環境  masOS・Windows
 料金 (価格)
・スタータープラン 無料
・単体プラン¥1,180/月 (税別)
・CCコンプリートプラン¥5,680/月 (税別)
 ※ 学生・教員版¥1,980/月
 入手方法  公式サイトからダウンロード
 チュートリアル
 (基本操作)
・Adobe XDについての書籍・ネット情報多数 
 特徴 ・Adobe CCのコンプリートプランに含まれ
 デザイナーの多くも利用しているツール。
・動作もスムーズで他のAdobeツールのように
 ショートカットキーも使え効率的に作業可。
・Illustrator/Photoshopとの連携に強い。
・Sketchと違い無料利用の期間制限がない。
・Windowsにも対応。
 (WindowsユーザーのSketch代用ツール)
 その他  

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

    月額
  料金
 アクティブな共有
 プロトタイプと
 デザインスペック
 クラウド
 ストレージ
 その他の
 サービス
 スターター
 プラン
 無料  各1  2GB ・Adobe Fonts
 無料プラン
・CCライブラリ
 単体
 プラン
 ¥1,180
 (税別)
 無制限  100GB ・Adobe Fonts
 Portfolioプラン
・CCライブラリ
 CC
コンプリート
 プラン
 ¥5,680
 (税別) 
 ※1
 無制限  100GB ・単体プランの
 サービス内容と
 20以上のCC ※2

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

Adobe XD

Adobe XD

Adobe Inc.無料posted withアプリーチ

Adobe XD (Experience Design)

Download Adobe XD CC free with the starter plan. XD is your UI/UX design solution for designing websites & mobile apps. Design, prototype, and share for free.

③ Figma (フィグマ)

figma

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

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

 ツール名  Figma (フィグマ)
 開発元  Dylan FieldとEvan Wallaceが共同開発
 利用環境  オンラインWeb
 料金 (価格)
・Starterプラン Free (無料)
・Professionalプラン $12/月
・Organizationプラン $45/月
 入手方法  公式サイトから入手
 チュートリアル
 (基本操作)
 
 特徴 ・オンライン上でのリアルタイム共有機能。
・Figmaはブラウザ上で動作するため、
 ソフトダウンロード・インストールが不要。
 (どこからでもWebでアクセスできる。)
・Chromebookでもデザインが可能。
・SketchやAdobe XD等からインポート可能
・チームでのデザイン作業もできる。
・作業の履歴を残せる。
 その他  ・有料プランもあるが1人で作業する分には
 無料でもある程度利用できると思う。

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

   月額
 料金
 エディタ 
 編集者
 プロ  
 ジェクト
 バージョン
 管理
 ファイル  
 ストレージ
 その他
 主要機能  
Starter
プラン
 無料  2   3  30  無制限  
Professional
プラン
 $12  無制限 ・チームライブラリ
・プライベート
  プロジェクト
Organization
プラン
 $45  無制限 Professional
プラン機能
プラスα ※1

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

Figma (フィグマ)

A better way to design. Design, prototype, and gather feedback all in one place with Figma.

スポンサーリンク

④ Framer (フレーマー)

framer

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

 ツール名  Framer (フレーマー)
 開発元  Facebookの元メンバーが開発
 利用環境  macOS
 料金 (価格)
・Individualプラン $12/月
・Small Teamsプラン $79/月
公式サイトのPricingページ
 入手方法  公式サイトから入手
 チュートリアル
 (基本操作)
 
 特徴 ・プログラミングする感じでコードベースで
 プロトタイピングの作成が可能。
・なめらかな動きあるアニメーションありの
プロトタイプができる。
・コンポーネントの自由性が高い。
・他のデインツールとの連携インポート可能。
 (Sketch、Photoshop、Figmaなど)
・画面レイアウトやパネル使用がSketchと類似
・Reactベースでコード生成
・プログラミングに触れたことがない人は
 少し触りにくいかも?
 その他  

Framer (フレーマー)

Bring your creative ideas to life with Framer X, the best tool for interactive design.

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

invision-studio

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

 ツール名  InVision Studio (インビジョン スタジオ)
 開発元  InVision
 利用環境  オンラインWeb
 料金 (価格)
・Starterプラン $15/月
・Professionalプラン $25/月
 無料プランも有り
 入手方法  公式サイトからダウンロード
 チュートリアル
 (基本操作)
 
 特徴 ・アニメーションの作成ができる。
 (Sketchでもプラグインで作成は可能だが、
 InVision Studioは標準機能としてある。)
・他のUIデザインツールではできないような
 優れたプロトタイプを再現できてしまう。
 その他  

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

'Built with a deep understanding of screen design, InVision Studio elevates your craft with rapid prototyping, animation, built-in design systems, and more.

⑥ Adobe Illustrator/Photoshop

adobe-illustrator-blog

via  blogs.adobe.com

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

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

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

 ツール名  Adobe Illustrator/Photoshop
 開発元  アドビシステムズ株式会社
 利用環境  masOS・Windows
 料金 (価格)
・フォトプラン¥980/月〜 (税別)
・単体プラン¥2,480/月〜 (税別)
・CCコンプリートプラン¥5,680/月〜 (税別)
 ※ 学生・教員版¥1,980/月
 入手方法  公式サイトからダウンロード
Photoshop購入の流れの記事
 チュートリアル
 (基本操作)
・IllustratorとPhotoshopについての
 書籍・ネット情報も多数ある。
Photoshopの書籍・本の記事
PhotoshopのLessonの記事 (未完成)
 特徴 ・UI特化ツールというよりはデザインの
 オールラウンドツールにあたる。
・UIデザイン制作で便利な機能は少ない。
・高度なデザインの編集が可能である。
Photoshopの特徴の記事
 その他 ・画像編集やイラスト・ロゴ作成が主なので
 UIデザインにはそこまでの機能はいらない。
Illustratorの勉強方法の記事
IllustratorとPhotoshopの比較記事
Illustratorの代用ツールの記事
Photoshopの代用ツールの記事

Adobe Illsutrator

Adobe Illustratorでロゴ、アイコン、スケッチ、タイポグラフィ、その他のベクターアートを作成。

Adobe Photoshop

Adobe Photoshopは最高品質の画像編集ソフトウェア。写真、画像、デザインの作成、編集が可能です。

⑦ STUDIO (スタジオ)

studio

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

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

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

 ツール名  STUDIO (スタジオ)
 開発元  STUDIO Inc.
 利用環境  オンラインWeb
 料金 (価格)
・Designプラン Free (無料)
・Publishプラン $9/月
・Growプラン $27/月 (準備中)
 入手方法  公式サイトから入手
 チュートリアル
 (基本操作)
チュートリアル記事 (公式)
・書籍・ネット情報はまだ少なめ。
 特徴 ・デザインから公開まで、コーディングなしで
 Webデザインを完成できる。
(独自ドメインで公開ももちろん可能。)
・スタイリッシュなインターフェイス
・コーディングの知識が必要ない。
・ボタン一つでWebサイト公開
・SketchやAdobe XDのx,y座標、高さと幅の
 調整でなくパディングやマージンでの制作。

 その他  ・具体的なサービスは下の表で見れます。

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

   Designプラン  Publishプラン  Growプラン (準備中)
 料金  Free (無料)/月  $9/月  $27/月
サービス
内容
・デザインツール 全機能
・リアルタイムライブプレビュー
・共同編集機能
・無制限のチームメンバー
・無制限のプロジェクト数
・無制限のページ数
・サブドメイン公開機能

・無料プラン全機能
・バナーの非表示
・独自ドメイン接続
・Appsの使用

・Publishプラン全機能
・ブログ機能 (SMC)
・プレミヤム分析機能
・バージョン管理機能

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

STUDIO (スタジオ)

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

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

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

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

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

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

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

最後に

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

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

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

関連記事

スポンサーリンク

シェアする