ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/467/room ーーーーーーーーーーーーーーーーーーーーーーー

1. これだけは知っておけ！
はじめてのAndroidアプリデザイン
〜 9-patch 編〜
株式会社ツクロア 秋葉ちひろ
12:002014.3.18 スクー

2. •見た目だけでなく機能のデザインを
•デザインと技術、双方からのアプローチ
「気 持ちいい」をデザインする会社
PC / iPhone / iPad / Android / and more...
秋葉 ちひろ デザイナー / アートディレクター

3. Action Bar
9-patch
UIと画面遷移
これだけは知っておけ！シリーズ
済
本日
未定

4. • デザイナー
• 企画をする人
• 開発者
これだけは知っておけ！シリーズ
Androidアプリ制作に携わる

5. •9-patch
今日の授業

6. > Android Fragmentation Report July 2013 - OpenSignal
前回の
復習

7. 画面サイズが多様すぎる！
画面サイズの展開を見た時点で
つらい！
前回の
復習

8. Android - Default UI
12:00
前回の
復習

9. Android - Default UI
前回の
復習
ActionBar

10. Action Barのデザイン前回の
復習

11. 前回の
復習

12. 前回の
復習

13. Androidアプリデザインのコツ
前回の
復習
余白が大小しても
違和感のないデザイン！

14. 9-patch

15. 9-patch
こんなデザイン、
実装できないよ。
に、打ち勝つために！

16. 9-patchとは？
画像を意図したとおりに
引き伸ばす
A
余白を決めるB

17. 9-patchとは？
画像を意図したとおりに
引き伸ばす
A
余白を決めるB

18. 角丸がっ！

21. 引き伸ばされる領域
9スライス

22. 1x1 px
1px line

23. 書きだしたパーツの上下左右に
1pxずつ余白を追加する
A : 画像を意図したとおりに引き伸ばす
1

26. 上側と左側に
黒い点（線）をかく
2
A : 画像を意図したとおりに引き伸ばす

27. 伸びるところ

39. このデザインに関しては
結果は同じ

45. 同じ色

52. 大きな
グラデーション

58. 同じ色
同じ色

60. このデザインに関しては
結果はビミョーにちがう

61. デザイナーのみなさん、
このクオリティどうする？

62. 9-patchとは？
画像を意図したとおりに
引き伸ばす
A
余白を決めるB

63. 書きだしたパーツの上下左右に
1pxずつ余白を追加する
B : 余白を決める
1

66. 右側と下側に
黒い点（線）をかく
2
B : 余白を決める

67. コンテンツが入り込むエリア

68. 余白

69. 余白

70. 余白

72. B
A

73. button_bg .png

74. button_bg .png.9

75. main.xml
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg"
android:text="撮影する"
/>

76. <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg"
android:text="撮影する"
android:padding="15dp"
/>
main.xml

77. android:padding="15dp"
9-patchでの余白の設定と
XMLでの余白の設定、
どちらが優先される
でしょうか？
問題5px
5px

78. 9-patchでの余白
XMLでのpadding
(15dp)
android:padding="15dp"

79. 9-patchでの余白

80. 9-patchでの余白
XMLでのpadding
(15dp)

81. 9-patchでの余白
XMLでのpadding
(15dp)

82. 9-patchのつくりかた
Draw9PatchをつかうA
グラフィックツールでつくるB
Android Asset StudioをつかうC

83. 9-patchのつくりかた
Draw9PatchをつかうA
グラフィックツールでつくるB
Android Asset StudioをつかうC

87. 9-patchのつくりかた
Draw9PatchをつかうA
グラフィックツールでつくるB
Android Asset StudioをつかうC

88. 9-patchのつくりかた
Draw9PatchをつかうA
グラフィックツールでつくるB
Android Asset StudioをつかうC

89. http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

90. http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
1ヶ所しか伸ばせない…

91. 9-patchの応用と注意
伸ばす点はいくつでもA
伸ばす点の割合がポイントB
伸ばすことしかできないC

92. 9-patchの応用と注意
伸ばす点はいくつでもA
伸ばす点の割合がポイントB
伸ばすことしかできないC

94. 左の3つの図ように、
点の領域を変えていくと
どうなるでしょうか？
問題
A
B
C

97. 9-patchの応用と注意
伸ばす点はいくつでもA
伸ばす点の割合がポイントB
伸ばすことしかできないC

100. 重なっている！！

101. 重なってしまった例

102. 9-patchが適用できるかどうか
向き / 不向きは
デザイナーでも考えよう

106. @akai_t

109. logo.png
actionbar_bg.png
ic_menu
_plus.png
ic_menu
_search.png

110. 9-patchを理解して…
質の高いデザインを！

111. また今度！
おつかれさまでした！
秋葉ちひろ @tommmmy
12:00
UIと画面遷移
未定
だよっ

112. レポート課題
画面遷移がすぐれていると思う
Androidアプリを教えてください！
理由もおねがいします。