1. スケッチ プロトタイピング
HDIfes（hcdvalue）
＠shirasy
1
2013.6.22 ゲームコミュニティサミット2013
UXのためのUIデザイン

2. 2
＠shirasy
http://www.igda.jp/modules/bulletin/index.php?page=article&storyid=875

3. 3
利用状況の理解と特定
人間中心設計
プロセスの計画
ユーザ要求の特定/
仕様化
設計解の作成
要求に対する設計
の評価
ユーザ欲求に
合致した設計解

4. 4
プロトタイピング
利用状況の理解と特定
人間中心設計
プロセスの計画
ユーザ要求の特定/
仕様化
設計解の作成
要求に対する設計
の評価
ユーザ欲求に
合致した設計解

5. 5
ゲームデザインとはルールを適切に組み合わせて、
楽しさを生み出すエンジンの設計だ。
一方UIデザインとはプレーヤーに寄り添い、ゲーム
世界から放出された楽しさを受け止め、再び送り返す
窓の設計。これらはUXの両輪となる。
そのためUIデザインに関する論考は、UI自体の体系化に
留まらず、ゲームデザインへの影響を含まざるを得ない。
書評『ゲームインターフェイスデザイン』より
http://mediag.jp/news/cat2/post-221.html

6. 6
ゲーム作りのためのプロトタイピングの
知見はCEDEC2012にて発表あり
CEDEC Digital Libraryにて講演の
スライドが公開（要会員登録）
ゲームのイメージ映像を
デジカメで擬似的に作る
http://cedil.cesa.or.jp
UXデザイン入門

7. 7
モバイル マルチタッチ入力
http://www.youtube.com/watch?v=FiVLoQbLj4c

8. 8
スケッチ プロトタイピング

9. 9
頭に描いているUIのイメージを共有する
スケッチ プロトタイピング

10. 10
スケッチ プロトタイピング
ノートなどへのスケッチ
ストーリーボーディング
ペーパーホワイトボードプロトタイピング
情報構造やユーザインターフェースの
アイデアをスケッチで表現
http://alpha.mixi.co.jp/2013/11664/

11. 11
スケッチ プロトタイピング
ノートなどへのスケッチ
ストーリーボーディング
ペーパーホワイトボードプロトタイピング
情報構造やユーザインターフェースの
アイデアをスケッチで表現
http://alpha.mixi.co.jp/2013/11664/

12. 12
スケッチ プロトタイピング
次々に修正を加えられることが重要
ブレーンストーミングを推進し、問題
の早期発見につなげられる
「ワークショップ人間生活工学 第１巻」（丸善出版）より

13. ペーパーホワイトボードプロトタイピング
スケッチ プロトタイピング
場所を選ばずに、情報構造とユーザインターフェイスの
検討を気軽にしたい、と言う思いを元に考えたアイデア
Y.Shirasawa, Wireframing with Paper Whiteboard in Collaboration , 2P-90, APCHI 2012

14. 14
描き直しやすさ 見やすさ 持ち運びやすさ
紙 ペン
紙 鉛筆
ホワイトボード
紙製
ホワイトボード
スケッチ プロトタイピング
ペーパーホワイトボードプロトタイピング

15. 15
ペーパーホワイトボードプロトタイピング
スケッチ プロトタイピング

16. 16
ペーパーホワイトボードプロトタイピング
スケッチ プロトタイピング
カットボードを使うことで以下ができる
・段階的な開示（Progressive Disclosure）
・注目の共有（Shared Attention）
＜俯瞰＞ ＜フォーカス＞

17. 17
ユーザーが何を達成したいのかを踏まえ、使う時の
ストーリーを考える
スケッチ の前にやっておきたいこと
スケッチ プロトタイピング
ペーパーホワイトボードプロトタイピング

18. 18
スケッチ プロトタイピング
モバイル端末のカメラでスケッチを取り込み、
画像表示アプリで表示。モバイル端末のスクリーン越しに
UIを確認できるため、リアリティが上がる
インスクリーン プロトタイピング

19. 23
19
動き

20. 20
http://www.youtube.com/watch?v=FiVLoQbLj4c
身体（手）の動き
画面内のオブジェクトの動き

21. 21
頭に描いているイメージを共有する
メンタルモデル
Structural model
Functional model
システムがどう動くのか
システムをどう使うのか
スケッチの段階で、動きのイメージを共有
するにはどうすればよいか？

22. 22
動きのスケッチプロトタイピング
今、この方法を考え中

23. 23
動きのスケッチプロトタイピング
http://www.youtube.com/watch?v=sncgCRuVDco

24. 2324
動きのスケッチプロトタイピング
「身体（手）の動き」と
「画面内のオブジェクトの動き」
の連続的なインタラクション
アニメーションで伝えることで、
メンタルモデルが共有できるのではないか？

25. 25
動きのスケッチプロトタイピング
Structural model : 身体（手）の動き
Functional model : 画面内のオブジェクトの動き

26. おわりに
「繰り返しによる試行錯誤」の回転を上げるとともに、
状況に合う方法が選べるように、スケッチ プロトタイ
ピングのアイデア検討と形式知化を試みています
ゲームインターフェイスデザイン検討の際、何かの役に
立てたとしたら幸いです

27. 27
D棟入口に振り返りボードが
ありますので、よろしければ感想を！