Entries

ペーパープロトタイピング入門 – 第4回 見やすいペーパープロトの描き方

ペーパープロトタイピング講座シリーズ。第4回は清書の仕方。絵心なんて必要ない、エンジニアリング的アプローチからのデザインスケッチの描き方講座。チーム共有やプレゼン用に、スピーディーで効率の良い清書のしかたを紹介する。(第3回は準備に時間がかかりすぎたので、第4回を先に掲載)

  • シャーペンでアイデアを練る
  • サインペン3種類で太さに差をつける
  • マーカー3種類で濃淡をつける
  • ポップアップや状態変化をポストイットで作る




シャーペンでアイデアを練る
最初の段階では高速に試行錯誤するのが重要。

紙に関しては、いつもどおりペーパー・プロトタイピング・パッドを使用する。

シャーペンで描いては消してを繰り返し、あらゆる可能性を広範囲に試していく。とにかく手戻りを恐れずにガンガン描く。この段階では自分さえ理解できればよい。ある程度アイデアが固まってきたら「手早く」清書する。清書はチーム共有やテスト、プレゼンのため。





型紙や定規を使う
キレイな清書には、定規や型紙が有効。定規は普通のモノで問題ない。しいて言うなら透明なもののほうが便利。

型に関しては「あれば便利」程度なので、なくても問題ない。ただしあるとチームでのプロトの品質を平均化できるのでよい。紙で作る場合は、ケント紙やボール紙などで主要コンポーネントを用意すると楽。レーザーカッターが使える環境ならば、透明アクリルやプライウッドなどで作ってしまうのがオススメ。

使いすぎるとフットワークが低下するので、「重要な要素だけ」カッチリと線を整える。




サインペン3種類で太さに差をつける
ペン入れでは、要素の重要度に応じて、太さを切り替えるのが見やすくするコツとなる。

プログラマならlong、int、floatの使い分け、HTMLコーダーならh1,h2,h3の使い分けを認識すれば理解できると思う。視覚的に構造化と型宣言をするために3本を使いわけるのである。



  • 太い: 外形や、ヘッダ、フッタ、タブなどグルーピング要素の輪郭に用いる
  • 普通: ボタンや画像など、コンポーネントの輪郭に用いる
  • 細い: ラベルやダミーテキスト、画像要素の中身など、補足的な要素に用いる。




マーカー3種類で濃淡をつける
ライン入れが終わったら、重要度や要素の違いを明確にする為に、マーカーを使う。

マーカーは「そのエリアで重要な要素」あるいは、「グルーピングしたい要素」を基準に塗っていく。わかりやすい例では、ポップアップ、ナビゲーションバー、タブバーなどである。また決定ボタンなども必要があれば色を塗る。

色を塗る目的は、画面要素を明確に分離、区別する為なので、模様レベルの色は全て無視するとよい。



  • タップ可能エリアの可視化
  • ヘッダーのような固定要素と、スクロール要素の分離
  • ポップアップなどモーダル処理時の画面のロック
  • 色マーカーによる、ボタンや特別なラベルの可視化




ポップアップや状態変化をポストイットで作る
ポップアップ表示やチェックボックスの変化のような要素を表現するには、ポストイットが有効なツールとなる。毎回使うようなコンポーネントは、あらかじめ作っておいて、ノートの表紙の裏にでも貼って置くとよい。

このような要素を何度も描画するのは冗長でと、ペーパープロトタイピングのスピード感が失われてしまう。あらかじめ資産を作っておくとよい。(ワイヤーツールで作ったコンポーネントを印刷して使い回すのもモチロンアリである)。


ポストイットを使うって、リソースを使い回すとよい。


よく使う要素はカタログ化して、ノートの裏に貼っておく。

  • 確認や通知のポップアップ
  • スイッチやラジオボタン、スライダーのステート
  • テキストフィールド等の入力内容
  • タブのステート
  • キーボード(スマホアプリ)




まとめ
今回はチーム共有やテスト、プレゼンのためにペーパープロトを清書する方法を紹介した。


もちろん、ここで紹介している描き方は一例にすぎない。PCでやったほうが速いと確信があれば、PCでもよい。

自分としては清書は紙をオススメする。なぜならテストやインタビュー、打ち合わせ中にもその場でアップデートしてテストできるからでである。打ち合わせでの変更や疑問を、即座に紙でプロトタイピングして検証できることは、クライアントの信頼を勝ち取るのに非常に有効な手段である。

次回は、第3回と第5回、さきに終わった方を掲載。