【第3回】デザイナーがコードから読み解く、androidアプリのデザインの幅を広げるコツとtips...
DESCRIPTION
全力でカスタムUI http://www.ladybeetle-design.com/androidappdesigns/TRANSCRIPT
![Page 1: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/1.jpg)
ハッシュタグ
##aaaaddeessiiggnnssデザイナーが
コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
第33回:全力でカスタムUUII@@SSTTAARRTTUUPP BBaassee CCaammpp
22001122..1100..44
![Page 2: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/2.jpg)
がんばって作ったデザインが、
実装後に残念な結果にならないために
ハッシュタグ
##aaaaddeessiiggnnss
![Page 3: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/3.jpg)
秋葉ちひろ
•・ @@ttoommmmmmmmyy•・ デザイナー/アートディレクター•・ WWeebb系・アプリ系•・ BBaaiidduuでSSiimmeejjiiの開発のフロントエンドの一部
![Page 4: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/4.jpg)
11..カスタムUUIIについて
全力でカスタムUUII
![Page 5: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/5.jpg)
カスタムUUIIとは?
どんなもの?
•・ チェックボックス•・ ラジオボタン•・ スライダー•・ シークバー•・ スライドバー など
![Page 6: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/6.jpg)
カスタムUUIIって使う?
![Page 7: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/7.jpg)
![Page 8: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/8.jpg)
![Page 9: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/9.jpg)
![Page 10: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/10.jpg)
![Page 11: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/11.jpg)
デザインをカスタマイズする理由
![Page 12: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/12.jpg)
いつ使う?
カスタムUUII
•・ ユーザーに何か決めてもらうとき•・ 現在のステータスを何かしら提示したいとき
![Page 13: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/13.jpg)
デザインをカスタマイズする
•・ いつも見ているものと違うとビックリする(かもしれない)
•・ それが自分で操作できるのかがわからない(かもしれない)
デメリット
![Page 14: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/14.jpg)
デザインをカスタマイズする
•・ 端末によるデザインの違いがなくなる•・ アプリのデザインとして統一感が出る(ブランディング)
メリット
![Page 15: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/15.jpg)
だとしたらそれは…�
ただの制作者のエゴかも!!
![Page 16: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/16.jpg)
ちょっと物知りの
クライアントさん
注意!
![Page 17: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/17.jpg)
カスタムUUIIにしてください
どういう感じにしたいですか?
いや、クライアントさんが そうしたいって言ってるんで なんでもいいです…�
![Page 18: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/18.jpg)
どういう感じにしたいですか?
いや、クライアントさんが そうしたいって言ってるんで なんでもいいです…�
AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい
![Page 19: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/19.jpg)
いや、クライアントさんが そうしたいって言ってるんで なんでもいいです…�
AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい
AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。
![Page 20: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/20.jpg)
AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい
AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。
なるほど、そのとおりですね。
![Page 21: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/21.jpg)
AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい
AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。
なるほど、そのとおりですね。
なぜそろえてほしいのですか?
![Page 22: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/22.jpg)
AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。
なるほど、そのとおりですね。
なぜそろえてほしいのですか?
・・・・・・・。
![Page 23: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/23.jpg)
クライアントさんにも
ちゃんとした理由を
考えてほしい
![Page 24: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/24.jpg)
カスタムUUII
•・ 設定がメインとなるアプリ
使うのに適した場面その11
![Page 25: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/25.jpg)
![Page 26: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/26.jpg)
![Page 27: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/27.jpg)
カスタムUUII
•・ 世界観を出したいアプリ
使うのに適した場面その22
![Page 28: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/28.jpg)
![Page 29: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/29.jpg)
スライダー
OONN//OOFFFF
![Page 30: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/30.jpg)
![Page 31: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/31.jpg)
![Page 32: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/32.jpg)
![Page 33: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/33.jpg)
スライダー
スライダー
ラジオボタン
ラジオボタン
![Page 34: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/34.jpg)
カスタムUUII
•・ 本当にやるべきかどうかをしっかり考える(コンセプトも含めて)
•・ 予算面
そもそもの段階で…�
![Page 35: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/35.jpg)
気をつけることその11!
ユーザーが「自分で決めれる」
ということがわかるものにしな
いといけない
![Page 36: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/36.jpg)
![Page 37: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/37.jpg)
気をつけることその22!
ユーザーが「自分がどういう状
態か」ということがわかるもの
にしないといけない
![Page 38: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/38.jpg)
![Page 39: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/39.jpg)
![Page 40: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/40.jpg)
気をつけることその33!
あくまで脇役なので、必要以上
に華美�になってはいけない
また、デフォルトと離れすぎる
とびっくりする
![Page 41: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/41.jpg)
![Page 42: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/42.jpg)
![Page 43: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/43.jpg)
気をつけることその44!
世界観が必要なら、確実にその
方向�が必要
![Page 44: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/44.jpg)
![Page 45: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/45.jpg)
22..状態とデザインについて
全力でカスタムUUII
•・ チェックボックス
![Page 46: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/46.jpg)
![Page 47: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/47.jpg)
![Page 48: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/48.jpg)
![Page 49: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/49.jpg)
![Page 50: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/50.jpg)
![Page 51: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/51.jpg)
![Page 52: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/52.jpg)
![Page 53: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/53.jpg)
![Page 54: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/54.jpg)
![Page 55: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/55.jpg)
![Page 56: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/56.jpg)
![Page 57: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/57.jpg)
![Page 58: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/58.jpg)
![Page 59: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/59.jpg)
状態とは?
オフのとき
オフ/押しているとき
オンのとき
オン/押しているとき
![Page 60: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/60.jpg)
![Page 61: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/61.jpg)
![Page 62: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/62.jpg)
![Page 63: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/63.jpg)
![Page 64: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/64.jpg)
![Page 65: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/65.jpg)
![Page 66: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/66.jpg)
![Page 67: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/67.jpg)
drawable-hdpi
drawable-mdpi
drawable-ldpi
layouts
main.xml
values
strings.xml
res
drawable-xhdpi
iimmgg
hhttmmll
ccssss
JJAAVVAA構造
飾�り
![Page 68: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/68.jpg)
drawable-hdpi
drawable-mdpi
drawable-ldpi
layouts
main.xml
values
strings.xml
res
drawable-xhdpi
iimmgg
hhttmmll
ccssss
JJAAVVAA
構造
飾�り
drawable xxmmll
![Page 69: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/69.jpg)
checkbox_stateful.xml<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>
![Page 70: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/70.jpg)
checkbox_stateful.xml<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>
<item android:state_checked="true"
android:state_pressed="true"
android:drawable="@drawable/xxx">
</item>
チェックされているかどうか
押されているかどうか
その状態で表示する画像
![Page 71: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/71.jpg)
オフのとき
オフ/押しているとき
オンのとき
オン/押しているとき
![Page 72: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/72.jpg)
state_checked="false"
state_checked="false"
state_checked="true"
state_checked="true"
チェックされているかどうか
state_pressed="false"
state_pressed="true"
state_pressed="false"
state_pressed="true"
押されているかどうか
![Page 73: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/73.jpg)
state_checked="false"
state_checked="true"
チェックされているかどうか
state_focused="true"
state_focused="true"
ffooccuussされているか
![Page 74: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/74.jpg)
22..状態とデザインについて
全力でカスタムUUII
•・ スライダー
![Page 75: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/75.jpg)
![Page 76: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/76.jpg)
![Page 77: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/77.jpg)
オンになっているエリア
オフになっているエリア
つまみ(通常時)
つまみ(押されたとき)
![Page 78: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/78.jpg)
ssttaarrttCCoolloorr
eennddCCoolloorr
##5500ccff
##00ccff
ssttrrookkee
##5599ccff
ccoorrnneerrss
![Page 79: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/79.jpg)
![Page 80: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/80.jpg)
![Page 81: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/81.jpg)
![Page 82: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/82.jpg)
![Page 83: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/83.jpg)
![Page 84: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/84.jpg)
つまみには注意が必要
![Page 85: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/85.jpg)
![Page 86: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/86.jpg)
![Page 87: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/87.jpg)
![Page 88: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/88.jpg)
![Page 89: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/89.jpg)
![Page 90: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/90.jpg)
![Page 91: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/91.jpg)
![Page 92: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/92.jpg)
![Page 93: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/93.jpg)
![Page 94: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/94.jpg)
![Page 95: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/95.jpg)
なんかこう気持ち悪い
![Page 96: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/96.jpg)
![Page 97: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/97.jpg)
![Page 98: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/98.jpg)
![Page 99: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/99.jpg)
![Page 100: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/100.jpg)
![Page 101: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/101.jpg)
![Page 102: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/102.jpg)
![Page 103: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/103.jpg)
![Page 104: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/104.jpg)
![Page 105: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/105.jpg)
![Page 106: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/106.jpg)
スライダー
•・ 透過をしたり、特別な形にするときは注意!
•・ バーの進み具合は、つまみのセンターに従ってくれない!
つまみのデザイン
![Page 107: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/107.jpg)
![Page 108: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/108.jpg)
![Page 109: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/109.jpg)
tthhuummbbOOffffsseettを
使ってみる
![Page 110: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/110.jpg)
![Page 111: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/111.jpg)
![Page 112: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/112.jpg)
![Page 113: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/113.jpg)
![Page 114: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/114.jpg)
![Page 115: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/115.jpg)
![Page 116: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/116.jpg)
![Page 117: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/117.jpg)
スライダー
•・ tthhuummbbOOffffsseettを使うと、両端が切れてしまう…�
つまみのデザイン
![Page 118: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/118.jpg)
![Page 119: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/119.jpg)
![Page 120: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/120.jpg)
![Page 121: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/121.jpg)
![Page 122: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/122.jpg)
つまみのデザイン注意11!
・できるだけギリギリで
スライスする
![Page 123: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/123.jpg)
つまみのデザイン注意22!
・プレス時も外回りに影などを
つけるのではなく、ギリギリ
の範囲内でわかるようなもの
![Page 124: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/124.jpg)
sshhaappee
99--ppaattcchh
ssttrrookkee
ssttaarrttCCoolloorr eennddCCoolloorr
![Page 125: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/125.jpg)
99--ppaattcchh
ssttaarrttCCoolloorr eennddCCoolloorr
![Page 126: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/126.jpg)
22..状態とデザインについて
全力でカスタムUUII
•・ シークバー
![Page 127: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/127.jpg)
![Page 128: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/128.jpg)
![Page 129: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/129.jpg)
![Page 130: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/130.jpg)
![Page 131: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/131.jpg)
![Page 132: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/132.jpg)
<shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"></shape>
![Page 133: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/133.jpg)
</shape>
<shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"><gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" />
![Page 134: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/134.jpg)
</shape>
<shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"><gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" />
x
pivotX="50%"pivotY="50%"
<animated-rotate>
</animated-rotate>
![Page 135: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/135.jpg)
![Page 136: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/136.jpg)
![Page 137: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/137.jpg)
![Page 138: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/138.jpg)
![Page 139: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/139.jpg)
![Page 140: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/140.jpg)
</shape>
<shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"><gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" />
<animated-rotate>
</animated-rotate>
![Page 141: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/141.jpg)
</bitmap>
<bitmap android:src= "@drawable/rotate">
<animated-rotate>
</animated-rotate>
![Page 142: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/142.jpg)
かんたんシークバー!・回転するものを作っておく
![Page 143: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/143.jpg)
22..状態とデザインについて
全力でカスタムUUII
•・ スクロールバー
![Page 144: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/144.jpg)
![Page 145: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/145.jpg)
![Page 146: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/146.jpg)
ssttaarrttCCoolloorr
cceenntteerrCCoolloorr
eennddCCoolloorr
ssttrrookkee
ccoorrnneerrss
![Page 147: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/147.jpg)
![Page 148: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/148.jpg)
![Page 149: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/149.jpg)
![Page 150: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/150.jpg)
sshhaappee
99--ppaattcchh
![Page 151: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/151.jpg)
スクロールバーのカスタマイズ!
・基本的には99--ppaattcchhなどで
伸びる表現が必要
・どの程度余白をとるかを指示
![Page 152: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/152.jpg)
カスタムUUII
まとめ
•・ やればいいというものではない•・ ユーザーのアクションを妨げない•・ とはいえ、デザイナーとして可能な範囲を考えたい
![Page 153: 【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022060111/5565facfd8b42a2a4d8b4a18/html5/thumbnails/153.jpg)
GGoooodd LLuucckk!!
ありがとうございました!
•・ @@ttoommmmmmmmyy•・ ffaacceebbooookk :: 秋葉ちひろ•・ 次回は1100//2255(木)@GGMMOOさん