ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/346/room ーーーーーーーーーーーーーーーーーーーーーーー

1. 美しいモバイルUX
の理解と実践
10の法則：
試作・プロトタイピング編
1

2. 2
安藤幸央
ブログ安藤日記
@yukio_andoh
FB,G+

3. 3
プロトタイピング・試作

4. 今日の授業
10分：準備
20分：実践
10分：コツ
20分：質問
4

5. photo by milosevic
質問
授業の途中でも質問どうぞ
有益な質問にはプレゼント
5

6. 美しいUX
心が美しい
立ち振る舞いが美しい
姿勢が美しい
バランスが整っている
手入れが行き届いている
and more ....
6

7. 美しいUX
わかりやすい・ 見やすい
スムーズで心地よい
素早く操作できる
優雅な体験ができる
便利・役に立つ
手入れが行き届いている
7

8. 質問：皆さんの目的は？
8
A : より良いスマートフォンアプリを作りたい
B : 今あるアプリをより良いものに改善したい
C : 考えているアイデアをアプリの形にしたい

9. 9
●リサーチ●プロトタイピング●モックアップ●ベータ版

10. 法則１
アプリを見直すと気づきがある
10

11. 質問：朝いちアプリ
11

12. 12
準備・道具
photo by karramarro

13. 13
ペーパー
プロトタイピング
紙とペンでの試作
photo by gualtiero

14. 14
質問：何のプロト？

15. 15
質問：何のプロト？

16. 16
Square

17. なぜ紙とペンを使う？
17
何よりも素早くできる。 試作コストが少なくてすむ。
やり直しが簡単。早めに的確な失敗ができる。
出来あがった感じがしない。重要なことだけに集中できる
目（と指）は口ほどにモノを言う。

18. 利点
細かいところまで複数の人で議論できる
使いにくさ、使いやすさが体感できる
すぐに修正し、いろいろ試せる
完成していると思わせない
進歩の早い技術とは違い、たぶん10年後も有効なスキル
18

19. 欠点
19
完成していないので、いろいろ想像しながら試すことになる
風で飛んでいく
一般的には理解が得られにくい
「こんなメモみたいなアプリをどうやって試すんだ！」

20. 法則２
道具にこだわろう！
20

21. 方眼ノート／ポストイット／ペン
21

22. “UI template”
22

23. 法則３
アウトプットの質はインプットの質と量に比例する
23
たくさん見る、使う、調べる

24. Human Interface Guidelines / Android Design
24

25. Google Play / Apple AppStore
25

26. Dribbble
26

27. Pinterest
27

28. “Mobile UI Patterns”
28

29. UI mini book
29

30. 30
試作・実践

31. 31
インスクリーン
（オンデバイス）
プロトタイピング
紙に描いたスケッチ
を、カメラで取り込
んでスマートフォン
の画面で確認します
photo via popapp.in

32. 法則４
素早く試して、素早く失敗しよう
32

33. 法則5
本当に大切な2,3の機能を作ろう
33

34. 法則6
凝りすぎない。作り込みすぎない
34

35. 法則7
完璧を目指さない。失敗を受け入れる
35
誰のせいでもない

36. 法則8
実際の環境で検討するのが重要
36

37. 法則9
客観的に見る、時間をおいて見る
37

38. 法則10
素晴らしい試作も、本物ではない
38

39. 39
便利ツール
photo by schnaars

40. 40
POP
Prototyping
On
Paper
photo by schnaars

41. 41
コツ, まとめ
photo by schnaars

42. コツ, まとめ
42
必要な要素を適切な場所に配置する。本当にそこに必要か？
ある目的に向かって、素直に操作できるか流れを確認する
間接的な操作（ボタンやスイッチ）と直接操作を意識する
アイデアが有益で正しい方向を向いているのか確かめる
抜け、漏れ、作らなければいけない事項を洗い出す
目的を実現するための機能、使いやすさ、楽しさを確認する

43. photo by milosevic
質問
なんでも質問受付ます！
今日の授業のことでも、
普段気になることでも、
お困りごとでも、
お悩み相談でも....
43

44. 宿題
あなたの良く使うアプリ
の1画面を紙にスケッチ
してみましょう。
実際のアプリと紙に描い
たスケッチを見比べてみ
ましょう。
44
photo by Bart

45. Thank you !
Next 2/12
@yukio_andoh
45
photo by blakespot