Submit Search
Upload
プロトタイピングの目的・範囲・ツール
•
3 likes
•
3,357 views
T
theguild
Follow
Pixate勉強会で使用した資料です。
Read less
Read more
Software
Report
Share
Report
Share
1 of 28
Download now
Download to read offline
Recommended
Prototyping for micro interactionマイクロインタラクションのためのプロトタイピング
Prototyping for micro interactionマイクロインタラクションのためのプロトタイピング
Shunsuke Kawai
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
Takahiro Ishiyama
Why prototype ? / なぜプロトタイプが必要か?
Why prototype ? / なぜプロトタイプが必要か?
Shunsuke Kawai
対話からはじまるデザインプロセス:UX Japan Forum2015
対話からはじまるデザインプロセス:UX Japan Forum2015
Satoru MURAKOSHI
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
Kazumichi (Mario) Sakata
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
Mikihiro Fujii
Why and how Design UI
Why and how Design UI
Mikihiro Fujii
UX思考の組織づくりと、その課題
UX思考の組織づくりと、その課題
Fumiya Yamamoto
Recommended
Prototyping for micro interactionマイクロインタラクションのためのプロトタイピング
Prototyping for micro interactionマイクロインタラクションのためのプロトタイピング
Shunsuke Kawai
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
Takahiro Ishiyama
Why prototype ? / なぜプロトタイプが必要か?
Why prototype ? / なぜプロトタイプが必要か?
Shunsuke Kawai
対話からはじまるデザインプロセス:UX Japan Forum2015
対話からはじまるデザインプロセス:UX Japan Forum2015
Satoru MURAKOSHI
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
Kazumichi (Mario) Sakata
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
事業での実践としてのUXデザイン @ 『UXデザインの教科書』出版記念セミナー
Mikihiro Fujii
Why and how Design UI
Why and how Design UI
Mikihiro Fujii
UX思考の組織づくりと、その課題
UX思考の組織づくりと、その課題
Fumiya Yamamoto
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
Toshiaki Otsuka
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
Mikihiro Fujii
そもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何か
Satoru MURAKOSHI
LeanUX とこれからの HCD
LeanUX とこれからの HCD
Kazumichi (Mario) Sakata
IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方
hidetoshi murohashi
GREE Creators Meetup_Closing
GREE Creators Meetup_Closing
Satoru MURAKOSHI
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
ゴールド・エクスペリエンス(Gold Experience)
ゴールド・エクスペリエンス(Gold Experience)
Kazumichi (Mario) Sakata
Designing Culture at #LeanUXja
Designing Culture at #LeanUXja
Kazumichi (Mario) Sakata
プロトタイプとワークフロー Prototype and Workflow
プロトタイプとワークフロー Prototype and Workflow
atmarkit
リクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組み
Recruit Lifestyle Co., Ltd.
UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料
Satoru MURAKOSHI
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
Taku ogawa
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Satoru MURAKOSHI
アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法
寛 水野
20150806_UXnama_Goodpatch
20150806_UXnama_Goodpatch
Satoru MURAKOSHI
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
良いプロトタイプを作るための10の方法
良いプロトタイプを作るための10の方法
Shunsuke Kawai
企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
智治 長沢
Design sprint
Design sprint
Nobuyuki Ohnaga
More Related Content
What's hot
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
Toshiaki Otsuka
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
Mikihiro Fujii
そもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何か
Satoru MURAKOSHI
LeanUX とこれからの HCD
LeanUX とこれからの HCD
Kazumichi (Mario) Sakata
IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方
hidetoshi murohashi
GREE Creators Meetup_Closing
GREE Creators Meetup_Closing
Satoru MURAKOSHI
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
ゴールド・エクスペリエンス(Gold Experience)
ゴールド・エクスペリエンス(Gold Experience)
Kazumichi (Mario) Sakata
Designing Culture at #LeanUXja
Designing Culture at #LeanUXja
Kazumichi (Mario) Sakata
プロトタイプとワークフロー Prototype and Workflow
プロトタイプとワークフロー Prototype and Workflow
atmarkit
リクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組み
Recruit Lifestyle Co., Ltd.
UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料
Satoru MURAKOSHI
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
Taku ogawa
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Satoru MURAKOSHI
アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法
寛 水野
20150806_UXnama_Goodpatch
20150806_UXnama_Goodpatch
Satoru MURAKOSHI
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
良いプロトタイプを作るための10の方法
良いプロトタイプを作るための10の方法
Shunsuke Kawai
What's hot
(20)
The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
もしユーザエクスペリエンスの設計担当者がドラッカーの『マネジメント』を読んだら
もしユーザエクスペリエンスの設計担当者がドラッカーの『マネジメント』を読んだら
インタラクションデザイン、その前に -UXなまトーク vol.2
インタラクションデザイン、その前に -UXなまトーク vol.2
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
そもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何か
LeanUX とこれからの HCD
LeanUX とこれからの HCD
IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方
GREE Creators Meetup_Closing
GREE Creators Meetup_Closing
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
ゴールド・エクスペリエンス(Gold Experience)
ゴールド・エクスペリエンス(Gold Experience)
Designing Culture at #LeanUXja
Designing Culture at #LeanUXja
プロトタイプとワークフロー Prototype and Workflow
プロトタイプとワークフロー Prototype and Workflow
リクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組み
UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法
20150806_UXnama_Goodpatch
20150806_UXnama_Goodpatch
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
良いプロトタイプを作るための10の方法
良いプロトタイプを作るための10の方法
Similar to プロトタイピングの目的・範囲・ツール
企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
智治 長沢
Design sprint
Design sprint
Nobuyuki Ohnaga
〜100万人から教わったウェブサービスの極意〜
〜100万人から教わったウェブサービスの極意〜
真一 藤川
実務視点のデザイン経営
実務視点のデザイン経営
Concent, Inc.
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Jiji Kim
Customer Experience vs User Experience
Customer Experience vs User Experience
Roy Kim
サービス開発における工程
サービス開発における工程
Hidetoshi Mori
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_upload
Shinsuke Miyaki
130607 session v2 Markezine Academy
130607 session v2 Markezine Academy
Ryo Taguchi
Design Sprint ガイドブック v2
Design Sprint ガイドブック v2
Takaaki Umada
Designer meets Designers 04 "IA" 20081002
Designer meets Designers 04 "IA" 20081002
Takashi Sakamoto
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
Fixel Inc.
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
Yoshiki Hayama
2018 sdday lt_3:サービスとしての空間体験
2018 sdday lt_3:サービスとしての空間体験
Service Design Network Japan Chapter
Hcd practice tips
Hcd practice tips
Toru Mizumoto
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
Roy Kim
Co-Creative時代の企画・ディレクション 先生:阿部淳也
Co-Creative時代の企画・ディレクション 先生:阿部淳也
schoowebcampus
新規サービスの開発中にPoが何かを決断するために必要だったこと
新規サービスの開発中にPoが何かを決断するために必要だったこと
英明 伊藤
ディレクターのキャリア・パス ~職能マップになぞらえて~
ディレクターのキャリア・パス ~職能マップになぞらえて~
Renji Yoneda
Web
Web
Haruko Kakiuchi
Similar to プロトタイピングの目的・範囲・ツール
(20)
企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
企画-計画-開発-ビルド-デプロイ 価値のパイプラインできてますか?【字幕つき】 #kansumiA2 #devsumi
Design sprint
Design sprint
〜100万人から教わったウェブサービスの極意〜
〜100万人から教わったウェブサービスの極意〜
実務視点のデザイン経営
実務視点のデザイン経営
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Customer Experience vs User Experience
Customer Experience vs User Experience
サービス開発における工程
サービス開発における工程
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_upload
130607 session v2 Markezine Academy
130607 session v2 Markezine Academy
Design Sprint ガイドブック v2
Design Sprint ガイドブック v2
Designer meets Designers 04 "IA" 20081002
Designer meets Designers 04 "IA" 20081002
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
2018 sdday lt_3:サービスとしての空間体験
2018 sdday lt_3:サービスとしての空間体験
Hcd practice tips
Hcd practice tips
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
Co-Creative時代の企画・ディレクション 先生:阿部淳也
Co-Creative時代の企画・ディレクション 先生:阿部淳也
新規サービスの開発中にPoが何かを決断するために必要だったこと
新規サービスの開発中にPoが何かを決断するために必要だったこと
ディレクターのキャリア・パス ~職能マップになぞらえて~
ディレクターのキャリア・パス ~職能マップになぞらえて~
Web
Web
プロトタイピングの目的・範囲・ツール
1.
プロトタイピングの目的・範囲・ツール Partner : Satoshi
Omiya (webtron Inc.)
2.
プロトタイピングの目的
3.
何のためにプロトタイピングするか? • デザインやアイディアの試行錯誤 • ユーザビリティの向上 •
デザインや設計の評価 • 実装時の手戻りを減らす • チーム内やクライアントとの合意形成 • デザイナー⇄エンジニア間の意思疎通 など
4.
プロトタイピングの役割は大きく2つ • デザインやアイディアの試行錯誤 • ユーザビリティの向上 •
デザインや設計の評価 • 実装時の手戻りを減らす 開発ツール • チーム内やクライアントとの合意形成 • デザイナー⇄エンジニア間の意思疎通 コミュニケーションツール 様々なプロトタイピングサービスの 登場により役割が大きくなってきた
5.
プロトタイピングの範囲
6.
プロトタイピングの範囲 後期初期 それぞれの範囲に適したプロトタイピングツールを使おう アイディア 画面デザイン 画面遷移 全体構造 手触り・使い心地 フィードバック 低 高 詳細度 開発フェーズ
7.
範囲に適したプロトタイピングツール
8.
開発フェーズ 後期初期 手触りや使い心地 フィードバック 詳細度:低 詳細度:高 アイディア・画面デザインの検討 画面遷移や 全体構造の検討 ペーパー プロトタイピング
9.
ペーパープロトタイピング ペンやマーカーを使って画面デザインのアイディアを出しているところ
10.
ペーパープロトタイピング 実寸でプリントアウトした画面を切り刻んで「オズの魔法使い」などの手法でユーザビリティテストを行う
11.
ペーパープロトタイピングパッド THE GUILD ではプロトタイピングに特化したレポート用紙「Paper
Prototyping Pad」をつくりました
12.
ペーパープロトタイピングパッド iPhone実寸のグリッド入り&各種ガイド線付なので NavigationBar や
TabBar なども簡単に線を引けます
13.
ペーパープロトタイピングパッド https://goo.gl/qujtfI
14.
開発フェーズ 後期初期 アイディア 画面デザイン 手触りや使い心地 フィードバック 詳細度:低 詳細度:高 画面遷移や全体構造の検討
15.
画面遷移や全体構造の検討 複数画面を登録し、各画面をリンクさせていくタイプ
16.
画面遷移や全体構造の検討 画面内に配置したHotSpotに遷移先画面をリンクして画面遷移をシミュレートできます
17.
画面遷移や全体構造の検討 LIVESHAREなどデザインレビュー、作業者間コミュニケーションのサポート機能が豊富
18.
画面遷移や全体構造の検討 ペーパープロトタイプと連携しやすい機能が特徴
19.
マイナスを0に近づける ユーザビリティや設計の整合性などを検証してリファインし、不具合や瑕疵をなくす アイディア、画面デザイン 画面遷移や全体構造 実用的品質(Pragmatic Quality)は、もはや当たり前に
20.
UXの捉え方:Hassenzahlのモデル ユーザがUXをどう捉えているかを説明 内 容 表 現 機能性 インタラクション 製 品 の
特 徴 実用的属性(Pragmatic Attributes) 操作性 刺激・共感・喚起 快楽的属性(Hedonic Attributes) 顕 在 的 な 製 品 の 特 性 状 況 魅力 楽しさ 満足 結 果 よいUXの醸成には「実用的品質」と「快楽的品質」が求められる Hassenzahl, 2003
21.
0をプラスに 手触りや使い心地といった快楽的品質(Hedonic Quality)を高めていく 手触り・使い心地・フィードバック
22.
インタラクションデザインの重要性 Android の Material
Design ガイドラインでは画面遷移時のパーツの動きなどが細かく定義されている
23.
インタラクションデザインのプロトタイピング デザインスキルに加えエンジニアリングスキルが必要とされるため 十分に検討することや満足のいく成果を出すことが難しい部分 デザイン能力 エンジニアリング能力 ビジュアル・モーションデザインをユーザの操作によってどのように変化するかを動的に定義する必要がある +
24.
開発フェーズ 後期初期 画面デザイン アイディア 詳細度:低 詳細度:高 手触りや使い心地フィードバックを検討 画面遷移や 全体構造の検討
25.
Origami パッチと呼ばれる要素を線で繋いでいくことで、インタラクティブなモックアップを作成することができます
26.
Principle 複数の画面間の遷移のシミュレートができ、かつインタラクティブなUIも作ることができる
27.
28.
ありがとうございました
Download now