XP祭り2013で行った「 ペーパー in Screen プロトタイピング・ワークショップ」のスライドです。なお、関連記事は以下のURLでご覧いただけます。 ◆人机交互論：ペーパー・イン・スクリーン・プロトタイピング http://www.usablog.jp/2013/09/paper-in-screen-prototyping.html

1. XP祭り2013 〜 XP 〜
2013年9月14日（土）
ペーパー in screen
プロトタイピング
～POPでモバイルUXプロトタイピング！～
＜アジャイルUCD研究会＞

2. 全面広告
「ユーザビリティ
エンジニアリング(第２版)」
1章 ユーザ中心設計概論
2章 インタビュー法
3章 インタビューの実践
4章 データ分析法
5章 発想法
6章 プロトタイプ
7章 ユーザビリティ評価法
8章 ユーザテスト
9章 ユーザテストの準備
10章 ユーザテストの実施
11章 分析と再設計
12章 ユーザ中心設計活動
*無料サンプル版（第2章全文）
http://www.slideshare.net/barrelbook/ss‐26183115
全面広告

3. 「少しの想像力で、
ほとんど何でも
シミュレートできる」
ペーパープロトタイピングの教科書曰く
「少しの想像力で、ほとんど何でもシミュレートできる」

4. 紙を使ってインタラクション（HCI）
をシミュレーションする

5. Paper in screen
prototyping

6. ●ペーパー・イン・スクリーン・プロト
タイプ
1. シナリオ（画面遷移図）作成
2. 写真撮影
3. 画像のトリミング
4. カメラロールで（“手動”で）閲覧

7. 「インタラクションが
欲しい。。。」
ペーパー・イン・スクリーン・プロトタイプの弱点は「操作」できないこと

8. ●インタラクティブ・プロトタイプ
• HTMLイメージマップ
• リンク付PDF
• インタラクティブ・プレゼンテーショ
ン（Picture Linkなど）
etc…
「ひと手間」加えればインタラクティブにできる

9. POPを使えば、インタラクティブなペーパー・イン・
スクリーン・プロトタイプを手軽に作成できる

10. ●POPの作業手順
1. シナリオ（画面遷移図）作成
2. プロジェクト作成
3. 写真撮影／インポート
4. リンク設定
5. トランジション設定
6. デモ実行
7. シェア／フィードバック
POPではリンクに加えてトランジション（画面遷移時のアニメーション効果）が設定できる

11. ●POPのTips
 デモ実行モードを終了するには、音量下げるボタンを押します。
 トランジションは５種類あります。
• Fade: 画面が一瞬消えます
• Next: 右側からスライドインします。
• Back: Nextの逆です。
• Rise: 下側からスライドアップします。
• Dismiss: Riseの逆です。
 プロジェクト数は５つまでです。
 Projects画面でプロジェクトのアイコン（標準ではPOPのロゴ）を
タップすると、任意の画像を設定できます。
 プロジェクトは標準では「Public」です。URLを知っている人ならば
誰でもプロジェクトを閲覧できます。公開したくない場合は
「Private」に変更してください。

12. デモ実行例
TAP
TAP
音量下げ
るボタンを
押して終了
TAP
再生ボタン
を押してス
タート
TAP
TAP

13. オンライン・プレビューやフィードバック機能も提供されている

14. 参考
●スクリーンショット・プロトタイプ
1. スクリーンショット撮影
2. プロジェクト作成
※スクリーンショットの撮
り方
3. インポート
iOS: ホームボタン＋電源
ボタン
Android4.0以降：音量下
4. リンク設定
げるボタン＋電源ボタン
5. トランジション設定
6. デモ実行
7. シェア／フィードバック

15. 樽本 徹也 ‐ 利用品質ラボ代表
•
•
•
•
•
UXリサーチャ/ユーザビリティエンジニア
認定 人間中心設計専門家
認定 スクラムプロダクトオーナー（CSPO）
NPO 人間中心設計推進機構 評議員
アジャイルUCD研究会 共同代表
 UX/UCDの講演・研修
 UX/UCDの社内導入支援
 UX/UCDによる製品開発支援
Keep in touch!
◎人机交互論 ‐ ユーザビリティエンジニア的HCI論
http://www.usablog.jp/
◎アジャイルUCD研究会 ‐ リーン/アジャイルUX最新News
http://groups.google.com/group/agileucdja?hl=ja
◎Facebook ‐ 樽本徹也
https://www.facebook.com/tetsuya.tarumoto

16. 簡単・便利なコトづくり応援します。
 UX/UCDの講演・研修
 UX/UCDの社内導入支援
 UX/UCDによる製品開発支援
東京都台東区下谷1‐11‐15 ソレイユ入谷4F