【増員！→370名】 開発者、デザイナー必見！　アプリ制作勉強会 / 勘違いだらけのAndroid UIデザイン 発表資料（2012年8月21日） http://atnd.org/events/31039 The presentation doc for Smartphone application design seminar on 2012/08/21 by WAVE Multimedia School.

1. 1

2. WAVEイベントセミナー・アプリ制作勉強会
勘違いだらけのAndroid UIデザイン
Android UI Design, Too Much Misunderstanding
Nobuya Sato
Secret Lab, Inc.
August 21st., 2012
Twitter: #appsemi
Copyright © 2012 Secret Lab, Inc. All Right Reserved.

3. 自己紹介
• @nobsato
• UXデザイン、デザイン戦略、IA
– 1994年からWebデザイン
– Webエージェンシーで大規模な企業サイトの情報設計や企業
のグローバル戦略、海外サイト構築やグローバル展開
– Sonyのデザイン部門でAndroidのPF戦略やタブレット戦略
– 米Seesmicで日本語化やAndroidアプリやWP7アプリ
– 現在はUXやUIデザインのコンサルティング、デザイン調査
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 3

4. 本日のテーマ
• 勘違いだらけのAndroid UIデザイン
1. Androidで独自性を出すのは大変？
2. Androidアプリの開発は工数が係る？
3. Android向けのデザインは大変？
4. 検証すべき端末は数百、すでに飽和状態？
Copyright © 2012 Nobuya Sato. 4

5. UX/UIデザイン
UX = UI ?
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 5

6. UX/UIの違い
The Difference Between UX and UI: Subtleties Explained in Cereal
Copyright © 2012 Secret Lab, Inc. All Right Reserved.
（写真が語るUXとUIの違い）
6

7. Copyright © 2012 Secret Lab, Inc. All Right Reserved. 7

8. Copyright © 2012 Secret Lab, Inc. All Right Reserved. 8

9. Copyright © 2012 Secret Lab, Inc. All Right Reserved. 9

10. Copyright © 2012 Secret Lab, Inc. All Right Reserved. 10

11. Copyright © 2012 Secret Lab, Inc. All Right Reserved. 11

12. UX/UIデザインの改善？
• ユーザーの使い方、モノの使われ方を観察して問題点
を直すことで、ユーザーの体験を改善でき、モノの使
われ方やユーザーエクスペリエンス（UX）を向上する
ことができる
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 12

13. UX/UIデザインの改善？
• ユーザーの使い方、モノの使われ方を観察して問題点
を直すことで、ユーザーの体験を改善でき、モノの使
われ方やユーザーエクスペリエンス（UX）を向上する
ことができる
→ 改善しているのはUX（使い方や使われ方）、
本来のUI（ボタンやアイコン）は スライドで
見てきた例では改善されていない。
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 13

14. UIデザインの改善
1. 提供しようとしているコンテキスト（内容）は何か？
2. どのように機能を提供できるか？
3. その場におけるルール（作法）は何か？
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 14

15. 勘違いだらけのAndroid UIデザイン
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 15

16. 先ほどのテーマの回答
• 勘違いだらけのAndroid UIデザイン
1. Androidで独自性を出すのは大変？
2. Androidアプリの開発は工数が係る？
3. Android向けのデザインは大変？
4. 検証すべき端末は数百、すでに飽和状態？
Copyright © 2012 Nobuya Sato. 16

17. さっそく本日の回答
• 勘違いだらけのAndroid UIデザイン
1. Androidで独自性を出すのは大変
メーカーは端末の差異化を出すので大変です
SNSゲーム会社は複数プラットフォーム向けにアプリ
を対応させるのが大変です
独自性と独創性が混在していることが多いです。
アプリの独自性＝コンテンツ、内容の事。見た目で
独自性を出すのは大変です。
Copyright © 2012 Nobuya Sato. 17

18. さっそく本日の回答
• 勘違いだらけのAndroid UIデザイン
2. Androidのアプリの開発は工数が係る？
社内に経験がない技術で開発すると大変です。
工数削減のために、既に開発済みのiPhone向けアプ
リをベースに開発すると、実は大変です。
（ネットにある記事のほとんどがこの話です）
現状、Fragmentを利用して複数デバイス（タブレット
/フォーン）向けに完璧に開発しようとすると、実は
かなり大変です
Copyright © 2012 Nobuya Sato. 18

19. さっそく本日の回答
• 勘違いだらけのAndroid UIデザイン
3. Android向けデザインは大変？
複数サイズのリソース用意したりとか面倒くさいです
複数画面サイズのレイアウトデザインが必要で、実はちょ
っと面倒くさいです
Android向けのデザイン作業やデザインのルールを熟知し
ているデザイナーがまだまだ少ないです
デザイナーといってもiPhoneアプリのデザイン経験者が
多い。デザインがiPhoneっぽくなって… Добрый день
Copyright © 2012 Nobuya Sato. 19

