Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Material Designとは何かを知る会
Okuto Oyama
June 12, 2016
Design
1
640
Material Designとは何かを知る会
社内勉強用資料。Material Designとは何か?を改めてイチから学んでみました。
Okuto Oyama
June 12, 2016
Tweet
Share
More Decks by Okuto Oyama
See All by Okuto Oyama
the past and future of accessible front-end development
yamanoku
3
3.7k
PWA is Progressive Web Accessibility
yamanoku
0
18
PWA RTA in Japan 2020
yamanoku
0
29
Other Decks in Design
See All in Design
Maslow会社資料 | Maslow Company Guide ver.8.5
maslow_akkun
1
2.3k
Monster in the Closet
laineyru
1
160
Cat Beast
hbosnian
1
250
20220120modelinglt_miure
miure
1
240
幸せなパーパス経営の実現に欠かせない、社員の「個人理念」の重要性と活用法
kakukoki
PRO
0
120
Fairest of Them All
pandemonay
1
610
ポートフォリオの作り方
yonekura907
0
510
Untitled (Baseball)
heewon
2
200
hourly comics (2022)
gyroidz
0
210
エアデザイン(AIR Design)サービス資料
air_design
0
14k
Introduce Celebration Grid
nakahara
0
190
Why I made a design div. within an agile company (RSGT, January 2022)
chostett
1
2.1k
Featured
See All Featured
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
Become a Pro
speakerdeck
PRO
3
770
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.5k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Building an army of robots
kneath
299
40k
How GitHub (no longer) Works
holman
296
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
25
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Transcript
Material Design הכ⡦ַ濼⠓ 0LVUP0ZBNB
娖〷
أُؗ٦ٌ٦ؿ؍ؤي ~ iOS6 ؿٓحزرؠ؎ٝ iOS7 ~ Modern UI Win8 ~
˖ نةٝװؙٔٝזוך䞔㜠ך䊴ⴽ⻉ָꨇ׃ְկ ' ˖ ة؎هؚٓؿ؍٦ה葿鼅ןָꨇ׃ְկ ' ˖ ٌث٦ؿךךך⹛ֹ׃ַדֹזְկ
4 ˖ ؝ٝإفزָ♧倜ׁג⢪欽䠬ַָזֻזկ . ِ٦ؠ٦ךךرؠ؎ٝחכ玎黅ְ
What’s Material Design ?
(PPHMFָ䲿㈖ׅرؠ؎ٝؖ؎سٓ؎ٝ .BUFSJBM%FTJHOכ 秵ה؎ؙٝ ךًةؿ؋٦דדֹגְկ
չ秵պ
⾨ׁEQך秵ד⳿勻גְ
זחչdpպהכ density-independent pixels 㺘䏝ꬊ⣛㶷ؾؙإٕ וך歗㺘䏝דずׄ״ֲח邌爙דֹؾؙإٕ⽃⡘ וך鍑⫷䏝ך畭劣ד鋅ג㣐ֹׁכずׄ
秵כ⚛ץꅾז׃ג ⴱג䠐䧭ׅ Ӫխխխխխխխ✕
אזֺ湡4FBN 媮䊴4UFQ ٖ؎،ؐز 卐ךل٦ػ٦ָ籬ָגְ㜥さծ晙倯⹛ַׇלֲ晙倯⹛ֻ 卐ךل٦ػ٦ָꅾזגְ㜥さծאך⹛ֹכ㛇劤涸ח杝甧׃גְկ
秵ךꅾזדꤣ䕦ך慬ׁ٥䎢ָ㢌גֻ ׃رغ؎أךؖٓأ굲ן馉ֿׅהכ⳿勻זְ
չ؎ؙٝպ
歗♳ח㶷㖈ׅ葿ךאְسحز 醱꧟ז㔳䕎 㫝ךⱖ溪 ׅץגչ؎ؙٝպךًةؿ؋٦
؎ؙٝכ荈㖈ח⹛ְגծ葿㢌 ؽرؔכٔ،ٕة؎يח刿倜ׁ竲ֽ؎ؙٝה鍑ꅸׁկ
Material Designחֶֽ չ،صً٦ءّٝպ https://www.google.com/design/spec/motion/material-motion.html
䭁㣐٥簭㼭 㢌䕎㔊錬̒̔⚵ ˟瘝⦓麊⹛דכזְ
؎٦آؚٝ،صً٦ءّٝ ،صً٦ءّٝך㨣穄✪儗חכ⸇幾鸞ָ涪欰ׅկ 简䕎獳⹛׃גכזזְկ颵ꆀַָ֮ http://easings.net/ja
Material Designחֶֽ չنةٝպ
FAB ( Floating Action Button ) ˖ 㛇劤涸ח歗חאֽ㶷㖈 ˖ 秵ךאזֺ湡ծ媮䊴חꂁ縧דֹ
אזֺ湡ח֮儗̔ 媮䊴ח֮儗̔ ӧ♧筰ח⹛ֻ ✕♧筰ח⹛ַזְ
˖ 害欽涸זꞿ倯䕎ךنةٝ ˖ ِ٦ؠ٦،ؙءّٝ儗חٔحفٕծꥐ饯ָ涪欰ׅ ٖ؎ؤسنةٝ ؿٓحزنةٝ ˖ 害欽涸ז俑㶵ֽךنةٝկ ˖ ِ٦ؠ٦،ؙءّٝ儗ח葿ָ㢌٥ٔحفָٕ涪欰ׅ
˖ ꥐ饯כ׃זְ https://getmdl.io/components/index.html#buttons-section
תה
˖ ״ِ٦ؠ٦穗꿀ח䘝㹋ח鏣鎘ׁرؠ؎ٝ ˖ وذٔ،ٕرؠ؎ٝכչ秵պהչ؎ؙٝպ ˖ 秵כ⾨ָ֮ծ؎ؙٝכ荈㖈ח䎢ָ ˖ ،صً٦ءّٝכ颵ꆀծⴓַװְׅ⹛ֹ • FAB
(Floating Action Button) Material Design הכ
㷕ֿה
穠㽷אך չؿؓ٦وحزպ ח麓ֺזְ
وذٔ،ٕرؠ؎ٝכ 姻鍑ךرؠ؎ٝדכזְ չ姻鍑ח鵚בֻךرؠ؎ٝպ
וְֲֲךָ ِ٦ؠ٦חהג姻׃ְַ 罋ִ䗳銲ָ֮
Material Design ַ ַֿך Webرؠ؎ٝ罋ִ״ֲ
• Google Material design ˖ ״ַֻوذٔ،ٕرؠ؎ٝך鏣鎘؝ٝإفز ˖ ➙ׁ➂חכ耀ֽזְծأُؗ٦ٌ٦ؿ؍ؤيהؿ ٓحزرؠ؎ٝך麩ְ •
https://getmdl.io/ • http://materializecss.com/ • http://fezvrasta.github.io/bootstrap-material-design/ 罋俑柃 ؿٖ٦يٙ٦ؙ ♧⢽