1. The ultimate guide to
Prototyping
the best prototyping methods,tools,and processes
BOOK CLUB
2015.3.21
1

2. 本日は宜しくお願いします。

3. 自己紹介 & 他己紹介

4. 川合 俊輔
2014 芝浦工業大学デザイン 工学部吉武研究室出身
2015 株式会社ジャストシステム UX デザイナー , WACA 上級ウェブ解析士
B2B,B2C 問わず ソフトウェア・アプリケーション の UX デザインを行ってます。
現在、ウェブ解析からユーザビリティ評価まで定量・定性調査を活用した
ービスの提案・研究を行う。

5. CHAPTER
Introduction
0

6. 本日の参考図書
タスクが終わった後
・ユーザがどのタスクが難しいか分かる
・タスク（目的）ごとに異なった評価ができる
プロトタイピングの目的を学び・考える
最適なプロトタイピングの手法・ツール・プロセスを
知る
プロトタイピングツールを運営している UX-pin が提供した
プロトタイピングのガイドブックで IDEO.Google,Apple
などが実践している最適な手法・プロセスを紹介。
ビギナーの方にとっては、プロトタイピングとは何で、なぜ
必要なのかプロセスや手法に合わせて説明。
専門の方には、正しくプロトタイピングの手法やツールの選
択するための実践的なアドバイス（ただし、プロトタイピン
グツールを提供している会社というのはお忘れなく）。
読書会の目的
The ultimate guide to Prototyping
概要

7. 著者紹介
・UX-pin のコンテンツストラジスト
・以前は、アメリカのコンテンツマーケティングエージェント Brafton 社
でコンテンツ開発、DDB 社でディレクターとして働く。
Jerry Cao
・UX-pin の共同創業者
・以前 GRUPA Nokaut での UX/ UI デザイナーとして働いていた。
・大学はソフトウェアのエンジニアリング専攻であり、デザインと心理学にも勤し
Kamil Zieba
・UX-pin の編集担当
・以前はさまざまなデザインの分野やハイテク産業の会社で働いていた。
Matt Ellis

8. CHAPTER
A Practical Look at
Prototypes
1

9. What is Prototyping ?
Why Prototype ?

10. http://www.slideshare.net/dlichaw/mobile-prototyping-25431091
Branching Exploration
Getting the right design
Incremental iterative refinement
Getting the design right
Design Prototyping

11. Why prototype?

12. Communication & collaboration ( 交流と共同 )
Documentation can be misinterpreted, but experiences are shared.
ドキュメントは誤解されることがあるが、体験は共有できる。
Gauge feasibility while reducing waste( 実現可能性を判断する )
Wireframes, mockups, and requirement documents live in paper, not reality.
Prototyping allows teams to experiment, giving them the freedom to fail cheaply while
learning more. 失敗することで新しい気づきを得られる。良い悪しを見極め実現可能性を見極
める。
Sell your idea( アイデアを売る )
Prototypes can be great for pitching if you re working with skeptical clients.
Experiencing the reallife website or app proves your vision more than a wordy
description or mockup bogged down with notes.
プロトタイプによって長ったらしい言葉ではなく、体験を共有することでビジョンを伝えられる。
Why prototype?

13. Test usability earlier( ユーザビリティテストを簡単に )
Usertesting a prototype, you re able to find problems and fix them earlier in the
process, saving yourself a huge hassle of dealing with them when they re cemented
in code. プロトタイプによって早い段階でユーザビリティの課題をみつけられる。
Set your design priorities( デザインの優先順位を決める )
We recommend prototyping early and often because prioritizing interaction design will
keep you grounded in reality when you make static design decisions. The visuals must
fulfill the experience, not the other way around.
プロトタイピングにより、インタラクションデザインの優先度をユーザー中心の考えのもとに決
めることができる。

14. http://www.tamingdata.com/2010/07/08/the-project-management-tree-swing-cartoon-past-and-present/

15. How Prototypes Improve
Collaboration & Communication

16. Showing is always better than telling, and experience is king.
Different departments use different lingo and jargon, but a
prototype shatters all barriers. 専門用語とは無関係にデザイナーと開発者
のゴールや目的が共有できる。デザイナーはデザインすること、開発はコーディ
ングをすることがゴールではない。
A prototype is a powerful weapon to bring to any presentation.
Boyle s Law is simple but effective: never go to a meeting without
a prototype. In terms of its communicative and persuasive abilities,
this presentational aid often makes the difference between a yes
or a no. プロトタイプはプレゼンの強力な武器になる。自分たちのコンセプ
トを明確に体験として伝えられる。
How Prototypes Improve Collaboration & Communication

17. プロトタイプを武器にするプレゼンテーション
動画によってプロトタイピングし、疑似体験を作る
https://www.youtube.com/watch?v=eACpkjgJZYw

18. How Prototypes
Add Balance to Design

19. Decision-making ( 意思決定 )
Important design choices concerning ergonomics, shape, function, production ‒ sometimes all
at once ‒ are finalized in the prototyping phase. A working prototype will give you instant
feedback so you can make an educated decision.
人間工学・形・機能・・デザインを根拠に基づき客観的な意思決定することができる。
For the designer, there are three main benefits of prototyping:
Focus ( フォーカス )
With concrete feedback for all senses.prototypes ground you in user reality. UX priorities
become apparent when you can experience them right in front of you.
すべての感覚を具体的なフィートバックで、ユーザー中心の考えを根付かせる。また、UX の優
先順位を明らかにする。
Parallelism( 並行作業 )
Gathering feedback, setting requirements, and brainstorming new concepts and interactions can
all happen at the same time while prototyping, and when done right will complement each other
プロトタイプでは、フィードバックの収集、必要条件の設定、コンセプトやインタラクションの
ブレインストーミングを同時に行うことができる。また , それぞれを補うことも出来る。
How Prototypes Add Balance to Design

20. How Prototyping Makes
Usability Testing Easier

21. Prototyping is a way to sketch with interactions to create a rough model
of usability, then refine and perfect.
Know the product（製品を知る）
製品を知らなければ、ユーザビリティテスティングでの振る舞いや目的が不明確
になってしまう。
Recruit the right testtakers ( 正しくリクルーティングする）
定性で５人以上、定量で２０人が必要です（有名な Nielsen の図を参照）
また、ターゲットになり得るユーザーを中心にリクルーティングします。
Set up the right test ( 良いテストを設定する）
予算・タイミング・プロジェクトのニーズや目的に合わせてテストを設定する。
Analyze results ( 結果の分析）
データをインサイトに変えるフェーズです。なるべくすぐに行うことも重要。
How Prototyping Makes Usability Testing Easier

22. Why Prototyping Is Mandatory for Mobile
MobilePC
環境
場所
インプット
スクリーン
マルチタスク
概ね予測できる
座っている、リラックスしている
主にキーボードとマウス タッチデバイス、ジェスチャー
大きい
キーボード、ROM、
マウス、大きな画面・・・
複数のタスクを素早く、並行
小さい
不定で変わりやすい
絶えず変わる

23. We ve found the following to be the most compelling reasons for mobile
prototyping.
Flow makes or breaks the mobile experience
（フローはモバイル体験を作る）
モバイル体験は幾つかのページを遷移するので、フローは優先順位として高い。
Animations make the experience fun & desirable
（アニメーションは体験を楽しく魅力的なモノにする）
アニメーションはマイクロインタラクションの重要な要素である。
UX mistakes are more expensive
（ＵＸのミスは高くつく）
プロトタイピングは長い目でみると、時間・お金を節約出来る。

25. Thanks!!