【無料あり】プロトタイピングツールおすすめ9選！利用方法や実現できることも解説

プロトタイピングツールとは、プロトタイプ（Webサイトやアプリなどの試作版）の作成で、UI・UXをブラッシュアップできるツールのことです。

開発者やユーザーからのフィードバックを得られるため、Webサイトやアプリの欠陥を事前に改善できます。

本記事では、おすすめのプロタイピングツールを紹介します。無料で利用できるツールもあるため、参考にしてください。

プロトタイピングとは？

プロトタイピングとは、企業がWEBアプリ・サイトの試作版を、早い段階から試作する開発手法です。近年はWEBサービス制作工程の一部となっており、ユーザーの声が不可欠となるUI・UXデザインのブラッシュアップに利用されます。

このプロトタイピングを実施するツールが、プロトタイピングツールです。黎明期は海外産ツールが日本で利用されていましたが、近年は「Prott」を始めとする日本産ツールも注目されています。

プロトタイピングツールで再現できること

プロトタイピングツールで再現できる要素として、画面のUI、画面遷移、アニメーションの3種類が存在します。一つの要素に特化したツール、全ての要素をまんべんなく再現できるツールの2種類に分かれるため、慎重に選定しましょう。

画面のUI

画面上のUI、すなわちデザインやフォントといった、ユーザーがWEBサービスで実際に目にする全ての部分をプロトタイピングツールで再現できます。優れたUIはUX体験に大きな影響を及ぼし、サービスの好感度や満足度を効果的に高めるため、公開前のブラッシュアップが欠かせません。そこで、プロトタイピングツールでUIを再現し、ユーザーや開発者によるチェックを行い、課題改善を行う必要があります。

画面遷移

業務やシステム操作によって変動する、画面の位置づけや流れを表した画面遷移も、プロトタイピングツールで再現できます。WEBサイト・アプリの流れや操作フローを確認できるため、サービスの全体像を掴みやすくなるだけでなく、不要な画面の削除など画面設計の最適化も可能です。手書きで画面遷移図を作成する場合もありますが、プロトタイピングツールを利用すれば、より効率的に作成できます。画面遷移チェックを専門とするプロトタイピングツールは、トラジション型と呼ばれています。

アニメーション

WEBサイト・アプリ画面内の細かなアニメーションやモーションは、プロトタイピングツールを利用してチェックできます。コーディングを利用して凝ったアニメーションを作成し、ユーザーを楽しませる仕掛けを設けることもできます。アニメーションチェックを専門とするプロトタイピングツールは「インタラクション型」と呼ばれており、デザイナー向けにコーディングが不要なサービスも存在します。

おすすめのプロトタイピングツール9選

WEBサービス開発に便利なプロトタイピングツールですが、近年はさまざまなツールが登場しており、選択に悩む場面も珍しくありません。おすすめツール10選を紹介するので、比較して導入するツールを決定しましょう。

【比較一覧】おすすめのプロトタイピングツール

Prott（トランジション型）

https://prottapp.com/ja/plans/

Goodpatchという日本企業によって提供されている、日本語UIのプロトタイピングツールです。画面遷移をチェックできるトラジション型で、コメント機能、デザイン一覧をダウンロードする機能、プレゼン機能といった便利機能も多数搭載されています。作成したプロトタイプは、メール・URL・QRコードを利用して、メンバーへ容易に共有可能です。有料版を導入すれば、ワイヤーフレームの作成も可能となります。

料金形態:フリープラン(1ユーザー/無料)、スタータープラン(1ユーザー/月額1,900円)、プロプラン(1ユーザー/3,900円)、チームプラン(2ユーザー/月額7,400円)、エンタープライズプラン(15ユーザー以上/要相談)が利用できます。

Marvel（トラジション型）

https://marvelapp.com/pricing

海外で多くの支持を集めているプロトタイピングツールで、Prottと構造は似ています。作成したプロトタイプをブラウザ、モバイル、リアルタイムなどあらゆる場面で共有可能です。LiveShareにより、ラベル付きポインターを備えたリアルタイム設計会議でプロトタイプを提示できます。プロトタイプをさまざまなサイズでプレビューする機能やプレゼンテーションで役立つモバイルスキンも備わっており、共同作業のしやすさに特化しているのが特徴です。

料金形態:フリープラン(1プロトタイプ/無料)、スタータープラン(3プロトタイプ/月額15＄)、プロフェッショナルプラン(プロトタイプ無制限/月額25＄)、プラン(プロトタイプ無制限/月額99＄)、エンタープライズプラン(プロトタイプ無制限/要相談)が利用できます。

Sketch（トラジション型）

https://www.sketch.com

