簡単プロトタイプ作りのススメ。100パワポは1プロトにしかず
プロトタイプ始めました
今時web界隈では当たり前のように使われるようになってきたプロトタイピングですが、わたし、恥ずかしながら未経験でして。
仕事のツールといえば、パワポエクセルが主で、「動くもの作ろう」というのは自分にはどこかハードルが高いものだと感じていました。
プログラミング経験無いし、デザインセンスもないし。
それに、同じお絵描きなのに動くのとパワポで表現するのと、表現方法が違うだけで大した違いないんじゃない?と正直思ってたところもあります。
が、今回わけあって、「いい加減議論ばかりしてないでとりあえず動くもの作ってみようよ」という状況になり、私もいよいよ手をつけることとなりました。
結論から言います。
100パワポは1プロトにしかず。
ものすごく価値がある、効率的に物事進められる方法であることに気づきました。
簡単 プロトタイプ 作り方
今時すごいんですよね、こうやってキーワードで検索すると、出るわ出るわ。
画面モックを簡単に作れるアプリの数々。
どれがよいのかよく分からず、まとめサイトを参考にしながらいくつか使ってみたので感想を書いておきます。
もし、私のようにweb開発もデザインも初心者の人が挑む際に選定の参考になればと思います。
1.Prott
私が最初に出会ったのはこのアプリでした。
画像を書いて写真を撮り、リンクを貼ると簡単に画面遷移ができます。
しかも無料の範囲でかなりいろんなことができる。
確か簡単に数画面繋げるぐらいは余裕で無料だった。
私が1年前くらいにちょっとだけ使ったときにはフレームとかパーツとかそんなに無かった気がしますが、すっかりパーツも充実しているようです。
がっつり日本語アプリですし、とっつきやすいと思います。
2.Fluid UI
色々試してみましたが私は結局のところこれを使うことにしました。
画面の組み立て、リンク貼り、画面遷移の設定などが、とても直感的。私のように取り扱い説明書をろくに読まないひとでもあまり迷わない。
使い始めて一日でこれくらいの画面遷移はできました。
今ではイメージがあれば画面3枚くらい30分ちょいでできます。
特に、画面遷移の設定の仕方が好き。画面をつなげて、タップやスワイプなどの動作も設定できる。
かつ、用意してあるパーツが豊富で、デザインセンスがなくても経験がなくても、それなりっぽいものができる。
iOS、Android、それぞれのテイストにあわせたパーツもあります。
スマホ側にアプリを入れれば実際に動作を見ることもできる。
無料版もありますが、さすがに機能が制限されすぎているので、有料スタンダードコースでつかっています。
ただ、難点は、英語しかない(ように見える)ことと、パーツを駆使しているだけあってオリジナリティが表現できないことでしょうか。どこか見たことある感じのアプリになっちゃう・・・。デザインセンスの問題な気もしますが。
3.Porto.io
上二つと同じく簡単にプロトできるらしい。
使い始めよう!と意気込みましたが、私には少し敷居が高かったです。
Fluid UI とは異なり、編集画面を開いて硬直。
ん、次何すればいいんだろう・・・。
というわけで、直感でしかありませんが、初めの一歩としては少しハードルが高いかもしれません。
ただ、他の人のコメントなどを見ていると、どうやら本物に近い出来になるそうで、こだわってしっかり作りたい人にとってはよさそうです。
プロト作ってなにしたい?
プロトを作ると、パワポで作っている時に思い至らなかった点がいかに多いか実感することになります。
「この内容じゃ惹かれない」
「この遷移は使いにくい」
「ここのコンテンツデザインが肝だ」
モノがあると、「作る側」ではなく、「使う側」の視点に立てるので、ユーザが不便に感じる点や、考慮が足りない点が多く洗い出されます。
また、モノを作る段階でも、検討が曖昧なままでは形にならないので検討漏れも見つかりますし、実はメンバー同士でイメージがずれていた、ということもあります。
今までは実際に動くものを作るのはコストが高い行為でしたが、これだけ作成コストが低くなっている今、絶対トライしてみるべきだと思います。
但し一方で、作ることに集中しすぎると、こういった「作ったからこそわかる気付き」を拾うのがおろそかになる可能性もあるので、何をしたいからこのプロトを作ってるのか、ということは忘れずに取り組むべしだな、というのが感想です。
とか言いながら、つい楽しくなってしまって深夜4時まで作業してしまったのでした。