【アプリ開発】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はこちら

Screen Shot 2015-03-10 at 15.47.25

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

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

書けた

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

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

IMG_0469

デバイスを設定

IMG_0470

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

IMG_0472

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

IMG_0473

以上です!

たったこれだけで、iPhone上で動くプロトタイプができてしまいました。
Screen Shot 2015-03-10 at 16.39.14

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

今回のサンプル

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

まとめ

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

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

フォローして続編をチェック

@universionsをフォロー