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

1. 1
モックを作ろう！
アプリのための実践系UXデザイン
株式会社バスキュール
UXディレクター 大塚晃

2. 2
アプリ企画者
自己紹介
仕事：企画／デザイン／設計／モック制作
デバイス：モバイル／PC／テレビ／ゲーム機
ダブルスクリーンの
釣りゲーが一番最初
ガラケーアプリUI
ガラケーWeb開発
大手キャリアの
ガラケー／スマホ
アプリUI設計
自社開発＆
クライアントワーク
スマホアプリ設計
UXディレクター
2008 2009 2011～

3. 3
アプリができるまで
１．企画
２．要件定義
３．仕様定義
４．実装
５．テスト
６．リリース
長い…

4. 4
実際にアプリに触れるまで
開始から２ヶ月～半年
多くの場合、実際に手で触れられるようになるまで
長い時間がかかる。PCのドキュメントか紙で仕様を読む、
デザインを眺めるだけしかできない。

5. 5
『こうすればよかった』
ユーザーテストが開始されるあたりで実際のアプリが
触れるようになる。触ってはじめて気づくことがある。
デザインを調整すれば対応できる事もあるが
開発中の調整は不安定さを招くこともあり
大きな調整となると現実的に対応が難しい。

6. 6
バージョンアップでの対応
開発終了後いろいろな事が判明し、バージョン２で
対応としようという話になる事は多い。
だが、人気アプリにならなければ実際は立ち消える。
開発後に分かることが、開発前に分からないのは
なぜなんだろう？

7. 7
開発後に分かることが、
開発前に分からないのは
なぜ？
Question

8. 8
・アプリがわからない
・ユーザーがわからない
・やってみないとわからない
Answer ?

9. 9
そういうのを
モックアップで解消しよう

10. 10
モックアップで
例えばわかること
例：AQUA Social Drive

11. AQUA Social Drive
AQUA Social Drive
11

12. ドライブしながらツイートするアプリ
AQUA Social Drive
ドライブ中は運転に集中している
画面操作はもちろん不可
外を見ているから、画面表示は無意味。
12
見ない・タッチしないアプリって何？

13. アプローチは？
AQUA Social Drive
・メーター類やサイン標識のように
現状を簡潔に知らせるもの？
・スクリーンセーバーのような反応？
・オーディオやラジオのように耳で楽しませるもの？
13
モックを作りロケテストへ

14. 腕時計よりも遠い、小さなUI
AQUA Social Drive
14
・最小限の構成要素
・１M離れても読める文字の大きさ
→実際の環境はPC画面を見ていてもわからない。

15. 集中のノイズにならないように
その風景にあるトンマナを使う
→信号や交通標識
AQUA Social Drive
15

16. 安全のための配慮
メイン画面に触れようとするとアラート
放置しておくとすぐ解除され元にもどる
ガイドラインに沿ったアラートであれば
ドライバーは小さな【OK】ボタンを押そうとする。
これは危険な上にドライブが台無しになる。
AQUA Social Drive
ガイドラインがいつも正しいわけではない！
16

17. 17
ドライブがコンテクスト
スマホアプリは、電車の中、自分の部屋とか、
コンテクストを取り入れてはじめてその実態がわかる。
例えば、ドライブというコンテクストをPCの前で
完全に再現できるだろうか？
いつもコンテクストの中にあるデバイスだからこそ、
実際の環境下でのテストが必要になる。

18. 18
コンテクストでチェック
（実環境下テスト）するのに
モックが必要なわけです

19. 19
モックって何？

20. 20
Wikipedia
モックって何？

21. 21
モノを大量生産する前段に
実物を模擬的にチェックするもの
「口紅から機関車まで」 プロダクトデザイン全般に
おいてモックは古くから使われている。
モノが大量生産されるのと同じく、アプリは大量に
ダウンロードされる一種のプロダクトだといえる。
モックって何？

22. 22
モックって何？
アプリのモックアップ
実際のハードにインストールして
リリース版と同じように「触る」ことができる
演出も入っており、楽しいアプリか判断できる。
「こうしたい」というアイディアを取り込み
すぐアップデートできる
本開発用環境で制作してもよいが
通常は Flash や PhoneGap などで制作
アプリ書き出しでインストール
やったことがある人はFLASHオススメ

23. 23
モックを作るには
デザイナー ・・・ 0.5～1人
開発者(Flasher) ・・・ 0.5～1人
設計者 ・・・ 0.5～1人
設計者が開発かデザインを兼任することも多く
ミーティングの量も少なめでOK。第二階層まで
触れるようなものを一週間程度で制作する。
モックって何？

24. 24
モックで何ができるのか
１） ロケテスト、実用性チェック
２） チームレビュー
３） フレンドレビュー（家族レビュー）
４） クライアントレビュー
UXや実用性のチェックやレビューは紙では不可能
完成したアプリか、モックアップ以外に方法はない。
モックって何？

