第1回スマホデザイン会議 #sdkaigi AQUA SOCIAL DRIVE - http://aquadrive.jp/ Newers - http://www.newers.net/ Pelo - http://www.pelo.jp/ Cotto - http://cotto.jp/ Pelo's Puzzle - http://www.bascule.co.jp/pelopuzzle/ Bascule Inc. - http://www.bascule.co.jp/ Bascule GO! - http://www.facebook.com/BasculeGo

1. UI＆UX
重要なのは、毎日さわって嬉しい UI/UX!
Bascule GO! - 大塚晃

2. UIについて
さっそくUIの基礎的なところから １０

3. １．コンテンツ＞UI
○コンテンツが見たい
×UIが見たい
コンテンツやサービスを伴い全体でデザインする
すぐにボタンでモリモリになりコンテンツを食ってし
まうので不要なパーツはどんどん削除。
ナビゲーションで画面を半分使ってしまうようなUI
は結構にあるが、当然使いにくい

4. ２．TPO重視
オフ→オン オフ→オン
・オンとオフでメリハリを。
・アプリ内であってもTPOが異なるものは全く別のものとしてデザインしてよい。
・混ぜるな危険。世界感の異なるものはいっしょに並べず必ず画面を分ける。

5. ４．６万色カラーでのトーンジャンプ
↓きれいなグラデ ↓トーンジャンプ ↓実機で見るときれいなグラデになる
・ 微妙なグラデや色味を使う時は見た目が汚くなることがある。
→ドット手打ちでタイリング
→Photoshopの誤差拡散法でも代用可
→PCモニタで再現したい場合には、モニタの設定でHighColor(16ビット)を選択

6. ５．フォントサイズを大きく
△
×
×
歩きながらの状態と
○
椅子に座った状態では
可読性が全く違う
○
○ 最小の文字は
Gmailなどを参考にすると○
○
○

7. ６．屋外想定
コントラストを高く
室内で見る何倍も画面が見づらくなるためコントラストを高くする。
また、複雑なレイアウトや演出は避けてシンプルに。
アクションは片手操作
・荷物を持っている。つり革につかまっている。
主要な操作が片手でできるか実機に入れて確認する。
実機に入れて持ち歩き
通勤時などにチェックしてみるのがよい

8. ７．遷移
無限ループ
・友達リストから友達のプロフィールへ、友達の友達リストから自分のプロフィールへ・・・という
感じで無限遷移を作ることができますが、遷移する度にメモリを消費します。スマホのメモリは
少ないのでループしないような整理と構成を。
キャンセル遷移
・進む方向だけ設計して、戻る方の遷移は考えられていないことが多い。
ダイアログを表示させ、ダイアログから別画面を呼び出したときにキャンセルボタンを押すと、
何が表示されるのか？など。
様々な状況想定のもとに設計する必要あり。

9. ８．iPhone ⇔ Android デザインの互換性
デバイスが変わればUIが変わる、
同じUI設計では対応できない。
両方のUIガイドラインを読み
クセを知っておく必要がある。
ただ、サービスやコンテンツを理解
していないと、それぞれのガイドラ
インにひっぱられて全く違うアプリ
になってしまうこともある。

10. ９．アクション（＝メニュー）の違い
backキー
iPhone にはbackキーやmenuキーがない分 menuキー
アクションで画面が狭くなる
Android はアクションをメニューに入れておけるので Android のメニューキーは
メイン画面を広く使える（メニューキーで呼び出し） iPhoneのActionボタン（ ）
に相当する。
てっとり早くAndroidとの互換性を
とったりしたい場合には

11. １０．安易にやると失敗するUI
２重タブ、２重ダイアログ タブの左右スクロール アコーディオンUI
自分が今何の画面を操作 ボタンが動くと操作しづら 便利なように見えるが、小さ
しているのかわからなくな い。 な画面でボタンが動きまわる
る。 とかえって操作しにくい。
一画面内で全部できるようにするより、
機能を整理して画面を分けたり削除した方が
結果的に使いやすい

12. 基礎的なところ：まとめ
ボタンが大きくて
みんな喜ぶなら
いくらでもやるさ
「使いやすい」というのはあくまで手段。
本当にやりたいことをやろう。

13. UserXperienceとは
やるためのUX

14. UserXperienceとは
なんだか自由な複雑系

15. UserXperienceとは
UXに基づいてUIという大きなカラダを作るのに
複雑な概念を用いていても何もできない。
UXの理解や目的の整理はUIの必須条件。
健全なるUIに、健全なる魂やどれかし！！

16. UXの独自指標
スマホアプリUXのMVC
Mind Value Context
望み・気持ち 生活・仕事・遊び 事情・背景

17. UXの独自指標
Mind Value Context
望み・気持ち 生活・仕事・遊び 事情・背景
発見 TPO
自発性の行動 トリガ
UXの複雑な一般指標はこの矢印の要素

18. UXの独自指標
Mind Value Context
がない がない がない
届かない
というふうな使い方をします

19. UXの独自指標
Mind Value Context
望み・気持ち 生活・仕事・遊び 事情・背景
発見 TPO
自発性の行動 トリガ
UXのキモはアクセシビリティやユーザビリティより
この矢印の質と量が上がるように考えること

