プロダクト開発を効率化！プロトタイピングツールの正しい選び方
プロトタイピングツールはプロダクト開発を効率化させる素晴らしいもの。コードが書けなくても、これらのツールを使えば実際に完成したアプリやソフトウェアのように動作するモノを作ることができます。
では、あなたと、あなたのチームに合ったツールはどれか選べますか？
Googleで「プロトタイピングツール」と検索したことがある方は、コレが問題だとご存知でしょう。異なるプロトタイピングツールが山ほどある中で、一つだけのツールを選び抜くという事は大きな頭痛の種となってしまいがちです。
でも、安心して下さい。今日は私達があなたに最適なツールを見つけ出すお手伝いをします！
その中でも、私たちが全てのデジタルチームにとっての必需品だと考える「ラピッドプロトタイピングツール」 (シンプルなトランジションとジェスチャーを使って静的画像をつなげるツール)にフォーカスしてご紹介しましょう。
考えるべきポイント
ツールを比較する前に、まずはあなたのチームのニーズや要件、また、作業にある制約について考えましょう。以下では、自分に合ったツールを選択する際に考慮すべき点をいくつかリストアップしてみましたので、ぜひ参考にしてください。
要件を理解する
1. 目的
目的を明確にすることで、やらなければならないタスクは何なのか、従ってプロトタイピングツールにはどのような機能が必要なのかを理解することができます。
例：
- プロトタイプで達成したいことは何ですか？
- 誰にプロトタイプを見せたい、使ってもらいたいと考えていますか？目的はプロトタイプをマネジメント層や他のステークホルダーに発表することですか？ユーザーテストを行うことですか？
- どのプラットフォームに対応するプロダクトを作りたいのかも考えましょう。デスクトップ、モバイルそれとも両方ですか？
2. インテグレーション
どのような連携が必要なのかを理解するために、チームが既に用いている最も重要なツールをリストアップしましょう。
例：
- SketchやAdobeに対応するツールが必要ですか？
- その他のデザインツールと互換性があるモノが必要ですか？
3. コラボレーション
目的とやるべきタスクを明確にしたら、次に考えるのはプロトタイプ作成に関わる人材です。
例：
- ツールを使用するのは自分だけですか？それとも、他の人と一緒にプロトタイプを作成する場合もありますか？
- 他の人と作業する場合は、どれくらいの人数、そしてどのような役割で関わりますか？役割は確認とフィードバックだけですか？それとも共同でプロトタイプを作り上げていきますか？
- クライアントや会社外部の人とも共同で作業することがありますか？
4. 特別要求
上に挙げた質問で、デジタルチームが必要とする基礎のニーズをカバーしましたが、それ以外、特別に求めるものがあるかどうかも考えてみましょう。
例：
- 大手クライアントと仕事する場合、厳重なセキュリティが必要ですか？
- 社内のリソースなどによっては、カスタマーサポートが重要となるかもしれませんが、どれほどのカスタマーサポートが必要なのでしょうか？
制約を理解する
要件がはっきりしたら、作業にある中の制約についても考えてみてください。
制約の1つに社内のリソースがあります。新しいツールを学ぶのに、どれくらいの時間をかけられますか？複雑なツールをインプリメントし、保持するためのスキルや人材はありますか？もしくは、単にサインインすれば準備ができているようツールを求めていますか？
また、予算はどのくらいでしょうか？ツールによっては高価なものもあれば、無料のものもあります。自分が持つ要件と予算制約に合ったバランスを見つけるのが重要でしょう。
これで自分のニーズに合ったツールを選ぶ準備ができたところで、実際にツールのレビューに入りましょう。
各ツール比較のポイント｜基礎機能
各レビューはツールの短い紹介から始めます。その後にツールの基礎「ファンクショナリティ（機能）」 を以下3つの比較しやすいカテゴリから目を通していきます：
- プロトタイピング (実際のプロトタイプを作るための機能、例：トランジションやジェスチャー)
- コラボレーション（チームのコミュニケーションやコラボレーションを支える機能、例：フィードバック機能）
- プレゼンテーション（プロトタイプを内外部のステークホルダーに発表するための機能、例：プレゼンテーション機能）
その後、各ツールのボーナス機能についてもお話します。最後に、短くレビューをまとめていきます。
ツール
Axure RP
紹介したい一つ目のツールはAxure RP（RPはラピットプロトタイピングの略）です。2003年からある最も古いプロトタイピングツールの一つです。
プロトタイピング
AxureRPでは、ウィジェットが豊富なライブラリーからUIパーツをドラッグ＆ドロップで配置するか、ペンツールを使ってキャンバスに形を描くことで、ワイヤーフレームを作成することができます。ワイヤーフレームを動かすためのフェードやスライドといったトランジションや、タップ、ダブルタップ、プレス等のジェスチャーが揃っています。しかし、Axureにはピンチとズームは付いていません。
コラボレーション
チームメンバーはAxureRPでプロトタイプを確認したり 、作成したりすることができます。ワンクリックで、 プロトタイプをAxurePRのクラウドストレージソリューション、Axure ShareにてHTMLで出力できます。また、作成したモノを専有サーバーで保存したい方のために、より確固なセキュリティを含む、Axure Share Enterpriseが導入されました。Axure ShareとAxure Share Enterpriseは、どちらもモバイル端末かウェブで作業を分配することができます。
プレゼンテーション
Axure Shareを通じて、プロトタイプをユーザーやステークホルダーと共有することができます。フィードバックを集めるためのディスカッション機能も含まれています。
ボーナス機能
Axure Shareでプロトタイプを共有する際に、ログインとパスワードのページをカスタマイズし、カスタムドメインを割り当てることができます。クライエントと仕事する際に便利かもしれません。
AxureRPは機能が豊富にあるので、使いこなせるようになるまでには時間がかかりそうです。またAxureRPは他のプロトタイピングツールよりも価格が高めですが、30日間のお試し期間があるため、まずはAxureRPが自分に合うかどうかを見極めてください。
UXPin
UX デザイナーがUX デザイナーのために開発したUXPinは、豊富な機能を持つプロトタイピングツールです。
プロトタイピング
UXpinにおけるプロトタイプは、既存のモックアップ、PhotoshopファイルまたはSketchファイルから作成することができます。さらに、UXPinはウェブやモバイル、デスクトッププロトタイプのためのUIパーツも多数提供しています。スライドや伸張、回転といったアニメーションやトランジションも含まれています。プロトタイプに追加する画像もUXPin上で編集できます。例えば、都合良く、明るさやコントラスト、鮮明度、透明度を調整することができます。UXPinのジェスチャーにはスワイピングやプレス、ロングプレス、ピンチ、ズーム、またモバイル端末のシェイキングやティルティング、ムービングも含まれています。
コラボレーション
UXPinにはコラボレーション機能が付いています。専用のリンクによりプロトタイプが共有できるので、フィードバックをその場で得ることができます。また、アクセス権がある人は、誰でもコメントや提案を残すことができます。プロジェクトを特定のチームメンバーに割り当てることも可能で、Eメールで通知されます。複数のチームメンバーがログインする際には、リアルタイムでプロトタイプを共同編集することができます。チームメンバーによる変更は、誰が、何の作業をしたのかがわかるように保存されます。また パスワード保護されているデザインにゲストとして何人でもアクセスできるセキュリティ機能も含まれています。
プレゼンテーション
UXPinにはライブプレゼンテーション機能が付いているので、プロトタイプをリアルタイムに発表することができます。ライブプレゼンテーション機能には音声電話、「Follow My Cursor（カーソル追跡）」や発表中に他者がコメントできる機能が揃えています。
ボーナス機能
アイドロッパー機能でUIパーツの色を、UXPin内外の画面上のどの色にでも自動的に変換可能ですが、Macのみで利用できます。
UXPinの機能は非常に豊富です。デザインやプロトタイピングツールに慣れているチームなら、柔軟性を与えてくれるでしょう。しかし、プロトタイピングにまだ不慣れなチームは圧倒されてしまうかもしれません。気に留めておきたいもう一つのポイントは、UXPinはIllustratorと連携しないということです。
UXPinに興味がある方は、30日間のトライアル版があります。
Adobe XD
Adobe XD はまだベータ版の新しいプロトタイピングツールです。ベータ版期間中は、Adobe IDに登録すると無料で利用できます。
プロトタイピング
Adobe XDでは、PhotoshopやIllustratorといったCreative Cloud上にある他のツールで作成したデザインファイルをインポートし、インタラクションやトランジションを追加することで、プロトタイプを作ることができます。現時点では、ジェスチャーを利用することはできません。
コラボレーション
リアルタイムでの共同作成ができない等、Adobe XDのコラボレーション機能は限られています。しかし、録画機能がついているためプロトタイプの画面遷移の様子を映像記録し、それを共有することが可能です。
プレゼンテーション
Adobe XDにはプレゼンテーション機能がありませんが、プロトタイプのモバイルプレビューが可能です。
Adobe XDはシンプルで使いやすいプロトタイピングツールです。しかし、ワイヤーフレームを作成するのにPhotoshop等のAdobeツールに使い慣れていない場合は、使いづらく感じるかもしれません。アニメーションやトランジションに関しては限られていて、ジェスチャーもありません。しかし、まだベータ版なので、機能を追加し進化していくことでしょう。
Atomic
Atomicは、見た目はシンプルなツールですが、パワフルなプロトタイプを作成できます。
プロトタイピング
Sketch等、デザインツールからデザインファイルをインポートするか、Atomic内のUIパーツライブラリーを使用してスクリーンを作ることができます。プロトタイプを作成するには、インタラクション（スライド等）と高度なアニメーション（サイズや不透明度、スタイル、位置）から選ぶことができます。Atomicにおいて、スクリーン間の遅延や継続時間といったトランジションの微調整が可能です。また、クリックやタップ、スワイプ、ホールド等、モバイルプロトタイプに必要とされる様々なジェスチャーも含まれています。
コラボレーション
リンクを利用することで、Atomicのアカウントをお持ちでない方とでもプロトタイプが共有できます。他のチームメンバーからのフィードバックはSlackとTrelloなどAtomicの連携機能を通して得ることができます。最後に、デザイナーが共同で同じプロトタイプを同時編集することができます。
プレゼンテーション
Atomicにはプレゼンテーション機能が付いていません。しかし、専用のリンクとパスワードを使用することで、プロトタイプの発表ができます。
Atomicは他のツール（Sketch、Slack、Trello等）との様々な連携機能を提供しているのでその点は非常に便利です。アニメーションとインタラクション機能に関しては、以前紹介したプロトタイピングツールと似ています。
AtomicはChromeのみで使用可能ですので、Firefoxや他のブラウザをよく使う場合は、欠点となるでしょう。新手ツールの一つであるAtomic。豊富な機能を期待する場合は、すこし劣っているように思えるかもしれません。
興味がある方は30日間無料でお試しできます。
Prott
最後になりますが、私たちGoodpatchのプロトタイピングツール、Prottに目を向けてみましょう！
Prottは、私たち自身の素早く簡単にプロトタイプを作りたい、そしてシームレスにコラボレートしたいという必要性から生まれました。2年前にリリースされて以来、デジタルプロダクトチームが共同で素晴らしいプロダクトを作り出すための原動力となっています。
プロトタイピング
Prott 上でワイヤーフレームを作るには、形や豊富なUIパーツのライブラリーを使うか、Photoshop やSketchからファイルをアップロードしてください 。後で使いたいパーツを保存し、自分専用のライブラリーを作成することもできます。スクリーンを動かすための数々のトランジションやジェスチャーも含まれています。スクリーンをクリックしてリンク範囲を作り、リンク先を選び、ジェスチャーを選択すれば、これで出来上がりです！
Prottのもう一つの面白い特徴は、モバイル端末のペーパープロトタイピング機能です。アイディアをスケッチして、写真を撮り、手描きされたクリエーションを本物のアプリの様に動かしてみてください！
コラボレーション
私たちはチームのことを考えてProttを作りました。ユーザーグループやグループ内のメンバーの役割をそれぞれ設定することで、プロジェクトを管理しやすくなります。全ての端末においてワンクリックでプロジェクトをチームメンバーに送信することができます。チームは、画面上どこにでもコメントを残すことでリアルタイムにフィードバックが付けられます。コメントやタスクができた時点で、プロダクトマネージャーは通知を受けます。プロジェクトの進行状態を履歴フィードから追跡することも可能です。
プレゼンテーション
Prottにはプレゼンテーション機能があります。ダミー端末やデザインの背景を変化させることでデザインを効果的に発表していただけます。
ボーナス機能
Prottでは画面遷移図をとても簡単に作ることができます。プロジェクトを選び、ワンクリックで、スクリーンがどのように繋がるのかを確認していただけます！
最後に、ProttはSlackやDropbox、Sketchといった数々のツールと相互作用することができ 、日本語、英語と台湾語でご利用可能です。
世界的な視野を持つ日本のデザインスタジオ、グッドパッチによって作られたProttは、日本のプロダクトチームのニーズに特に適合したプロトタイピングツールです。より楽しく、より簡単にプロトタイプを作り、 その過程で同僚やクライエントとのシームレスなコラボレーションを求めている方 。Prottはあなたにとって最適なツールです！ワイヤーフレーミングからプロトタイピング、プレゼンテーションまで、Prottはあなたのチームの誰もが簡単にアイディアを形にして、その場で共有できるようにします。
おわりに
今回は、現在リリースされている中で比較的人気のあるプロトタイピングツールを比較してきました。
このレビューで理想のプロトタイピングツールを選ぶのに必要なインサイトを得ていただけましたでしょうか。試してみるツールを決める際には、この投稿の始めに準備した（まだの方も今からでも遅くありません！）要件と制約のリストを忘れずにチェックしてみて下さい。まだ迷っている方も２〜３つ候補を選び、是非試してみて下さい！
（Prottも忘れずに！）