こんにちは、JAGA(@ja_gaimopotato)です。
iPhoneのアプリを開発するときに、機能やユースケースを考えるということはもちろんあるのですが、やっぱりUIが大事ですよね。
ぼくは、モレスキン(Moleskine)を日々持ち歩いていて、空き時間などにモレスキンにペーパープロトタイピングすることがあります。

ペーパープロトタイピングをモレスキンでするというタイトルの通り、ぼくのモレスキンでのペーパープロトタイピングのスタイルを書きます。

準備をしよう

まずは準備、ということで一応必要なものをあげます。

• モレスキンのEvernote スマートノートブック スクエア
• ペン
• ものさし

モレスキンのEvernote スマートノートブックのスクエア限定です。
ドットでスクエアがデザインされていることが重要です。

ものさしは何でもいいのですが、モレスキンと一緒に持ち歩けるようにクリップルーラーがおすすめです。

クリップルーラーを買った、小さくて、かわいいやつ。

作図しよう！

モレスキンへiPhoneの画面に見立てた長方形を作図します。

作図の方法ですが、下記を参考にしてください。

1.まず左上辺りの1点を選んでください。

2.その点から下に18マス移動し、上へ2目盛りあがったところに点を書きます。

3.1番最初の点と2番目の点から右方向へ10マス移動したところに点を書きます。

4.全ての点を結んで長方形になるようにしてください。

これでほぼ、iPhone5sの画面サイズと同じ長方形が完成します。

マスで大体でもUIのサイズを把握できるのが嬉しいです。

一つのマスの1辺が約32ポイントになります。
1つのドット間が約6.5ポイントです。

例えばUINavigationBarをステータスバーの高さを含めると64ptになるので2マスでちょうど良いです。
44ptなら1マスと2目盛りでOKとしています。

手書きで、いつでも始められることがモレスキンを使ってペーパープロトタイピングするメリットなので精度はそこまで高くないですが、それでもある程度の満足は得られています。

モレスキンを普段からお使いの方で、アプリのUIを考えている方は一度試してみてください。

これからも更新を続けていきますので、Feedlyへの登録をお願いします！