プロトタイプというのは、一言でいえば試作です。いきなり100%の完成品を作るのは時間も予算もかかります。それで失敗だと分かるのでは、あまりにも遅く、かけた予算も無駄になってしまいます。そうした状態に陥らないために、プロトタイプを作ること（プロトタイピング）を通して、実証実験を行います。

今回はMonacaを使って、スマホアプリのプロトタイプを作成する方法を紹介します。

アプリ開発のステージについて

アプリ開発を行う際に、いきなりXcodeやAndroid Studioを立ち上げる人は多くないでしょう。
まず、企画書なり、イラストを描いてみるはずです。手書きでもいいですし、Prottのようなプロトタイピングツールを使うこともできます。ここは機能ではなく、コンセプトを確認するための段階になります。

ここでコンセプトが固まったら、プロトタイピングに入ります。
イラストではできていた内容が、スマートフォン上で破綻しないか、使いやすいかを検証する段階です。この段階で欲しいのは次のような情報になります。

  • スマートフォンの画面サイズで問題ないか
  • 機能の過不足はないか
  • UXに問題はないか

イラストで描いた状態ではまさに机上の空論になりますので、もう少し具体化することで見えてくる問題や課題があるでしょう。それをプロトタイピングを通して解決していく訳です。

これは自社プロジェクトだけではなく、クライアント向けの開発でも役立ちます。スマートフォン上で動く形にすることで、クライアント自身気付いていなかった課題に気付くことがあります。議論や要望がより具体的になり、スピード感が出るはずです。

Monacaを使ったプロトタイプ開発について

では実際にMonacaを使ってどうプロトタイプを作るのがいいのか解説しましょう。

Onsen UIを使う

まず、UIフレームワークであるOnsen UIの利用をお勧めします。Onsen UIを使うメリットは次の通りです。

  • ネイティブアプリ風のUIが簡単に実現できる
  • ネイティブアプリ風のUXが簡単に実現できる
  • iOS/Android両方のUIを同時に確認できる

UIというのは大事です。WebはHTMLにこだわればあらゆる表現が可能ですが、それだけ工数もかかります。プロトタイピングの段階で、そこまでこだわった画面を作り込むのは難しいでしょう。さらにUXとしてスワイプ操作、画面の切り替わり、アクションシートなどスマートフォンアプリでは標準的なUXも検証段階では大事です。この部分もOnsen UIであれば簡単に実現できます。

そしてiOS/Android双方の表現の確認も必要です。iOSだけでプロトタイプを作り込んでしまい、Android側での検証を行っていないと、実際に作り込む段階で問題に気付くことがあります（逆も然りです）。iOSにはiOSの、AndroidにはAndroidのUI/UXがあり、それらもプロトタイピングの段階でちゃんと確認しなければなりません。

Onsen UIの使い方は難しいものではありません。React/Vue/Angularといったモダンなフレームワークと組み合わせることもできますが、プロトタイピングの段階ではjQueryや素のJavaScriptで作っていく形で問題ないでしょう。UIコンポーネントも多数用意されていますので、必要に応じてコードをコピー&ペーストしていくだけで画面ができあがります。

Monacaデバッガーを使う

次にMonacaデバッガーを使いましょう。
Monacaデバッガーはコードの修正を即座に反映して確認できます。会議の中で上がった要望をその場で修正し、適用することもできます。こうすることで素早く修正を確認し、議論を深めることが可能です。Monacaデバッガーはプロジェクトメンバー全員分用意し、各自が自分の端末で表示を確認できるようにするのがおすすめです。

昨今、オンライン会議が多くなっていますが、Monacaデバッガーでの修正は場所を選ばず反映されるので、リモートにいる人たちも同時に修正内容を確認できます。

バージョン管理を使う

プロトタイピングを行っていると、前の状態の方がよかったとなるケースも少なくありません。常に前進していく訳ではなく、時には手戻りも発生します。そうした時に即座に戻せるようにバージョン管理を導入しましょう。MonacaではGitHubと連携できますので、修正を行ったら忘れずにコミットするようにしましょう。

GitHub との連携 | Monaca Docs

プラグイン利用はお勧めしません

プロトタイピングの段階ではCordovaプラグインは使わない方がいいでしょう。たとえばアプリ内課金を試したいと思っても、価格一覧を出す程度にしておくべきです。プラグインをテストする場合にはデバッグビルドやカスタムデバッガービルドが必要になります。これをプロジェクト関係者全員にインストールするのは手間です。

プロトタイプの結果から実開発へ

プロトタイプでの検証を行い、ある程度要件が固まったら、実際にアプリを開発していく段階になります。

実際によくある要望として、このプロトタイプに肉付けをしてリリースしたいといわれることがあります。Monaca + Onsen UIでプロトタイプを開発している場合、もちろんそれも可能です。テストや細かなデザイン、サーバサイドとの繋ぎ込みなど、手を加えるべきポイントは多数あるでしょう。しかし、大枠としてはすでに動くものになっています。

少なくともOnsen UIをベースに、動くプロトタイプがありますので、開発に入る際に大幅に時間的、作業的工数を削減できるのは間違いありません。プロトタイプから開発までがスムーズに移行できるのもMonacaの良さでしょう。

まとめ

これからアプリを開発していこうと思った方は、まず手書きでもいいのでプロトタイプを作ってみてください。

そして次にMonacaとOnsen UIで動く形にしてみましょう。そうすることで、頭の中だけにあった想像が具体化され、気付きが生まれるはずです。そうしたらプロトタイプを修正して、再度検証します。

プロトタイプが形になれば、後は実際に開発を進めるだけです。Monacaを使っていれば殆ど動くものがすでにできあがっているはずです。リリースまでもう少し、頑張って完成させましょう！