2011/09/17 日本Androidの会 浜松支部 第5回ミーティング資料。ガイドラインより抜粋説明。

1. Android UI Guidelines より
アイコン
2011/09/17(Sat)
Hiromi Tsuzuki(@mrshiromi) http://mrshiromi.net

2. アイコンガイドライン
の説明を。
と、の前に。
2011/09/17 Android UI Guidelines より アイコン 2

3. Android は『カオス』
● Smart Phone は 2.x系と2.3.x系が混在。
● Tablet は 2.x系と2.3.x系と3.x系が混在。
– 両方共、OS1.6もまだあるよ。
● Honeycomのソースって公開した？
● Screenサイズ（アス比）と解像度の混在。
● Statu Bar の色と高さもメーカー次第。
● Samsunの勝手にicon角丸四角仕様とか…。
2011/09/17 Android UI Guidelines より アイコン 3

4. Supporting Multiple Screens
http://developer.android.com/guide/practices/screens_support.html
2011/09/17 Android UI Guidelines より アイコン 4

5. 2011/09/17 Android UI Guidelines より アイコン 5

6. 2011/09/17 Android UI Guidelines より アイコン 6

7. 2011/09/17 Android UI Guidelines より アイコン 7

8. 2011/09/17 Android UI Guidelines より アイコン 8

9. 画像のマルチデバイス対応
● 画像は、hdpi向けサイズだけでほぼ対応可能。
– 端末側で勝手に拡縮してくれる（IS03やTabletとか）。
– xhdpiは、OS2.3と3.0以上から対応。まだシェアは少ない。
– 人間が認識できる解像度には限界がある。
– 240dpiと360dpiを目で見ても違いなんかわかんない。
● 画面サイズと解像度（density）は違う。
– IS03の物理画面サイズは480x720px。解像度は320dpi。
– drawable-320dpi を用意しなくても drawable-hdpi で大丈夫。
2011/09/17 Android UI Guidelines より アイコン 9

10. 画像の多言語対応
● 英語をdefaultにしておいたほうがいい。
● 画像のファイル名は同じ。
● res/drawable で。置く場所が違う。
– 「drawable-hdpi」を英語でdefault。
– ボタンとかは英語でも大して違和感なく使えるので大丈夫。
– 「drawable-ja-hdpi」日本語の画像はこっちへ。
– 文字を画像にした場合などは多言語化も忘れずに。
– リソースフォルダ名の設定方法 - hyoromoの日記
2011/09/17 Android UI Guidelines より アイコン 10

11. 本題へ。
と、言いたいところですが。
今はとっても微妙な時期…。
2011/09/17 Android UI Guidelines より アイコン 11

12. Google I/O 2011 で
コードネーム
「Ice Cream Sandwich」を
4Qリリースと発表。
2011/09/17 Android UI Guidelines より アイコン 12

13. ということは。
2011/09/17 Android UI Guidelines より アイコン 13

14. 2011/09/17 Android UI Guidelines より アイコン 14

15. ということか？！
2011/09/17 Android UI Guidelines より アイコン 15

16. 次のコードネーム
「Jerry Beans」…？！
2011/09/17 Android UI Guidelines より アイコン 16

17. 近々、リファレンス
が
更新されるなぁ。
と思いながら、
資料作ってます。
2011/09/17 Android UI Guidelines より アイコン 17

18. 今後への資料として。
2011/09/17 Android UI Guidelines より アイコン 18

19. http://www.google.com/events/io/2011/sessions/designing-and-implementing-android-uis-for-phones-and-tablets.html
pdfファイル必読！
2011/09/17 Android UI Guidelines より アイコン 19

20. http://code.google.com/p/iosched/
ソース見て！
2011/09/17 Android UI Guidelines より アイコン 20

21. 今のGoogleさん。
Webサイトも含め、
デザイン＆レイアウトを
順次変更中。
2011/09/17 Android UI Guidelines より アイコン 21

22. Googleさんが、
最近リリースした
Android Application。
2011/09/17 Android UI Guidelines より アイコン 22

23. Google+
2011/09/17 Android UI Guidelines より アイコン 23

