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
470
マテリアルデザインガイドライン輪読会#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
0
2.9k
マテリアルデザインガイドライン輪読会#1 - Material Design -
okeicalm
0
530
Other Decks in Design
See All in Design
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
6
4k
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
2.8k
モデル・デザイン入門
akitsugu7935
0
420
砺波デザイン勉強会-誰でも使える写真撮影テクニック.pdf
keita_yoshikawa
0
100
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
520
意志と、デザインと、ときどきお金
transit_kix
2
1.9k
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
520
介護事業にデザインでどう向き合うか / Designship 2023
sms_tech
0
2k
decksh object reference
ajstarks
2
890
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
140
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
Lecciones de desarrollo de producto en Get on Board
getonbrd
0
200
Featured
See All Featured
Designing with Data
zakiwarfel
94
4.8k
Fireside Chat
paigeccino
19
2.6k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
How GitHub (no longer) Works
holman
301
140k
Unsuck your backbone
ammeep
661
56k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
The Mythical Team-Month
searls
214
42k
A better future with KSS
kneath
230
16k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
Visualization
eitanlees
135
14k
Designing the Hi-DPI Web
ddemaree
275
33k
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