アプリ開発がスムーズになる秘策?モックアップとプロトタイプの違い

スマートフォンアプリ開発をスムーズに進めるためには、画面設計の時点でしっかり社内のコンセンサスを取っておく必要がある。開発がほぼ終わっているのにデザインや動作の作り直し、という事態は避けたいところ。

そこでモックアップやプロトタイプを作って、事前にチェックできるようにしたい。モックアップやプロトタイプなら画面や動きをイメージでき、修正点も洗い出しやすい。ただしWebサイトの設計ではモックアップやプロトタイプを作るケースは少ないため、なじみがない人も多いかもしれない。そこでモックアップやプロトタイプについて、特徴や違いについてまとめた。

しかし正式にアプリ開発が決まっていない場合、モックアップやプロトタイプを用意できないケースもある。こんなときの解決策も、あわせてチェックしておこう。

スマートフォンアプリ設計の流れ

まずはスマートフォンアプリの設計において準備しておきたい代表的なものを紹介しよう。

(1)ラフスケッチ

アプリの企画がまとまり要件の洗い出しができたら、大まかな画面遷移と画面イメージを作成する。この時点では手書きのラフスケッチでOK

(2)ワイヤーフレーム

ワイヤーフレームとは、画面の基本設計図。デザイン要素はなく、あくまでボタンや表示エリアをどのあたりに表示するかというアウトラインをまとめる。

(3)モックアップ

モックアップは本来、実物に近い模型のこと。最近は携帯電話の販売でサンプル品として置かれているものを「モックアップ」と呼ぶことも多い。アプリ開発でのモックアップも、見た目はほぼアプリに近い画面デザインのことを指す。ただしプログラムは搭載されていないため、実際にタッチやスワイプしても動かない。

(4)プロトタイプ

プロトタイプはいわば試作品で、モックアップにある程度動きを追加したものだ。プロトタイプは、ユーザービリティや操作性をチェックするために欠かせない。ただし開発中のため動きに制限があったり、他のサービスとの連携がしなかったりというのが一般的だ。

モックアップやプロトタイプは、アプリ開発になぜ必要?

モックアップやプロトタイプが必要なのは、それぞれの段階で社内コンセンサスを取るため。モックアップなら画面デザインやレイアウトのチェックができるし、プロトタイプなら実際の動きもチェックできる。こうしたツールを使わずにいきなり完成したアプリで社内プレゼンをすると、大幅な修正が入ってしまい開発スケジュールが大幅にずれる…ということも。

一方設計段階のワイヤーフレームで社内プレゼンをしても、デザインや操作性がわからないため見ている人がイメージしづらい。どんなアプリになるのか?という完成形をイメージしやすくして、改善点を洗い出すのがモックアップやプロトタイプを設ける大きな目的と言える。

アプリ開発にて、モックアップやプロトタイプを準備する方法

外部業者にモックアップやプロトタイプを準備してもらえれば問題ないが、発注先が決まっていなかったり、予算が確定していなかったりすることもアプリ開発ではよくある。とはいえデザインやプログラミング経験がないアプリ担当者の方が、いきなりモックアップやプロトタイプを作るというのは厳しいだろう。

そこでWeb上でモックアップやプロトタイプを作成できるサービスを利用する方法もある。最近ではアプリ開発向けに「MockUPhone」などのモックアップ作成ツールや、「Prott」となどのプロトタイプ作成ツールも登場している。デザインやコーディングが不要というメリットはあるが、「ツールの使い方を覚えるのに時間がかかる」「無料版もあるが機能が限定されている」「日本語対応しているツールが少ない」といった課題も多い。

そこで、クラウド型のアプリ開発ツールを使う方法もある。多くの開発ツールではモックアップやプロトタイプに近いものを作成できる機能があり、開発を進めながらシームレスにモックアップやプロトタイプが準備できる。また、例えばアプリ開発ツール「Yappli」では、iOSAndroidそれぞれのプレビュー用アプリを用意している。アプリではOSの違いによって画面表示や動きが変わることも多いが、プレビュー用アプリがあれば実機で画面や操作のチェックもできるというメリットがある。



アプリ開発・アプリ制作 関連記事