【アプリ開発】5分で作る。POPをつかったスマートフォンアプリの簡単モック

今日はモックを簡単につくることのできるサービス（アプリ）のご紹介をします。

スマートフォンアプリではありますが、現在HTML5やJavascriptでも簡単なアプリが作成できるので、Web制作がメインの方も、是非挑戦してみてください。

POPとは

POP – Prototyping on Paper | Mobile App Prototyping Made Easy

Have an app idea?
Make this real, with POP.
引用：POP – Prototyping on Paper | Mobile App Prototyping Made Easy

Prototyping on Paperとあるのでそのままなんですが、紙をベースにプロトタイプを簡単に作ることのできるサービスです。

Web制作はダイナミックに動くJSなどを除いて、基本的にはデザインベースで見本を確認できますね。

しかしスマートフォンの場合、やはり手に持った感じ（※iPhone6 Plusとかは使い方を誤ると手が攣りそうになるなど）はテストをしてみないとわからない部分が多く、UI/UXと呼ばれるものは、動きに影響されるものも多い現状です。

紙をベースにプロトタイプ？

アナログな紙と手描き、意外とWebデザイナーさんでもはじめのスケッチされる方もいらっしゃるかと思います。

クオリティは低くなるかもしれませんが、一番簡単に形にできる方法ではないでしょうか。

やってみる

今回はモックを書くために、iPhone5のスケッチ用PDFを使いました。

→ DLはこちら

書いていきたいと思います

机の上にマジックペンしかありませんでした。いきましょう。

書けた

とりあえず３画面分書いてみました。
今回はuniversionsのモバイルアプリという前提で作ってみます。

POP（iPhone版）を起動してプロジェクト作成

デバイスを設定

一画面ずつ写真を撮ります

ボタンにアクションをつけます

以上です！

たったこれだけで、iPhone上で動くプロトタイプができてしまいました。

なお、PCでも編集することができ、アカウントで自動同期されてます。

今回のサンプル

実際に左上の雲マークを押してみたり、Message入力エリアを押してみると動くかと思います。

まとめ

いかがでしたか？
アイデアは形にしてこそ価値があると思います。たとえそれがプロトタイプであっても、まず第一歩です。

実際にアプリを構築し、運用していくのはとても大きな作業です。
まず作り、アイデアを共有して周りの反応を検証するという重要なフェーズを、簡単にサクッとこなせるツールですね。

Author Profile

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。