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

スマートフォンアプリのプロトタイプが作成できるアプリ「POP」の使い方をまとめた記事です。iPhoneでもAndroidでも使うことができ、アプリの画面遷移などが確認できます。無料でインストールできるので試してみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

 

POPとは

pop

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

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

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

 

 

POPのインストール

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

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

iPhoneアプリ

Androidアプリ

 

 

[PR] スマホアプリの開発で挫折しない学習方法を動画で公開中

POPの使い方

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

 

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

プロジェクト作成

 

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

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

 

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

画像取り込み

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

 

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

 

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

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

1ページ

 

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

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

 

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

done

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

 

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

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

完成

 

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

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

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

PCチェック

 

いかがでしたか?

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

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

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