Submit Search
Upload
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
•
18 likes
•
51,841 views
Keisuke Tada
Follow
2016.01.23 Cookpad TechConf 2016 http://techconf.cookpad.com/
Read less
Read more
Design
Report
Share
Report
Share
1 of 58
Download now
Download to read offline
Recommended
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
Crunchtimer会社案内
Crunchtimer会社案内
Yuya Miyamoto
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
DeNAでのサービスの作り方
DeNAでのサービスの作り方
Naoki Masuda
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
Recommended
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
Crunchtimer会社案内
Crunchtimer会社案内
Yuya Miyamoto
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
人と向き合うプロトタイピング
人と向き合うプロトタイピング
wariemon
DeNAでのサービスの作り方
DeNAでのサービスの作り方
Naoki Masuda
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
Keisuke Tada
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
Prott's design
Prott's design
Yukihiro Kobayashi
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファースト
Miwa Kuramitsu
小さく早い改善がスマホのサービス開発を変える
小さく早い改善がスマホのサービス開発を変える
Hiroto Igarashi
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法
寛 水野
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Jiji Kim
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
Keisuke Tsukayoshi
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
More Related Content
What's hot
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
Keisuke Tada
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
Prott's design
Prott's design
Yukihiro Kobayashi
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファースト
Miwa Kuramitsu
小さく早い改善がスマホのサービス開発を変える
小さく早い改善がスマホのサービス開発を変える
Hiroto Igarashi
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法
寛 水野
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Jiji Kim
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
Keisuke Tsukayoshi
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
What's hot
(20)
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Prott's design
Prott's design
UIは「習うより慣れろ」
UIは「習うより慣れろ」
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファースト
小さく早い改善がスマホのサービス開発を変える
小さく早い改善がスマホのサービス開発を変える
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
はじめてのUXとUIの話
はじめてのUXとUIの話
アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
Schoo講演資料130409
Schoo講演資料130409
Viewers also liked
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
What matters to technology driven business
What matters to technology driven business
Ohno Shin'ichi
開発した新技術から、新しい価値を作るためのクックパッド検索チームのプロダクト開発手法
開発した新技術から、新しい価値を作るためのクックパッド検索チームのプロダクト開発手法
Hiroto Igarashi
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23
Mari Kimura
R&D at Foodtech company - #CookpadTechConf 2016
R&D at Foodtech company - #CookpadTechConf 2016
Aki Ariga
おでかけスポット検索のむずかしさ - Holidayを支える検索技術
おでかけスポット検索のむずかしさ - Holidayを支える検索技術
Yusuke Naito
Cookpad TechConf 2016 - DWHに必要なこと
Cookpad TechConf 2016 - DWHに必要なこと
Minero Aoki
Viewers also liked
(9)
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
What matters to technology driven business
What matters to technology driven business
開発した新技術から、新しい価値を作るためのクックパッド検索チームのプロダクト開発手法
開発した新技術から、新しい価値を作るためのクックパッド検索チームのプロダクト開発手法
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23
R&D at Foodtech company - #CookpadTechConf 2016
R&D at Foodtech company - #CookpadTechConf 2016
おでかけスポット検索のむずかしさ - Holidayを支える検索技術
おでかけスポット検索のむずかしさ - Holidayを支える検索技術
Cookpad TechConf 2016 - DWHに必要なこと
Cookpad TechConf 2016 - DWHに必要なこと
Similar to モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
アプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティス
Yuichi Kato
「納品のない受託開発」にみるソフトウェア受託開発の未来
「納品のない受託開発」にみるソフトウェア受託開発の未来
Yoshihito Kuranuki
Schoo the user experience of web site
Schoo the user experience of web site
Takashi Sakamoto
Schoo講演資料130409
Schoo講演資料130409
Ryosuke Matsumoto
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
VOYAGE GROUP
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
Kenji Tomita
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
インフラジスティックス・ジャパン株式会社
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
schoowebcampus
インターフェイスという名の付く会社が考えるUX
インターフェイスという名の付く会社が考えるUX
Yasushi Senda
ITmediaセミナー講演『モバイル活用による業務改革の真実』
ITmediaセミナー講演『モバイル活用による業務改革の真実』
Ryohei Sogo
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
Akira Inoue
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』
Ryohei Sogo
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Jasst12九州 倉貫資料:アジャイル・Ruby・クラウド(ARC)を活用したビジネスにおけるテストの実践 #jasst12Q
Jasst12九州 倉貫資料:アジャイル・Ruby・クラウド(ARC)を活用したビジネスにおけるテストの実践 #jasst12Q
Yoshihito Kuranuki
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
Social Change 〜 ソフトウェア開発者が経営者になるまでと、これからの戦略
Social Change 〜 ソフトウェア開発者が経営者になるまでと、これからの戦略
Yoshihito Kuranuki
開発生産性、アプリケーションの価値向上に向けてインフラジスティックスがお手伝いさせていただけること
開発生産性、アプリケーションの価値向上に向けてインフラジスティックスがお手伝いさせていただけること
インフラジスティックス・ジャパン株式会社
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
智治 長沢
つくるべきモノをつくる
つくるべきモノをつくる
Mikihiro Fujii
Similar to モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
(20)
アプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティス
「納品のない受託開発」にみるソフトウェア受託開発の未来
「納品のない受託開発」にみるソフトウェア受託開発の未来
Schoo the user experience of web site
Schoo the user experience of web site
Schoo講演資料130409
Schoo講演資料130409
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
Developers Summit 2013【15-B-6】開発者の "資産形成" につながる Action とは?
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
インターフェイスという名の付く会社が考えるUX
インターフェイスという名の付く会社が考えるUX
ITmediaセミナー講演『モバイル活用による業務改革の真実』
ITmediaセミナー講演『モバイル活用による業務改革の真実』
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Jasst12九州 倉貫資料:アジャイル・Ruby・クラウド(ARC)を活用したビジネスにおけるテストの実践 #jasst12Q
Jasst12九州 倉貫資料:アジャイル・Ruby・クラウド(ARC)を活用したビジネスにおけるテストの実践 #jasst12Q
Schoo講演資料130409
Schoo講演資料130409
Social Change 〜 ソフトウェア開発者が経営者になるまでと、これからの戦略
Social Change 〜 ソフトウェア開発者が経営者になるまでと、これからの戦略
開発生産性、アプリケーションの価値向上に向けてインフラジスティックスがお手伝いさせていただけること
開発生産性、アプリケーションの価値向上に向けてインフラジスティックスがお手伝いさせていただけること
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
つくるべきモノをつくる
つくるべきモノをつくる
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
1.
モバイルアプリの インタラクションプロトタイピング 2016.01.23 - 高速に仮説・実行・検証サイクルを回すために -
2.
Keisuke Tada 多田 圭佑
デザイナー Holiday のプロダクト全般を担当 最近は iOS アプリ開発がメイン
3.
4.
ユーザに価値を届ける プロダクトをつくる
5.
価値のあるプロダクトをつくるために 速さ 品質×
6.
価値のあるプロダクトをつくるために 速さ 品質 ・価値を発見する ・ユーザの変化に適応する ・価値を正しく届ける ・価値を高める
7.
価値のあるプロダクトをつくるために 速さ 品質 ・価値を発見する ・ユーザの変化に適応する ・価値を正しく届ける ・価値を高める どうやって?
8.
仮説 実行検証
9.
仮説 実行検証 細かく 何回も
10.
仮説 実行検証 モバイルアプリの場合
11.
開発工程 画面設計 ビジュアル アニメーション
実装
12.
画面設計 ビジュアル アニメーション
実装 試行錯誤… 開発工程
13.
画面設計 ビジュアル アニメーション
実装 進めてまた 試行錯誤… 開発工程
14.
画面設計 ビジュアル アニメーション
実装 開発工程
15.
開発工程 画面設計 ビジュアル アニメーション
実装 完成!
16.
開発工程 画面設計 ビジュアル アニメーション
実装 完成?
17.
18.
なんか違う…
19.
画面設計 ビジュアル アニメーション
実装 開発工程
20.
画面設計 ビジュアル アニメーション
実装 画面設計からやりなおし… 開発工程
21.
画面設計 ビジュアル アニメーション
実装 できあがりのイメージがしづらいため それぞれの行程で問題に気づきにくい 開発工程
22.
仮説 実行検証 速くしたい!
23.
画面設計 ビジュアル アニメーション
実装 開発工程
24.
画面設計 ビジュアル アニメーション
実装 動作モック 実機で触って動かせるもの 開発工程
25.
画面設計 ビジュアル アニメーション
実装 動作モック 仮説検証を繰り返す ・議論 ・ユーザテスト、ヒアリング 開発工程
26.
画面設計 ビジュアル アニメーション
実装 動作モック 仮説検証を繰り返す ・議論 ・ユーザテスト、ヒアリング できあがりのイメージがしやすいため 早い段階で確認できることが多い 開発工程
27.
・Pixate ・Framer ・Flinto for Mac ・HTML
+ CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
28.
・Pixate ・Framer ・Flinto for Mac ・HTML
+ CSS + JS ・Xcode 動作モック レイヤーベース ページが切り替わる ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
29.
動作モック ・Flinto/InVision/Prott ・Flinto for Mac ・HTML
+ CSS ・Storyboard (Xcode) ページベース 各レイヤーが独立して動く レイヤーベース ・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode
30.
・Pixate ・Framer ・Flinto for Mac ・HTML
+ CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
31.
Flinto/InVision/Prott
32.
Flinto/InVision/Prott Pros Cons ・少ない手間で実機で動くモックを作れる ・チーム内での共有がしやすい ・複雑なインタラクションは作れない
33.
34.
35.
実際に端末で触ってみることで 画面の抜け漏れがないか確認
36.
1 2
37.
1 2
38.
1 2 複数パターンのフローを触って 遷移の分かりやすさを確認
39.
・Pixate ・Framer ・Flinto for Mac ・HTML
+ CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
40.
HTML + CSS
+ JS
41.
HTML + CSS
+ JS Pros Cons ・実際のコンテンツを何パターンも表示しやすい ・インタラクションの表現の自由度が高い ・ページの遷移のパターンを試す用途では過剰 ・インタラクションの精度を高めるのは結構たいへん
42.
43.
違うレイアウトで複数コンテンツを 見た時の感じ方を確認
44.
・Pixate ・Framer ・Flinto for Mac ・HTML
+ CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
45.
Flinto for Mac
46.
Flinto for Mac Pros Cons ・普通の画面遷移から凝ったインタラクションまで ・精度の高いプロトタイプを素早く作ることができる ・表現できないインタラクションもある
47.
48.
実際のアプリに近い動きで UI の分かりやすさを確認
49.
・Pixate ・Framer ・Flinto for Mac ・HTML
+ CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
50.
Xcode
51.
Xcode Pros Cons ・なんでもできる ・手間がかかる
52.
53.
ユーザの入力と表示が組み合わさる 高精度プロトタイピング
54.
Xcode:おまけ Tweaks(ライブラリ) ・値をアプリ上で変更できる ・アニメーションの変数、文字サイズ、色など ・外で使っている時などに UI を調整できる ・最後の詰めの段階で品質向上の役に立つ
55.
・Pixate ・Framer ・Flinto for Mac ・HTML
+ CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
56.
画面設計 ビジュアル アニメーション
実装 動作モック 仮説検証を繰り返す ・議論 ・ユーザテスト、ヒアリング 開発工程 確かめたいことによって プロトタイプを作り分ける
57.
仮説 実行検証 細かく 何回も
58.
ご静聴ありがとうございました
Download now