no border, スマホ ui！ 〜これからのモバイルアプリデザイン〜
DESCRIPTION
2013年5月17日 エルパーク仙台にて Fandroid EAST JAPANでの講演資料TRANSCRIPT
No Border, スマホUI！2013.5.17 Fandroid EAST JAPAN
株式会社ツクロア 秋葉ちひろ (@tommmmy)
秋葉 ちひろ@tommmmy
デザイナー／アートディレクター
「気持ちいい」をデザインする会社
秋葉 ちひろ
• 2013年4月 株式会社ツクロア 取締役• ～2月 バイドゥにてSimejiの開発• デザイン全般• HTML/CSS/JS、Android XMLレイアウト
@tommmmy
デザイナー／アートディレクター
Simeji カンペ・リモートスタ★ミ
秋葉ちひろのAndroidアプリデザイン入門 - MdN Design Interactivehttp://www.mdn.co.jp/di/articles/2887/
Firefox OSアプリ開発ガイド5月末発売！（予定）
Web連載
書籍
Web Designing6月19日発売！
雑誌寄稿
• 趣味はモノづくり
No Border, スマホUI！
iPhone
Android
WindowsPhone
FirefoxOS
UbuntuTouch
Tizen
iPhone
AndroidWindowsPhone
FirefoxOS
UbuntuTouchTizen
ガイドライン
ガイドライン ？＜
今日のセッション
http://www.amazon.co.jp/dp/4621086553
今日のセッション
http://www.amazon.co.jp/dp/4621086553
#MobileFrontier
#MobileFrontier
•モバイル端末のアプリ開発のこれからに対する心構え（インターフェース）
•プロトタイプについて考える•【ワークショップ】ペーパープロトタイピング
今日のセッション
•インターフェースデザイン
モバイル端末のアプリ開発のこれからに対する心構え
前半戦
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザインが
必要か？
なぜインターフェースデザイン
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
キーボードとマウスで操作できるインターフェース
インターフェースデザイン
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
モバイル端末のアプリ開発のこれからに対する心構え
フォルダ ファイル
インターフェースデザイン
モバイル端末のアプリ開発のこれからに対する心構え
実際にある体験を模倣する
インターフェースデザイン
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
GUIGraphic User Interface
インターフェースデザイン
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
道具としてツールをえらぶ
インターフェースデザイン
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
iPhoneの登場2007年6月29日
インターフェースデザイン
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
タッチインターフェース
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
clear Mailbox
clear Mailbox
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
NUINatural User Interface
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
PAPER
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
PAPER
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
PAPER
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
PAPER
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
タッチデバイスの特性を最大限に生かしたインターフェース
iPad
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
ボタン
？
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
直感的で自然な操作
1
GUI NUI
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
直感的で自然な操作
1
タップして使うのはもう古い！？
ICE BREAK
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
GUIからNUIへ1
https://www.leapmotion.com/
モバイル端末のアプリ開発のこれからに対する心構え
実際にある体験を模倣する
インターフェースデザイン
メタファーmetaphor
今年はフラットデザインが流行る！
わたしはかなり慎重…
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
フラットなのか？
なぜ
コンテンツ重視
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
•コンテンツファースト•無駄な装飾はいらない•コンテンツ自体がUIになりうる
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
#MobileFrontier
http://weekly.ascii.jp/elem/000/000/121/121099/
zawatt
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•デザインが楽になるやろう！•工数が減るやろう！
考えられる懸念点
fontinfo
graphic
editorialgoldenratio
silverratio
マジかんべん
して＞＜
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•デザインは、グルーピングと、インタラクションを予測させるもの
コンテンツファーストのデザイン
フラットだろうがメタファーがあろうが関係ない
Pecot
miil
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•モレスキン好きな人／文具好きな人•車好きな人／ファッション好きな人•大学生／新卒社員趣向が関する場合、ターゲットによってデザインが決まる
どんな人に使ってほしい？
なんでもかん
でも
フラットにし
ないで＞＜
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
コンテンツファーストターゲットファースト
2
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
いつどこでスマホ使ってる？
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•通勤中、電車の中や歩いているとき•朝や夜、ベッドの中で•お風呂の中でジップロックで•リビングのソファでテレビを見ながら•キッチンでごはんを作りながら
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
ユースケース・コンテキストを考えなさい！
コンテキストは予測不能
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
アプリに没入させるように作りなさい！
注意散漫なときに使う
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
Design Develop User
•部屋の中•机の上•いすに座って•集中して
•外で•歩きながら•他の人と話しながら•リラックスして
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザインICE BREAK
tommmmyめっちゃできたー！
2013.4.25
tommmmyめっちゃできたー！
2013.4.25
tommmmyめっちゃできたー！
tommmmyめっちゃできたー！
2013.4.25
tommmmyめっちゃできたー！
2013.4.25
tommmmyめっちゃできたー！
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
体験とシームレスに
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•外環境に自動的に合う•人と機械の距離を縮める
これからのデザイン
センサーなども含めたハードの知識も必要になってくる
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
体験とシームレスに使える
3
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
Sync（同期）
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
マルチデバイスでSyncして使える
4
#MobileFrontier
モバイル端末のアプリ開発のこれからに対する心構え
インターフェースデザイン
•直感的で自然な操作•コンテンツファーストターゲットファースト
•体験とシームレスに使える•マルチデバイスでSyncして使える
#MobileFrontier
No Border, プロトタイプ！
後半戦
プロトタイプについて考える
プロトタイプについて考える
プロトタイプ、作ってますか？
なにで#MobileFrontier
•ワイヤーフレーム•モックアップ（静止画）•プロトタイプ（動くもの）
プロトタイプについて考える#MobileFrontier
•インスクリーン
•インブラウザ
•ペーパープロトタイピング
プロトタイプについて考える
静止画
HTML+CSS+JavaScript、Flash
録画しておいて、あとで客観的に分析
#MobileFrontier
プロトタイプについて考える#MobileFrontier
動くプロトタイプ
！
プロトタイプについて考える#MobileFrontier
プロトタイプについて考える
ペーパープロトタイピング
録画
#MobileFrontier
タイムカード
お題
プロトタイプについて考える
出勤したときの打刻
•自己紹介（5min）
•アイデア出し（10min）
•制作（15min）
プロトタイプについて考える
20:00～20:05
20:05～20:15
20:15～20:30
プロトタイプについて考える
プロトタイプについて考える
•自己紹介（5min）
•アイデア出し（10min）
•制作（15min）
プロトタイプについて考える
20:00～20:05
20:05～20:15
20:15～20:30
タイムカード
出勤したときの打刻
お題
No border, スマホUI！
人と機械のつながり
まとめ
時代の流れとともに変わります
#MobileFrontier
ガイドライン ？＜
•人の動きを邪魔しない自然な動き•人と機械との関係性•使って気持ちいいと思えること•もはやボタン操作ではない時代•UIUIというが、机の上だけではほんとうは片付かない
No border, スマホUI！#MobileFrontier
No Border!
•デザインインターフェース•人と機械•デザイナーとエンジニア•ユーザーと開発者
No border, スマホUI！
ありがとうございました
@tommmmy