24. Android Market
2011/09/17 Android UI Guidelines より アイコン 24

25. Web Site
Android Application
統一感が出てきてる。
2011/09/17 Android UI Guidelines より アイコン 25

26. デザイン的には、
Webサイトに似てきた。
2011/09/17 Android UI Guidelines より アイコン 26

27. では、本題へ。
2011/09/17 Android UI Guidelines より アイコン 27

28. アイコンはどうなる？！
2011/09/17 Android UI Guidelines より アイコン 28

29. Honeycom のアイコン
2011/09/17 Android UI Guidelines より アイコン 29

30. 1.6系と2.x系と新3D風が混在。
2011/09/17 Android UI Guidelines より アイコン 30

31. 新しいものだけ見ると、
質感が格段に良くなってる！
心の声
「Star Trek」好きだねぇ。Googleさん。
2011/09/17 Android UI Guidelines より アイコン 31

32. User Interface Guidelines
http://developer.android.com/guide/practices/ui_guidelines/index.html
2011/09/17 Android UI Guidelines より アイコン 32

33. psdファイル
2011/09/17 Android UI Guidelines より アイコン 33

34. Icon Design Guidelines
http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
2011/09/17 Android UI Guidelines より アイコン 34

35. ● タイプ別アイコンサイズ。
● hdpi向けのみで対応可能。
● Status Bar は、2.3系サイズで。
2011/09/17 Android UI Guidelines より アイコン 35

36. Launcher Icons
http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html
2011/09/17 Android UI Guidelines より アイコン 36

37. ランチャーアイコンのサイズ
丸と四角でアイコンを描くときのサイズがちょっと違う。
2011/09/17 Android UI Guidelines より アイコン 37

38. ランチャーアイコン xhdpi ＆ Web 512
xhdpi用はリファレンスに、
まだ無いので作ってみた。
仕上がりアイコン画像サイズ
丸(default)アイコンサイズ
四角アイコンサイズ
四角アイコンの場合少し小さ
めに作ること。
2011/09/17 Android UI Guidelines より アイコン 38

39. 推奨カラー
このカラーをベースにグラデーション作ったりしてね。
2011/09/17 Android UI Guidelines より アイコン 39

40. エフェクト効果（Photoshop）
トップライト・ドロップシャドウ・ノイズを加える。
2011/09/17 Android UI Guidelines より アイコン 40

41. メイン2色+α…3色まで。
グラデーションを使う。
原色使うのはやめよう。
2011/09/17 Android UI Guidelines より アイコン 41

42. おっと、
こんなところにいいものが。
2011/09/17 Android UI Guidelines より アイコン 42

43. Android Asset Studio
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
アイコンが簡単に作れます。
2011/09/17 Android UI Guidelines より アイコン 43

44. またまた、
こんなところにいいものが。
2011/09/17 Android UI Guidelines より アイコン 44

45. Android Vector Icon Template
Pack | dotproof
http://www.dotproof.jp/2010/04/14/android-vector-icon-template-kit/
2011/09/17 Android UI Guidelines より アイコン 45

46. Illustlator ＆ Inkscape
で使えます。
Inkscapeの場合は、
グループ解除を
繰り返して下さい。
2011/09/17 Android UI Guidelines より アイコン 46

47. お役立ちリンクその他
● Draw 9-patchを使ってAndroidアプリを解像度に応
じたリキッドデザインする｜caraldo.net
http://bit.ly/nsmNOI
● Androidアプリデザインの基礎知識 ≪ ジェネシックス
ブログ http://bit.ly/m0zChL
● Android R Drawables
http://androiddrawableexplorer.appspot.com/
– OS2.2システムリソースの画像。9patch画像などの参考に。
2011/09/17 Android UI Guidelines より アイコン 47

48. 絵の具体的な描き方は…。
2011/09/17 Android UI Guidelines より アイコン 48

49. ツールのよって違うので、
質問ある方どうぞ！
@mrshiromi まで。
2011/09/17 Android UI Guidelines より アイコン 49

50. ご清聴、
ありがとうございました。
2011/09/17 Android UI Guidelines より アイコン 50