こんにちは、デザイナー・ブロガーの
ゆっきー（@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は、UIデザインツールの中でも
人気でかつ利用者もかなり多いツール。
Adobe XDやFigmaがリリースする前から
UIデザインツールのポジションを確立し、
Webデザインやアプリの制作のIT企業の
現場で利用され続けているツールの一つ。
| ツール名 | Sketch (スケッチ) |
| 開発元 | Bogemian Coding社 |
| 利用環境 | macOS |
| 料金 (価格) |
・$99/月 (1年間アップデート保証) ※1年後アップデートしなければライセン失効でなく、 以前のバージョンを使い続ける形になるので注意。) ・無料プラン１ヶ月有り |
| 入手方法 | 公式サイトからダウンロード |
| チュートリアル (基本操作) |
・Sketchついての書籍・ネット情報多数 ・Sketchのチューリアルの記事 |
| 特徴 | ・インターフェースがシンプル。 ・優れた機能や使いやすさから企業で使われる UIデザインツールとして圧倒的人気を誇る。 ・チュートリアルやデザイン素材あり。 ・書き出しの機能が簡単でかつ便利。 ・アートボードとページで画面管理が楽。 ・プラグインで機能追加や外部サービス連携可 (アニメーションの作成もできる。) ・高機能なシンボルやライブラリー ・Windowsでの利用ができない。 ・素材データが全てベクターデータ。 |
| その他 | ・GoogleのGalelryというツールと連携でき、 そこにアップロード・共有ができる。 ・Sketch用UIキット・デザイン素材の記事 |
Sketch (スケッチ)
② Adobe XD (Experience Design)
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 XDの書籍・本の記事 |
| 特徴 | ・Adobe CCのコンプリートプランに含まれ デザイナーの多くも利用しているツール。 ・動作もスムーズで他のAdobeツールのように ショートカットキーも使え効率的に作業可。 ・Illustrator/Photoshopとの連携に強い。 ・Sketchと違い無料利用の期間制限がない。 ・Windowsにも対応。 (WindowsユーザーのSketch代用ツール) |
| その他 |
「Adobe XDの料金プラン表」(2020年11月現在)
| 月額 料金 |
アクティブな共有 プロトタイプと デザインスペック |
クラウド ストレージ |
その他の サービス |
|
| スターター プラン |
無料 | 各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 (Experience Design)
③ 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の料金プラン表」(2020年11月現在)
| 月額 料金 |
ｴﾃﾞｨﾀ 編集者 |
ﾌﾟﾛ ｼﾞｪｸﾄ |
ﾊﾞｰｼﾞｮﾝ 管理 |
ﾌｧｲﾙ ｽﾄﾚｰｼﾞ |
その他 主要機能 |
|
| Starter プラン |
無料 | 2 | 3 | 30 | 無制限 | – |
| Professional プラン |
$12 | 無制限 | ・ﾁｰﾑﾗｲﾌﾞﾗﾘ ・ﾌﾟﾗｲﾍﾞｰﾄ ﾌﾟﾛｼﾞｪｸﾄ |
|||
| Organization プラン |
$45 | 無制限 | Professional プラン機能 プラスα ※1 |
|||
※1 プラスαの機能として、無制限のチーム数、デザインシステム管理、
高度な権限管理、シグナルサイン等の多くの機能がある。
※ 参考:「公式サイトのPricingページ」
Figma (フィグマ)
④ Framer (フレーマー)
Framerとは、元々プロトタイプツールで
2017年のアップデートでデザイン系の
機能も追加されたツールの1つになります。
| ツール名 | Framer (フレーマー) |
| 開発元 | Facebookの元メンバーが開発 |
| 利用環境 | macOS |
| 料金 (価格) |
・Individualプラン $12/月 ・Small Teamsプラン $79/月 「公式サイトのPricingページ」 |
| 入手方法 | 公式サイトから入手 |
| チュートリアル (基本操作) |
|
| 特徴 | ・プログラミングする感じでコードベースで プロトタイピングの作成が可能。 ・なめらかな動きあるアニメーションありの プロトタイプができる。 ・コンポーネントの自由性が高い。 ・他のデインツールとの連携インポート可能。 (Sketch、Photoshop、Figmaなど) ・画面レイアウトやパネル使用がSketchと類似 ・Reactベースでコード生成 ・プログラミングに触れたことがない人は 少し触りにくいかも? |
| その他 |
Framer (フレーマー)
⑤ InVision Studio (インビジョン スタジオ)
InVision Studioは、
有名なプロトタイピングツールを提供する
「InVision」が2018年1月にリリースした
最近、話題のUIデザインツールになります。
| ツール名 | InVision Studio (インビジョン スタジオ) |
| 開発元 | InVision |
| 利用環境 | オンラインWeb |
| 料金 (価格) |
・Starterプラン $15/月 ・Professionalプラン $25/月 無料プランも有り |
| 入手方法 | 公式サイトからダウンロード |
| チュートリアル (基本操作) |
|
| 特徴 | ・アニメーションの作成ができる。 (Sketchでもプラグインで作成は可能だが、 InVision Studioは標準機能としてある。) ・他のUIデザインツールではできないような 優れたプロトタイプを再現できてしまう。 |
| その他 |
InVision Studio (インビジョン スタジオ)
⑥ Adobe Illustrator/Photoshop
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についての 書籍・ネット情報も多数ある。 ・Illustratorの書籍・本の記事 ・Photoshopの書籍・本の記事 ・Illustratorのチュートリアルの記事 ・PhotoshopのLessonの記事 (未完成) |
| 特徴 | ・UI特化ツールというよりはデザインの オールラウンドツールにあたる。 ・UIデザイン制作で便利な機能は少ない。 ・高度なデザインの編集が可能である。 ・Photoshopの特徴の記事 |
| その他 | ・画像編集やイラスト・ロゴ作成が主なので UIデザインにはそこまでの機能はいらない。 ・Illustratorの勉強方法の記事 ・IllustratorとPhotoshopの比較記事 ・Illustratorの代用ツールの記事 ・Photoshopの代用ツールの記事 |
Adobe Illsutrator
Adobe Photoshop
なお、Adobeのデザインツールを
お買い得に購入する方法は次の記事を参考に。
⑦ 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の料金プラン表」(2020年12月現在)
| Designプラン | Publishプラン | Growプラン (準備中) | |
| 料金 | Free (無料)/月 | $9/月 | $27/月 |
| ｻｰﾋﾞｽ 内容 |
・ﾃﾞｻﾞｲﾝﾂｰﾙ 全機能 ・ﾘｱﾙﾀｲﾑﾗｲﾌﾞﾌﾟﾚﾋﾞｭｰ ・共同編集機能 ・無制限のﾁｰﾑﾒﾝﾊﾞｰ ・無制限のﾌﾟﾛｼﾞｪｸﾄ数 ・無制限のページ数 ・ｻﾌﾞﾄﾞﾒｲﾝ公開機能 |
・無料プラン全機能 |
・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デザインツールの中で、
自分が触りやすいものを探して見下さい。
また、その他のUIデザイン関連記事は、
こちらにまとめています。
なお、下記事でも他のデザイン系ソフトや
お絵描きソフト・アプリをまとめてるので、
是非、参考にしてみて下さいね。
