2018年最新版 無料で使えるプロトタイピングツールまとめ
こんにちは、ちーずです。
今回は、無料で使えるプロトタイピングツールを比較していきたいとおもいます！
- プロトタイピングツールとは？
- 簡単にプロトタイプが作れる日本製のプロトタイピングツール - Prott
- webサイトみたいにプロトタイプが作れる日本製のプロトタイピングツール - STUDIO
- チーム開発に特化しているプロトタイピングツール - InVision
- ユーザビリティ テストまで出来るプロトタイピングツール - Indigo Studio
プロトタイピングツールとは？
プロトタイピングツールって言葉はよく聞くけど、使ったことないしどんなことができるかよくわからない...
そんな人もいるとおもうので、まずはプロトタイピングツールってどんなもの？どんなことができるの？ってところを説明します。
そもそもプロトタイプって？
プロトタイプ(prototype)を日本語訳すると試作品です。
完成版を最初に全部つくってしまって、リリース後に欠陥に気付いたら改修するのがとっても大変ですよね？
そうならないためにもプロトタイプを作ることって大切なんです。
ちなみに、プロトタイプのメリットはこちらです。
検証ができる
プロトタイプをユーザーに使ってもらうことで、早い段階からユーザビリティテストやユーザーテストなどの検証を行うことができる。欠陥の早期発見 / 改善
プロトタイプを用いて検証を行うことで、バグや使いづらい面などのサービスの欠陥を早い段階から知ることができ、改善することができる。チーム間での認識のズレ解消
デザイナーとエンジニア間でも、デザイナーからしてなんかインタラクションが予想してたものと違う？！って感じのズレがよく発生しますよね。他にも営業や企画などチームが大きれば大きいほどそのようなズレが発生すると思います。それをプロトタイプをつくることでプロダクトに対しての共通認識をもつことができます。
プロトタイピングツールはどんなことができるの？
そんなプロトタイプが作れるツール、プロトタイピングツール。
実際何ができるかっていうのは、ツールごとに違います。
インタラクションの表現に力をいれているツールもあれば、UIもプロトタイピングツール上でつくれたり、それこそ簡単さを売りにしているツールもあります。
自分がプロトタイプを作る上での目的を明確化して、ツールを選ぶとよいでしょう。
それではプロトタイピングツールを紹介していきます！
今回は無料でも使えるツールに焦点を絞って紹介しますね。
簡単にプロトタイプが作れる日本製のプロトタイピングツール - Prott
Goodpatchという日本の会社が提供しているプロトタイピングツールです。 おそらく、プロトタイピングツールの中ではAdobe XD、inVisionに並ぶ知名度をもっていると思います。
Prottの特徴
- 日本製。
- webかスマホアプリで使える。
- 1プロジェクト無料。
- メアドで登録。
- 難易度 低め。
- 紙で書いたデザインを写真で撮ってプロトタイプを作れる。
- コンポーネントも充実しておりデザインができない人でもプロトタイプがつくれる。
- インタラクションも充実。
- URLでプロジェクトをシェアできる。
Prottの良いところ
Prottの良いところはとにかく簡単である面であると思います。
UIの設計から、遷移、インタラクションの設定など幅広い機能があるものの、どれもとてもわかりやすく簡単に使えるのが最大の特徴です。
また、簡単にプロトタイプが作れるため、早期にプロトタイプを用いて検証をしたい場合に使うことをオススメします。
インタラクションの細かい設定はできないため、インタラクションの検証を行う場合は他のツールを用いた方が良いかもしれませんね。
webサイトみたいにプロトタイプが作れる日本製のプロトタイピングツール - STUDIO
2016年に設立されたスタートアップの会社、STUDIO株式会社が提供するプロトタイピングツールです。
ちょっと特徴的だけど慣れたら一番早くプロトタイプを作成できそうなツールとなっております。
studioの特徴
- 日本製。
- web上で使える。
- facebookまたはメールアドレスで登録ができる。
- -全部無料- 正式版から有料プランも追加されました。
- コンポーネント充実。
- margin / paddingでレイアウトを調節するが、柔軟なレイアウトはできない。(web製作者向け)
- 難易度 ちょっと高め。
- インタラクションは充実してない。
STUDIOの良いところ
studioはwebを作っているみたいにプロトタイピングができます。
コンテンツを置きたいところに置くことはできず、webみたいにmargin/paddingでレイアウトを調節します。他にもflexboxみたいな整列のレイアウト方法もできます。
習得するのにちょっと時間がかかるかもしれませんが、このツールはweb製作者にかなりおすすめします！ (web制作をやってきた私は、使ってみてかなり感動しました！)
4月にSTUDIOの正式版をリリース！
β版から約一年間を経て、4月2日にSTUDIOの正式版がリリースされました。
より充実した機能が追加されましたので、それらの機能をざっとご紹介します！
公開された機能
- チームでのリアルタイムのデザイン
- 独自ドメインでのプロジェクトの公開(有料)
- Google AnalyticsやIntercomなどのサービス連携(有料)
- SEO対策(有料)
公開予定の機能
- デザインのバージョン管理(有料)
- CMS(有料)
- 独自分析機能(有料)
有料の機能がかなり魅力的です。
プロジェクトの公開やSEO対策、バージョン管理などの機能は月額約960円でお得に使えちゃうので、是非有料版も体験してみてください！
チーム開発に特化しているプロトタイピングツール - InVision
プロトタイピングツールの中でもっとも注目を浴びているツールのうちの一つ、InVision。
大人気Sketchのプラグインがあるので、馴染みの深いプロトタイピングツールだと思います。
InVisionの特徴
- 英語。
- web上で使える。
- 1プロジェクト無料。
- 難易度 普通(英語だから難しくみえるかも)
- InVision上ではデザインはできない。
- 共同作成が可能。
- デザインに対してのコメントやログを共有ができる。
- フリーハンドでもレビューが可能。
- sketchと仲良し。InVisionのプラグイン「Craft」を使えばSketch上で画面遷移の設定を行えるようになり、プロトタイプ作成できる。
InVisionの良いところ
このサービスの良いところは、まさにチーム開発に特化しているところです。
共同作成が可能であったり、コメントやログが残せたり、プロジェクトの進行を管理できたり...
また、プロトタイピングツールであり、デザインのレビューツールでもあってUIデザイナーからもかなり注目を浴びています。
また、チーム開発に特化した機能がどんどん増えており、進化の早いプロトタイピングツールであります。
下記記事は、最新の機能がまとめられてますので、使ってみたい方はぜひ読んでみてください！
プロトタイピングツール「InVision」はここまで進化した | Web Design Trends
ユーザビリティ テストまで出来るプロトタイピングツール - Indigo Studio
Indigo StudioはInfragistics, Inc.が開発した、UXデザイン手法に基づいたプロトタイピングツールです。
4月に無料版が公開されましたので、追加でご紹介いたします！
Indigo Studioの特徴
- 日本語対応。
- web上では使えない(ダウンロード必須、しかもSilverlightも必要)。
- 無制限のプロジェクト数が無料。
- 難易度 普通 (最初にガイドあり、多機能すぎて使いこなすまでに時間がかかる)。
- sketchとの連携可
- コンポーネントあり(iOSはあるがマテリアルデザインはない)。
- 充実したストーリーボード。
- アニメーション機能が非常に豊富で細かい設定が可能。
- 画面遷移図機能も無料で使える。
- ユーザビリティテスト機能(有料)
- レビュー、コメント機能(有料)
Indigo Studioの良いところ
Indigo Studioは、プロトタイプツールに必要な機能をすべて持っている、そんな印象を抱きました。
ワイヤーフレームから、ストーリーボード、アニメーション設定がされたプロトタイプ、コード書き出しからユーザビリティテスト…もう完璧だと思います。
ちなみに今回の無償化(Essential 版)では、ストーリーボード、ワイヤーフレーム、プロトタイプ、画面遷移図までの機能が使えて、さらに作成可能なプロジェクト数は無制限です！
Indigo Studioに関して、詳しくは下記の記事をご覧ください！
プロトタイピングからユーザーテストまでできる「Indigo Studio」が無償化 | UX MILK
以上4つを比較いたしましたが、自分が使いたいプロトタイピングツールは見つかりましたでしょうか？
他にも、有料ツールであったり、インタラクションを重視したツールなど、挙げきれないほど様々なツールがあるので、色々触ってみて適したタイミングでサービスを使い分けるのも良いと思います。
