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 - Components(button) -
Search
okeicalm
August 01, 2017
Design
0
610
マテリアルデザインガイドライン輪読会#1 - Components(button) -
マテリアルデザイン輪読会用のスライド
出典:
https://www.gstatic.com/material/spec/jp/components.pdf
okeicalm
August 01, 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 - Material Design -
okeicalm
0
730
Other Decks in Design
See All in Design
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
550
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
290
マンガで分かるサービスデザインガイドライン
senryakuka
1
900
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
300
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
710
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
130
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
株式会社バクタム 会社説明資料
bactum
0
250
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
The Spectacular Lies of Maps
axbom
PRO
0
110
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
portfolio_YumiYasuda
yum0418
0
290
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Designing for Performance
lara
610
69k
BBQ
matthewcrist
89
9.7k
Building Adaptive Systems
keathley
43
2.7k
Building an army of robots
kneath
306
45k
How GitHub (no longer) Works
holman
314
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Unsuck your backbone
ammeep
671
58k
It's Worth the Effort
3n
185
28k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Side Projects
sachag
455
42k
Transcript
ϚςϦΞϧσβΠϯΨΠυϥΠϯྠಡձ#1 - Component(button) - @okeicalm
͡Ίʹ ͜ͷεϥΠυGoogleࣾͷMaterial Design Guideline Λྠಡ༻ʹ·ͱΊͨͷͰ͢ɻ ग़యɿhttps://www.gstatic.com/material/spec/jp/components.pdf ͜ͷεϥΠυͷςϯϓϨʔτҎԼΛར༻͍ͯ͠·͢ https://github.com/yulily100/Material-Color-Keynote
ϘλϯͷλΠϓ λΠϓ ֓ཁ ྫ ϑϩʔςΟϯά ૢ࡞Ϙλϯ ු্ؙ͖͕͍ͬͨσβΠϯͷϘλϯ ϘλϯΛԡ͢ͱΠϯΫঢ়ͷԠ͕දࣔ͞ΕΔ ු͖ग़͠Ϙλϯ ௨ৗํܗͷු্͖͕ͬͨϘλϯ
ϘλϯΛԡ͢ͱΠϯΫঢ়ͷԠ͕දࣔ͞ΕΔ ϑϥοτϘλϯ ΠϯΫͰ࡞ΒΕͨϘλϯ ϘλϯΛԡ͢ͱΠϯΫঢ়ͷԠ͕දࣔ͞ΕΔ ͕ɺු্͖͕͍ͬͯͳ͍ฏΒͳϘλϯ : : : : 3 :
ϘλϯͷλΠϓ
ϘλϯͷλΠϓ Ϙλϯͷॏཁੑɺը໘্ͷίϯςφɺը໘ͷϨΠΞτʹԠͯ͡Ϙλ ϯͷελΠϧΛબͿ ػೳɹɹɹɿϑϩʔςΟϯάૢ࡞Ϙλϯʹ͢Δ΄ͲॏཁͰ༷ʑͳॴͰ ɹɹɹɹɹɹΘΕΔϘλϯ͔Ͳ͏͔Λߟ͑Δ ࣍ݩɹɹɹɿϘλϯΛͲͷίϯςφʹऩΊΔ͔ɺը໘্ʹͲͷ͘Β͍ ɹɹɹɹɹɹzεϖʔεϨΠϠ͕͋Δ͔Ͳ͏͔Λݩʹු͖ग़͠ʹ͢Δ͔ ɹɹɹɹɹɹϑϥοτʹ͢Δ͔ܾΊΔ ϨΠΞτɿ֤ίϯςφͰओʹ̍ͭͷλΠϓͷϘλϯΛར༻͢Δ ɹɹɹɹɹɹෳͷλΠϓΛར༻͍͍ͯ͠ͷਖ਼ͳཧ༝͕͋Δ࣌ͷΈ
ϘλϯͷλΠϓ
༻ํ๏ μΠΞϩάͰϑϥοτϘλϯΛ༻ͯ͠ϘλϯͷΞ ΫγϣϯΛμΠΞϩάͷίϯςϯπͱҰகͤ͞Δ ύσΟϯάͷنఆ͞Ε͍ͯΔ : : 8 dp
༻ํ๏ ΠϯϥΠϯͷϘλϯϨΠΞτʹԠͯ͡ɺු͖ग़͠ Ϙλϯ͔ϑϥοτϘλϯΛબͿ ϑϥοτϘλϯϢʔβʔ͕ݟ͚͍ͭ͢Α͏ʹύσΟ ϯάΛՃ͢Δ
༻ํ๏
༻ํ๏ ΞϓϦͰಛఆͷΞΫγϣϯΛৗʹఏࣔ͢Δඞཁ͕͋ Δ߹ϑϩʔςΟϯάૢ࡞Ϙλϯͷར༻Λਪ ผͷखஈͱͯ͠ৗறϑολʔϘλϯΛར༻ͯ͠ྑ͍ ৗறϘλϯͷΤϦΞͰු͖ग़͠Ϙλϯར༻͠ͳ͍
༻ํ๏ 48 dp
༻ํ๏ σόΠμʔΛՃ͢ΔͱεΫϩʔϧՄೳͳμΠΞϩά ͰৗறϑολʔϘλϯ͕ར༻Ͱ͖Δ
ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ු͖ग़͠ϘλϯͰฏ໘ͷϨΠΞτʹ࣍ݩΛՃͰ ͖Δ
ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ
ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ πʔϧόʔμΠΞϩάʹϑϥοτϘλϯΛ͏ͱϨ ΠϠʔ͕աʹͳΔͷΛ͛Δ
ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ
ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ϑϥοτϘλϯϚςϦΞϧ্ʹ׆ࣈͱͯ͠දࣔ͞Ε Δ ු্͖͕ͬͯདྷͳ͍Ϙλϯ͕ͩɺϘλϯΛԡ͢ͱϘλ ϯશମʹ৭͕ͭ͘
ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ු͖ग़͠Ϙλϯผͷγʔτ্Ͱ੩ࢭ͍ͯ͠ΔϚςϦ ΞϧͷΑ͏ʹಈ࡞͢Δ ු͖ग़͠ϘλϯΛԡ͢ͱશମʹ৭͕ͭ͘
ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ϘλϯͷςΩετେจࣈͷଘࡏ͢ΔݴޠͰେจࣈ ʹ͢Δඞཁ͕͋Δ ͦΕҎ֎ͷݴޠͷ߹ɺϑϥοτϘλϯʹ৭͖ͷ ςΩετΛར༻ͯ͠௨ৗͷςΩετͱ۠ผ͢Δ
ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ු͖ग़͠ϘλϯͷσϑΥϧτͷߴ2dp ύιίϯͷ߹ɺු͖ग़͠ϘλϯʹΧʔιϧΛ߹Θͤ ͨ࣌ʹ͜ͷߴͰදࣔ͢Δ
ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ ϚεͱΩʔϘʔυ͕ओͳೖྗखஈͰ͋Δ߹ɺີ ͷߴ͍UIʹ͋ΘͤͯϘλϯͷੇ๏Λখ͘͞Ͱ͖Δ / : 64 dp : 36 dp
Z : 0 dp : 30% #FFFFFF : 12% #FFFFFF : 14 pt Roboto Medium : 36 dp : 16 dp : 13 pt Roboto Medium : 32 dp : 16 dp
ϑϥοτϘλϯͱු͖ग़͠Ϙλϯ Ϙλϯͷಈ͖ ϑϥοτϘλϯ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFbjE5djFGMzdKcmc/components- buttons-flatbuttons.mp4 ු͖ग़͠Ϙλϯ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFMFBOTERHZFR4aDg/ components-buttons-raisedbuttons.mp4
Γସ͑Ϙλϯ Γସ͑ϘλϯΛ͏ͱɺؔ࿈͢ΔΦϓγϣϯΛ 1 ͭͷάϧʔϓʹ·ͱΊΔ͜ͱ͕Ͱ͖Δ ͦΕͧΕͷΓସ͑Ϙλϯ͕ 1ͭͷάϧʔϓʹଐͯ͠ ͍Δ͜ͱ͕ΘΔΑ͏ʹɺϨΠΞτִؒΛ͑Δ ϑΥʔΧεͨ͠ঢ়ଶԡͨ͠ঢ়ଶʹΑΓɺΓସ͑Ϙ λϯ͕ಛఆͷάϧʔϓʹؚ·Ε͍ͯΔ͜ͱΛࣔ͢͜ͱ ͕Մೳ
Γସ͑Ϙλϯ Γସ͑Ϙλϯͷཁ݅ ɾ̍ͭͷάϧʔϓʹ̏ͭҎ্ͷΓସ͑ϘλϯΛؚΊ Δ ɾϘλϯʹςΩετ·ͨΞΠίϯɺͦ͘͠ͷ ྆ํΛ໊ͬͯલΛ͚ͭΔ
Γସ͑Ϙλϯ 3 1 1 1 : 1 1 1
Γସ͑Ϙλϯ બબղআ͕Ͱ͖ΔΦϓγϣϯ͕͚̍ͭͩͷ߹ɺ Γସ͑ϘλϯʹΞΠίϯ͕ద͍ͯ͠Δ Γସ͑ΞΠίϯͰද໘ͷԠͱͯ͠λοϓλʔήο τΛ্͑ͯʹ͕ΔΠϯΫΛදࣔͰ͖Δ ΞΠίϯͷ࠷దͳஔΞϓϦόʔɺπʔϧόʔɺૢ ࡞ϘλϯɺΓସ͑΅ͨΜ
Γସ͑Ϙλϯ :
ϓϧμϯϘλϯ ϓϧμϯϘλϯͰෳͷબࢶ͔ΒબͿ͜ͱ͕Ͱ ͖Δ ϓϧμϯϘλϯ͕ԡ͞ΕΔͱɺબՄೳͳεςʔλ εΛؚΉϝχϡʔ͕ϘλϯΛ෴͏Α͏ʹදࣔ͞ΕΔ ϓϧμϯͷεΫϩʔϧϝχϡʔͷεΫϩʔϧͱ ಉ͡Α͏ʹಈ࡞͢Δ
ϓϧμϯϘλϯ
ҰൠతͳΦʔόʔϑϩʔϓϧμϯϘλϯ දࣔ͞ΕΔεςʔλεͳ͍͕ɺҹ͔Ұൠతͳϝ χϡʔϘλϯ͕͋Δ ϘλϯΛԡ͢ͱϝχϡʔ͕ඈͼग़͢ ௨ৗɺϝχϡʔͷΦϓγϣϯΛԡ͢͜ͱͰɺͦͷΦ ϓγϣϯͷৄ͍͠ઃఆʹҠಈͰ͖Δ
ҰൠతͳΦʔόʔϑϩʔϓϧμϯϘλϯ 2 1 2 1
ηάϝϯτϓϧμϯϘλϯ ݱࡏͷεςʔλεͱϓϧμϯҹΞΠίϯͱ͍͏̎ͭͷη Ϋγϣϯ͕͋Δ ݱࡏͷεςʔλεΛԡ͢ͱɺը໘ͰͦͷεςʔλεͷΞΫ γϣϯ͕࣮ࢪ͞ΕΔ ϓϧμϯҹΛԡ͢ͱɺεςʔλεͷΦϓγϣϯ͕શͯද ࣔ͞ΕΔ ͍ͣΕ͔̍ͭͷΦϓγϣϯΛબ͢Δͱɺදࣔ͞Ε͍ͯΔε ςʔλε͕มߋ͞ΕΔ
ηάϝϯτϓϧμϯϘλϯ 2 1 1
ฤूՄೳͳϓϧμϯϘλϯ ηάϝϯτԽ͞Εͨϓϧμϯؚ͕·Ε͓ͯΓɺදࣔ ͞Ε͍ͯΔεςʔλεͷςΩετΛฤूͰ͖Δ ݱࡏͷεςʔλεΛԡ͢ͱɺͦͷεςʔλεͷΞΫγϣ ϯ͕࣮ࢪ͞ΕΔͱͱʹදࣔ͞Ε͍ͯΔεςʔλε͕ ฤूՄೳʹͳΔ ҹΛԡ͢ͱɺεςʔλεͷΦϓγϣϯ͕શͯදࣔ͞ ΕΔ
ฤूՄೳͳϓϧμϯϘλϯ 2 1 1
ϓϧμϯʢύιίϯͷ߹ʣ
ϑϩʔςΟϯάૢ࡞Ϙλϯ ϑϩʔςΟϯάૢ࡞Ϙλϯಛఆͷಈ࡞Λଅ͢తͰ ར༻͢Δ ը໘ͷ࠷લ໘ʹු͍͍ͯΔΑ͏ͳԁܗͷΞΠίϯͰද ͞ΕΔ ϞʔϑΟϯάɺىಈɺΞϯΧʔϙΠϯτͷҠಈͳͲɺ ಈ͖ͷ͋ΔػೳΛ࣋ͨͤΔ͜ͱ͕Ͱ͖Δ
ϑϩʔςΟϯάૢ࡞Ϙλϯ : :
ϑϩʔςΟϯάૢ࡞Ϙλϯ ϑϩʔςΟϯάૢ࡞Ϙλϯʹ̎ͭͷαΠζ͕͋Δ ɾطఆͷαΠζɿ΄ͱΜͲͷ߹ʹ༻ ɾϛχαΠζɹɿը໘্ͷଞͷཁૉͱࢹ֮తʹ౷Ұײ ɹɹɹɹɹɹɹɹΛ࣋ͨͤΔ߹ʹͷΈར༻
ϑϩʔςΟϯάૢ࡞Ϙλϯ ϞόΠϧͰ͔Βগͳ͘ͱ16dpɺλϒϨοτɾ ύιίϯͰগͳ͘ͱ24dpͷ༨നΛͱͬͯஔ͢ Δඞཁ͕͋Δ ϑΥʔΧε࣌ೱ୶͕มΘΓɺબ࣌ු্͖͕Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsTTZvLVVFRE5YNTA/ components-buttons-fab_01_xhdpi_002.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsQWgzT180ZUVsQWM/ components-buttons-fab_02_xhdpi_002.mp4
ϑϩʔςΟϯάૢ࡞Ϙλϯ dp : 24 x 24 dp : 56 x
56 dp : 24 x 24 dp : 40 x 40 dp
ϑϩʔςΟϯάૢ࡞Ϙλϯ ϑϩʔςΟϯάૢ࡞ϘλϯΞϓϦͷϝΠϯͷૢ࡞ ʹ૬͢ΔͨΊɺશͯͷը໘ͰඞཁͳΘ͚Ͱͳ͍ ϘλϯͷଘࡏΛཱͨͤΔͨΊɺ·ͨɺ࠷Α͘ར༻ ͢Δૢ࡞ͷΈΛදͨ͢Ίʹɺ̍ը໘ʹ͚̍ͭͩஔ͢ Δ͜ͱΛਪ
ϑϩʔςΟϯάૢ࡞Ϙλϯ 1 1
ϑϩʔςΟϯάૢ࡞Ϙλϯ ࡞ɺ͓ؾʹೖΓɺڞ༗ɺφϏɺݕࡧͳͲͷߠఆతͳૢ࡞Λׂ ΓͯΔ ҎԼͷΑ͏ͳ༻සͷ͍ૢ࡞ɺ൱ఆతͳૢ࡞ʹ༻͢Δ ͜ͱආ͚ͨํ͕ྑ͍ ɾΞʔΧΠϒ·ͨΰϛശͷҠಈ ɾ۩ମੑʹ͚ܽΔૢ࡞ ɾ௨Τϥʔ ɾςΩετͷΓऔΓͷΑ͏ͳݶఆతͳૢ࡞Իྔௐઅ ɹϑΥϯτͷ৭ͷมߋͳͲɺ௨ৗπʔϧόʔʹ࣮͢Δઃఆ
ϑϩʔςΟϯάૢ࡞Ϙλϯ
ϑϩʔςΟϯάૢ࡞Ϙλϯ ΞϓϦͷछྨʹؔΘΒͣɺϝΠϯͷૢ࡞Ͱ͋Δ͜ͱΛ ࣔͨ͢Ίʹৗʹؙ͍ΞΠίϯΛ༻͢Δ
ϑϩʔςΟϯάૢ࡞Ϙλϯ ϑϩʔςΟϯάૢ࡞Ϙλϯʹ༨ܭͳཱମײΛ͚Ճ͑ ͳ͍
ϑϩʔςΟϯάૢ࡞Ϙλϯɿಈ࡞ طఆͷϑϩʔςΟϯάૢ࡞Ϙλϯɺը໘্ʹ͕ͬ ͯݱΕΔΞχϝʔγϣϯϚςϦΞϧ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsZU1kZWhRYWZpUDg/ components-buttons-fab-behavior_01_xhdpi_012.mp4 ϘλϯͷΞΠίϯΛΞχϝʔγϣϯʹ͢Δ͜ͱͰ ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsdkh6b016RE9adzQ/components- buttons-fab-behavior_02_xhdpi_012.mp4
ϑϩʔςΟϯάૢ࡞Ϙλϯɿಈ࡞ ଞͷUIʹൺͯॏཁੑ͕ߴ͍ͨΊɺଞͷཁૉͱը໘ ্Ͱͷදࣔಈ࡞͕ҟͳΔ ֤ཁૉ͕ݱΕΔॱংͱɺͲͷλΠϛϯάͰϑϩʔςΟ ϯάૢ࡞ϘλϯΛදࣔ͢ΕΑ͍͔Λݕ౼͢Δඞཁ͕
ϑϩʔςΟϯάૢ࡞Ϙλϯɿಈ࡞ ԣʹฒͿෳͷը໘্ʢλϒͳͲʣʹஔ͢Δϑϩʔ ςΟϯάૢ࡞ϘλϯͰɺ֤ը໘Ͱߦ͏ૢ࡞͕ҟͳΔ ߹ɺ֤ը໘ʹҠΔͱ͖ʹϘλϯΛҰඇදࣔʹͯ͠ ͔Β࠶දࣔ͢ΔΑ͏ʹ͢Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsQ2xTS2dyWkczLTQ/components- buttons-fab-behavior_03_xhdpi_001.mp4 ૢ࡞͕ಉ͡߹ɺը໘্Ͱදࣔͨ͠··ʹ͢Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsRTUzS2ZHaVRQaDg/ components-buttons-fab-behavior_04_xhdpi_009.mp4
ϑϩʔςΟϯάૢ࡞Ϙλϯɿಈ࡞ λϒ͖ͷෳͷը໘Ͱɺը໘͕ҠΔͷͱಉ͡ํ ʹϑϩʔςΟϯάૢ࡞Ϙλϯ͕ফ͑ΔΑ͏ʹ͍ͯ͠ ͚ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsengtTDU3ODd2OUU/ components-buttons-fab-behavior_05_xhdpi_009.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsOERvVC1OanYyWGc/ components-buttons-fab-behavior_06_xhdpi_009.mp4
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ભҠͰΑ͘ར༻͞ΕΔͷҎԼͷ̐ͭ ɾτϦΨʔ ɾπʔϧόʔ ɾΫΠοΫΞΫηε ɾϞʔϑΟϯά ϑϩʔςΟϯάૢ࡞ϘλϯॊೈੑΛॏࢹͯ͠ઃܭ͞ Ε͍ͯΔͷͰɺ։ൃ͢ΔΞϓϦͱϘλϯΛදࣔ͢Δը ໘ʹ࠷దͳํ๏Λݕ౼ͨ͠ํ͕ྑ͍
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ʲτϦΨʔʳ ୯ʹಛఆͷૢ࡞ΛτϦΨʔͨ͠ΓɺผͷॴʹҠಈ͠ ͨΓ͢Δ͜ͱ͕Ͱ͖Δ λονϑΟʔυόοΫͷͷΞχϝʔγϣϯɺը ໘ʹมԽΛҾ͖ى͜͢ྗͱͯ͠֎ଆʹ͕͍ͬͯ͘ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-YzZDR19ueE82QjA/components- buttons-fab-transition_trigger_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-Rm01eGkzM1pxZDA/components- buttons-fab-transition_trigger_02.mp4
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ʲπʔϧόʔʳ ϑϩʔςΟϯάૢ࡞ϘλϯΛԡ͢ͱπʔϧόʔʹมԽͨ͠ Γը໘ΛεΫϩʔϧ͢Δͱπʔϧόʔ͕ϑϩʔςΟϯάૢ ࡞ϘλϯʹมԽͨ͠ΓͰ͖ΔΑ͏ʹͰ͖Δ πʔϧόʔʹɺؔ࿈͢Δૢ࡞ɺςΩετཝݕࡧཝɺ· ͨؾܰʹ͑Δͦͷଞͷ߲ΛՃ͢Δ͜ͱ͕Ͱ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-clFldXpZMmNhM0U/components-buttons-fab- transition_toolbar_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-RTk1QkNaZnpneHM/components-buttons-
fab-transition_toolbar_02.mp4
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ εΫϩʔϧͰπʔϧόʔ͕ফ͑Δͱಛʹศརͳͷɺ ࠷ॳͷೖྗ࣌πʔϧόʔશମ͕ඞཁͰ͋Δ߹ɺ ͍ϦετͷҰ൪্·ͨҰ൪ԼΛදࣔதͷ߹Ͱ͋ Δ Ϣʔβʔ͕ϝΠϯίϯςϯπΛݟΑ͏ͱͯ͠εΫϩʔ ϧૢ࡞Λͨ࣌͠ʹը໘ͷදࣔྖҬΛ͘औΔ͜ͱ͕Ͱ ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-NzU2ZUZOZkRsbnc/components- buttons-fab-transition_scrolltoolbar_01.mp4
http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-N0Q3NkxqeTZnVXc/components- buttons-fab-transition_scrolltoolbar_02.mp4
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ϑϩʔςΟϯάૢ࡞Ϙλϯ͕πʔϧόʔʹܗΛม͑Δ ߹ɺͦͷπʔϧόʔʹؔ࿈ੑͷ͋Δૢ࡞Λදࣔ͠ ͳ͚Ε͍͚ͳ͍
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ʲΫΠοΫΞΫηεʳ ϑϩʔςΟϯάૢ࡞ϘλϯΛԡͨ࣌͠ʹؔ࿈͢Δૢ࡞ ϝχϡʔΛϘλϯͷ্෦ʹදࣔͤ͞Δ͜ͱ͕Ͱ͖Δ ϝχϡʔ͕ݺͼग़͞ΕͨޙϘλϯը໘্ʹͯ͠ ͓͘ ಉ͡ॴΛλοϓͨ࣌͠ɺ࠷Α͘ΘΕΔૢ࡞Λ ༗ޮʹ͢Δ͔։͍ͨϝχϡʔ͕ด͡ΔΑ͏ʹ͢Δ
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ϑϩʔςΟϯάૢ࡞ϘλϯΛશͯͷૢ࡞ؚ͕·ΕΔϚ ςϦΞϧͷγʔτʹมԽͤ͞Δ͜ͱͰ͖Δ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-Znh2YWx1VnE3NEk/components- buttons-fab-transition_speeddial_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3LWNhZHZ0WDVpems/ components-buttons-fab-transition_speeddial_02.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-Mk9EVk5DRVN1cmc/components- buttons-fab-transition_card_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-V2EwR1lqcHFoVVk/components-
buttons-fab-transition_card_02.mp4
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ݪଇͱͯ͠ϘλϯԡԼ࣌ʹදࣔ͢Δબࢶɺϑϩʔ ςΟϯάૢ࡞ϘλϯࣗମؚΊ̏ʙ̒ͭͷൣғʹऩΊ Δ ͖ͬΓ۠ผͰ͖Δ࠷খݶͷબࢶΛఏࣔͯ͠ɺϢʔ βʔ͕બʹ໎Θͳ͍Α͏ʹ͢Δ
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ 3 6 2 1 7 3 6
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ΦʔόʔϑϩʔϝχϡʔΛϑϩʔςΟϯάૢ࡞Ϙλϯ ͷૢ࡞ϝχϡʔͱͯ͠ઃఆ͍͚ͯ͠ͳ͍ ࠷ॳͷը໘͔Βతͷը໘ʹҠಈ͢ΔͨΊʹλοϓ͢ Δճଟͯ̎͘ճ·Ͱʹ͢Δ͖Ͱ͋Δ
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ Φʔόʔϑϩʔϝχϡʔͷ߲ϑϩʔςΟϯάૢ࡞ ϘλϯͰͳ͘πʔϧόʔʹஔ͢Δ
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ϑΝΠϧܗࣜΛՃ͢ΔλΠϓͷΞϓϦͷ߹ɺϑϩʔ ςΟϯάૢ࡞Ϙλϯ͕λοϓ͞Εͨޙʹؔ࿈͢Δૢ࡞ ϝχϡʔʹมԽͤ͞Δ͜ͱ͕Ͱ͖Δ දࣔ͞ΕΔૢ࡞ϝχϡʔ͕ϘλϯΛؔͳ͍߹ɺͦ ͷૢ࡞ϝχϡʔΦʔόʔϑϩʔϝχϡʔͱͯ͠ஔ ͢Δඞཁ͕͋Δ
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ϑϩʔςΟϯάૢ࡞Ϙλϯʹ࿈བྷઌͷϦετΛؚΊΔ ͜ͱͰ͖Δ ͜ͷϦετʹແؔͳૢ࡞ϝχϡʔೖΕΔ͖Ͱ ͳ͍
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ʲϞʔϑΟϯάʳ ϑϩʔςΟϯάૢ࡞ϘλϯɺΞϓϦͷߏͷҰ෦Ͱ͋ΔϚς ϦΞϧͷγʔτʹܗΛม͑Δ͜ͱ͕Ͱ͖Δ ։࢝ҐஔͱऴྃҐஔͷؒΛཧతͳํ๏Ͱߦ͜͏͢Δ ΞχϝʔγϣϯՄٯతͰ͋Δ͜ͱɺͭ·ΓมܗޙͷϚςϦΞ ϧγʔτ͔ΒϑϩʔςΟϯάૢ࡞ϘλϯʹΕΔ͜ͱ͕ඞཁ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-bWxnMGxHUFdKbkU/components-buttons-fab- transition_morph_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-b2hwYy1wamRHbW8/components-buttons-fab-
transition_morph_02.mp4
ϑϩʔςΟϯάૢ࡞ϘλϯɿભҠ ʲશը໘දࣔʳ ϑϩʔςΟϯάૢ࡞Ϙλϯɺը໘શମΛ෴͏ϚςϦ ΞϧͷγʔτʹมܗͰ͖Δ Ұൠతʹ͜͏ͨܶ͠తͳมܗผͷίϯςϯπͷొ ͱؔ࿈͚ͮΒΕΔͨΊɺมܗΛݩʹ͢ํ๏Մٯత ͳΞχϝʔγϣϯͲͪΒ͔ͱ͍͑༻͠ͳ͍ http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-UkhrcXZwcFh1Qlk/components- buttons-fab-transition_fullscreen_01.mp4 http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-STJiN2FwYU4yYXM/components-
buttons-fab-transition_fullscreen_02.mp4
ϑϩʔςΟϯάૢ࡞Ϙλϯɿେ͖ͳը໘ ల։ঢ়ଶͷΞϓϦόʔʹॏͶͯஔͰ͖Δ
ϑϩʔςΟϯάૢ࡞Ϙλϯɿେ͖ͳը໘ πʔϧόʔɺγʔτͷߏΑ͏ʹॏͶͯஔͰ͖Δ
ϑϩʔςΟϯάૢ࡞Ϙλϯɿେ͖ͳը໘ γʔτͷڥք෦ʹஔ͢Δ͜ͱͰ͖Δ
ϑϩʔςΟϯάૢ࡞Ϙλϯɿେ͖ͳը໘ ̍ͭͷը໘ʹෳͷϑϩʔςΟϯάૢ࡞ϘλϯΛஔ ͍͚ͯ͠ͳ͍ 1
ϑϩʔςΟϯάૢ࡞Ϙλϯɿେ͖ͳը໘ ̍ͭͷը໘্ʹ͋ΔݸʑͷཁૉͦΕͧΕʹϑϩʔςΟ ϯάૢ࡞ϘλϯΛஔ͍͚ͯ͠ͳ͍ 1