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
29
技術的負債の返却をスクラムで: 会計SaaSの開発チームの挑戦の軌跡
okeicalm
0
340
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
okeicalm
0
3.5k
マテリアルデザインガイドライン輪読会#1 - Material Design -
okeicalm
0
720
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
AI動画生成ガチャ紹介
piyo7
1
110
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
590
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.5k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
200
デザイナーとPMの両ロール_3つのポイント
toy1618
1
320
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
130
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
Echoes Boomerang
artcloudyu
PRO
0
240
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
940
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
310
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
A better future with KSS
kneath
239
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
How to train your dragon (web standard)
notwaldorf
93
6.1k
Raft: Consensus for Rubyists
vanstee
140
7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Embracing the Ebb and Flow
colly
86
4.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
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