UXデザインを行う上で必ずと言ってよいほど大事な工程があります。それがプロトタイピング。
一昔前は画面仕様をパワーポイントで作成、印刷して紙芝居の様に見せたりしていましたよね。簡単なウェブサイトであればその方法でイメージできるかもしれませんが、アプリなど階層構造があるサービスは難しいです。
そんな時便利なのがプロトタイピングツール。簡単に作れるものから本格的なものまで様々です。
今回は実際に業務で使った経験を元に、おすすめのプロトタイピングツールを厳選してご紹介します！
※各ツールの値段がドルの場合は100円/1$で計算しています
目次
Figma｜職種またいで使えるのが本当に便利
Figmaは、ライトに使えるデザインツール。デザイン業務で使えるクオリティーのツールですが、特に便利なのがマルチデバイス対応していること。Mac / Windows アプリはもちろん、ブラウザでも直接作成することができるので、アプリを入れてない人へもURLで簡単に共有できます。
さらに便利なのがリアルタイム編集ができること。バージョン管理の概念がないので、チームでデザインする際も常に最新の状態で同時編集できます。
今の時期リモートが当たり前になりましたが、オンラインMTGしながらFigmaを開いて直接コメント編集できる、この操作性は本当に便利です。
プロトタイプ作成も非常に簡単。作成した要素を選んで遷移先と紐付けるだけ。遷移時のアニメーションも選べます。アプリの複雑な動きの表現は苦手ですが、Webサービスであればほぼ実装した状態と変わらないクオリティーのものが作れます。
詳細
| スターター | プロフェッショナル | 組織 | |
| 値段 | 無料 | 1,200円/編集者1人 | 4,500円/編集者1人 |
| 機能 | ・最大2人の編集者と3人のプロジェクト ・3つのプロジェクト ・30日間のバージョン履歴 ・最大2人の編集者 ・無制限のクラウドストレージ ・無制限の無料視聴者 | ・無制限のプロジェクト ・無制限のバージョン履歴 ・カスタムファイル/ユーザー権限 ・招待のみのプライベートプロジェクト ・共有可能なチームライブラリ | プロフェッショナル＋ ・組織全体の設計システム ・一元化されたチーム ・プライベートプラグイン ・プラグイン管理 ・共有フォント ・SSO +高度なセキュリティ ・デザインシステム分析 |
- 無料版：あり（無料でも実務で使えるレベルのものを作れます）
- 日本語：非対応
- デバイス：ブラウザ、Mac、Windows
- こんな人におすすめ：同時編集で効率よく進めたい
- サイト：https://www.figma.com/
Sketch｜外部サービス連携が豊富
SketchはMac専用のデザインツールです。Adobe XDが出るまではデザインツールと言えばSketch一強でした。（買い切りのみだった頃が懐かしい）
外部サービスとの連携が豊富で、やりたいことはほぼ全てプラグインで解決します。ファイル自体もデザインツールの中では軽い部類なので、大規模なサービスをデザインする場合に重宝します。
Sketchにもプロトタイピングツール機能がついています。プロトタイピング領域だとこれ、という特徴がないのが正直なところですが、アプリの遷移なども対応しているので基本はSketchだけでプロトタイプ作成できます。
Sketchはオフラインツールなのですが、Sketch Cloudを使うことでオンライン上でプロトタイプの確認を行うこともできます。
難易度ですが、Figmaは非デザイナーでも使いやすいのですが、Sketchはちょっと知識が無いと使うのに苦労するかもしれません。
詳細
| 個人向け | チーム向け | |
| 値段 | 9,900円/1回 | 900円/1人あたり月 |
| 機能 | ・Macアプリ払い切り Macアプリを使用して設計とプロトタイプを作成できます。 ・1年間のMacアプリのアップデート 新機能と改善点を最新の状態に保ちます。 ・クラウドを1年間利用可 すべてのドキュメントのストレージとバージョン履歴をクラウドワークスペースに保存できます。 ・パーソナルクラウドワークスペース フィードバックと開発者の引き継ぎがクラウドで簡単にできます。 | ・すべてのMacアプリへのアクセス 常に最新バージョンを取得することができます。 ・コラボレーションのための共有クラウドワークスペース チームとデザインを共有し、ゲストを呼び込み、ファイルを公開し、ドキュメントを簡単にロールバックします。 ・無制限のクラウドアクセス 閲覧者は、すべてのドキュメントを表示したり、メンションや通知について話し合ったりすることができます。 ・簡単なチーム管理 いつでもユーザーを追加または削除できます。 |
- 無料版：あり（30日間しかないので、課金前提で使うことになります。）
- 日本語：非対応
- デバイス：Mac
- こんな人におすすめ：大きいプロジェクトのプロトタイプを管理したい
- サイト：https://www.sketch.com/
Adobe XD｜レスポンシブデザインのプロトタイプは最強
デザインツールがSketch一強だった時代に突如現れたのがAdobe XD。SketchはMacしか使えない中、Windows対応、しかもAdobeアカウントを持っている方であればそのまま使えたので、多くのデザイナーがXDを使い始めました。小規模のデザインであれば無料プランでも十分なところも魅力。
個人的にSketchとより便利だと思うのが、レスポンシブデザインが考慮できること。デザインの段階で幅を可変にしたときにどの様な動きをするのか確認できますし、それをそのままプロトタイプとして反映できます。
マルチデバイス、マルチサイズに対応したデザインプロトタイプを作る場合におすすめです。
欠点をあげるなら、ファイルサイズが重い、ファイル分割しがちになります。サービス規模によってはファイル管理が大変になってしまいます。
詳細
| 無料プラン | 単体プラン | コンプリートプラン | |
| 値段 | 無料 | 1,180円/1人あたり月 | 5,680円/月 |
| 機能 | ・レイアウト、デザイン ・プロトタイピング、アニメーション ・共同作業 ・デザインシステム ・共有ドキュメントの数1 ・追加編集者の数1 | 無料プラン＋ ・共有ドキュメントの数無制限 ・追加編集者の数無制限 | XD＋ ・Photoshop、Illustrator、After Effectsなど、20以上のCreative Cloudアプリ |
- 無料版：あり（小規模デザインなら無料でいけちゃいます）
- 日本語：対応
- デバイス：Mac、Windows
- こんな人におすすめ：レスポンシブデザインや多少のアニメーションなどもプロトタイプで再現したい
- サイト：https://www.adobe.com/jp/products/xd.html
Adobe After Effects｜動きの表現にはもってこい
Adobe After Effectsは動きの表現に特化したデザインツールです。3D空間をデザインできるのですが、サービスデザインへの応用もできます。
実は弊社のコーポレートサイトページもAfter Effectsを使いました。背景の流れ星や物質の動きを表現、実際の動きを直感的にイメージしながらプロトタイピングを行いました。
動きのあるリッチなサービスでは利用したい所ですが、After Effects自体使いこなすのが非常に難しいです。
かっこよいサービスの動きを確認したい時はAfter Effectsがある、くらいで覚えておきましょう。
詳細
| 単体プラン | コンプリートプラン | |
| 値段 | 2,480円/1人あたり月 | 5,680円/月 |
| 機能 | ・テキストアニメーション ・ビジュアルエフェクト ・モーショングラフィックス ・ロトスコープ ・モーショントラッキング | After Effects＋ ・XD、Photoshop、Illustratorなど、20以上のCreative Cloudアプリ |
- 無料版：あり（7日間しかないので課金前提）
- 日本語：対応
- デバイス：Mac、Windows
- こんな人におすすめ：
- サイト：https://www.adobe.com/jp/products/aftereffects.html
Flinto｜インタラクション特化
Flintoはインタラクションに特化したデザインツールです。Sketchプラグインを出しているので、全体のUIデザインはSketch、画面単位のアニメーション/インタラクションはFlintoと使い分けるができます。
Flintoはかなり優秀で、作り込んだらネイティブアプリと全く変わらないクオリティのプロトタイプを作れます。SketchとFlinto 2つあれば動きの多いデザインでも大体作成可能です。
前職で、Flintoでプロトタイプを見せてもらったことがあるのですが、「もはやアプリじゃん！」と興奮したのを覚えています。
ただこれもAfter Effects同様、相当覚えるのが大変なので、自分で使うと言うよりは伝える手段でこんなのがあるよ、で覚えておけば大丈夫です。
詳細
| 有料プラン | |
| 値段 | 9,900円/1人あたり年 |
| 機能 | ・レイヤーデザイン ・リンク、ジェスチャー ・トランジション ・アニメーション ・プレビュー、共有 |
- 無料版：あり（30日なので課金前提）
- 日本語：非対応
- デバイス：Mac
- こんな人におすすめ：言葉じゃ伝わらないちょっとした「こんな感じ」を的確に伝えたい
- サイト：https://www.flinto.com/
Prott｜まずプロトタイプ始めるならこれ
Prottは日本製のプロトタイピングツール。手軽に作れる「ラピッドプロトタイピングツール」のカテゴリーに属しています。
ウェブ/アプリのパーツがテンプレートとして用意されているので、ドラッグ&ドロップで簡単にプロトタイプを作成することができます。
さらに、手書きのものを撮影するだけでプロトタイプを作成することもできるので、本当に簡単手軽にプロトタイプを作成できます。
「とりあえずプロトタイピング始めたい」という方には1番おすすめしたいツールです。サポートが日本語なのも安心ですよ。
詳細
| free | Starter | Pro | Team | Enterprise | |
| 値段 | 無料 | 1,900円/1人あたり月 | 3,900円/1人あたり月 | 7,400円/2人 月 | 要相談 |
| 機能 | ・1ユーザー ・1プロジェクト ・スクリーン無制限 ・レビュアー無制限 | ・1ユーザー ・3プロジェクト ・スクリーン無制限 ・レビュアー無制限 | ・1ユーザー ・プロジェクト無制限 ・スクリーン無制限 ・レビュアー無制限 ・ワイヤーフレーム機能 ・画面遷移図機能 | ・2ユーザー ・プロジェクト無制限 ・スクリーン無制限 ・レビュアー無制限 ・ワイヤーフレーム機能 ・画面遷移図機能 ・共同編集 | ・15ユーザー以上 ・プロジェクト無制限 ・スクリーン無制限 ・レビュアー無制限 ・ワイヤーフレーム機能 ・画面遷移図機能 ・共同編集 ・組織管理機能 ・グループ機能 |
- 無料版：あり（複数プロジェクト作成ができないので、作っては消して、であれば無料で使い続けられます）
- 日本語：対応
- デバイス：ブラウザ
- こんな人におすすめ：簡単にプロトタイプを作成したい、日本語サポートがついている
- サイト：https://prottapp.com/ja/
InVision｜多機能、安い、速い
ラピッドプロトタイピングツールに属すのがInVisionです。Prottに比べて多機能、値段も安いのが特徴。動作も非常に軽いので、100画面を越えても大丈夫です。大きいプロジェクトのプロトタイプを作成する場合などに重宝します。
ラピッドプロトタイピングツールの中では総合的に1番良いのですが、日本語対応していないのがちょっともったいないところ。言語の壁が大丈夫であれば強力なツールになるでしょう。
最近ではプロユースのためにInVision Studioもリリース。用途に合わせて使い分けることができます。（ただデザインツールのプロトタイピング機能拡充により、最近Invision Studioのことをあまり聞かなくなったような…余談）
詳細
| 無料プラン | 単体プラン | コンプリートプラン | |
| 値段 | 無料 | 1,180円/1人あたり月 | 5,680円/月 |
| 機能 | ・レイアウト、デザイン ・プロトタイピング、アニメーション ・共同作業 ・デザインシステム ・共有ドキュメントの数1 ・追加編集者の数1 | 無料プラン＋ ・共有ドキュメントの数無制限 ・追加編集者の数無制限 | XD＋ ・Photoshop、Illustrator、After Effectsなど、20以上のCreative Cloudアプリ |
- 無料版：あり（3人、3ドキュメントまで無料なので、無料で使える幅が広いです）
- 日本語：非対応
- デバイス：ブラウザ
- こんな人におすすめ：簡単にプロトタイプ作成できつつも、ちょっとこりたい
- サイト：https://www.invisionapp.com/
今回は実務で使った感想を元にプロトタイピングツールを紹介させていただきました。
個人的にこれ！というのを選ぶとするなら、2つ。
プロトタイピング作成に慣れていない、これから始めたいのであればProttがおすすめです。パワーポイントから一瞬で卒業することになると思います。
多少デザインツールに慣れているならFigma。Figmaの同時編集は本当に神すぎます。セブンデックスでは、デザイン、プロトタイプ作成以外にも、ブレストやロジックツリー作成など、UXデザイン全般で使っています。
多少ツールに慣れていたらと書きましたが1週間もすれば覚えられるので、Figmaを推したいと思います。
どのツールも無料期間があるので、記事を参考にぜひ一度使ってみてください。
UXUIデザイン支援資料
セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。
