No border, スマホ UI！〜これからのモバイルアプリデザイン〜

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 Interactive
http://www.mdn.co.jp/di/articles/2887/
Firefox OSアプリ開発ガイド
5月末発売！（予定）
Web連載
書籍
Web Designing
6月19日発売！
雑誌寄稿

デザイナーズハック
http://designers-hack.net/
コミュニティ

No Border, スマホUI！
iPhone
Android
Windows
Phone
Firefox
OS
Ubuntu
Touch
Tizen

今日のセッション
http://www.amazon.co.jp/dp/4621086553

http://www.amazon.co.jp/dp/4621086553
#MobileFrontier
#MobileFrontier

•モバイル端末のアプリ開発のこれからに
対する心構え（インターフェース）
•プロトタイプについて考える
•【ワークショップ】
ペーパープロトタイピング

•インターフェースデザイン
モバイル端末のアプリ開発のこれからに対する心構え
前半戦
#MobileFrontier

インターフェースデザインが
必要か？
なぜ
インターフェースデザイン
#MobileFrontier

#MobileFrontier

キーボードとマウス
で操作できるインターフェース
#MobileFrontier

フォルダファイル

実際にある体験を模倣する

GUI
Graphic User Interface
#MobileFrontier

道具として
ツールをえらぶ

iPhoneの登場
2007年6月29日
#MobileFrontier

タッチインターフェース
#MobileFrontier

clear Mailbox

clear Mailbox
NUI
Natural User Interface
#MobileFrontier

PAPER

タッチデバイスの特性を
最大限に生かした
インターフェース
iPad

ボタン
？

直感的で自然な操作
1
GUI NUI
#MobileFrontier

直感的で自然な操作
1
タップして使うのはもう古い！？

ICE BREAK
GUIからNUIへ1
https://www.leapmotion.com/

今年はフラットデザインが
流行る！
わたしはかなり慎重…
#MobileFrontier

フラットなのか？
なぜ
コンテンツ重視
#MobileFrontier

•コンテンツファースト
•無駄な装飾はいらない
•コンテンツ自体がUIになりうる
#MobileFrontier

http://weekly.ascii.jp/elem/000/000/121/121099/

•デザインが楽になるやろう！
•工数が減るやろう！
考えられる懸念点
font
info
graphic
editorial
golden
ratio
silver
ratio
マジかんべんして＞＜

•デザインは、グルーピングと、
インタラクションを予測させるもの
コンテンツファーストの
デザイン
フラットだろうがメタファーがあろうが関係ない

•モレスキン好きな人／文具好きな人
•車好きな人／ファッション好きな人
•大学生／新卒社員
趣向が関する場合、ターゲットによってデザインが決まる
どんな人に使ってほしい？
なんでもかんでも
フラットにしないで＞＜

コンテンツファースト
ターゲットファースト
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

タイムカード
お題
出勤したときの打刻

•自己紹介（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

No border, スマホ UI！〜これからのモバイルアプリデザイン〜

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to No border, スマホ UI！〜これからのモバイルアプリデザイン〜

Similar to No border, スマホ UI！〜これからのモバイルアプリデザイン〜 (20)