素晴らしい！手描きのiPhoneのモックアップ画面をシミュレートしてくれるアプリ「POP」

「POP – Prototype on Paper」は、紙などに描いたアプリのワイヤフレームをiPhoneのカメラで撮影して取り込み、その取り込んだ複数のモックアップ画面のボタン部分などに仮のリンクボタンを設定し、画面同士をリンクでつなげてプレビューすることで、簡単な画面遷移をシミュレートして確認することができるアプリです。

「POP – Prototype on Paper」は、アプリ制作会社の必須アプリかもしれません。

POP – Prototype on Paperの主な特徴

プログラムを組み込む前のUIチェックができる

プログラムを組まずにUIのチェックができ、より精度の高いアプリが制作できたり、プログラムを組んだ後の動作の修正を未然に防ぐことで制作のコストがカットできます。

アカウントによる同期が可能

このPOPを使うにはアカウントが必要ですが、メールアドレスを登録することで他のiPhoneやiPad端末でログインすれば、作成したプロジェクトが同期されて確認や編集することができます。
完成したプロジェクトの動作は、Web上のシミュレート画面でも同期、確認できます。

また、共有のメールアドレスを登録しておけば、会社などのアプリ開発時に多人数でのUIのチェックが可能です。

目次

• POP – Prototype on Paperの使い方
  • アカウント作成画面
  • プロジェクト追加画面
  • 写真追加
  • 画面撮影
  • ワイヤフレーム一覧画面
  • リンクボタン追加画面
  • プレビュー画面
  • オマケ
  • スクラッチでプロジェクト数アップ
• アプリ情報

POP – Prototype on Paperの使い方

アカウント作成画面

Facebookのアカウントを使って使用できますが、「Create New Acount」で共有のメールアドレスを登録しておけば多数の人がプロジェクトを共有できて便利です。

プロジェクト追加画面

画面左上の「+」をタップでプロジェクトを新規作成です。

写真追加

プロジェクトを新規作成すると、プロジェクト名の入力画面になり、それが完了したら写真の追加です。

画面左下のカメラアイコンをタップして画像を取り込みます。

画面撮影

ワイヤフレームの画面を枠に合わせて、①の撮影ボタンでワイヤフレームを撮影します。

②は、先程述べたiPhotoが入っていないと使用できません。

ワイヤフレーム一覧画面

画面を撮影してピンチイン・ピンチアウトで画像を拡大縮小や位置を調整して「Save」で保存するとワイヤフレームの一覧画面になります。

ここまでの手順を繰り返して必要な画面を複数枚取り込んでおきます。

ワイヤフレーム画面をタップするとリンクボタンの追加画面に移動します。

リンクボタン追加画面

下記の手順でリンクボタンを追加します。
③リンクボタンを追加
④リンク領域を調整
⑤リンクを追加

先ほどのリンクボタンを一通り追加し終わったら、⑦をタップすることでプレビュー画面に移り遷移をシミュレートすることができます。

⑧はシェアボタンです。
メールなどで送ればPCのブラウザからでも確認できます。
⑨は、ワイヤフレーム画面の削除や「Replace（画面の入替え）」ができます。

ワイヤフレーム画面は長押しで、順番を入れ替えることができます。

プレビュー画面

実際のタップ操作をするとこんな感じで緑色のボタン領域が表示されてクロスフェードで画面が遷移します。

少し分かりづらいですが、この画面から戻るには、画面全体をつまむ感じでピンチインすると戻れます。

オマケ

iPhotoが入っていれば、上記の②のボタンをタップするとアルバムの中からこのようにPNG画像を読み込むことができます。

スクラッチでプロジェクト数アップ

デフォルトではプロジェクトは2つしか作成できません。
プロジェクト一覧画面の「Plans」をタップしてスクラッチを引くと、5～20個ランダムで追加されるようです。

こちらのモックアップジェネレーターを使って、このPOPに取り込むのもいいかもしれません。