【総集編】デザイナーがコードから読み解く、androidアプリのデザインの幅を広げるコツとtips...
DESCRIPTION
GDG Tokyo 2012-11 Android App Designs での資料。 第1回〜第4回までの総集編TRANSCRIPT
![Page 1: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/1.jpg)
Android App Designsデザイナーがコードから読み解く、
Androidアプリのデザインの幅を広げるコツとTips
秋葉ちひろ @tommmmy
![Page 2: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/2.jpg)
![Page 3: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/3.jpg)
約65名 約80名 約60名 約90名
![Page 4: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/4.jpg)
0% 25% 50% 75% 100%
37%26%16%21%
Webデザイン
アプリデザイン
Web開発
アプリ開発
参加者内訳
(1回目と4回目の合計)
63%
![Page 5: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/5.jpg)
0% 25% 50% 75% 100%
37%26%16%21%
Webデザイン
アプリデザイン
Web開発
アプリ開発
参加者内訳
(1回目と4回目の合計)
37%
![Page 6: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/6.jpg)
秋葉ちひろ• デザイナー/アートディレクター• Web系制作全般• Androidアプリデザイン• BaiduでSimejiのプロモーションと開発のフロントエンド実装の一部
@tommmmy
![Page 7: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/7.jpg)
秋葉ちひろ• デザイナーズハックというデザイナー中心のコミュニティ活動
• 7月に大阪から引っ越してきたばかり
@tommmmy
![Page 8: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/8.jpg)
デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Android App Designs
![Page 9: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/9.jpg)
がんばって作ったデザインが、実装後に残念な結果にならないために
![Page 10: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/10.jpg)
残念になる理由A. デザイナーがAndroidデザインの基礎を理解していない
B. エンジニアがデザインのことをわかっていない
![Page 11: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/11.jpg)
![Page 12: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/12.jpg)
![Page 13: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/13.jpg)
![Page 14: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/14.jpg)
線がない!
影がない!
影がない!
線がない!
![Page 15: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/15.jpg)
![Page 16: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/16.jpg)
落としやすいポイント
結論からいうと…
•線•影•余白
![Page 17: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/17.jpg)
残念になる理由A. デザイナーがAndroidデザインの基礎を理解していない
B. エンジニアがデザインのことをわかっていない
![Page 18: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/18.jpg)
デザイナーにXMLコードを勉強してほしい…?
![Page 19: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/19.jpg)
エンジニアにデザインをわかってほしい…?
![Page 20: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/20.jpg)
コードからつかんだデザインのコツ
デザイナーが知っておくとエンジニアもデザイン実装がしやすくなる!
![Page 21: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/21.jpg)
自分が実装しやすいようにデザイナーに仕込む
![Page 22: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/22.jpg)
どうやってかんたんに…• たぶんデザイナーに「dp」とかいっても受け入れてくれないと思う
• デザイナーさんの身近な言語に翻訳して伝えてみる
![Page 23: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/23.jpg)
デザイナーさんにわかりやすく興味をもってもらうために
裏テーマ
![Page 24: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/24.jpg)
アジェンダ• デザイナーさんにわかりやすく興味をもってもらうための5つのポイント
• 効率的な進め方• Android App Designs アンケート結果
![Page 25: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/25.jpg)
デザイナーさんにわかりやすく興味をもってもらうための5つのポイント
自然に責める
![Page 26: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/26.jpg)
640 px × 1066 px720 px × 1280 px
作成するデザイン案のサイズ
1
![Page 27: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/27.jpg)
640 px × 1066 px720 px × 1280 px1
• xhdpiでつくる- 320dpiといういちばん大きな画面密度- 1dp = 2px なので計算がかんたん• 320dpと360dpの2種類
![Page 28: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/28.jpg)
http://developer.android.com/design/style/metrics-grids.html
640 px × 1066 px720 px × 1280 px1
![Page 29: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/29.jpg)
640 px × 1066 px720 px × 1280 px1
http://developer.android.com/design/style/metrics-grids.html
![Page 30: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/30.jpg)
640 px × 1066 px 720 px × 1280 px
デザインを確認する端末によって分けるといいんじゃないかと思う
![Page 31: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/31.jpg)
![Page 32: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/32.jpg)
480 x 800(Double-click or ESC to hide)
640 px × 1066 px332200ddpp
![Page 33: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/33.jpg)
720 x 1280(Double-click or ESC to hide)
720 px × 1280 px336600ddpp
![Page 34: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/34.jpg)
336600ddpp332200ddpp
640 px × 1066 px
少し大きめ
![Page 35: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/35.jpg)
336600ddpp332200ddpp
720 px × 1280 px
少し小さめ
![Page 36: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/36.jpg)
640 px × 1066 px 720 px × 1280 px
![Page 37: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/37.jpg)
640 px × 1066 px720 px × 1280 px
![Page 38: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/38.jpg)
各要素を決める数値
296 px 4の倍数
![Page 39: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/39.jpg)
48dp Rhythm
http://developer.android.com/design/style/metrics-grids.html
48dp = 96 px
96 px2
![Page 40: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/40.jpg)
http://developer.android.com/design/style/metrics-grids.html
4の倍数2
![Page 41: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/41.jpg)
http://developer.android.com/design/style/metrics-grids.html
4の倍数2
![Page 42: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/42.jpg)
• ガイドラインでは4の倍数 (dp) = 8の倍数 (px)
4の倍数2
= 大原則• 細かいところはもうひとまわり小さい単位でもいいのでは?
• 2の倍数 (dp) = 4の倍数 (px)
![Page 43: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/43.jpg)
hhddppii
224400ddppii
xxhhddppii
332200ddppii
mmddppii
116600ddppii
1dp2dp3dp4dp5dp
1px2px3px4px5px
1.5px3 px4.5px6 px7.5px
2px4px6px8px10px
![Page 44: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/44.jpg)
hhddppii
224400ddppii
xxhhddppii
332200ddppii
mmddppii
116600ddppii
6dp7dp8dp9dp10dp
6px7px8px9px10px
9 px10.5px12 px13.5px15 px
12px14px16px18px20px
![Page 45: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/45.jpg)
96 px 4の倍数
![Page 46: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/46.jpg)
伸縮幅・固定幅横幅は原則 2種類
どこが伸縮/固定なのかをはっきりさせる
3
![Page 47: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/47.jpg)
• 640pxでつくっていたら、720pxのときにはどこが伸びるのか
• 720pxでつくっていたら、640pxのときにはどこがちぢむのか
• 余白はどちらのときも固定値にする
伸縮幅・固定幅3
![Page 48: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/48.jpg)
http://developer.android.com/design/style/metrics-grids.html
伸縮幅・固定幅3
![Page 49: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/49.jpg)
332200ddpp
553333ddpp
336600ddpp
664400ddpp
640 px 720 px
![Page 50: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/50.jpg)
![Page 51: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/51.jpg)
![Page 52: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/52.jpg)
16 px
12 px
4 px
![Page 53: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/53.jpg)
16 px
12 px
4 px
![Page 54: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/54.jpg)
伸縮幅・固定幅
![Page 55: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/55.jpg)
9-patch画像を伸ばすテクニック
4
![Page 56: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/56.jpg)
• 画面サイズはデバイスによってちがい、必ず伸縮を考えなければならない
• 画像が自由自在に伸びるようにする設定
9-patch4
![Page 57: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/57.jpg)
画像を9分割して、四隅は固定、その他を伸びてもいいようにする
伸びても耐えられるデザイン
9-patch4
![Page 58: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/58.jpg)
![Page 59: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/59.jpg)
![Page 60: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/60.jpg)
伸びるところ
![Page 61: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/61.jpg)
![Page 62: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/62.jpg)
![Page 63: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/63.jpg)
![Page 64: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/64.jpg)
![Page 65: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/65.jpg)
![Page 66: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/66.jpg)
![Page 67: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/67.jpg)
![Page 68: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/68.jpg)
![Page 69: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/69.jpg)
![Page 70: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/70.jpg)
![Page 71: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/71.jpg)
![Page 72: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/72.jpg)
このデザインに関しては
結果は同じ
![Page 73: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/73.jpg)
![Page 74: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/74.jpg)
![Page 75: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/75.jpg)
![Page 76: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/76.jpg)
![Page 77: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/77.jpg)
![Page 78: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/78.jpg)
同じ色
![Page 79: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/79.jpg)
![Page 80: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/80.jpg)
![Page 81: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/81.jpg)
![Page 82: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/82.jpg)
![Page 83: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/83.jpg)
![Page 84: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/84.jpg)
![Page 85: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/85.jpg)
大きなグラデーション
![Page 86: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/86.jpg)
![Page 87: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/87.jpg)
![Page 88: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/88.jpg)
![Page 89: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/89.jpg)
![Page 90: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/90.jpg)
![Page 91: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/91.jpg)
同じ色
同じ色
![Page 92: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/92.jpg)
![Page 93: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/93.jpg)
このデザインに関しては
結果はビミョーにちがう
もっこり感がビミョーに変わる
![Page 94: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/94.jpg)
グラデーションは注意!• どこがのびるかを指定しよう• 光り具合などを計算している場合が多いので勝手に変えられるといやだ
9-patch4
![Page 95: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/95.jpg)
9-patchの点までつけてほしいなぁ…
ムフォフォフォ
![Page 96: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/96.jpg)
してもらってうれしいこと• 実際にデバイスで見るとどうのびるかをいっしょに体験する
• Draw9PatchがデザイナーのPCで動くようにする
慣れてきたらPhotoshopでもつくるよ!
![Page 97: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/97.jpg)
![Page 98: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/98.jpg)
![Page 99: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/99.jpg)
えいやー!
![Page 100: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/100.jpg)
矩形 <shape>コードで表現できるグラフィック
5
![Page 101: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/101.jpg)
![Page 102: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/102.jpg)
• コードでかける矩形のことを知っておこう(コードの書き方は知らなくてもよい)
矩形 <shape>5
![Page 103: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/103.jpg)
R : 8px
2px
矩形 <shape>5
![Page 104: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/104.jpg)
R : 8px
2px
矩形 <shape>5
![Page 105: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/105.jpg)
![Page 106: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/106.jpg)
![Page 107: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/107.jpg)
あ、残念だ…
![Page 108: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/108.jpg)
• グラデーションの場合、コードで可能なものか、9-patchになるのかを考えておこう
矩形 <shape>5
![Page 109: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/109.jpg)
640×1066・720×1280 (px)1
96px・4の倍数2伸縮幅・固定幅39-patch4矩形 <shape>5
![Page 110: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/110.jpg)
効率的な進め方制作フローの再考
![Page 111: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/111.jpg)
カンペ受け取り待機時
カンペ受け取り時
カンペくん(仮)ワイヤーフレーム
カンペを出す
カンペをみる
0 5 : 3 4
0 5 : 3 4
tomiroidと接続中
tomiroidと接続中
「接続中・・・」など接続に関する状況を表示 カウントダウンタイマー(tomiroidと同期)
「終了」が押されるとチャイム音が鳴る
ピピッ
オンマイクでおねがいします!
tomipagostomipagos
![Page 112: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/112.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
![Page 113: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/113.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
じゃあ1週間でデザインおねがいね!
おっけー!
![Page 114: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/114.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
まだかなぁ…
おっけー!
1週間後
![Page 115: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/115.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
まだかなぁ…
ごめーん!!急な対応が入ってしまって…
あと2日くれない?
1週間後
![Page 116: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/116.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
わ、わかった…
ごめーん!!急な対応が入ってしまって…
あと2日くれない?
1週間後
![Page 117: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/117.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
できたかな♪
ごめーん!!急な対応が入ってしまって…
あと2日くれない?
2日後
![Page 118: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/118.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
できたかな♪
2日後
できたー!
![Page 119: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/119.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
2日後
・・・・・
![Page 120: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/120.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
う…これは…もっかいおねがい
2日後
わかったー!
![Page 121: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/121.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
う…これは…もっかいおねがい
2日後
![Page 122: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/122.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
じ、じかんが…
さらに3日後
できたー!
![Page 123: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/123.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
じ、じかんが…
さらに3日後
できたー!
![Page 124: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/124.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
う…がんばる…
さらに3日後
できたー!
![Page 125: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/125.jpg)
従来のやりかた• ワイヤーを決める• デザインをデザイナーにまかせる• なかなかできあがってこない• デザインがないと実装できないよぅ~
![Page 126: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/126.jpg)
従来のやりかた
設計ワイヤー
デザイン
レイアウト実装
テスト
![Page 127: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/127.jpg)
同時進行ワイヤーさえ決まればあとは同時進行
![Page 128: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/128.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
![Page 129: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/129.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>よし、モックつくろ♪
よし、デザインつくろ♪
![Page 130: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/130.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
できたー!
1週間後できたー!
![Page 131: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/131.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
1週間後
![Page 132: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/132.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
1週間後
![Page 133: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/133.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
1週間後
![Page 134: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/134.jpg)
0 5 : 3 4
4 0 :プレゼン時間
タイマー
0 0
tomipagosと接続中
カウントダウンタイマー(tomipagosと同期)
プレゼン時間の設定
タイマーのスタート/ストップ
終了時に押すと、チャイム音が鳴る
オンマイクでおねがいします!
伝達事項を入力
カンペくん(仮)ワイヤーフレーム
カンペを出す
終了終了
リセットリセット
スタートスタート
設定設定
送信送信
tomiroidtomiroid
ストップストップカンペをみる
伝達事項を送信すると同時に、ピピッという小さい音を鳴らす
10分前、5分前、終了時刻にもそれぞれ小さい音を鳴らす
<その他>
1週間後
![Page 135: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/135.jpg)
![Page 136: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/136.jpg)
同時進行のやりかた
設計ワイヤー デザイン
実装
テスト
レイアウト
![Page 137: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/137.jpg)
XMLスタイリングを最後にする
ワイヤーさえ変わらなければ最高の効率
![Page 138: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/138.jpg)
デザイン例<shape>を知った上でのデザイン
![Page 139: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/139.jpg)
![Page 140: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/140.jpg)
きれいでシュッとしてるように見えるけど…
![Page 141: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/141.jpg)
ほとんどが<shape>
![Page 142: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/142.jpg)
R : 8px
2px
![Page 143: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/143.jpg)
声おおきくー!
声おおきくー!
![Page 144: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/144.jpg)
声おおきくー!
声おおきくー!
押せるところ盛り上がっている(ように見える)
押せないところすでにへこんでいる
(ように見える)
![Page 145: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/145.jpg)
声おおきくー!
声おおきくー!
押せるところ盛り上がっている(ように見える)
押せないところすでにへこんでいる
(ように見える)
![Page 146: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/146.jpg)
![Page 147: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/147.jpg)
R : 20px
1px
text shadow
![Page 148: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/148.jpg)
![Page 149: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/149.jpg)
1px
R : 8pxtext shadow
![Page 150: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/150.jpg)
1px
R : 8pxshadow
![Page 151: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/151.jpg)
![Page 152: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/152.jpg)
![Page 153: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/153.jpg)
![Page 154: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/154.jpg)
1px
R : 8px
![Page 155: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/155.jpg)
#本当はノイズは上からかぶさっているが、 わかりやすいように下から出しています。
![Page 156: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/156.jpg)
きれいにデザインをするためには
• 数少ない表現方法でも、知っていればそれなりに組み合わせてきれいなデザインを作れる
• 残念になるのは両方が勉強不足?
![Page 157: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/157.jpg)
Android App Designsアンケート日々の見えない声
![Page 158: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/158.jpg)
![Page 159: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/159.jpg)
デザイナー → エンジニア
![Page 160: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/160.jpg)
デザイナー → エンジニア
Androidのアプリの開発経験はないのですが、どちらの立場も経験したものとして、デザイナーは何をしたいのか、エンジニアは何ができるのか、お互い手の内を見せるしかないと思うのだけど、どうしたらお互いうまく伝えられるのかわからない。
![Page 161: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/161.jpg)
デザイナー → エンジニア
1px 1dp とても大事にデザインしているのと、ちゃんと 1px 1dp 1line 色 形 すべてに意味があるので、実装が難しい場合はちゃんと対策を考えますので何も言わずに勝手に変更しないでください(>_<)相談してください(>_<)
![Page 162: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/162.jpg)
エンジニア → デザイナー
![Page 163: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/163.jpg)
エンジニア → デザイナー
デザインに時間がかかりすぎて、実装する時間が短いよ・・・。
![Page 164: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/164.jpg)
背景になる画像に文字入れられると本当に困る。。。背景はある程度の伸縮に耐えられるもの文字やオブジェクト等を上に載せるなら、別の画像で用意して欲しいです。。。毎回、画像を作り直してもらうのが申し訳なくて・・・
エンジニア → デザイナー
![Page 165: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/165.jpg)
切り出したそざいがざんねんだった。
エンジニア → デザイナー
![Page 166: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/166.jpg)
多分、デザイン面で言ってるエンジニアの「できない」は時間的に無理って事で、Androidの仕様上無理ってのはそうそう無いです。(最終的にはUI丸々自作という手も・・・)
エンジニア → デザイナー
→つづく
![Page 167: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/167.jpg)
エンジニアの「できない」は信じないほうが良いです。でも「できる」って言うと仕事増えるんで理由つけてやらない方向に持って行きたいんです。
エンジニア → デザイナー
![Page 168: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/168.jpg)
いつもお世話になってます!
エンジニア → デザイナー
![Page 169: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/169.jpg)
デザイナー「やっぱりここを変えよう」↓HTML + CSSを修正↓デザイナー「終わったー」↓プログラマー「あ、デザイン変わってる」
エンジニア → デザイナー
Webの場合
→つづく
![Page 170: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/170.jpg)
デザイナー「やっぱりここを変えよう」↓デザイナー「ここを変えたいから、修正しといて」↓プログラマー「え?」→xml修正→「終わったー」↓デザイナー「余白が違う」↓プログラマー「え?」
エンジニア → デザイナー
Androidの場合
→つづく
![Page 171: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/171.jpg)
結論:xmlを書いて欲しい
エンジニア → デザイナー
![Page 172: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/172.jpg)
• Androidのデザインを頼むとiPhoneっぽくデザインするのヤメテ(´・ω・`)• もっとAndroidのデザインを勉強してほしい。• 同種の画像を複数サイズで作成依頼時に嫌な顔しないで欲しい。• Androidも好きになってください。
エンジニア → デザイナー
→つづく
![Page 173: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/173.jpg)
Android好きなデザイナさんだと、Androidのデベロッパーサイトを見て色々勉強してくれてるけど、そうでない場合や、エンジニア向けガイドラインを見てもらうのは無理がある場合もあります。そういった場合でもデザイナさん向けに見てもらえるようなちょっとした資料があるといいんだけど。チラッ
エンジニア → デザイナー
![Page 174: 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader038.vdocuments.net/reader038/viewer/2022110307/5565f986d8b42a20158b530b/html5/thumbnails/174.jpg)
for your happy Android Life!Thank you so much!