no border, スマホ ui! 〜これからのモバイルアプリデザイン〜
DESCRIPTION
2013年5月17日 エルパーク仙台にて Fandroid EAST JAPANでの講演資料TRANSCRIPT
![Page 1: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/1.jpg)
No Border, スマホUI!2013.5.17 Fandroid EAST JAPAN
株式会社ツクロア 秋葉ちひろ (@tommmmy)
![Page 2: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/2.jpg)
秋葉 ちひろ@tommmmy
デザイナー/アートディレクター
「気持ちいい」をデザインする会社
![Page 3: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/3.jpg)
秋葉 ちひろ
• 2013年4月 株式会社ツクロア 取締役• ~2月 バイドゥにてSimejiの開発• デザイン全般• HTML/CSS/JS、Android XMLレイアウト
@tommmmy
デザイナー/アートディレクター
![Page 4: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/4.jpg)
Simeji カンペ・リモートスタ★ミ
![Page 5: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/5.jpg)
秋葉ちひろのAndroidアプリデザイン入門 - MdN Design Interactivehttp://www.mdn.co.jp/di/articles/2887/
Firefox OSアプリ開発ガイド5月末発売!(予定)
Web連載
書籍
Web Designing6月19日発売!
雑誌寄稿
![Page 7: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/7.jpg)
• 趣味はモノづくり
![Page 8: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/8.jpg)
No Border, スマホUI!
iPhone
Android
WindowsPhone
FirefoxOS
UbuntuTouch
Tizen
![Page 9: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/9.jpg)
iPhone
AndroidWindowsPhone
![Page 10: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/10.jpg)
FirefoxOS
UbuntuTouchTizen
![Page 11: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/11.jpg)
ガイドライン
![Page 12: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/12.jpg)
ガイドライン ?<
![Page 13: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/13.jpg)
今日のセッション
http://www.amazon.co.jp/dp/4621086553
![Page 14: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/14.jpg)
今日のセッション
http://www.amazon.co.jp/dp/4621086553
#MobileFrontier
#MobileFrontier
![Page 15: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/15.jpg)
•モバイル端末のアプリ開発のこれからに対する心構え(インターフェース)
•プロトタイプについて考える•【ワークショップ】ペーパープロトタイピング
今日のセッション
![Page 16: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/16.jpg)
•インターフェースデザイン
モバイル端末のアプリ開発のこれからに対する心構え
前半戦
#MobileFrontier
![Page 17: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/17.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザインが
必要か?
なぜインターフェースデザイン
#MobileFrontier
![Page 18: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/18.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
![Page 19: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/19.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
![Page 20: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/20.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
キーボードとマウスで操作できるインターフェース
インターフェースデザイン
#MobileFrontier
![Page 21: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/21.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
![Page 22: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/22.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
フォルダ ファイル
インターフェースデザイン
![Page 23: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/23.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
実際にある体験を模倣する
インターフェースデザイン
![Page 24: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/24.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
![Page 25: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/25.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
GUIGraphic User Interface
インターフェースデザイン
#MobileFrontier
![Page 26: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/26.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
道具としてツールをえらぶ
インターフェースデザイン
![Page 27: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/27.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
![Page 28: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/28.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
iPhoneの登場2007年6月29日
インターフェースデザイン
#MobileFrontier
![Page 29: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/29.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
タッチインターフェース
#MobileFrontier
![Page 30: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/30.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
clear Mailbox
![Page 31: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/31.jpg)
clear Mailbox
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
NUINatural User Interface
#MobileFrontier
![Page 32: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/32.jpg)
![Page 36: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/36.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
PAPER
![Page 37: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/37.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
PAPER
![Page 38: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/38.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
PAPER
![Page 39: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/39.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
PAPER
![Page 40: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/40.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
タッチデバイスの特性を最大限に生かしたインターフェース
iPad
![Page 41: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/41.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
ボタン
?
![Page 42: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/42.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
直感的で自然な操作
1
GUI NUI
#MobileFrontier
![Page 43: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/43.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
直感的で自然な操作
1
タップして使うのはもう古い!?
![Page 44: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/44.jpg)
ICE BREAK
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
GUIからNUIへ1
https://www.leapmotion.com/
![Page 45: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/45.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
実際にある体験を模倣する
インターフェースデザイン
![Page 46: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/46.jpg)
![Page 47: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/47.jpg)
![Page 48: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/48.jpg)
![Page 49: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/49.jpg)
メタファーmetaphor
![Page 50: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/50.jpg)
![Page 51: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/51.jpg)
![Page 52: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/52.jpg)
今年はフラットデザインが流行る!
わたしはかなり慎重…
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
![Page 53: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/53.jpg)
フラットなのか?
なぜ
コンテンツ重視
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
![Page 54: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/54.jpg)
•コンテンツファースト•無駄な装飾はいらない•コンテンツ自体がUIになりうる
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
![Page 55: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/55.jpg)
http://weekly.ascii.jp/elem/000/000/121/121099/
![Page 56: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/56.jpg)
zawatt
![Page 57: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/57.jpg)
![Page 58: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/58.jpg)
![Page 59: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/59.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•デザインが楽になるやろう!•工数が減るやろう!
考えられる懸念点
fontinfo
graphic
editorialgoldenratio
silverratio
マジかんべん
して><
![Page 60: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/60.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•デザインは、グルーピングと、インタラクションを予測させるもの
コンテンツファーストのデザイン
フラットだろうがメタファーがあろうが関係ない
![Page 62: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/62.jpg)
Pecot
![Page 63: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/63.jpg)
miil
![Page 64: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/64.jpg)
![Page 65: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/65.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•モレスキン好きな人/文具好きな人•車好きな人/ファッション好きな人•大学生/新卒社員趣向が関する場合、ターゲットによってデザインが決まる
どんな人に使ってほしい?
なんでもかん
でも
フラットにし
ないで><
![Page 66: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/66.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
コンテンツファーストターゲットファースト
2
#MobileFrontier
![Page 67: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/67.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
いつどこでスマホ使ってる?
#MobileFrontier
![Page 68: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/68.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•通勤中、電車の中や歩いているとき•朝や夜、ベッドの中で•お風呂の中でジップロックで•リビングのソファでテレビを見ながら•キッチンでごはんを作りながら
#MobileFrontier
![Page 69: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/69.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
ユースケース・コンテキストを考えなさい!
コンテキストは予測不能
#MobileFrontier
![Page 70: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/70.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
アプリに没入させるように作りなさい!
注意散漫なときに使う
#MobileFrontier
![Page 71: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/71.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
Design Develop User
•部屋の中•机の上•いすに座って•集中して
•外で•歩きながら•他の人と話しながら•リラックスして
#MobileFrontier
![Page 72: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/72.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザインICE BREAK
tommmmyめっちゃできたー!
2013.4.25
tommmmyめっちゃできたー!
2013.4.25
tommmmyめっちゃできたー!
tommmmyめっちゃできたー!
2013.4.25
tommmmyめっちゃできたー!
2013.4.25
tommmmyめっちゃできたー!
#MobileFrontier
![Page 73: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/73.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
体験とシームレスに
#MobileFrontier
![Page 74: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/74.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•外環境に自動的に合う•人と機械の距離を縮める
これからのデザイン
センサーなども含めたハードの知識も必要になってくる
#MobileFrontier
![Page 75: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/75.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
体験とシームレスに使える
3
#MobileFrontier
![Page 76: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/76.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
Sync(同期)
#MobileFrontier
![Page 81: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/81.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
マルチデバイスでSyncして使える
4
#MobileFrontier
![Page 82: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/82.jpg)
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•直感的で自然な操作•コンテンツファーストターゲットファースト
•体験とシームレスに使える•マルチデバイスでSyncして使える
#MobileFrontier
![Page 83: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/83.jpg)
No Border, プロトタイプ!
後半戦
プロトタイプについて考える
![Page 84: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/84.jpg)
プロトタイプについて考える
プロトタイプ、作ってますか?
なにで#MobileFrontier
![Page 85: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/85.jpg)
•ワイヤーフレーム•モックアップ(静止画)•プロトタイプ(動くもの)
プロトタイプについて考える#MobileFrontier
![Page 86: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/86.jpg)
•インスクリーン
•インブラウザ
•ペーパープロトタイピング
プロトタイプについて考える
静止画
HTML+CSS+JavaScript、Flash
録画しておいて、あとで客観的に分析
#MobileFrontier
![Page 87: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/87.jpg)
プロトタイプについて考える#MobileFrontier
![Page 88: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/88.jpg)
動くプロトタイプ
!
プロトタイプについて考える#MobileFrontier
![Page 89: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/89.jpg)
プロトタイプについて考える
ペーパープロトタイピング
録画
#MobileFrontier
![Page 90: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/90.jpg)
タイムカード
お題
プロトタイプについて考える
出勤したときの打刻
![Page 91: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/91.jpg)
•自己紹介(5min)
•アイデア出し(10min)
•制作(15min)
プロトタイプについて考える
20:00~20:05
20:05~20:15
20:15~20:30
![Page 92: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/92.jpg)
プロトタイプについて考える
![Page 93: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/93.jpg)
プロトタイプについて考える
![Page 94: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/94.jpg)
•自己紹介(5min)
•アイデア出し(10min)
•制作(15min)
プロトタイプについて考える
20:00~20:05
20:05~20:15
20:15~20:30
タイムカード
出勤したときの打刻
お題
![Page 95: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/95.jpg)
No border, スマホUI!
人と機械のつながり
まとめ
時代の流れとともに変わります
#MobileFrontier
![Page 96: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/96.jpg)
ガイドライン ?<
![Page 97: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/97.jpg)
•人の動きを邪魔しない自然な動き•人と機械との関係性•使って気持ちいいと思えること•もはやボタン操作ではない時代•UIUIというが、机の上だけではほんとうは片付かない
No border, スマホUI!#MobileFrontier
![Page 98: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/98.jpg)
No Border!
•デザインインターフェース•人と機械•デザイナーとエンジニア•ユーザーと開発者
![Page 99: No border, スマホ UI! 〜これからのモバイルアプリデザイン〜](https://reader037.vdocuments.pub/reader037/viewer/2022102616/5565fe8dd8b42a2a4d8b4ce6/html5/thumbnails/99.jpg)
No border, スマホUI!
ありがとうございました
@tommmmy