SlideShare a Scribd company logo
1 of 28
Download to read offline
プロトタイピングの目的・範囲・ツール
Partner : Satoshi Omiya (webtron Inc.)
プロトタイピングの目的
何のためにプロトタイピングするか?
• デザインやアイディアの試行錯誤
• ユーザビリティの向上
• デザインや設計の評価
• 実装時の手戻りを減らす
• チーム内やクライアントとの合意形成
• デザイナー⇄エンジニア間の意思疎通
など
プロトタイピングの役割は大きく2つ
• デザインやアイディアの試行錯誤
• ユーザビリティの向上
• デザインや設計の評価
• 実装時の手戻りを減らす
開発ツール
• チーム内やクライアントとの合意形成
• デザイナー⇄エンジニア間の意思疎通
コミュニケーションツール
様々なプロトタイピングサービスの
登場により役割が大きくなってきた
プロトタイピングの範囲
プロトタイピングの範囲
後期初期
それぞれの範囲に適したプロトタイピングツールを使おう
アイディア
画面デザイン
画面遷移
全体構造
手触り・使い心地
フィードバック
低 高
詳細度
開発フェーズ
範囲に適したプロトタイピングツール
開発フェーズ
後期初期
手触りや使い心地
フィードバック
詳細度:低 詳細度:高
アイディア・画面デザインの検討
画面遷移や
全体構造の検討
ペーパー
プロトタイピング
ペーパープロトタイピング
ペンやマーカーを使って画面デザインのアイディアを出しているところ
ペーパープロトタイピング
実寸でプリントアウトした画面を切り刻んで「オズの魔法使い」などの手法でユーザビリティテストを行う
ペーパープロトタイピングパッド
THE GUILD ではプロトタイピングに特化したレポート用紙「Paper Prototyping Pad」をつくりました
ペーパープロトタイピングパッド
iPhone実寸のグリッド入り&各種ガイド線付なので NavigationBar や TabBar なども簡単に線を引けます
ペーパープロトタイピングパッド
https://goo.gl/qujtfI
開発フェーズ
後期初期
アイディア
画面デザイン
手触りや使い心地
フィードバック
詳細度:低 詳細度:高
画面遷移や全体構造の検討
画面遷移や全体構造の検討
複数画面を登録し、各画面をリンクさせていくタイプ
画面遷移や全体構造の検討
画面内に配置したHotSpotに遷移先画面をリンクして画面遷移をシミュレートできます
画面遷移や全体構造の検討
LIVESHAREなどデザインレビュー、作業者間コミュニケーションのサポート機能が豊富
画面遷移や全体構造の検討
ペーパープロトタイプと連携しやすい機能が特徴
マイナスを0に近づける
ユーザビリティや設計の整合性などを検証してリファインし、不具合や瑕疵をなくす
アイディア、画面デザイン 画面遷移や全体構造
実用的品質(Pragmatic Quality)は、もはや当たり前に
UXの捉え方:Hassenzahlのモデル
ユーザがUXをどう捉えているかを説明
内 容
表 現
機能性
インタラクション
製 品 の 特 徴
実用的属性(Pragmatic Attributes)
操作性
刺激・共感・喚起
快楽的属性(Hedonic Attributes)
顕 在 的 な 製 品 の 特 性
状 況
魅力
楽しさ
満足
結 果
よいUXの醸成には「実用的品質」と「快楽的品質」が求められる
Hassenzahl, 2003
0をプラスに
手触りや使い心地といった快楽的品質(Hedonic Quality)を高めていく
手触り・使い心地・フィードバック
インタラクションデザインの重要性
Android の Material Design ガイドラインでは画面遷移時のパーツの動きなどが細かく定義されている
インタラクションデザインのプロトタイピング
デザインスキルに加えエンジニアリングスキルが必要とされるため
十分に検討することや満足のいく成果を出すことが難しい部分
デザイン能力 エンジニアリング能力
ビジュアル・モーションデザインをユーザの操作によってどのように変化するかを動的に定義する必要がある
+
開発フェーズ
後期初期
画面デザイン
アイディア
詳細度:低 詳細度:高
手触りや使い心地フィードバックを検討
画面遷移や
全体構造の検討
Origami
パッチと呼ばれる要素を線で繋いでいくことで、インタラクティブなモックアップを作成することができます
Principle
複数の画面間の遷移のシミュレートができ、かつインタラクティブなUIも作ることができる
ありがとうございました

More Related Content

What's hot

The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
The Way of the (Co-)Prototyping チームでUser InterfaceをプロトタイピングするThe Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
The Way of the (Co-)Prototyping チームでUser InterfaceをプロトタイピングするMikihiro Fujii
 