25. 25
モックって何？
ボタンが押しやすいかとか
デザインがいいかとか
開発的に問題ないかとか
そういう確認のために
モックを作ってはいけない

26. 26
モックって何？
持ち出す、見たおす、使いたおす。
モックアップといっしょに生活してみる。
メシを食ってる時はどんな感じか、
つり革を持った状態でとなりの人の視線を
気にしながらはどうか、飲んでる時はどうか
打ち合わせをしながらはどうか etc…
必ず発見がある。設計の作りこみが楽しい。
生の「コンテクスト」を
アプリ設計に取り込む

27. 27
モックって何？
生の「ユーザー」を
プロジェクトに取り込む
不思議なことに、モックを手にして話すと
だれでも自然にユーザー視線になっている。
ユーザーに提供しようとしているものについて
全員がフォーカスし、直球で話せる。
ペルソナ資料はUXを客観化・他人事化するが
モックアップは逆に主観化・自分事化する

28. 28
モックって何？
このアプリは
本当のところどうなのか？を
体験済みの「ユーザー」で
考え尽くす為にモックを作る。
プロジェクトメンバーやクライアントでなくとも
身の回りの人を参加させることができる。
リアルな意見やアイディアを事前に大勢から
吸い上げる事がモックを作る最大の意味。

29. 29
モックって何？
【モック】は
＝超コミュニケーションツール
＝全方向営業ツール
さらに、コストパフォーマンスにも優れている。

30. 30
プロトタイピング
もっと簡単にできるモックアップ

31. 31
プロトタイピング
ペーパープロトタイピング
画面サイズの紙に手書きし、
それを手に持って使用感を確かめる。
一時間もあればプロトタイピングできる。
紙とペンがあれば、どんな場所でも可能
実際にアプリを利用してほしい場所で考えられる

32. 32
プロトタイピング
ペーパープロトタイピングは
良くも悪くもただのコンテ。
ペーパープロトタイピングは触って見るためのコンテ。
ひらめいたアイディアをメモして残すことは
やはり紙が一番すぐれている。
ただ、アプリの全画面や細部まで検討することは不可能。
アプリの主導線を考えたり、要件整理の準備初期に使う。

33. 33
プロトタイピング
１００～３００の画面を
手書きするのは間違い。
逆に時間かかりすぎ・・・
パワポで描こう！
コピペ多めで効率アップ！
実質半日～１日で完成形まで起こせる
無限にかける、そのままシェアできる

34. 34
プロトタイピング
Back
Back
Back
まずテンプレを作る

35. 35
プロトタイピング
Place
Name
★★★☆☆ Address
Text
99M
Back
78
Peoples
Place
Name
★★★☆☆
Address
Text
Address
Text
チェックイン
…
…
…
コメントを書く
+Map
||||
Back
Check In Here
Place
Name
★★★☆☆ Address
Text
99M
Place
Name
★★★☆☆ Address
Text
99M
Place
Name
★★★☆☆ Address
Text
99M
Place
Name
★★★☆☆
Address
Text
Address
Text
Place
Name
★★★☆☆ Address
Text
99M
Place
Name
★★★☆☆ Address
Text
99M
Place
Name
★★★☆☆ Address
Text
99M
コピペしてどんどん書き込んでいく

36. 36
プロトタイピング
シーケンスではなく
ストーリーが見えてくる
描いたコンテを「２アップ」でプリントアウトすれば、
実際の画面の大きさで操作感がわかる
「４アップ」でプリントアウトして並べればアプリ全体を
眺める事ができる。この視点はユーザーの認識に近く、
どんなコンテクストで使われそうかストーリーが見えてくる
連続する画面などは、手書きよりもテンポよくサクサク
書けるので、思いついたアイディアをロストしない。

37. 37
プロトタイピング
「写真」を使う
PhotoshopでテンプレートPSDなどを使い
画面を組んでみて、画像に番号をつけ
iPhoneの写真アプリで順に閲覧
デザイナーがよくやっている手法。
持ったまま電車の中やランチ時に確認。
メイン画面の操作性などはアテがつく

38. 38
プロトタイピング
順番に画面を並べたPSDを作って切り出すとラク

39. 39
プロトタイピング
Web上デモ
アプリのようなサイトを制作し、スマホのブラウザから触る。
HTMLやJavascriptで制作
紙芝居のようなものから、実際にスクロールや
演出をつけたものまでアウトプットの幅は広い。
CSSやJavascriptに慣れている人はこちらがオススメ
デモ動作する端末を一つに絞っておくとラク

40. 40
まとめ

41. 41
モックアップを使って
１．生の「コンテクスト」を取り入れられる
２．生の「ユーザー」を取り入れられる
３．リアルにUXをデザインできる
自分が体験し、関係者も体験した上で話ができる

42. 42
ありがとうございました