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
720
マテリアルデザインガイドライン輪読会#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
250
マネーフォワード関西開発拠点の SREの始まりと今と未来
okeicalm
0
29
技術的負債の返却をスクラムで: 会計SaaSの開発チームの挑戦の軌跡
okeicalm
0
340
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
okeicalm
0
3.5k
マテリアルデザインガイドライン輪読会#1 - Components(button) -
okeicalm
0
610
Other Decks in Design
See All in Design
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
370
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
520
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
330
Saudade typeface
tiagoporto
0
320
CMS管理画面のアクセシビリティ
magi1125
6
1.9k
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
590
Kid Cowboy 103
marilutwin
0
260
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.1k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
140
250131_product meetup
motokoishida
0
210
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
140
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
390
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
It's Worth the Effort
3n
185
28k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Being A Developer After 40
akosma
90
590k
Side Projects
sachag
455
42k
Typedesign – Prime Four
hannesfritz
42
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Music & Morning Musume
bryan
46
6.6k
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 ۭؒͰͷҐஔʣΛܾΊΔํ๏ ɺදࣔ͢Δίϯςϯπͷ֊ͱɺΦϒδΣΫτΛಠ ཱͯ͠ಈ͔͢ඞཁ͕͋Δ͔Ͳ͏͔ʹΑͬͯมΘΔ