もしユーザエクスペリエンスの設計担当者がドラッカーの『マネジメント』を読んだら
もしユーザエクスペリエンスの設計担当者がドラッカーの『マネジメント』を読んだらもしユーザエクスペリエンスの設計担当者がドラッカーの『マネジメント』を読んだら
もしユーザエクスペリエンスの設計担当者がドラッカーの『マネジメント』を読んだらKazumichi (Mario) Sakata
 
インタラクションデザイン、その前に -UXなまトーク vol.2
インタラクションデザイン、その前に  -UXなまトーク vol.2インタラクションデザイン、その前に  -UXなまトーク vol.2
インタラクションデザイン、その前に -UXなまトーク vol.2Toshiaki Otsuka
 
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
"チーム"と"プロトタイプ"でつくる GoodpatchのコラボレーションMikihiro Fujii
 
そもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何かそもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何かSatoru MURAKOSHI
 
IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方hidetoshi murohashi
 
GREE Creators Meetup_Closing
GREE Creators Meetup_ClosingGREE Creators Meetup_Closing
GREE Creators Meetup_ClosingSatoru MURAKOSHI
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方Satoru MURAKOSHI
 
ゴールド・エクスペリエンス(Gold Experience)
ゴールド・エクスペリエンス(Gold Experience)ゴールド・エクスペリエンス(Gold Experience)
ゴールド・エクスペリエンス(Gold Experience)Kazumichi (Mario) Sakata
 
プロトタイプとワークフロー Prototype and Workflow
プロトタイプとワークフロー Prototype and Workflowプロトタイプとワークフロー Prototype and Workflow
プロトタイプとワークフロー Prototype and Workflowatmarkit
 
リクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組みリクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組みRecruit Lifestyle Co., Ltd.
 
UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料Satoru MURAKOSHI
 
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方Taku ogawa
 
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャDesign for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャSatoru MURAKOSHI
 
アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法寛 水野
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -Mikihiro Fujii
 
良いプロトタイプを作るための10の方法
良いプロトタイプを作るための10の方法良いプロトタイプを作るための10の方法
良いプロトタイプを作るための10の方法Shunsuke Kawai
 

What's hot (20)

The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
The Way of the (Co-)Prototyping チームでUser InterfaceをプロトタイピングするThe Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
 
もしユーザエクスペリエンスの設計担当者がドラッカーの『マネジメント』を読んだら
もしユーザエクスペリエンスの設計担当者がドラッカーの『マネジメント』を読んだらもしユーザエクスペリエンスの設計担当者がドラッカーの『マネジメント』を読んだら
もしユーザエクスペリエンスの設計担当者がドラッカーの『マネジメント』を読んだら
 
インタラクションデザイン、その前に -UXなまトーク vol.2
インタラクションデザイン、その前に  -UXなまトーク vol.2インタラクションデザイン、その前に  -UXなまトーク vol.2
インタラクションデザイン、その前に -UXなまトーク vol.2
 
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
 
そもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何かそもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何か
 
LeanUX とこれからの HCD
LeanUX とこれからの HCDLeanUX とこれからの HCD
LeanUX とこれからの HCD
 
IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方
 
GREE Creators Meetup_Closing
GREE Creators Meetup_ClosingGREE Creators Meetup_Closing
GREE Creators Meetup_Closing
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
 
ゴールド・エクスペリエンス(Gold Experience)
ゴールド・エクスペリエンス(Gold Experience)ゴールド・エクスペリエンス(Gold Experience)
ゴールド・エクスペリエンス(Gold Experience)
 
Designing Culture at #LeanUXja
Designing Culture at #LeanUXjaDesigning Culture at #LeanUXja
Designing Culture at #LeanUXja
 
プロトタイプとワークフロー Prototype and Workflow
プロトタイプとワークフロー Prototype and Workflowプロトタイプとワークフロー Prototype and Workflow
プロトタイプとワークフロー Prototype and Workflow
 
リクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組みリクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組み
 
UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料
 
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
 
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャDesign for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
 
アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法
 
20150806_UXnama_Goodpatch
20150806_UXnama_Goodpatch20150806_UXnama_Goodpatch
20150806_UXnama_Goodpatch
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
 
良いプロトタイプを作るための10の方法
良いプロトタイプを作るための10の方法良いプロトタイプを作るための10の方法
良いプロトタイプを作るための10の方法
 

Similar to プロトタイピングの目的・範囲・ツール

企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi 企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi 智治 長沢
 
〜100万人から教わったウェブサービスの極意〜
〜100万人から教わったウェブサービスの極意〜〜100万人から教わったウェブサービスの極意〜
〜100万人から教わったウェブサービスの極意〜真一 藤川
 
