いいところ

• 簡単に、素早くできる
• 人に伝えやすい(コミュニケーションしやすい)
• アイデア、利用者視点、表現 (言語化できていなく)、整合性
• ユーザーストーリーの確認になる

イマイチなところ

• 紙に手書きなので、デザインの雰囲気は表現できない
• 最終的な縮尺の表現はできない

コツ・ポイント・注意点

• やりすぎない => 全体的な流れが大切
• 量を書く => 質よりも量、ボツ案も大切

やり方1 - 対象のデータ

対象のデータ = 保存するデータを見つけて「名前」をつける

命名規則

• 対象データを表す名詞#データへの操作
  • 例: Books#index : 書籍一覧
• 操作するロール/対象データを表す名詞#データへの操作
  • 例: Admin/Books#index : アドミンの書籍一覧
  • 例: Manager/Users#index : マネージャーのユーザー一覧

1つのデータに4つの画面

Medium

Twitter

Youtube

ZOZOTOWN

やり方2 - ナビゲーションを決める

• WEBの場合、header, footer, sidebar など
• モバイルの場合、tabbar, navigation, drawer など

道具

• A4の用紙 (印刷用の雛形)
  • • Devices | Facebook Design
• ペン (太い、細い、蛍光マーカー)
• 定規
• 付箋紙
• はがせるテープ : UIパーツの使い回しに便利

WEBサービス・アプリ

• Prott
• POP

リンク

• ペーパープロトタイピング入門 – 第1回 どうして紙でプロトを作るのか | fladdict
• ペーパープロトタイピングでユーザーインターフェースの改善を学ぶ｜キゴウラボ｜情報伝達の設計と意匠
• ペーパープロトタイピング — Website Usability Info
• サービスデザイン方法論2014 第6回：ペーパープロトタイピング レポート | UX INSPIRATION!

下書きとして利用

• ワイヤーフレームを作る上での「下書き」として利用する = 開発の設計図として利用
• 厳密には「プロトタイピング」ではない = 紙芝居とかやらないし、評価もしない

ワイヤーフレームとの違い

• ワイヤーフレーム : 開発の設計図、制作物の使いやすさは保証しない
• ペーパープロトタイピング : 操作可能なデモ、利用をシミュレートするもの

プロトタイプとプロトタイピング

• プロトタイプ(名詞) : モックアップそのもの
• プロトタイピング(動詞) : プロトタイプを作って終わるのではなく、しっかりと評価まで行うことが大切

ユーザビリティテスト・評価する

• 紙芝居 (付箋の利用) でユーザーに触ってもらう
• ユーザーが触ったら、付箋を貼ったりして紙芝居する
• Hanmail Paper Prototype - YouTube