スマホアプリのプロトタイピングに便利な「POP」を使ってみた

スマートフォンアプリのプロトタイプを作ろうと思うと、かなり手間がかかると思います。そんな時に便利なのが、無料で簡単にプロトタイピングが行えるスマートフォンアプリ「POP」です。

今回は、そんなPOPを実際に使ってみたレポート記事をお届けします。

 

POPとは

POPとは、「prototype on paper」の略で、台湾にあるWOOMOO inc.がリリースしたプログラミングのためのスマートフォンアプリです。

iPhoneアプリ、Androidアプリの両方があり、紙で書いたアプリ画面を読み込んで、実際にスマートフォンアプリを使っているようにして画面遷移などを確かめることができます。

アプリは無料でダウンロード可能です。

 

 

POPのインストール

前述の通り、iPhoneアプリとAndroidアプリの両方があるので、自分のスマートフォンにインストールしてみてください。

なお、Androidアプリは、Android3.0以上の端末が必要になるのでご注意ください。

iPhoneアプリ

Androidアプリ

 

 

[PR] UI/UXデザインで挫折しない学習方法を動画で公開中

POPの使い方

ここからは具体的にPOPの使い方について紹介します。

 

まずは、プロジェクトを作成します。「+」ボタンをクリックして、プロジェクト名を設定しましょう。外部に公開したくない場合は「Private」をオンにします。

 

次にプロトタイプのもとになるアプリの画面画像を取り込みます。

カメラのマークをタップして紙で書いた画面の絵をその場で撮影することもできますし、既に作成した画像データがあればそれを読み込むことも可能です。

 

画像は複数枚同時に選択できるので、事前にスマートフォンに画像を取り込んでおくと便利でしょう。

取り込みが完了すると、画面の一覧が表示されます。

 

ここから、ボタンをタップした際にどのように遷移するのかを設定していきます。

 

プロジェクトから1枚の画面を選択します。

そこで「+」のボタンをタップすると、ボタンにリンクを付けられるようになります。

 

「+」のボタンをタップすると選択範囲が表示されるので、ボタンの大きさに合わせて調整します。

すると、「Link To」が表示されるのでタップしましょう。

 

ここで他の画面が表示されるので、選択して「Done」を押すと、ボタンをタップした際の遷移先が設定されます。また、リンクを設定したボタンは緑色に表示されます。

この繰り返しで、全ての画面のボタンにリンクを設定します。少し手間はかかりますがやってみましょう。

 

全て設定できたら、実際に動かしてみましょう。

右向きの▲ボタンをタップするとスタートします。ボタンをクリックして、遷移がおかしくないか、足りない画面がないかなどチェックしてみてください。

 

また、このプロトタイプはPCでチェックすることも可能です。

POPの右下にあるボタンをタップして「Email」を選ぶとメールでURLを送ることができます。そのURLを開いてとPC上でチェックしてみましょう。

チームのメンバーに共有する時など便利かもしれません。

 

いかがでしたか？

POPはサンプル用の画像を取り込んだ状態でダウンロードされるので、まずはそのデータを使って試してみてはいかがでしょうか。

ワイヤーフレームを無料で作成できるツールも便利ですので、こちらも合わあせて使ってみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でUI/UXデザインを学べるオンラインブートキャンプUI/UXデザインコースを開催しています。UI/UXデザイナーのサポートで実践的に学びたい場合はご参加ください。