実務視点のデザイン経営
実務視点のデザイン経営実務視点のデザイン経営
実務視点のデザイン経営Concent, Inc.
 
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)Jiji Kim
 
Customer Experience vs User Experience
Customer Experience vs User ExperienceCustomer Experience vs User Experience
Customer Experience vs User ExperienceRoy Kim
 
サービス開発における工程
サービス開発における工程サービス開発における工程
サービス開発における工程Hidetoshi Mori
 
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_uploadVantan shinsuke miyaki_upload
Vantan shinsuke miyaki_uploadShinsuke Miyaki
 
130607 session v2 Markezine Academy
130607 session v2   Markezine Academy130607 session v2   Markezine Academy
130607 session v2 Markezine AcademyRyo Taguchi
 
Design Sprint ガイドブック v2
Design Sprint ガイドブック v2Design Sprint ガイドブック v2
Design Sprint ガイドブック v2Takaaki Umada
 
Designer meets Designers 04 "IA" 20081002
Designer meets Designers 04 "IA" 20081002Designer meets Designers 04 "IA" 20081002
Designer meets Designers 04 "IA" 20081002Takashi Sakamoto
 
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」Fixel Inc.
 
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018Yoshiki Hayama
 
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法Roy Kim
 
Co-Creative時代の企画・ディレクション 先生:阿部淳也
Co-Creative時代の企画・ディレクション 先生:阿部淳也Co-Creative時代の企画・ディレクション 先生:阿部淳也
Co-Creative時代の企画・ディレクション 先生:阿部淳也schoowebcampus
 
新規サービスの開発中にPoが何かを決断するために必要だったこと
新規サービスの開発中にPoが何かを決断するために必要だったこと新規サービスの開発中にPoが何かを決断するために必要だったこと
新規サービスの開発中にPoが何かを決断するために必要だったこと英明 伊藤
 
ディレクターのキャリア・パス ~職能マップになぞらえて~
ディレクターのキャリア・パス ~職能マップになぞらえて~ディレクターのキャリア・パス ~職能マップになぞらえて~
ディレクターのキャリア・パス ~職能マップになぞらえて~Renji Yoneda
 

Similar to プロトタイピングの目的・範囲・ツール (20)

企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi 企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
 
Design sprint
Design sprintDesign sprint
Design sprint
 
〜100万人から教わったウェブサービスの極意〜
〜100万人から教わったウェブサービスの極意〜〜100万人から教わったウェブサービスの極意〜
〜100万人から教わったウェブサービスの極意〜
 
実務視点のデザイン経営
実務視点のデザイン経営実務視点のデザイン経営
実務視点のデザイン経営
 
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
 
Customer Experience vs User Experience
Customer Experience vs User ExperienceCustomer Experience vs User Experience
Customer Experience vs User Experience
 
サービス開発における工程
サービス開発における工程サービス開発における工程
サービス開発における工程
 
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_uploadVantan shinsuke miyaki_upload
Vantan shinsuke miyaki_upload
 
130607 session v2 Markezine Academy
130607 session v2   Markezine Academy130607 session v2   Markezine Academy
130607 session v2 Markezine Academy
 
Design Sprint ガイドブック v2
Design Sprint ガイドブック v2Design Sprint ガイドブック v2
Design Sprint ガイドブック v2
 
Designer meets Designers 04 "IA" 20081002
Designer meets Designers 04 "IA" 20081002Designer meets Designers 04 "IA" 20081002
Designer meets Designers 04 "IA" 20081002
 
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
 
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
 
2018 sdday lt_3:サービスとしての空間体験
2018 sdday lt_3:サービスとしての空間体験2018 sdday lt_3:サービスとしての空間体験
2018 sdday lt_3:サービスとしての空間体験
 
Hcd practice tips
Hcd practice tipsHcd practice tips
Hcd practice tips
 
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
 
Co-Creative時代の企画・ディレクション 先生:阿部淳也
Co-Creative時代の企画・ディレクション 先生:阿部淳也Co-Creative時代の企画・ディレクション 先生:阿部淳也
Co-Creative時代の企画・ディレクション 先生:阿部淳也
 
新規サービスの開発中にPoが何かを決断するために必要だったこと
新規サービスの開発中にPoが何かを決断するために必要だったこと新規サービスの開発中にPoが何かを決断するために必要だったこと
新規サービスの開発中にPoが何かを決断するために必要だったこと
 
ディレクターのキャリア・パス ~職能マップになぞらえて~
ディレクターのキャリア・パス ~職能マップになぞらえて~ディレクターのキャリア・パス ~職能マップになぞらえて~
ディレクターのキャリア・パス ~職能マップになぞらえて~
 
Web
WebWeb
Web
 

プロトタイピングの目的・範囲・ツール