20. さっそく本日の回答
• 勘違いだらけのAndroid UIデザイン
4. 検証すべき端末は数百、すでに飽和状態？
Copyright © 2012 Nobuya Sato. 20

21. さっそく本日の回答
• 勘違いだらけのAndroid UIデザイン
4. 検証すべき端末は数百、すでに飽和状態？
そうえいば18ヶ月保証とかありましたが…
NexusシリーズやGoogleが指定しているリファレンス端末
（Xoomなど）を、OS毎に用意
※OS毎の例：Android 1.6 = HTC Magic、Android 2.0 = DROID、Android 2.1 =
Nexus One、Android 2.3 = Nexus S、Android 3.x = Xoom、Android 4.0 = Galaxy
Nexus、Android 4.1 = nexus 7
国産メーカー（シャープ、NECカシオ、パナソニック、
ソニー）は☓。やっぱり海外端末、特に開発コミュニティ
にも優しいSony EricssonかSamsungが良い。
※LGやASUSなどの変態端末も可。海外主流の京セラもわりと良い
Copyright © 2012 Nobuya Sato. 21

22. さっそく本日の回答
• 勘違いだらけのAndroid UIデザイン
• 主な開発手法
– ネイティブ
– 側だけネイティブ＋中身をWeb View
– HTML5ベース
→ 標準ブラウザも実はかなりいじられている
Copyright © 2012 Nobuya Sato. 22

23. 良いアプリUIのデザイン方法？
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 23

24. UIプロトタイピング
• まずはUIのプロトタイピングから…
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 24

25. UIプロトタイピング
• ワイヤーフレームとユーザーフローをしっかり作る
© Geeky Gadgets
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 25

26. ペーパープロトタイピング
• 費用も掛からず、全員が確認できて効果的
© The Mobile Frontier
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 26

27. UIステンシルツールなどを使う
• 画面デザインを沢山つくるのに便利
Google I/O 2012で配られたGoogle Android UI teamオフィシャル？ステンシル
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 27

28. 面倒くさい人には…
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 28

29. UIデザイン＝画面の流れのデザイン
• アプリを作る前に必ず、画面フローを確認をする
© Six Revisions
© xDevelop
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 29

30. 良いアプリの作り方？
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 30

31. より良いAndroidアプリの作り方
• https://developer.android.com/intl/ja/distribute/googleplay/strategies/app-
quality.html
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 31

32. Androidアプリの品質向上
• Google API Expert 安藤さん（@yukio_andoh）による日本語訳
• http://www.andoh.org/2012/06/android-improving-app-quality.html
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 32

33. Androidアプリの品質向上
1. ユーザーの声を聞く
2. 安定性の向上とバグの削除
3. UI 応答性の向上
4. ユーザビリティの向上
5. プロフェッショナルな外観と審美性
– User Interface Deign Tips (2010 July)
6. 必要な機能の正しい選択
7. システムと第三者アプリの統合
8. 詳細に対して注意すること
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 33

34. Android Design Guideline
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 34

35. Android Design Guideline、Jelly Bean対応！
• http://developer.android.com/design/
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 35

36. 旧Android Design Guideline（ICS版）
• http://developer.android.com/design/
Copyright © 2012 Nobuya Sato. 36

37. Android Design Guideline日本語版？
残念ながら表示しません。
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 37

38. 有志による日本語訳版（ICS版）
• 松岡さん（@kenz_firespeed）による日本語訳版
• http://firespeed.org/diary.php?diary=kenz-1462
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 38

39. 補足 : 9-Patch
• http://developer.android.com/intl/ja/tools/help/draw9patch.html
• Android SDKで提供されている伸縮可能なボタン画像
を簡単に作るツール
• 黒いドット部分を元に自動的に紫のように拡大される
• ドットの指定方法が少し奇抜で慣れが必要
伸縮可能
エリア
パディング
指定も可能
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 39

40. 補足: Action Barの理解を助ける書籍
• Action BarやICSで追加されたAPIなどを理解するのに
良い参考書（エンジニア向け）
• Android UI Cookbook for 4.0 ICSアプリ開発術
• あんざいゆき（@yanzm）／著
• インプレスジャパン
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 40

41. Thank You
Nobuya Sato
Secret Lab, Inc.
nobsato@secret-lab.jp
http://about.me/nobsato
http://twitter.com/nobsato
http://slideshare.com/nobsato
Copyright © 2012 Secret Lab, Inc. All Right Reserved. 41