手書きのスマホサイトのイメージで超簡単にイメージサイトが作れるアプリ「POP」

手書きのスマホサイトイメージで超簡単に作れるイメージサイトが作れるアプリ「POP」

既存サイトのスマホ化が当たり前になってきました。
街中で、電車の中でほとんどの人がスマートフォンを持っていますのでサイトをスマートフォンでも見れるようにしたほうが情報が見やすくなりますね。

今回は、スマホのサイトをデザインをする前に必ず鉛筆などで下書きしますよね。その下書きでデザインしていくうちにページがいらなくなったり、必要になったり、画面遷移など作る側としては分かりますが、クライアントにも分かりやすくするために簡単に動作確認をしてもらえるアプリを紹介します。

photo credit: JD Hancock via photopin cc

アプリ「POP」 Prototyping on Paper

今回、紹介するアプリです。

iPhoneアプリ「POP」

URLhttps://popapp.in/

iPhone、android両方ともあります!

準備

スマホサイト

かなり手抜きで書いて、分かりにくいです。
トップページ、中ページ、メニューボタンを押したときの3ページ書いてみました。

アプリ起動 POP

アプリ起動 POP

起動して、左下の「+(プラス)」をクリックしてください。

プロジェクト名

クリックをすると、プロジェクトを作ります。

プロジェクト

プロジェクト

プロジェクト名をつけて、プロジェクトが出来ました。
この赤枠で囲ったプロジェクト名をクリックしてください。

プロジェクト

プロジェクトの詳細に入ります。
今度は左下のカメラのマークを押します。
押したらカメラが起動しますので、自分が手書きをしたサイトのページをカメラで撮ります。

カメラ撮影

今回、トップページ、中ページ、メニューボタンを押したときの3ページをカメラで個別に撮影しました。

カメラ撮影

3ページのうちどのページ画像でもいいのでクリックする。

カメラ撮影

ボタンを押すと画面遷移する箇所に、左下の枠みたいなアイコンをクリックすると矩形を作ることが出来ます。

カメラ撮影

矩形は大きさを変える事が出来ますのでボタンサイズに大きさを変えます。
ボタンのサイズが決まったら、真ん中の矢印がクロスしているアイコンをクリックしてください。

サンプルサイト

ボタンをクリックしたらどのページに飛ぶか設定が出来ます。

サンプルサイト

画面遷移のアクションを設定することが出来ます。スライド、フェードなどできます。
スマホのサイトで良くあるのが、メニューをクリックしたら左からメニューバーがスライドで出てくるパターンです。

サンプルサイト

これが操作方法です。

まとめ

制作側としては、イメージさえ出来れば制作を進めればいいのですがクライアントはデザインを見せられてもイメージがつかめない人もいますので、このアプリを使えば「ここのボタンを押すとメニューが左からスライドして出てきます」「ここからこのページに画面遷移します」などより本物に近いサイトイメージを見せることができます。

簡単に出来るので是非使ってみてください!

iPhoneアプリ「POP」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*