WEB屋必須!画面遷移シミュレーションが超簡単に作れる便利ツール「POP」

アプリ開発では勿論、WEBサイト制作でも絶対に欠かせないのが画面遷移設計。WEBサイトの場合、ある程度の経験があれば頭の中でなんとなく組み立てることもできますが、複数人で作る場合やクライアントに説明しなければならない時に、画面遷移シミュレーションつまりプロトタイプを作らなければなりません。

もちろん一人で作っていてもプロトタイプを作る利点はさまざまあります。実際に操作してみると「戻れない」とか「迷子になった」とか、思い描くだけではわからない、詰めが甘い、思ったより使いにくかったなんてことも。

ですから作るに越したことはないのですが・・・これが、すごく時間がかかるんですよね。
 
クライアントに見せるプロトタイプならばまだしも、個人用やごく仲間内に見せる為に何時間もかけてコーディングするのは勿体ないというか、精神衛生上にも体力的にもよくありません。

ちなみに私はこのWEBサイトのトップページ(ブログトップじゃなくて)に使用した画像でもお分かりいただけるように、WEBデザインをする際にはまず紙に描きます。ぐちゃぐちゃに散らかった考えを整理する為にも、私は紙に描くのが合っているみたいなので。
ちなみにこういうやり方を「ペーパー・プロトタイピング」と呼ぶそうです。開発手法のひとつなんだとか・・・。私からすれば「チラシの裏に描いたラフ画」でしかないのですが(笑)
 
と、話がずれましたが、このラフ画の段階で画面遷移をシミュレーションできたら、とにかく良いことだらけです。操作してみると気づくことが多いですし、デザインを作り込んでからボタン位置を変えるとか・・・ちょっと嫌ですもん。

以前はラフ画やワイヤーフレームを作った後に何時間もかけてコーディングして画面遷移シミュレーションを行っていましたが、とあるアプリに出会ってから、この作業がとても簡単にできるようになりました。

 

prototyping on paper『POP』

prototyping on paper
使い方は本当にシンプルで斬新。

popの画面

紙に画面レイアウトを描いたら、スマフォで写真をとります。このアプリ上でも撮影可能です。複数枚連続撮影も可能。その後、1ページずつ画面上にリンクをつけていきます。こうすることで動きを確認することができるんです。イメージマップ(クリッカブルマップ)をつけていく感覚。この作業をHTMLでコーディングしていったら、結構時間かかりますよね。
 
popのリンクを設置した部分が緑色に表示された状態の画面
 
WEBサイトだけならあまり使いませんが「ジェスチャー」の設定も可能。アプリ開発者には嬉しい機能ですね。
 
popのリンク設置のメニューが表示されている画面
 
POPのジェスチャーメニューが表示されている画面
 
でき上がったプロトタイプは、他のPOPユーザーと共有したり、URLをメールで送ってブラウザから閲覧することもできます。私は使ったことがありませんが、FBやTwitterなどのSNSでも共有することができます。
 
デザインを作り込んだ後の画像にリンクをつければ、本制作突入前にクライアントに完成イメージを伝えることができます。
 
ほかにも画面遷移ツールやアプリはたくさんあるのですが、実際に使ってみて一番しっくりきたのがこの「POP」でした。スマフォさえあればどこでもできちゃうのがいいんです。
 
UI設計やアプリ制作をされている方、画面遷移確認の為の時間を短縮したい方、こちらのアプリをお試しになってみてはどうでしょうか?

POP https://popapp.in/


中小企業・個人事業主様向けオリジナルデザインのホームページ制作 WEB屋くぇりのお手伝いできること

ホームページ制作は、コーディング技術やデザインセンスのほかにインターネットに関するさまざまな知識が必要です。
デザインしたり、プログラムを書いたり、どんな機能が必要か考えたり。
そして一番大変なのが、ホームページに掲載する内容を考えることです。

ただ美しいデザインのホームページを作るだけでは、なんの効果も得られない場合がほとんど。
それとは逆に情報を詰め込みすぎて伝えたい本質を見失ってしまう場合もあります。
だからお客さまが「ホームページを作ってなにをしたいのか」を明確にするところからご一緒させていただきます。

「どのプランを選べばいいの?」と思われたら、お気軽にお問い合わせください。
お客さまのご予算や状況にあったプランをご提案し概算でお見積もりいたします。
お見積もりは勿論無料です。
『くぇり』はお客様の疑問にお応えしながらホームページの方向性を一緒に作り上げていくのが得意なんです。

4つのプラン以外制作も承っております。
詳しくは価格表をご覧ください。

クリックするとメニューが見えるよ