昨日書いたのあげてなかったみたいです。下書きに入れっぱなしにしてた…。まあそういうこともあるよね。ない方がいいだろ

Prottをつかって初プロトタイピング
TwitterのUIトレースをやり始めてある程度枚数が溜まったので、とりあえず形にしてみようと思い、プロトタイピングツールを使ってみることにしました。最初は、Sketchにも今のバージョンからプロトタイピング機能が追加されたとのことで、早速それを試してみました。

最初はうまくいっていたんだけど、途中でなぜか動かなくなってしまい、プレビュー画面には、Connection Errorと出てしまうように…。Connection Errorってことはこのリンクの貼り方がどこかで間違ってるってことなのか。その下にError establishing connectionてあるしそうなんだろうと思い、どこからおかしくなったのか探ってみるも、どこまで戻れば回復するのかがやっているうちに分からなくなり途中で断念…。これは週末に解体し直してみようと思ってます。

 というわけで、プロトタイピングツールをつかってみることにしました。使ったのはGoodpachのPrott。日本語対応してるので、感覚が鈍っている英語と格闘しながらやるよりも、今は早く画面を繋ぎたいと思いこちらにしました。1ヶ月は無料で使えるようなので、練習も兼ねて。そのうちInVisionもやってみたいけど！

やってみて思ったのは、Prottの方がプロトタイピングをするのには使いやすいなってことでしたね。まあプロトタイピングツールなので当たり前と言われればそうなんですけど。個人的に良かったのは、
　・画面の右側に選択している画像が大きく出る。
　・画面切り替えの仕方や、どう操作するとどう動くのかがわかりやすい。（フリックなのか、クリックなのか、ダブルクリックか）
　・遷移図が画面を切り替えて確認することができる。
というところです。
　Sketchのほうでも、リンクを貼った時にどう動くのかという選択肢はありますが、フリックとかダブルクリックまでは選択肢になかった（あったのかな？確認不足？）ので、そこの選択肢があるのは、実際のアプリの動きをシミュレーションする時に役立つんだなとおもいましたね。Sketchのは、今のところ本当に遷移だけを確認するみたいな印象でした。これからSketchのプロトタイピング機能ももっと進化していくんでしょうけどね。
　Prottについて、遷移図が個別で全体を確認できるというのも使いやすいところの１つだとおもいました。人に説明する時や現状を共有する時に、遷移図はそれ自体でスッキリと整理されていれば、作業した人以外がみてもわかりやすく、進行状況を把握する際の無駄を省くことにつながるんだろうなと思いますね。こういう小さい無駄というか手間をなくせるのって積み重なって大切なんだなと。強いて言えば、SketchもProttもリンクをはるラインを自分で簡単にいじれるともっといいなと思います。ベジェ線みたいにアンカーポイントは決まってるんだから、途中の回路の組み方は別にいくつかをまとめてもいいし、画面が複雑になるほど、そのラインが自由に整理できないせいで見辛くなってしまうと元も子もないなと。
　あと個人的にはスクロールしてTwitterみたいにTLを読み込んでる時の様子とか、アニメーションがついている時の様子もちゃんと実装できるようにならないとちゃんとしたプロトタイプがつくれないな〜という感じです。設定の画面とかの最後のところまでは作ってないし、それでも大まかな動きはわかるけども、実際に使うところ全部をやってみないとやっぱり完成っていえないだろうしな。途中経過含め、しっかりとアウトプットして俯瞰で確認することも忘れないようにしないとダメですね。