20. UXの独自指標
Mind Value Context
望み・気持ち 生活・仕事・遊び 事情・背景
UX UI
設計の流れ
１．サービス要件 ２．アプリ仕様
UXもUIも、どういった人を狙うかの武器、
UXより一歩近づいてヒットするのがUI

21. MVCを実績紹介を交えて ３つ

22. AQUA Social Drive
AQUA Social Drive

23. AQUA Social Drive
ドライブしながらツイートするアプリ
YouTube
http://www.youtube.com/watch?v=MmeWeKI8kZs

24. AQUA Social Drive
1.まずは TPO （Context）
ドライブ中は運転に集中している
画面操作はもちろん不可
外を見ているから、画面表示は無意味。
見られないしタッチされないアプリって何？

25. AQUA Social Drive
２. アプローチ
・メーター類やサイン標識と同じく状態を簡潔に知らせるもの。
・スクリーンセーバーのような反応
・オーディオやラジオのように耳で楽しませるもの

26. AQUA Social Drive
・最小構成
・１M離れても読める文字の大きさ
→実際の環境を体験しておく、PC画面を見ていてもわからない。

27. AQUA Social Drive
・ノイズにならないようにその空間にあるものと
トンマナをあわせる。→信号や交通標識

28. AQUA Social Drive
【安全のための配慮】
メイン画面に触れようとするとアラート
放置しておくとすぐ解除され元にもどる
ガイドラインに沿ったアラートであれば
ドライバーは小さな【OK】ボタンを押そうとする。
これは危険な上にドライブが台無しになる。
ガイドラインより優先すべきことはある！

29. AQUA Social Drive
３. 設計から開発へ向けた準備
設計段階では予期できない問題が起きる。
UI設計で準備できることは？

30. AQUA Social Drive
シーケンス単位でUIパターン出し
全UIをシーケンスに分割し、考えうるパターンの検証を終わらせておく
※UIはシーケンス単位で再利用が可能、
独自ライブラリくらいの感覚でコストはさほどかからない。
ex. Social Drive の UI には pelo のものが多く使われている
によって
・最適なUIを選択できる、優れたUIを発見できる。
・自分の頭もクリアに、クライアントやメンバーへの展開がスムーズ
・開発やサービスからの変則的な要求に対応できる。

31. AQUA Social Drive
シーケンスの大量生産１
シーケンス単位で並べてUIを作成しておくと
パターン出しやチェックなどがしやすい。
ログイン・コネクト プロフィール
ドライブの開始～終了
終了後のアクション

32. AQUA Social Drive
シーケンスの大量生産２
大量のUIを簡単に実機確認したり、素早くシェアするために
Webツールを制作。
PSDやドキュメントを
ドラッグ＆ドロップ

33. AQUA Social Drive
モックアップでの検証
・開発のリスク：アプリの完成には時間が必要、
実際に使ってみてから気づいてもやり直すことは難しい
・設計のリスク：頭の中で完成していても気づいていない箇所がある。
・関係各位に対して実際に体験を提供できるので調整が早くなる。
全員の理解が深まりプロジェクトが盛り上がる
プロジェクトに関わる人間が多いほど効果的

34. AQUA Social Drive
モックはUIデザインをもとにFlashやAirで制作
・ひと通りの操作を追えるフルモック、
・サーバーサイドとの連携整理目的で使用するシーケンスモック
・主要な操作を流れで説明できる最小限のプレゼンモック
など種類がある。
何を検証するためのモックアップなのかを定義しておかないと
期待した効果が出ないこともある。

35. [PR] 自社サービス
iPhoneの方 Androidの方
Pelo Cotto
散歩気分の
Pelo's PUZZLE
写真をかわいく
チェックインアプリ デコしてあそべる
おでかけログに 女子アプリ

36. Newers
www.newers.net

37. Newers
Twitter RSSReader
過去のことを誰も覚えていない。 似たようなニュースばかりで飽き
「ニュースの更新・破棄による鮮 る、やがて使わなくなる。「ニュー
度キープ」が得意なメディア スの集積」が得意な管理ツール
自分のまわりの情報が集まる。
Newers
UX 自分の身の回りで話題になっているニュースが読める、
インタレスト型ニュースリーダー

38. Newers
Value をどう
コントロール
全ての行が させよう。。
Value
トップ フィルタリング機能 RSSのミュートとロック機能

39. Newers
開発者は２人＋有志
WebAppはUXやUIを一番早くモノにできる
こうならいいのにというアイディアはみんな持っている。
スマホ用にスケーリングすればわりと簡単にカタチにできる
jQueryで作ったモックを公開するイメージ
実際に体験してみなければそれが意図したものかはわからない
言語化が難しいものの実体を作ってみる。
UI用ライブラリも作りたいという軽い気持ち

40. Newers
Androidではタップ挙動が微妙
iPhoneのClick実装
click → fn
AndroidのClick実装
var target
click → fn.apply(target, arguments)
touchstart → bind(“touchmove touchend”)
touchmove → unbind(“touchmove touchend”)
touchend → target=e.target

41. Newers
最後に：
UXは映像やドラマみたいなもので
UIはその１フレームのようなものだと考えます
連続するフレームの上で
シーン・ムード・展開を練った上で
外に出てロケハンしたりすると
面白いスマホUIが作れるはず

42. Thank you.