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
250
マネーフォワード関西開発拠点の SREの始まりと今と未来
okeicalm
0
30
技術的負債の返却をスクラムで: 会計SaaSの開発チームの挑戦の軌跡
okeicalm
0
350
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
okeicalm
0
3.5k
マテリアルデザインガイドライン輪読会#1 - Components(button) -
okeicalm
0
610
Other Decks in Design
See All in Design
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
sachi_y_portfolio
sachi337
0
330
Liquid Iron
mcduckyart
1
110
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.4k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
540
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
2.1k
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
180
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
490
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
490
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
430
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
For a Future-Friendly Web
brad_frost
179
9.8k
Building Applications with DynamoDB
mza
95
6.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
It's Worth the Effort
3n
185
28k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
BBQ
matthewcrist
89
9.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Being A Developer After 40
akosma
90
590k
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 ۭؒͰͷҐஔʣΛܾΊΔํ๏ ɺදࣔ͢Δίϯςϯπͷ֊ͱɺΦϒδΣΫτΛಠ ཱͯ͠ಈ͔͢ඞཁ͕͋Δ͔Ͳ͏͔ʹΑͬͯมΘΔ