プロダクトを作るときに欠かせないのが「モックアップ」「プロトタイプ」です。
ベトナムオフショア開発でも、特に新しく０からプロダクトを作るときは、良いプロダクトを作っていくためにこの二つを使いながら開発していくことになります。
今回は、モックアップとプロトタイプの違い、それぞれどんなツールを使うのかなどをご紹介します。
目次
1. モックアップとは？
モックアップとは、製品の設計、デザインの段階でよく用いられる本物と同じような見た目の模型やページデザインのことをいいます。
IT系ではwebやスマホのアプリでのプロダクトを開発することになりますので、実際のwebページと同じデザインの画像を作ってデザインの確認をします。
ITプロダクトを作る場面で実際にコードを書くためには、デザインがないと難しいです。簡単なwebページを作る時でもデザインモックアップを作り、それを再現するコーディングをしていくのが一般的です。
2. プロトタイプとは？
プロトタイプとは、試作品・テスト用製品のことをさし、モックアップよりもより機能的なものの確認に用いられるものです。
プロトタイピングでは実際に動くものを作ることが多く、それを持ってユーザーへのヒアリングを行ったり、実際の使い心地について確認することになります。
webアプリケーションなどではこのプロトタイプによって実際のユーザーがどういう使い方をするのが良さそうか、解決したい課題は本当にこの製品で解決できそうか、ユーザーが使いづらそうなところはないかなどをより深く議論していきます。
2-1. プロトタイプも様々
モックアップは基本的に画像を作るのみですが、webアプリの制作におけるプロトタイプは実現方法も様々です。
画面遷移のみができるものや、簡単なコードを書いて動くものをプロトタイプとすることもあれば、実装したい機能が再現できそうなサードパーティのアプリを組み合わせてプロトタイプとすることもあります。
私の実体験では、今までプロトタイプを作るときは、シンプルなwebページであればプロトタイプ作成用のアプリで作成、少しロジックを実装する必要がある診断アプリなどはGoogleフォームなどで再現してプロトタイプとし、ロジックの確認などをしていました。最近ではNoCodeの動きもあるので、NoCodeツールでパパッと作ってみるということが多いです。
3. モックアップとプロトタイプの最も大きな違いは？
モックアップとプロトタイプの違いをもう少し詳しく見てみましょう。
3-1. 動きの有無
まず、前述したようにモックアップは画像のみで終わりになることが多く、基本的に動きをつけることは稀です。その代わり本物と同じような見た目が確認できるようになるので、文字がみにくい、レイアウトがわかりづらいなどの指摘をしやすくなりま
対して、プロトタイプは実際に動くものが多いです。実際に動かしながら、そのアプリで何ができるのかなどを確かめていきます。
簡単な画面遷移ができるようなものはモックアップと言ったりプロトタイプと言ったりするのでその境界線は少し曖昧なところがありますが、基本的に動きがあればプロトタイプ、なければモックアップと呼んでいます。
3-2. 目的
モックアップとプロトタイプでは、その使用目的も異なってきます。
モックアップが見た目のテストに使われるのに対し、プロトタイプでは使用感や実装ロジックのテストに使われることが多くなります。
例えば、机をオーダーするときに、欲しい机のイメージを紙に描いて「こんな見た目が良い」と伝えるのがモックアップ。そのモックアップを元に、机を簡単な模型などで再現して「足の太さはこのくらい」「ここの部品はこれでいいかな」などを議論するのがプロトタイプ、と言えます。
4. プロダクトを作るときの工程は？
では、ITのプロダクトにおいてはどのようなタイミングでモックアップを作り、どんなタイミングでプロトタイプを作るのでしょうか？
今回は、webアプリケーションを例にみてみましょう。
4-1. 要望を元にラフなモックアップを作る
私の場合、プロダクトを作るときは作りたいものの要望を元に、ラフなモックアップを作ることが多いです。手書きか、ワイヤーフレームを作成できるツールで作るのが良いでしょう。
ここでラフなモックアップを作る理由は、認識の齟齬をなるべく減らすためです。
文字だけで機能の説明などをするよりも、画像でどの機能がどんなところにあるのかがわかるだけで共通のイメージを持ちやすくなります。
4-2. 機能の検証が必要そうであれば、プロトタイプで検証する
見た目だけではなく機能の使い心地などを先に確認しておきたいというときは、プロトタイプを作ります。
簡単なコーディングで作るときは、見た目はラフモックアップに合わせて作ることが多いですが、1機能だけ切り出せばいいというときはサードパーティアプリやNooCodeで作ります。
最初は社内で求めているものが実現できているかをプロトタイプを使って確認し、次にユーザーテストを行なって使い心地を確かめていきます。
4-3. 本番用モックアップを作る
開発が進められるよう、ラフを元にモックアップを作成します。このデザインを見てコーダーさんがコーディングするので、ボタンを押したときに出るポップアップなどのデザインも含んだなるべく細かく作り込んだものになります。
基本的に全てのページ分のモックアップを作り、エンジニアはこれを見ればどこにどのような機能があるかわかるという状態まで持っていきます。
この工程を経て、ようやく開発に入れます。場合によっては開発前にモックアップやプロトタイプを使ってユーザーへのヒアリングを行なって何度も作り替えることもあります。
オフショア開発では特に、目に見えるものがあるとエンジニアとの意思疎通が楽になるのでなるべく精巧なモックアップを作ることを心がけています。
5. モックアップ・プロトタイプにおすすめのツールは？
デザイナーでなくても、ツールを作れば簡単なモックアップ、プロトタイプは作成することができます。
基本的にモックアップはプロトタイピングツールであれば作れるので、「プロトタイピングツール」と呼ばれるものを中心に紹介します。
5-1. Prott
5-2. invision
他のモックアップ作成ツールとの連携もできるので、すでにあるデザインに動きをつけたいなどの要望も叶えてくれます。
5-3. Adobe XD
「コンポーネント」と呼ばれる機能では、多くの画面で共通で使うようなパーツを共通化する機能も。プロトタイピングをしていて、共通のパーツに変更が生じたときにそのパーツが入った全ての画面を修正するのはかなり面倒ですが、AdobeXDならその手間が省けます。
画面遷移が作れるだけでなく、入力時に数字キーボードを出す、時間で指定された遷移を行うなどかなり細かく作りこめるのでより精巧なプロトタイプができるようになります。
5-4. Framer
他のプロトタイピングツールと違って、JavaScriptのコーディングができるのが最大の特徴で、書いたコードがすぐに反映されて動きを確認できるところが人気です。
図形の描画をするとそれがコードに反映される、ということも可能です。
もちろん画面遷移なども簡単に作れ、共有機能もついています。
6. まとめ
モックアップ、プロトタイプは開発をスムーズに進め、ユーザーにより良いものを提供するためにも非常に重要です。
それぞれの違いを考えて、適材適所で使ってくださいね。
7. 研究開発やモック制作などは、バイタリフィのオフショア開発にお任せください
こんなお悩みありませんか？
・商品開発をしたいが、最低限動くものを作らないと社内プレゼンできない。
・社内の企画部門でノウハウのあるエンジニアがいないので、サポートが必要。
・企画予算内で、技術的な可否の検証をしたい。
そんな時は、バイタリフィのオフショア開発で！
今や、オフショア開発をおこなっている企業はどんどん増えています。
日本国内ではオフショア開発に対して後ろ向きな先入観を持っている企業もいますが、開発ベンダーが国内であろうが海外であろうがはもう関係がなく、自社にあった選択する必要があります。
バイタリフィでは、弊社では2008年からのオフショア開発のナレッジを元に、仕様の理解を徹底することで安定した品質を担保しています。スマートフォンアプリ開発拠点としては、ベトナムでNo.1の実績を誇っております。
弊社では、国内開発とオフショア開発の両者に対応しているので、まずは気軽に開発のご相談をいただければ幸いです！【ご相談は無料です】