デザインツールとプロトタイピングツールが一体化となっており、作成・管理・修正がスムーズに行えます。特化したツールと比べ多少クオリティは落ちますが、プラグインを導入すればインタラクションへの対応も可能です。作成したプロトタイプは、URLを生成して簡単に共有できます。「Prott」や「Marvel」など多くのプロトタイピングツールが、Sketchで作成したデザインと連携可能です。利用するシステムを一本化し、作業効率化を成し遂げたい企業や個人におすすめといえます。

料金形態:インディビデュアルプラン(1ユーザー/年間99＄一括払い)、チームプラン(ユーザー無制限/月額9＄)が用意されています。

UX pin（トランジション型）

https://www.uxpin.com/

UXデザインに必要な機能を多数備えたインタラクション型ツールです。パソコン、iPhone、androidアプリに対応した各種素材がライブラリに用意されており、プロトタイプを簡単に作れます。非デザイナーでもワイヤーフレームを作成できるLibraries、多様なアニメーションを設定できるNew interaction、プロセス管理ができるProject statusなどの機能を利用し、多くのデザイン作業をUX pin単体で遂行可能です。

料金体系:ベーシックプラン(月額19＄)、アドバンスドプラン(月額29＄)、カスタムプラン(要相談)が存在し、それぞれ無料トライアルを体験できます。

Origami Studio（インタラクション型）

https://origami.design/

Facebook社が開発し、同社のデザイナーが業務でも用いているプロトタイピングツールです。アニメーションに関連するトリガーや表現効果を設定できる「パッチ」が豊富なため、多彩で複雑な動きをするプロトタイプも作成できます。iOSやAndroid用アプリをダウンロードすれば、パソコンで作成したプロトタイプをスマートフォンでレビュー可能です。Mac OSでのみ動作しますが、有料プランはなく無料で利用できます。

料金体系:無料

Framer（インタラクション型）

https://www.framer.com/

インタラクションデザイン向けのプロトタイピングツールで、マルチプレイヤー編集・簡単な共有・インラインコメントといったチームコラボレーション機能を多数備えています。また、javascriptのフレームワークの１つである「React」に対応しており、知識があるエンジニアであれば効率よくプロトタイプが作成可能です。よって、Reactに熟知しているフロントエンジニアの利用に適しています。

料金形態:フリープラン(3プロジェクト/無料)、スタータープラン(プロジェクト無制限/月額12＄)、プロプラン(プロジェクト無制限/月額20＄)、カスタムプラン(プロジェクト無制限/要相談)、が利用できます。

ProtoPie（複合型）

https://www.protopie.io/

トラジション型のような画面遷移、インタラクション型のようなアニメーションを両方再現できる複合型プロトタイピングツールです。直感的なインターフェースにより、操作難易度も低くなっています。オブジェクト、トリガー、レスポンスという3つから成るインタラクション理念により、実際のプロダクトに限りなく近いプロトタイプを作成可能です。世界中のクリエイターがサンプルを公開しており、優れたデザインからヒントを得られます。

料金体系:インディビデュアルプラン(月額11＄)、チームプラン(月額42＄)、エンタープライズプラン(要相談)を利用できます。

Flinto（複合型）

https://www.flinto.com/

パソコンとスマートフォン(スマートフォンはMac OSのみ)で編集できるプロトタイピングツールです。3D表現、スクロールアニメーション、10以上のジェスチャーなどインタラクションデザインに長けていますが、シンプルな画面遷移デザインにも対応し、完成版に近いプロトタイプを作成可能できます。デザイナーの利用を前提としているため、プログラムの知識やスキルは不要となっており、直感的にイメージを構築可能です。

料金形態:無料体験版(14日間利用可能)、有料版(1ライセンス99＄)が存在します。

Adobe XD（トランジション型）

https://www.adobe.com/jp/products/xd.html

さまざまなクリエイティブツールを提供しているAdode社が開発したプロトタイピングツールです。画面遷移、インタラクション、ワイヤーフレームをオールインワンで作成できる、動作が軽いといった特徴があります。Adobe社の製品とショートカットが共通化されており、Adobeツールの操作に慣れている方なら、簡単に使いこなせます。共有とレビュー機能も充実しており、プロトタイプのブラッシュアップに要する時間を短縮可能です。

料金形態:スタータープラン(1プロトタイプ/無料)、単体プラン(プロトタイプ無制限/月額1,180円)、Creative Cloudコンプリートプラン(プロトタイプ無制限/月額5,680円/20以上のCreative Cloudアプリと併用可能)が存在します。

まとめ

今回はUI・UXデザインに欠かせないプロトタイピングツールについて紹介しました。UX体験が重要視されているWEBアプリ・サイトのブラッシュアップに欠かせない存在であるため、UXデザインに関連する業務に重視している方は、ぜひ導入して利用しましょう。企業に導入する際は、複数サービスの無料体験版を比較し、必要な機能を備えた最適なサービスを選択してください。

執筆者：ヒトノート編集部

株式会社ヒトノテのオウンドメディア、WEBマーケティングの学習帳「ヒトノート -Hito note-」の編集部。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。