プロトタイプを作っていくよ
前回の更新から、随分と時間が経ってしまいました。。。いろいろ忙しかったんです。。。（ということにしておく）
気を取り直して、再開しまーす！
気付いたら、最初に立てた工程と若干変わってきている気もしますが、気にせず行っちゃいますよ。
今回はプロトタイプを作ります。
プロトタイプとは、実際にプログラミングする前に、画面遷移などの動作を検証するために作る試作品のことです。
今回はペーパープロトタイプ、つまり紙で作ったプロトタイプを作ります。
紙にiPhone6の縦横比に合わせた四角を用意します。
前回作った画面遷移図や機能詳細に沿って、各画面に必要な要素を配置し、アイテムやボタンを並べていきます。
webデザインとかだとワイヤーフレームと言われるものに近いです。
ここでアプリの使い勝手などが決まってくるので、慎重に進めたいところです。
ここは試行錯誤を繰り返し、ああでもない、こうでもないと書き直しながら進めていきます。
書いたり消したりが面倒だったので、PCやスマホのアプリで書くツールがないかと試してみたのですが、なんだかんだ、紙に手で書くのが一番早かったです。頭の中にあるものをアウトプットするのは、やっぱり紙が一番ですね。
色やデザインの詳細までを作り込む必要はありませんが、大体のレイアウトを決めていきます。
逆に、この時に細部まで作りこんでしまうと、この後に変更したいと思った時に悲しい気持ちになってしまいます。
ペーパプロトタイプ用のテンプレートを作ってみました。必要あれば、お使いください。
スマホは画面サイズやアスペクト比が多様なので、一つのサイズに絞ることが難しいですが、基本となるレイアウトを決めてしまい、フローレイアウトで合わせるのが良いと思います。
体感的に、iPhoneに合わせることが多いように思います。
また、iPhoneとAndroidでボタンの位置などを変えたりすることもあります。Androidは画面の外に戻るボタンがあるので、画面の中に戻るボタンがある必要がなかったりします。まあ、そのまま付けてるアプリもありますけどね。
プロトタイピングのためのツール
プロトタイプを作るツールとして、今回POPアプリを使ってみました。
このアプリは紙に書いた画面デザイン（ワイヤーフレーム）を撮影して取り込み、タップ動作などを登録することによって、実際にアプリを動かした時の操作を疑似体験できます。
プログラムを書かずに、画面遷移を作ることができるので、UI(ユーザーインターフェイス)の検証にお役立ちです。
今回作ったプロトタイプはこちら。
心なしか、スワイプが効いてない気がしますが、参考まで。
まずは、自分で動かしてみます。
想像で考えていたよりも違った印象になるのではないでしょうか。ここで、気付いたことをメモっておきます。
できれば、何人かに触ってもらい、初めて触る人がどのような操作をするのかを観察します。また、して欲しい操作などを指示し、目的にたどり着けるかもチェックしましょう。ここで気付いたこともメモっておきます。
今回気付いたもの。
1)全体にチュートリアルは必要。また、色ぬり画面は別途ヘルプボタンを用意しておいた方が良さそう。
2)アイコンに統一感がない。
3)色ぬり画面の保存などはスワイプで引き出すようにしていたけど、タップの方が使いやすそう。
4)設定画面のFacebook,twitterはログイン設定ということがわかるようにテキストを追加する必要あり。
次回は、今回の反省点を考慮して、UIを確定させていきますよ。
コメント