【活用事例】開発を効率化させるプロトタイピングツールの意外な使い方まとめ

今回は、プロトタイピングをチームに導入しようと検討している人や、既に導入していて、より良い使い方を知りたい人に向けたお話です。

プロトタイピングツールは、プロジェクト立ち上げフェーズのUI制作に使われるツールだと認識している人が多いのではないでしょうか?もちろんそれも正解です。しかし、プロトタイピングツールには多様な使い方があるのです。

そこで私なりに、プロトタイピングツールの意外な活用方法をシチュエーション別にまとめてみました!

上長の承認をスムーズに!

新規事業の立ち上げや途中経過の共有など、プロダクト開発では上長から承認をもらうタイミングが何回もあります。説明の際に紙の資料やPowerPointを使うのが一般的ですが、プロトタイピングツールも選択肢に入るでしょう。

プロトタイピングツールでプロダクトの試作品を触ってみると、ユーザー視点からプロダクトを判断できますし、プロダクトで何ができるのか・どのような使用感なのかといったイメージが可視化されるので、意思決定の判断軸が明確になります。

実際に、プロトタイピングツールを使うことで承認のフローが早くなったという例は多数あります。プロダクトオーナーや役員・社長クラスの人もプロトタイピングツールで実際のプロダクトの姿を確認しているそうです!

もちろん社内だけではなく、社外向けにもプロトタイピングツールは役立ちます。

例えば、新規事業立ち上げ時の投資家へのプレゼンテーション。
まだサービスとしてローンチはしていないけれど、プロトタイプとして動く形を見てもらうことで、実際のサービスの形をイメージしやすくなりますね。スタートアップ支援をしているアクセラレータープログラムでも、公式にプロトタイピングツールが使われています。

上長承認にうまく活用している事例:「亀山会長への説明に欠かせないツール」— DMM.comラボに根付くPrott活用の文化

提案資料に一工夫!プロダクトの完成像を伝えやすくする

クライアントへプレゼンテーションを行う際にもプロトタイピングツールは役立ちます。例えばPowerPointやPDFのスライドを共有する時、資料にプロトタイプのURLを添えてみましょう。ワンクリックでプロトタイプを確認することで、あなたの資料はよりリアルで、有意義なものになるはずです!

また、紙の資料にQRコードを埋め込み、それぞれのスマートフォンからスキャンすることでもプロトタイプを触ってもらえます。

(提案資料の活用例)

通常のプレゼンテーションではプロダクトの概要や目的、どんなことができるのかについては説明を聞いて理解できますが、操作性まで伝えることは難しいです。プロトタイプによって、実際のプロダクトをユーザーになって触れるので、果たして本当にサービスが目的を果たしているのか、必要な機能はどのような挙動なのか、体験を通して把握できます。

提案段階の一工夫として、あえて白黒のプロトタイプを見せるというやり方もあります。デザインに力を入れたプロトタイプだと、画面遷移や操作性といった本当に見せたいところがぼやけてしまう可能性があるからです。

プロトタイプの見せ方を工夫している事例:Prottは開発者がユーザー視点を持てるツール。Famiポートアプリの機能開発プロセスとは?

失敗確率を下げるべく、新機能のリリース前にユーザーの反応を確認

サービスリリース後、ユーザーテストを重ねていくと、新たな機能の追加が必要になる場合がありますよね。

検討中の機能のプロトタイプを作り、ユーザーテストを行うことで、リリース前に検証が可能です。そもそも本当に必要な機能なのかどうか、より良くするにはどうすればいいのか確認することができます。

デザインパターンがいくつかある際にもプロトタイピングツールを通して複数ユーザーに試してもらい、その反応やフィードバックを元に機能を決められます。

A案B案を作り比較して判断してもらっている事例:クライアントを巻き込みながらサイトを改善!メタフェイズの開発プロセスを大解剖!

競合のユーザー体験を学んでプロダクトに活かす

(競合の画面遷移を取り込んで表示)

ECサイトを開発・運用している場合は、競合のECサイトを研究して学びを得るために、プロトタイピングツールが使えます。

競合サイトの画面を、プロトタイピングツールに取り込んでみましょう。どのようなレイアウトで商品ページを見せているのか、商品をクリックして購買に至るまでどのようにオンボーディングを設計しているのか調べてみると、自社と競合での違いが見えてきます。自社と競合のUI比較が、プロトタイピングツールで簡単に行えるのです。

他にも、アップデートやリニューアル前後で、どのような改善がされているのか調べてみることも、自社にとって役立つかもしれませんね!

以下のスライドはFacebookのUIの変遷をたどったものですが、プロトタイピングツール上で再現すれば、トップページだけではなく実際にユーザーとしてサービスを使った時の画面遷移や使用感まで比較できます。

言った言わない問題の根本解決に!

(コメントを残せば後からでも見返せる)

クライアント向けにアプリ開発やWeb制作を行っている際に、クライアント側から「ここ、こういう風に変更したい」と言われた部分に対して、あとから「そんなこと言ってないよ!」と忘れられてしまった経験はありませんか。その分の工数が無駄になるので、なかったことになるのは困りますよね。

そこで、プロトタイプにコメントを残せるツールで、指示をプロトタイプ上で行うと、全ての履歴が残せます。『言った・言わない問題』を解決できます。このコミュニケーションにより、クライアントとも円滑に開発や制作を行えるのではないでしょうか。

さいごに

プロトタイピングツールには、UI制作としての用途以外にも、多様な使い方があると学んでいただけましたか?

一口にプロトタイピングツールといっても、日本製だったり海外製だったり、簡単に作れるツール・しっかり作り込めるツールなど、それぞれ特徴が異なるため、選ぶのが難しいかもしれません。

そんな時は、

  • どのような課題を解決したいのか
  • そのためにプロトタイピングツールをどのように利用するのか

これらを明確にし、最適なプロトタイピングツールを選んでみてください。

そして、GoodpatchでもProttというプロトタイピングツールを展開しています。
以下の事例も、ぜひ参考にしてみてください!

開発スピードが倍速に!? Prottは絶対に欠かせないツールの1つ – ビズリーチ

ABOUTこの記事をかいた人

磯部 俊哉

94年 千葉県生まれ。学生時代は東南アジア×働くに興味を持って活動していました。現在グッドパッチでは、マーケティング部署に所属しながら自社プロダクト『Prott』『Balto』に関するインタビュー記事やイベントレポートを中心に発信しています!好きな食べ物は高野豆腐です。