今日はモックを簡単につくることのできるサービス(アプリ)のご紹介をします。
スマートフォンアプリではありますが、現在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はこちら
書いていきたいと思います
机の上にマジックペンしかありませんでした。いきましょう。
書けた
とりあえず3画面分書いてみました。
今回はuniversionsのモバイルアプリという前提で作ってみます。
POP(iPhone版)を起動してプロジェクト作成
デバイスを設定
一画面ずつ写真を撮ります
ボタンにアクションをつけます
以上です!
たったこれだけで、iPhone上で動くプロトタイプができてしまいました。
なお、PCでも編集することができ、アカウントで自動同期されてます。
今回のサンプル
実際に左上の雲マークを押してみたり、Message入力エリアを押してみると動くかと思います。
まとめ
いかがでしたか?
アイデアは形にしてこそ価値があると思います。たとえそれがプロトタイプであっても、まず第一歩です。
実際にアプリを構築し、運用していくのはとても大きな作業です。
まず作り、アイデアを共有して周りの反応を検証するという重要なフェーズを、簡単にサクッとこなせるツールですね。
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事