差金とテンプレート定規を使ったiPhoneアプリの手描きプロトタイピング

iPhoneアプリのUIを開発する際、自分の場合はまず紙の上での手描きプロトタイピングから始めます。
ワイヤーフレームは、小さな差金(シンワ測定 三寸法師)とテンプレート定規(VANCO テンプレート WE-2)を使って、A3サイズのコピー用紙に描いています。

1. 矩形を描く

三寸法師で矩形の上と右側を描きます。iPhone 5の画面は幅が約5cm、高さが約9cmですが、あまり気にせずに素早く線を引きます。

三寸法師の内側をうまく使って矩形にします。
※差金を使うメリットはここにあります。

2. 横線を引きながら主要パーツを描く

横線を引きながら、Status BarやUINavigationBar、UITableView、ADBannerViewなどの主要パーツを追加していきます。線がはみ出したり曲がったりしても全体の雰囲気がわかればよいと思います。

3. 部品を描く

細かい部品はWE-2を使って描いていきます。ラフ案なので丸と四角でほとんどのUIが表現可能です。

4. 文字などを描く

文字やコメントなどを書き込みます。UIを表現する線は三寸法師、その他は手描きです。

5. アイデアを広げる

用紙の中央から描き始め、思いつくがままに遷移先の画面を追加していきます。マインドマップのような仕上がりになりますが、アプリ全体のイメージが把握できるのでアイデアが広がりやすくなります。

最終的にはPhotoshopやIllustrator、OmniGraffleなどでよりリアルな画面を作り込むのですが、手描きプロトタイピングはアイデアを思いついた瞬間にすぐ表現できるのでおすすめです。

■シンワ測定 小型曲尺 12101 三寸法師 ステン 10×5cm 表裏同目 同厚

■VANCO テンプレート WE-2

Tweet about this on TwitterShare on Facebook0Share on Google+0Pin on Pinterest0

コメントを残す

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