Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
マテリアルデザインガイドライン輪読会#1 - Material Design -
Search
okeicalm
July 30, 2017
Design
0
730
マテリアルデザインガイドライン輪読会#1 - Material Design -
マテリアルデザイン輪読会用のスライド
出典:
https://www.gstatic.com/material/spec/jp/material_design.pdf
okeicalm
July 30, 2017
Tweet
Share
More Decks by okeicalm
See All by okeicalm
プロダクトチームが挑むユーザー価値の計測と開発生産性
okeicalm
1
270
マネーフォワード関西開発拠点の SREの始まりと今と未来
okeicalm
0
31
技術的負債の返却をスクラムで: 会計SaaSの開発チームの挑戦の軌跡
okeicalm
0
380
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
okeicalm
0
3.6k
マテリアルデザインガイドライン輪読会#1 - Components(button) -
okeicalm
0
610
Other Decks in Design
See All in Design
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
230
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
790
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.2k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
630
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
440
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
710
What makes a great Director?
_limex_
0
140
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.6k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
170
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
160
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Six Lessons from altMBA
skipperchong
28
4k
For a Future-Friendly Web
brad_frost
179
9.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A designer walks into a library…
pauljervisheath
207
24k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Code Reviewing Like a Champion
maltzj
525
40k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Transcript
ϚςϦΞϧσβΠϯΨΠυϥΠϯྠಡձ #1 - Material Design - @okeicalm
͡Ίʹ ͜ͷεϥΠυGoogleࣾͷMaterial Design Guideline Λྠಡ༻ʹ·ͱΊͨͷͰ͢ɻ ग़యɿhttps://www.gstatic.com/material/spec/jp/material_design.pdf ͜ͷεϥΠυͷςϯϓϨʔτҎԼΛར༻͍ͯ͠·͢ https://github.com/yulily100/Material-Color-Keynote
ࣗݾհ ͓ʔ͘Βʢ@okeicalmʣ NTT Solmare, Inc. ϓϩδΣΫτϚωʔδϟʁεΫϥϜϚελʔʁ झຯͰAndroid, RubyΛษڧத
ϚςϦΞϧσβΠϯ Google Ͱɺ࣌Λ͑ͯڞ௨͢Δ༏ΕͨσβΠϯ ͷݪଇͱɺՊֶٕज़ͷֵ৽ੑͱՄೳੑͱΛ༥߹ͤͨ͞ ࢹ֮ݴޠΛ࡞Γग़͢͜ͱʹऔΓΜͰ͖·ͨ͠ɻ͜͏ ͯ͠Ͱ͖ͨͷ͕ɺϚςϦΞϧ σβΠϯͰ͢ɻ Google ͕ϚςϦΞϧ σβΠϯͷཧ೦ಛΛൃల͞
ͤଓ͚ΔݶΓɺ͜ͷ༷ੜ͖ͨυΩϡϝϯτͱͯ͠ ͜Ε͔Βߋ৽͞Ε͍͖ͯ·͢ɻ
ඪ ϓϥοτϑΥʔϜͷछ㑔σόΠεͷαΠζʹ͔͔Θ Βͣ౷ҰײΛग़͢͜ͱ͕Ͱ͖Δɺ୯ಠͷج൫γεςϜ Λ։ൃ͠·͢ɻ ϞόΠϧ͔Βڭ܇ΛಘΔ͜ͱͪΖΜͰ͕͢ɺλο ϓɺԻɺϚεɺΩʔϘʔυ͍ͣΕॏཁͳೖྗ ํ๏Ͱ͢ɻ
جຊݪଇ ϚςϦΞϧϝλϑΝʔͰ͋Δ େͰੜ͖ੜ͖ͱͨ͠ɺҙࣝతͳσβΠϯ ಈ͖ʹҙຯ͕͋Δ
ϚςϦΞϧϝλϑΝʔͰ͋Δ ࢴͱΠϯΫ͔Βண͞ΕͨϚςϦΞϧҰछͷϝλ ϑΝʔ ϚςϦΞϧͷجຊݪཧͰ͋Δޫɾ໘ɾಈ͖ʹΑͬͯ ମ͕ۭؒͰޓ͍ʹͲͷΑ͏ʹಈ͖ɺ ࡞༻͠߹ ͍ɺଘࡏ͍ͯ͠Δͷ͔Λ͑Δ
େͰੜ͖ੜ͖ͱͨ͠ɺҙࣝతͳσβΠϯ ҹ͚σβΠϯͷ͞·͟·ͳجຊతཁૉʢจࣈɺά Ϧουɺ༨നɺॖईɺ৭ɺը૾ͷ༻ͳͲʣʹΑΔࢹ ֮දݱ Ϣʔβʔͷૢ࡞Λڧௐͯࣔ͢͜͠ͱͰॏཁͳػೳ͕ॠ ؒతʹΘ͔ΓɺϢʔβʔʹͱͬͯͷಓ͠ΔͱͳΔ
ಈ͖ʹҙຯ͕͋Δ ಈ͖Λ༩͑Δ͜ͱͰɺಈ࡞ͷओମ͕ϢʔβʔͰ͋Δ͜ ͱΛڧௐ͢Δ ΦϒδΣΫτ͕มܗͨ͠Γ࠶ߏ͞ΕͨΓ͢Δ߹Ͱ ɺϢʔβʔମݧͷ࿈ଓੑΛଛͳΘͳ͍Α͏ʹදࣔ͢ Δ Ϣʔβʔͷૢ࡞ʹର͢ΔԠ߇͑Ίͳ͕Β໌֬ͳ ͷʹɺঢ়ଶͷભҠޮՌతͰ͋Γͳ͕ΒटඌҰ؏ͨ͠ ͷʹ͢Δ
ϚςϦΞϧͱ ڥ ϚςϦΞϧϓϩύςΟ ߴͱγϟυ
ڥɿ3Dͷੈք ϚςϦΞϧڥશͯͷΦϒδΣΫτ͕x, y, z࣠ͷํ Λۭ࣋ͭؒ z࣠ͷਖ਼ͷ͕Ӿཡऀʹ͔ͬͯ৳ͼ͍ͯΔ ඪ४Ͱ1dpͷް͞Λ࣋ͭ
ڥɿ3Dͷੈք
ڥɿޫͱӨ ϚςϦΞϧڥͷӨ̎ͭͷޫݯʹΑͬͯͰ͖Δ ɾओཁޫɿํੑͷ͋ΔӨ ɾڥޫɿશͯͷ͔֯ΒͷॊΒ͔ͳӨ z ࣠ํͷଟ༷ͳҐஔʹ͋ΔϚςϦΞϧͷγʔτͰޫ ݯ͕͑͗͞ΒΕΔͱɺӨ͕ൃੜ
ڥɿޫͱӨ 2 Android z y 6 dp
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ x࣠ɺy࣠ͷαΠζࣗ༝͕ͩɺް͞ۉҰʢ1dpʣ dp 1 dp
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ӨΛ͏͜ͱͰϚςϦΞϧؒͷ૬ରతͳߴΛදݱ͢ Δ దͳදݱ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsSmZ5VlNBRHBXNXM/ inline%20whatismaterial-materialprop-physicalprop-PaperShadow_01_xhdpi_008.mp4 ෆదͳදݱ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsaVFKVXI0RUFOWTg/ inline%20whatismaterial-materialprop-physicalprop-PaperShadow_02_xhdpi_008.mp4
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ϚςϦΞϧ্ʹίϯςϯπΛදࣔͰ͖Δ ܗঢ়৭ʹ੍ݶͳ͍ ίϯςϯπͰϚςϦΞϧͷް͞Λදݱ͍͚ͯ͠ͳ͍
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ίϯςϯπͷಈ࡞ϚςϦΞϧ͔Βಠཱ͍ͯ͠Δ͕ɺ ͦͷڥք͔ΒΈग़͢͜ͱͰ͖ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsT2ZXakpkaGp4bzQ/ whatismaterial-materialprop-physicalprop-InkBehavior_xhdpi_006.mp4
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ೖྗΠϕϯτ͕ϚςϦΞϧΛ௨Γൈ͚͍͚ͯͳ͍
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ෳͷϚςϦΞϧཁૉ͕ۭؒͷಉ͡Λಉ࣌ʹ༗ ͢Δ͜ͱͰ͖ͳ͍ 1
ϚςϦΞϧϓϩύςΟɿཧϓϩύςΟ ϚςϦΞϧ͕ଞͷϚςϦΞϧΛ௨Γൈ͚Δ͜ͱͰ͖ ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsc2VZVUJ5bFNscFU/ whatismaterial_properties_physical_07_xhdpi_009.mp4
ϚςϦΞϧϓϩύςΟɿϚςϦΞϧͷมܗ ϚςϦΞϧมܗͰ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsMndnRld3dl9nVU0/ whatismaterial-materialprop-transformingmaterial-PaperShape_xhdpi_005.mp4 ϚςϦΞϧͷ֦େॖখɺͦͷฏ໘ʹԊͬͯߦ͏ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsLVpqQ0pBOXY3WDQ/ whatismaterial-materialprop-transformingmaterial-PaperShapeLinear_xhdpi_005.mp4 ϚςϦΞϧΛંΓۂ͛ͨΓɺΜͩΓ͢Δ͜ͱͰ͖ ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsM0s0eE5sODFxcnM/
whatismaterial-materialprop-transformingmaterial-PaperBendFold_xhdpi_006.mp4
ϚςϦΞϧϓϩύςΟɿϚςϦΞϧͷมܗ γʔτঢ়ͷϚςϦΞϧΛͭͳ͛ͯ̍ຕͷϚςϦΞϧʹ Ͱ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsekNUcDRIaXh1RUU/ whatismaterial-materialprop-transformingmaterial-PaperHeal_xhdpi_004.mp4 ϚςϦΞϧΛΓͯ͠ɺ͢͜ͱͰ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsNlM0eEhPMDFwMlU/ whatismaterial-materialprop-transformingmaterial-PaperSplitHeal_xhdpi_005.mp4
ϚςϦΞϧϓϩύςΟɿϚςϦΞϧͷಈ͖ ڥͷͲͷॴͰੜɺফ໓ͤ͞Δ͜ͱ͕Ͱ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsTUF0YzJrX0xfWmc/ whatismaterial-materialprop-movementmaterial-PaperPointExpand_xhdpi_005.mp4 ࣠ʹԊͬͯҠಈͤ͞Δ͜ͱ͕Ͱ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsYXIyWl9fZURydTA/ whatismaterial-materialprop-movementmaterial-PaperMove_xhdpi_008.mp4 ϢʔβʔʹΑΔૢ࡞z࣠ʹԊͬͨಈ͖ͱͯ͠දݱ͢ Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsQW1HYnpicTVySG8/
whatismaterial-materialprop-movementmaterial-Material_Response_xhdpi_003.mp4
ߴͱγϟυɿߴ ߴͱɺ2 ͭͷදࣔ໘ͷؒͷ Z ࣠ํͷ૬ରతͳԞ ߦ͖ʢڑʣ ߴ 1 ͭͷදࣔ໘ͷ্෦͔Βผͷදࣔ໘ͷ্෦· Ͱͷڑͱͯ͠ܭଌ͞ΕΔ
ࢠΦϒδΣΫτͷߴɺΦϒδΣΫτͷߴʹର ͢Δ૬ର
ߴͱγϟυɿߴ Z 2
ߴͱγϟυɿߴ αΠζʹؔͳ͘ɺશͯͷϚςϦΞϧΦϒδΣΫτʹ ੩ࢭߴ͕͋Δ ΦϒδΣΫτͷߴ͕มΘͬͨ߹ɺ͙͢ʹ੩ࢭߴ ʹΔඞཁ͕͋Δ
ߴͱγϟυɿߴ ಉ͡ίϯϙʔωϯτλΠϓͷ੩ࢭߴΞϓϦؒͰৗ ʹҰఆ ίϯϙʔωϯτͷ੩ࢭߴϓϥοτϑΥʔϜ͕มΘ ΔͱڥͷԞߦ͖ʹԠͯ͡มΘΔ͜ͱ͕͋Δ
ߴͱγϟυɿߴ Ұ෦ͷίϯϙʔωϯτλΠϓͰɺϢʔβʔͷೖྗʢ௨ৗ࣌ɺ ϑΥʔΧε࣌ɺԡԼ࣌ͳͲʣγεςϜΠϕϯτʹԠͯ͡ߴ͕ มԽ͢ΔϨεϙϯγϒߴ͕༻͞ΕΔ ͜͏ͨ͠ߴͷมԽɺಈతߴΦϑηοτΛ༻ͯ͠Ұ؏ͯ͠ ࣮͞ΕΔ ಈతߴΦϑηοτίϯϙʔωϯτͷ੩ࢭঢ়ଶ͔Βίϯϙʔω ϯτͷҠಈઌ·Ͱͷؒͷ૬ରతͳඪߴͰ͋Δ ೖྗΠϕϯτ͕ྃ·ͨΩϟϯηϧ͞ΕΔͱɺίϯϙʔωϯτ ੩ࢭߴʹΔ
ߴͱγϟυɿߴ ϨεϙϯγϒߴΛͬͨίϯϙʔωϯτଞͷίϯ ϙʔωϯτͱૺ۰͢ΔՄೳੑ͕͋Δ͕ɺίϯϙʔωϯ τɺϨΠΞτͷௐͳͲ͋ΒΏΔखஈͰճආ͢Δ ίϯϙʔωϯτϨϕϧͰׯব͕ੜ͡ΔલʹҠಈ·ͨ আ͕Ͱ͖Δ ϨΠΞτϨϕϧͰɺͰ͖Δ͚ͩׯব͕ى͖ͳ͍Α ͏ͳϨΠΞτΛσβΠϯ͢Δɻ
ߴͱγϟυɿߴ ֤छίϯϙʔωϯτͷ੩ࢭߴͱಈతߴΦϑηοτ ͷൺֱ / 1
ߴͱγϟυɿγϟυ γϟυɺΦϒδΣΫτͷԞߦ͖ҠಈํΛද͢ ॏཁͳҹ ΦϒδΣΫτͷߴʹΑͬͯɺͦͷΦϒδΣΫτͷγϟ υͷ֎؍͕ܾ·Δ
ߴͱγϟυɿγϟυ
ߴͱγϟυɿγϟυ
ߴͱγϟυɿγϟυ ίϯϙʔωϯτͷγϟυඪ४ͰఆΊΒΕͨͷΛ ར༻͢Δඞཁ͕͋Δ
ߴͱγϟυɿγϟυ 4 dp : 2 dp : 8 dp
ߴͱγϟυɿγϟυ : 8 dp : 9 dp +1 dp
ߴͱγϟυɿΦϒδΣΫτͷؔ ΞϓϦͷΦϒδΣΫτͷߏʹΑͬͯɺ֤ΦϒδΣ ΫτͷଞͷΦϒδΣΫτʹର͢Δಈ࡞͕ܾ·Δ ΦϒδΣΫτͦΕͧΕಠཱͯ͠ಈ͔ͤΔ߹ͱ্Ґ ͷΦϒδΣΫτʹΑͬͯಈ੍͖͕ݶ͞ΕΔ߹͕͋ Δ શͯͷΦϒδΣΫτɺࢠؔͰද͞ΕΔ֊ͷҰ ෦Ͱ͋Δ
ߴͱγϟυɿΦϒδΣΫτͷؔ ࢠؔͷ༷ ɾ֤ΦϒδΣΫτʹ͕̍ͭ͋Δ ɾ֤ΦϒδΣΫτҙͷͷࢠΛ࣋ͭ͜ͱ͕Ͱ͖Δ ɾࢠɺҐஔɺճసɺεέʔϧɺߴͳͲͷΦϒδΣ ΫτΛมԽͤ͞ΔϓϩύςΟΛ͔Βܧঝ͢Δ ɾܑఋͱ֊ͷಉ͡Ϩϕϧʹ͋ΔΦϒδΣΫτ
ߴͱγϟυɿΦϒδΣΫτͷؔ ྫ֎ͱͯ͠ϝΠϯ UI ཁૉͳͲɺϧʔτΛʹ࣋ͭΞ ΠςϜɺଞͷΦϒδΣΫτʹ੍͞Εͣʹಈ͚Δ ྫʣϑϩʔςΟϯάૢ࡞ϘλϯίϯςϯπͱҰॹʹ εΫϩʔϧ͠ͳ͍
ߴͱγϟυɿΦϒδΣΫτͷؔ ΦϒδΣΫτಉ͕࢜ͲͷΑ͏ʹ૬ޓ࡞༻͢Δ͔ɺ ࢠ֊ͰͷҐஔʹΑܾͬͯ·Δ ྫʣࢠͱͷؒʹ Z ࣠ํʹ࠷খݶͷ伱ؒΛ࣋ͭ ͕ɺͱࢠͷؒʹଞͷΦϒδΣΫτૠೖ͞Εͳ͍ ྫʣεΫϩʔϧதͷΧʔυίϨΫγϣϯͰɺΧʔυ ಉܑ͕࢜ఋؔʹ͋ΔͨΊɺͯ͢ͷΧʔυ͕Ұॹʹ ॎҰྻͱͳͬͯಈ͘
ߴͱγϟυɿΦϒδΣΫτͷؔ ΦϒδΣΫτͷߴʢZ ۭؒͰͷҐஔʣΛܾΊΔํ๏ ɺදࣔ͢Δίϯςϯπͷ֊ͱɺΦϒδΣΫτΛಠ ཱͯ͠ಈ͔͢ඞཁ͕͋Δ͔Ͳ͏͔ʹΑͬͯมΘΔ