Material Designとは何かを知る会

by Okuto Oyama

Slide 1

Slide 1 text

Material Design הכ⡦ַ׾濼׷⠓ 0LVUP0ZBNB

Slide 2

Slide 2 text

娖〷

Slide 3

Slide 3 text

أُؗ٦ٌ٦ؿ؍ؤي ~ iOS6 ؿٓحزرؠ؎ٝ iOS7 ~ Modern UI Win8 ~

Slide 4

Slide 4 text

˖ نةٝװؙٔٝזוך䞔㜠ך䊴ⴽ⻉ָꨇ׃ְկ ' ˖ ة؎هؚٓؿ؍٦ה葿鼅ןָꨇ׃ְկ ' ˖ ٌث٦ؿ׉ך׮ךך⹛ֹ׃ַדֹזְկ 4 ˖ ؝ٝإفزָ♧倜ׁ׸ג⢪欽䠬ָ׻ַ׵זֻז׷կ . ِ٦ؠ٦ך׋׭ךرؠ؎ٝחכ玎黅ְ

Slide 5

Slide 5 text

What’s Material Design ?

Slide 6

Slide 6 text

(PPHMFָ䲿㈖ׅ׷رؠ؎ٝؖ؎سٓ؎ٝ .BUFSJBM%FTJHOכ 秵ה؎ؙٝ ךًةؿ؋٦דדֹגְ׷կ

Slide 7

Slide 7 text

չ秵պ

Slide 8

Slide 8 text

⾨ׁEQך秵ד⳿勻גְ׷

Slide 9

Slide 9 text

׍ז׫חչdpպהכ density-independent pixels 㺘䏝ꬊ⣛㶷ؾؙإٕ וך歗꬗㺘䏝ד׮ずׄ״ֲח邌爙דֹ׷ؾؙإٕ⽃⡘ וך鍑⫷䏝ך畭劣ד鋅ג׮㣐ֹׁכずׄ

Slide 10

Slide 10 text

秵כ⚛ץ׋׶ꅾז׏׋׶׃ג ⴱ׭ג䠐㄂׾䧭ׅ Ӫխխխխխխխ✕

Slide 11

Slide 11 text

אזֺ湡4FBN 媮䊴4UFQ ٖ؎،ؐز 卐ךل٦ػ٦ָ籬ָ׏גְ׷㜥さծ晙倯׾⹛ַׇל׮ֲ晙倯׮⹛ֻ 卐ךل٦ػ٦ָꅾז׏גְ׷㜥さծאך⹛ֹכ㛇劤涸ח杝甧׃גְ׷կ

Slide 12

Slide 12 text

秵ךꅾז׶דꤣ䕦ך慬ׁ٥䎢ָ׶׮㢌׻׏גֻ׷ ׋׌׃رغ؎أךؖٓأ׾굲ן馉ֿׅהכ⳿勻זְ

Slide 13

Slide 13 text

չ؎ؙٝպ

Slide 14

Slide 14 text

歗꬗♳ח㶷㖈ׅ׷葿ךאְ׋سحز 醱꧟ז㔳䕎㫝ךⱖ溪 ׅץגչ؎ؙٝպךًةؿ؋٦

Slide 15

Slide 15 text

؎ؙٝכ荈㖈ח⹛ְגծ葿׮㢌׻׷ ؽرؔכٔ،ٕة؎يח刿倜ׁ׸竲ֽ׷؎ؙٝה鍑ꅸׁ׸׷կ

Slide 16

Slide 16 text

Material Designחֶֽ׷ չ،صً٦ءّٝպ https://www.google.com/design/spec/motion/material-motion.html

Slide 17

Slide 17 text

䭁㣐٥簭㼭㢌䕎㔊錬̒̔⚵ ˟瘝⦓麊⹛דכזְ

Slide 18

Slide 18 text

؎٦آؚٝ،صً٦ءّٝ ،صً٦ءّٝךꟚ㨣穄✪儗חכ⸇幾鸞ָ涪欰ׅ׷կ 简䕎獳⹛׾׃גכז׵זְկ颵ꆀָ֮׷ַ׵ http://easings.net/ja

Slide 19

Slide 19 text

Material Designחֶֽ׷ չنةٝպ

Slide 20

Slide 20 text

FAB ( Floating Action Button ) ˖ 㛇劤涸ח歗꬗חא׌ֽ㶷㖈 ˖ 秵ךאזֺ湡ծ媮䊴חꂁ縧דֹ׷ אזֺ湡ח֮׷儗̔ 媮䊴ח֮׷儗̔ ӧ♧筰ח⹛ֻ ✕♧筰ח⹛ַזְ

Slide 21

Slide 21 text

˖ 害欽涸זꞿ倯䕎ךنةٝ ˖ ِ٦ؠ٦،ؙءّٝ儗חٔحفٕծꥐ饯ָ涪欰ׅ׷ ٖ؎ؤسنةٝ ؿٓحزنةٝ ˖ 害欽涸ז俑㶵׌ֽךنةٝկ ˖ ِ٦ؠ٦،ؙءّٝ儗ח葿ָ㢌׻׷٥ٔحفָٕ涪欰ׅ׷ ˖ ꥐ饯כ׃זְ https://getmdl.io/components/index.html#buttons-section

Slide 22

Slide 22 text

תה׭

Slide 23

Slide 23 text

˖ ״׶ِ٦ؠ٦穗꿀ח䘝㹋ח鏣鎘ׁ׸׋رؠ؎ٝ ˖ وذٔ،ٕرؠ؎ٝכչ秵պהչ؎ؙٝպ ˖ 秵כ⾨׫ָ֮׷ծ؎ؙٝכ荈㖈ח䎢ָ׷ ˖ ،صً٦ءّٝכ颵ꆀ׾׮׍ծⴓַ׶װְׅ⹛ֹ׾ • FAB (Floating Action Button) Material Design הכ

Slide 24

Slide 24 text

㷕׿׌ֿה

Slide 25

Slide 25 text

穠㽷אך չؿؓ٦وحزպ ח麓ֺזְ

Slide 26

Slide 26 text

وذٔ،ٕرؠ؎ٝכ 姻鍑ךرؠ؎ٝדכזְ չ姻鍑ח鵚בֻ׋׭ךرؠ؎ٝպ

Slide 27

Slide 27 text

וְֲֲ׮ךָ ِ٦ؠ٦חה׏ג姻׃ְַ׾ 罋ִ׷䗳銲ָ֮׷

Slide 28

Slide 28 text

Material Design ַ׵ ֿ׸ַ׵ך Webرؠ؎ٝ׾罋ִ״ֲ

Slide 29

Slide 29 text

• Google Material design ˖ ״ֻ׻ַ׷وذٔ،ٕرؠ؎ٝך鏣鎘؝ٝإفز ˖ ➙ׁ׵➂חכ耀ֽזְծأُؗ٦ٌ٦ؿ؍ؤيהؿ ٓحزرؠ؎ٝך麩ְ • https://getmdl.io/ • http://materializecss.com/ • http://fezvrasta.github.io/bootstrap-material-design/ ⿫罋俑柃 ؿٖ٦يٙ٦ؙ ♧⢽