SlideShare a Scribd company logo
1 of 29
Download to read offline
UIと画面遷移を設計するときに
破綻しないようにするための、

ひと手間
株式会社ツクロア

秋葉ちひろ

DevLOVE 現場 甲子園 2013

2013.11.09
株式会社ツクロア
デザイナー集団
ビジュアルデザイン
グラフィックデザイン
CI/VI、ブランディング
UXデザイン
@tommmmy

UIデザイン
アプリやWebサイトの設計

デザイナーズハック

フロントエンドの実装
プロトタイプ作成
画面遷移

UIデザイン

破綻しないための
プロトタイプ作成

Director

Designer

Engineer
画面遷移を
つくるときの

罠
HOME

tab A

tab A

[list]

[detail]

alert

geolocation

yes

すでに
決まって
いる!

tab B

[list]

no

tab B

[detail]

tab B’
整理されているように
見えるが、かなり難解
なんでこれつくるときに
呼んでくれないんだろう。。
HOME

tab A

tab A

[list]

[detail]

alert

geolocation

yes

tab B

[list]

no

tab B

[detail]

tab B’
機能ありきの
機械的な画面フロー
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
スマホと対話する
やあ、
どうしたの?
I am here
台本
グルメアプリ
登録したお店のみチェックイン
でき、そのお店にいるときは、
撮った写真を複雑なフローなく
簡単にアップできる
I am here
I am here

I am here

こんにちは、今、君がどこにいるか探しているか
ら、待ってね
考え中だよー
わかった!
今、「楽天タワー」にいるよ、ここでチェックイン
する?それとも、ここは間違ってる?
あってる、チェックインするよ

I am here

わかりました、「楽天タワー」にチェックインしま
した。ここで食べたものを写真に撮ってアップす
る?それともあとにする?
I am here

考え中だよー
わかった!
今、「楽天タワー」にいるよ、ここでチェックイン
する?それとも、ここは間違ってる?
あってる、チェックインするよ

I am here

わかりました、「楽天タワー」にチェックインしま
した。ここで食べたものを写真に撮ってアップす
る?それともあとにする?
あとにするよ

わかりました、あとにしますね、ではまた!
I am here
photo by http://www.flickr.com/photos/yuiseki/4038847937/
おーい

I am here

はい、あなたはまだ「楽天タワー」にいるようで
す。ここで食べた写真をアップしますか?
そうだな、しようかな

I am here

わかりました、ではカメラを立ち上げるので
シャッターボタンをおしてください。
カシャ

少しボケていますが、いいですか?
I am here
少しボケていますが、いいですか?
I am here

いいよ、そのままで

I am here

わかりました、ではこの写真をアップしますので
少しお待ちください。
アップしおわりました。他にもアップしますか?
いや、もういいよ、ありがとう

I am here

わかりました、ではまた御用のときは呼んでくだ
さいね!
人間的な対話からの
機能の設計
ョン
ーシ
ニケ
ミュ
コ
よ
大事 ようよ
生き
和に
平

I am here
NEW!!
splash
geolocation

check in
[list]

no

WakeLock
geolocation

yes

yes

camera

no

timeline

upload

yes

compelete
者も
技術 ーも
イナ
デザ き!
るべ
や

スマホと対話する

台本
アプリをつかう

寸劇
I am here
UIデザインを
つくるときの

罠
静止画でしか
確認しない!
プロトタイプで確認する
デザイン
操作性
Director

Designer

仕様決定
Engineer
静止画
デザイン
作成
Director

Designer

画像

実装

Engineer

動きをつくれる人
Director

Designer

仕様決定

Engineer
動きを含む
プロトタイプ

静止画
デザイン
作成
Director

Designer

画像、動き

実装

Engineer
実際につかった感じを
経験して確認することが
できる
UIと画面遷移を設計するときに
破綻しないようにするための、

ひと手間

プロトタイプをつくる
人とのコミュニケーション
ありがとう
ございました
I am here

More Related Content

Similar to 【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間

Autolayoutを使って、画面レイアウトを作成してみよう
Autolayoutを使って、画面レイアウトを作成してみようAutolayoutを使って、画面レイアウトを作成してみよう
Autolayoutを使って、画面レイアウトを作成してみようIkki Takahashi
 
技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)Toru Yamaguchi
 
UIデザインは誰のもの?
UIデザインは誰のもの?UIデザインは誰のもの?
UIデザインは誰のもの?GMO Pepabo, Inc.
 
デザイナーでも出来るコマンドを使わないバージョン管理(SourceTree + BitBucket)
デザイナーでも出来るコマンドを使わないバージョン管理(SourceTree + BitBucket)デザイナーでも出来るコマンドを使わないバージョン管理(SourceTree + BitBucket)
デザイナーでも出来るコマンドを使わないバージョン管理(SourceTree + BitBucket)Kenichi Fujita
 
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくるエンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくるIshikawa Yuya
 
Developer's Summit 夏 EnterpriseTED 資料
Developer's Summit 夏 EnterpriseTED 資料Developer's Summit 夏 EnterpriseTED 資料
Developer's Summit 夏 EnterpriseTED 資料Atsushi Takayasu
 
HTML5の今とこれから
HTML5の今とこれからHTML5の今とこれから
HTML5の今とこれからTakuya Yamamoto
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!c-mitsuba
 
