XP祭り2013 〜 XP 〜

2013年9月14日(土)

ペーパー in screen
プロトタイピング
~POPでモバイルUXプロトタイピング!~

<アジャイルUCD研究会>
全面広告
「ユーザビリティ
エンジニアリング(第2版)」
1章 ユーザ中心設計概論
2章 インタビュー法
3章 インタビューの実践
4章 データ分析法
5章 発想法
6章 プロトタイプ
7章 ユーザビリティ評価法
8章 ユーザテスト
9章 ユー...
「少しの想像力で、
ほとんど何でも
シミュレートできる」

ペーパープロトタイピングの教科書曰く
「少しの想像力で、ほとんど何でもシミュレートできる」
紙を使ってインタラクション(HCI)
をシミュレーションする
Paper in screen
prototyping
●ペーパー・イン・スクリーン・プロト
タイプ
1. シナリオ(画面遷移図)作成
2. 写真撮影
3. 画像のトリミング
4. カメラロールで(“手動”で)閲覧
「インタラクションが
欲しい。。。」

ペーパー・イン・スクリーン・プロトタイプの弱点は「操作」できないこと
●インタラクティブ・プロトタイプ
• HTMLイメージマップ
• リンク付PDF
• インタラクティブ・プレゼンテーショ
ン(Picture Linkなど)
etc…

「ひと手間」加えればインタラクティブにできる
POPを使えば、インタラクティブなペーパー・イン・
スクリーン・プロトタイプを手軽に作成できる
●POPの作業手順
1. シナリオ(画面遷移図)作成
2. プロジェクト作成
3. 写真撮影/インポート
4. リンク設定
5. トランジション設定
6. デモ実行
7. シェア/フィードバック
POPではリンクに加えてトランジション(画面遷移...
●POPのTips
 デモ実行モードを終了するには、音量下げるボタンを押します。
 トランジションは5種類あります。
• Fade: 画面が一瞬消えます
• Next: 右側からスライドインします。
• Back: Nextの逆です。
• ...
デモ実行例
TAP

TAP

音量下げ
るボタンを
押して終了

TAP

再生ボタン
を押してス
タート

TAP

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

●スクリーンショット・プロトタイプ
1. スクリーンショット撮影
2. プロジェクト作成
※スクリーンショットの撮
り方
3. インポート
iOS: ホームボタン+電源
ボタン
Android4.0以降:音量下
4. リンク設定
げるボ...
樽本 徹也 ‐ 利用品質ラボ代表
•
•
•
•
•

UXリサーチャ/ユーザビリティエンジニア
認定 人間中心設計専門家
認定 スクラムプロダクトオーナー(CSPO)
NPO  人間中心設計推進機構 評議員
アジャイルUCD研究会 共同代表
...
簡単・便利なコトづくり応援します。
 UX/UCDの講演・研修
 UX/UCDの社内導入支援
 UX/UCDによる製品開発支援
東京都台東区下谷1‐11‐15 ソレイユ入谷4F
Upcoming SlideShare
Loading in...5
×

ペーパー・イン・スクリーン・プロトタイピング

2,475

Published on

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

ペーパー・イン・スクリーン・プロトタイピング

  1. 1. XP祭り2013 〜 XP 〜 2013年9月14日(土) ペーパー in screen プロトタイピング ~POPでモバイルUXプロトタイピング!~ <アジャイルUCD研究会>
  2. 2. 全面広告 「ユーザビリティ エンジニアリング(第2版)」 1章 ユーザ中心設計概論 2章 インタビュー法 3章 インタビューの実践 4章 データ分析法 5章 発想法 6章 プロトタイプ 7章 ユーザビリティ評価法 8章 ユーザテスト 9章 ユーザテストの準備 10章 ユーザテストの実施 11章 分析と再設計 12章 ユーザ中心設計活動 *無料サンプル版(第2章全文) http://www.slideshare.net/barrelbook/ss‐26183115 全面広告
  3. 3. 「少しの想像力で、 ほとんど何でも シミュレートできる」 ペーパープロトタイピングの教科書曰く 「少しの想像力で、ほとんど何でもシミュレートできる」
  4. 4. 紙を使ってインタラクション(HCI) をシミュレーションする
  5. 5. Paper in screen prototyping
  6. 6. ●ペーパー・イン・スクリーン・プロト タイプ 1. シナリオ(画面遷移図)作成 2. 写真撮影 3. 画像のトリミング 4. カメラロールで(“手動”で)閲覧
  7. 7. 「インタラクションが 欲しい。。。」 ペーパー・イン・スクリーン・プロトタイプの弱点は「操作」できないこと
  8. 8. ●インタラクティブ・プロトタイプ • HTMLイメージマップ • リンク付PDF • インタラクティブ・プレゼンテーショ ン(Picture Linkなど) etc… 「ひと手間」加えればインタラクティブにできる
  9. 9. POPを使えば、インタラクティブなペーパー・イン・ スクリーン・プロトタイプを手軽に作成できる
  10. 10. ●POPの作業手順 1. シナリオ(画面遷移図)作成 2. プロジェクト作成 3. 写真撮影/インポート 4. リンク設定 5. トランジション設定 6. デモ実行 7. シェア/フィードバック POPではリンクに加えてトランジション(画面遷移時のアニメーション効果)が設定できる
  11. 11. ●POPのTips  デモ実行モードを終了するには、音量下げるボタンを押します。  トランジションは5種類あります。 • Fade: 画面が一瞬消えます • Next: 右側からスライドインします。 • Back: Nextの逆です。 • Rise: 下側からスライドアップします。 • Dismiss: Riseの逆です。  プロジェクト数は5つまでです。  Projects画面でプロジェクトのアイコン(標準ではPOPのロゴ)を タップすると、任意の画像を設定できます。  プロジェクトは標準では「Public」です。URLを知っている人ならば 誰でもプロジェクトを閲覧できます。公開したくない場合は 「Private」に変更してください。
  12. 12. デモ実行例 TAP TAP 音量下げ るボタンを 押して終了 TAP 再生ボタン を押してス タート TAP TAP
  13. 13. オンライン・プレビューやフィードバック機能も提供されている
  14. 14. 参考 ●スクリーンショット・プロトタイプ 1. スクリーンショット撮影 2. プロジェクト作成 ※スクリーンショットの撮 り方 3. インポート iOS: ホームボタン+電源 ボタン Android4.0以降:音量下 4. リンク設定 げるボタン+電源ボタン 5. トランジション設定 6. デモ実行 7. シェア/フィードバック
  15. 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. 16. 簡単・便利なコトづくり応援します。  UX/UCDの講演・研修  UX/UCDの社内導入支援  UX/UCDによる製品開発支援 東京都台東区下谷1‐11‐15 ソレイユ入谷4F
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×