SlideShare a Scribd company logo
1 of 38
Download to read offline
Prott’s Design
小林 幸弘
Web App, iOS App
野上 彩子
Android
1. 今のUIができるまで
2. 今後のPrott
1. 今のUIができるまで
2. 今後のPrott
最初のデザインは?
遷移作成のスピードが遅い
プロトタイピング
してたのに…
ユーザーの使い方を
想像しきれていなかった
1. 今のUIができるまで
2. 今後のPrott
なぜインタラクションより
構造設計なのか?
Demo
構造設計
構造設計
Web App
チームメンバー全員が構造設計を理解
構造設計
Web App
チームメンバー全員が構造設計を理解
↓
遷移図の書き出し機能
チーム
チーム
Web App
コラボレーションの質を高め、活発にする
チーム
Web App
コラボレーションの質を高め、活発にする
↓
コメントの状態管理、レビュー申請ボタン
最後に…
構造設計
Mac App(開発中)
デザイナーが遷移を意識しながら遷移作成
↓
遷移図の自動生成機能
スクリーン自由配置

More Related Content

What's hot

勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザインNobuya Sato
 
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design SprintABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design SprintNobuya Sato
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! Akiko Ohtsuka
 
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味Tatsuya_Yokoyama
 
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクションLINE Corporation
 
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付きデザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付きMayumi Narisawa
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのかMikihiro Fujii
 
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメUXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメHiroyuki Arai
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話Kazuki Yamashita
 
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方neokigao
 
人と向き合うプロトタイピング
人と向き合うプロトタイピング人と向き合うプロトタイピング
人と向き合うプロトタイピングwariemon
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -wariemon
 
UIは「習うより慣れろ」
UIは「習うより慣れろ」UIは「習うより慣れろ」
UIは「習うより慣れろ」tomo tsubota
 
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?kyu buns
 
UIの話は会議室でするな
UIの話は会議室でするなUIの話は会議室でするな
UIの話は会議室でするなShingo Katsushima
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会INI株式会社
 
マンガボックスのアプリができるまで
マンガボックスのアプリができるまでマンガボックスのアプリができるまで
マンガボックスのアプリができるまでtomo tsubota
 
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発Kenta Ohsugi
 
InVision勉強会資料
InVision勉強会資料InVision勉強会資料
InVision勉強会資料TakuyaTakemoto
 

What's hot (20)

勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
 
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design SprintABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
 
UX / UIデザインって何?
UX / UIデザインって何?UX / UIデザインって何?
UX / UIデザインって何?
 
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
 
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション
 
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付きデザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのか
 
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメUXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話
 
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
 
人と向き合うプロトタイピング
人と向き合うプロトタイピング人と向き合うプロトタイピング
人と向き合うプロトタイピング
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
 
UIは「習うより慣れろ」
UIは「習うより慣れろ」UIは「習うより慣れろ」
UIは「習うより慣れろ」
 
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?
 
UIの話は会議室でするな
UIの話は会議室でするなUIの話は会議室でするな
UIの話は会議室でするな
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
 
マンガボックスのアプリができるまで
マンガボックスのアプリができるまでマンガボックスのアプリができるまで
マンガボックスのアプリができるまで
 
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
 
InVision勉強会資料
InVision勉強会資料InVision勉強会資料
InVision勉強会資料