Intalio Object Builder vs Microsoft LightSwitch
Intalio Object Builder vs Microsoft LightSwitchIntalio Object Builder vs Microsoft LightSwitch
Intalio Object Builder vs Microsoft LightSwitchDaisuke Sugai
 
devsumi17 d-2
devsumi17 d-2devsumi17 d-2
devsumi17 d-2dikehara
 
ON THE TRIP流 UX的負債の避け方、負い方、返し方
ON THE TRIP流 UX的負債の避け方、負い方、返し方ON THE TRIP流 UX的負債の避け方、負い方、返し方
ON THE TRIP流 UX的負債の避け方、負い方、返し方loftwork
 
エンジニアとデザイナーの技術交流について
エンジニアとデザイナーの技術交流についてエンジニアとデザイナーの技術交流について
エンジニアとデザイナーの技術交流についてtatsuya mazaki
 
WebにおけるUI設計 実践編
WebにおけるUI設計 実践編WebにおけるUI設計 実践編
WebにおけるUI設計 実践編shinya tayama
 
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組みYoshinori OHTA
 
ProttUserMeetupVol.7TOKYO_デザインプロセスとテクニック
ProttUserMeetupVol.7TOKYO_デザインプロセスとテクニックProttUserMeetupVol.7TOKYO_デザインプロセスとテクニック
ProttUserMeetupVol.7TOKYO_デザインプロセスとテクニックJunichi Suzuki
 
奥行きを意識したプロダクト-iOS9で変わる体験-
奥行きを意識したプロダクト-iOS9で変わる体験-奥行きを意識したプロダクト-iOS9で変わる体験-
奥行きを意識したプロダクト-iOS9で変わる体験-正典 三橋
 
UIデザインのプロセス
UIデザインのプロセスUIデザインのプロセス
UIデザインのプロセスJunichi Suzuki
 
Windows Azureで Webサーバーを再発明してみる
Windows AzureでWebサーバーを再発明してみるWindows AzureでWebサーバーを再発明してみる
Windows Azureで Webサーバーを再発明してみるSunao Tomita
 
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作祐磨 堀
 

Similar to 【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間 (20)

Autolayoutを使って、画面レイアウトを作成してみよう
Autolayoutを使って、画面レイアウトを作成してみようAutolayoutを使って、画面レイアウトを作成してみよう
Autolayoutを使って、画面レイアウトを作成してみよう
 
技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)
 
UIデザインは誰のもの?
UIデザインは誰のもの?UIデザインは誰のもの?
UIデザインは誰のもの?
 
デザイナーでも出来るコマンドを使わないバージョン管理(SourceTree + BitBucket)
デザイナーでも出来るコマンドを使わないバージョン管理(SourceTree + BitBucket)デザイナーでも出来るコマンドを使わないバージョン管理(SourceTree + BitBucket)
デザイナーでも出来るコマンドを使わないバージョン管理(SourceTree + BitBucket)
 
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくるエンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
 
Developer's Summit 夏 EnterpriseTED 資料
Developer's Summit 夏 EnterpriseTED 資料Developer's Summit 夏 EnterpriseTED 資料
Developer's Summit 夏 EnterpriseTED 資料
 
HTML5の今とこれから
HTML5の今とこれからHTML5の今とこれから
HTML5の今とこれから
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!
 
Intalio Object Builder vs Microsoft LightSwitch
Intalio Object Builder vs Microsoft LightSwitchIntalio Object Builder vs Microsoft LightSwitch
Intalio Object Builder vs Microsoft LightSwitch
 
Devsumi 17 d-2
Devsumi 17 d-2Devsumi 17 d-2
Devsumi 17 d-2
 
devsumi17 d-2
devsumi17 d-2devsumi17 d-2
devsumi17 d-2
 
ON THE TRIP流 UX的負債の避け方、負い方、返し方
ON THE TRIP流 UX的負債の避け方、負い方、返し方ON THE TRIP流 UX的負債の避け方、負い方、返し方
ON THE TRIP流 UX的負債の避け方、負い方、返し方
 
エンジニアとデザイナーの技術交流について
エンジニアとデザイナーの技術交流についてエンジニアとデザイナーの技術交流について
エンジニアとデザイナーの技術交流について
 
WebにおけるUI設計 実践編
WebにおけるUI設計 実践編WebにおけるUI設計 実践編
WebにおけるUI設計 実践編
 
世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み世界を変えるクラウドサインの取り組み
世界を変えるクラウドサインの取り組み
 
ProttUserMeetupVol.7TOKYO_デザインプロセスとテクニック
ProttUserMeetupVol.7TOKYO_デザインプロセスとテクニックProttUserMeetupVol.7TOKYO_デザインプロセスとテクニック
ProttUserMeetupVol.7TOKYO_デザインプロセスとテクニック
 
奥行きを意識したプロダクト-iOS9で変わる体験-
奥行きを意識したプロダクト-iOS9で変わる体験-奥行きを意識したプロダクト-iOS9で変わる体験-
奥行きを意識したプロダクト-iOS9で変わる体験-
 
UIデザインのプロセス
UIデザインのプロセスUIデザインのプロセス
UIデザインのプロセス
 
Windows Azureで Webサーバーを再発明してみる
Windows AzureでWebサーバーを再発明してみるWindows AzureでWebサーバーを再発明してみる
Windows Azureで Webサーバーを再発明してみる
 
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
 

【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間