Tweet
Tweet

Slide 1

Slide 1 text

8αʔϏε͕Ͱ͖Δ·Ͱ Plan, Sketch, Coloring, Decide Guideline, Comprehensive Layout, Coding ϏϏϏοτࣾ಺ษڧձ

Slide 2

Slide 2 text

Plan, Sketch, Decide Guideline, Comprehensive Layout, Coding ϓϥϯɺεέονɺΨΠυϥΠϯɺΧϯϓɺίʔσΟϯά

Slide 3

Slide 3 text

Plan

Slide 4

Slide 4 text

Plan ͲͷΑ͏ͳαΠτʹ͍͔ͨ͠ߟ͑Α͏

Slide 5

Slide 5 text

Plan ͬͦ͘͞ΞΠσΞΛͩ͠·͘Γ͍ͨͱ͜ͱ͕ͩɾɾɾ

Slide 6

Slide 6 text

Plan ͔͕͜͜͠͠Ұ൪೉͍͠

Slide 7

Slide 7 text

Plan ͩ͠·ͬͨ͘ΞΠσΞΛ·ͱΊΔͷ͕೉͍͠

Slide 8

Slide 8 text

Plan μϝͳ1MBO͋Δ͋Δ w ͩ͠·ͬͨ͘ΞΠσΞΛޙ͔Βݟฦͯ͠΋ɺzͳͥͦΕ ͕ॻ͍ͯ͋Δͷ͔z͕·ͬͨ͘෼͔Βͳ͍ w ڞಉ࡞ۀऀʹڞ༗Ͱ͖ͳ͍ w ΞΠσΞͷ਌ࢠؔ܎͕෼͔Βͣɺ·ͱ·Βͳ͍

Slide 9

Slide 9 text

Plan ͦΜͳͱ͖͸9NJOEΛ࢖͏ IUUQKQYNJOEOFU

Slide 10

Slide 10 text

Plan 9NJOEͱ͸ɺ͍ΘΏΔϚΠϯυϚοϓπʔϧ

Slide 11

Slide 11 text

Plan ϚΠϯυϚοϓͱ͸ɺӳࠃͷڭҭऀτχʔɾϒβϯ͕։ൃͨ͠૑଄తͳࢥߟٕज़ Ͱ͢ɻࣗ෼͕ߟ͍͑ͨςʔϚΛࢴͷதԝʹֆͰඳ͖ɺ͔ͦ͜Β์ࣹঢ়ʹࢬΛ৳͹ ͯ͠ɺΩʔϫʔυ΍ΠϝʔδΛܨ͛ͳ͕Βɺൃ૝Λ޿͍͖͛ͯ·͢ɻϚΠϯυϚο ϓ͸ɺ೴ʹຊདྷඋΘΔ৘ใॲཧϓϩηεΛ׆༻ͨ͠ࢥߟ๏Ͱ͢ɻ࣮ࡍʹඳ͍ͯΈ Δͱɺ୭Ͱ΋ࢥߟ͕੔ཧ͞Εɺ࣍ʑʹൃ૝͕Θ͍ͯ͘Δ͜ͱʹڻ͖·͢ɻ

Slide 12

Slide 12 text

Plan 9NJOEͷը໘

Slide 13

Slide 13 text

Plan 9NJOEΛ࢖͏ϝϦοτ w ڞ༗ָ͕ w ͳͥͦͷൃ૝ʹͳ͔ͬͨΛτϨʔεͰ͖Δ w ΞΠσΞΛߏ଄ʹམͱ͠ࠐΊΔ

Slide 14

Slide 14 text

Plan ΞΠσΞΛ֊૚Խ͢Δ

Slide 15

Slide 15 text

Plan ͭ·Γɺग़ͨ͠ΞΠσΞΛ࣮ࡍͷαΠτͷߏ଄ʹ౰ͯ͸Ί͍ͯ͘

Slide 16

Slide 16 text

Plan ͭ·Γɺग़ͨ͠ΞΠσΞΛ࣮ࡍͷαΠτͷߏ଄ʹ౰ͯ͸Ί͍ͯ͘ w Ұ൪࠷ॳͷϖʔδͰ͸ԿΛ͢Δͷ͔ɾɾɾ w ϖʔδ୯ҐͰ΍ΕΔ͜ͱͷܾఆΛ͢Δ w ͜͜ͰΞΠσΞΛ࡟Γ࢝ΊΔ w ͪͳΈʹɺʮཁ݅ఆٛʯͱݺ͹ΕΔ΋ͷʹ͍ۙ࡞ۀ

Slide 17

Slide 17 text

Plan ͜ͷ࡞ۀ͸ɺσΟϨΫτϦϚοϓ੍࡞ͱݺ͹ΕΔ αΠτͷઃܭਤΈ͍ͨͳ΋ͷͰ͢

Slide 18

Slide 18 text

Plan σΟϨΫτϦϚοϓ͸͖ͬͪΓͱͭ͘Ζ͏ɻ 9NJOE΍$BDPPͳͲΛ࢖͏৔߹͕ଟ͍Ͱ͢ɻ

Slide 19

Slide 19 text

Plan ͜͜·Ͱ͕1MBOͰ͢ɻ1MBO͕͏·͍͔͘ͳ͍ͱɺ ࣍ͷ4LFUDIͰ͚͜ΔͷͰ஫ҙɻ

Slide 20

Slide 20 text

Sketch

Slide 21

Slide 21 text

Sketch ϖʔύʔϓϩτλΠϓΛͭ͘Ζ͏

Slide 22

Slide 22 text

ϖʔύʔϓϩτλΠϓͱ͸ɺ8FCϖʔδ΍ΞϓϦͷେ·͔ͳίϯςϯπ΍ϨΠΞ ΢τΛࢴʹखॻ͖ͨ͠΋ͷɻओʹϨΠΞ΢τͷ֬ೝɺϝχϡʔߏ੒ͷ֬ೝɺཁૉ ͷڧऑͷ֬ೝͳͲΛ໨తʹ࡞੒͢Δɻϖʔδຕͱͯ͠࡞੒͍ͯ͘͠ɻ Sketch

Slide 23

Slide 23 text

Sketch ཁ͸͜ΜͳͷͰ͢

Slide 24

Slide 24 text

Sketch

Slide 25

Slide 25 text

Sketch 1MBOͰͭͬͨ͘σΟϨΫτϦϚοϓΛ΋ͱʹɺ࣮ࡍͷαΠτ ΍ΞϓϦͷσβΠϯΛΠϝʔδͨ͠ϥϑεέονΛॻ͍͍ͯ ͜͏ɻ

Slide 26

Slide 26 text

Sketch ͜ͷεςοϓΛܦͳ͍ͱɺ͋ͱͰσβΠϯͷਗ਼ॻ σβΠϯΧ ϯϓ੍࡞ Λͨ͠ͱ͖ʹΤϯδχΞͱ͔σΟϨΫλʔ͔Βʮͳ ʹ͜ΕʂʯͱͳΔ͜ͱ΋ɾɾɾ

Slide 27

Slide 27 text

μϝͳ4LFUDI͋Δ͋Δ w ϖʔύʔϓϩτλΠϓΛݟͯ΋ɺͲͷϖʔδ͔͙͢ʹ ෼͔Βͳ͍ w ڞಉ࡞ۀऀʹڞ༗Ͱ͖ͳ͍ w ͖͋Β͔ʹ࣮ݱෆՄೳ Sketch

Slide 28

Slide 28 text

Sketch ͜͜͸εϐʔυॏࢹɻڞಉ࡞ۀऀ͕෼͔ΔϨϕϧͷ៉ྷ͞Ͱ े෼ɻ

Slide 29

Slide 29 text

Sketch ͻͱ௨Γॻ͖ऴΘͬͨΒɾɾɾ

Slide 30

Slide 30 text

Sketch ը໘ભҠਤͱݺ͹ΕΔ΋ͷΛͭ͘Γ·͢ɻ

Slide 31

Slide 31 text

ը໘ભҠਤͱ͸ɺը໘ͷߏ੒Λද͢ਤͷͻͱͭͰɺը໘͕ͦͷΑ͏ͳॱংͰදࣔ ͞ΕΔ͔ɺ͋Δ͍͸ը໘Ͳ͏͕ͦ͠ͷΑ͏ͳؔ࿈ੑΛ͍࣋ͬͯΔͷ͔Λࣔͨ͠ਤ ղͷ͜ͱͰ͋Δɻը໘ઃܭʹ༻͍ΒΕΔͷ΋Ͱɺը໘֊૚ਤͱڞʹද͞ΕΔ͜ͱ ΋গͳ͘ͳ͍ Sketch

Slide 32

Slide 32 text

Sketch ͋Δ෦ҐΛΫϦοΫ λοϓ ͨ͠ͱ͖ɺ࣍͸Ͳͷը໘ʹҠ ಈ͢Δͷ͔Λදͨ͠΋ͷɻ͜ΕΛͭ͘Δ͜ͱʹΑͬͯɺ Α͏΍͘αΠτ ΋͘͠͸ΞϓϦ ͷશମ૾͕͸͖ͬΓ͢ Δɻ

Slide 33

Slide 33 text

Sketch Ͳ͏΍ͬͯͭ͘Δ͔

Slide 34

Slide 34 text

Sketch ࢴΛฒ΂ͯܞଳͰࣸਅࡱͬͯɾɾɾͰ΋͍͍͚Ͳڞ༗ੑ ʹ೉͋Γ

Slide 35

Slide 35 text

ͦΜͳͱ͖͸1SPUUΛ࢖͏ IUUQTQSPUUBQQDPN Sketch

Slide 36

Slide 36 text

ܞଳͰࡱͬͨϖʔύʔϓϩτλΠϓΛΞοϓϩʔυͯ͠ɺ ؆୯ʹը໘ભҠਤ͕࡞ΕΔ Sketch

Slide 37

Slide 37 text

Sketch

Slide 38

Slide 38 text

࠷ޙʹɺڞಉ࡞ۀऀʹϨϏϡʔͯ͠΋Β͓͏ Sketch

Slide 39

Slide 39 text

ϨϏϡʔΛαϘΔͱͱΜͰ΋ͳ͍͜ͱʹɾɾɾ Sketch

Slide 40

Slide 40 text

ϨϏϡʔΛαϘΔͱɾɾɾ w ϝϯόʔ͔Βʮฉ͍ͯͳ͍ʯʮ஌Βͳ͍ʯϥογϡ w ࣮ݱෆՄೳͳઃܭͷ··ਐΉ͜ͱʹ w ΤϯδχΞ͕Կ࡞ͬͨΒ͍͍͔Θ͔Βͳ͍஍ࠈ w σβΠϯͷਗ਼ॻΛͭ͘Δͱ͖ʹΫοι͔͔࣌ؒΔ ͍ͪ ͍ͪݕ౼͠ͳ͕Β΍Δඞཁ͕͋ΔͨΊ Sketch

Slide 41

Slide 41 text

Sketch ࣍ͷϑΣʔζ͔Βຊ֨తͳσβΠϯͰ͢

Slide 42

Slide 42 text

Decide Guideline

Slide 43

Slide 43 text

Decide Guideline ໌ྎͳσβΠϯʹඞཁͳ΋ͷ

Slide 44

Slide 44 text

Decide Guideline σβΠϯΨΠυϥΠϯ

Slide 45

Slide 45 text

σβΠϯΨΠυϥΠϯ͕ͳ͍ͱɾɾɾ w )5.-Λ૊Ήͱ͖ʹɺϑΥϯταΠζ͕όϥόϥʹ w ڞಉ࡞ۀऀ͕ద౰ͳ৭Λ࢖ͬͪΌ͏ w ༨ന͕͋ͬͯͳͯ͘ΩϞ͍ w ࠶ݱੑ͕ͳ͍σβΠϯ w ࣌ؒΛ໌͚ͯ࡞ۀ͢Δͱ͖ɺຊਓ΋๨ΕΔ Decide Guideline

Slide 46

Slide 46 text

Decide Guideline ԿΛܾΊΔ͔

Slide 47

Slide 47 text

Decide Guideline Color Palette, Font, Font size, Margin size

Slide 48

Slide 48 text

Decide Guideline ΧϥʔύϨοτ͜Ε͚ͩԡ͑͞ͱ͚ฤ

Slide 49

Slide 49 text

Decide Guideline ࠇɺάϨʔɺϓϥΠϚϦΧϥʔΛͦΕͧΕ৭ܾͣͭఆ

Slide 50

Slide 50 text

Decide Guideline

Slide 51

Slide 51 text

Decide Guideline ͜Μͳײ͕͡ཧ૝

Slide 52

Slide 52 text

Decide Guideline جຊతʹ͸ͦͷ৭ͰΑ͠ɻ ৭͸૿΍ͯ͠΋͍͍͚Ͳɺ૿΍͗͢͠Δͱ Ϣʔβ͕໎͏ةݥੑ͕͋ΔͨΊ৻ॏʹɻ

Slide 53

Slide 53 text

Decide Guideline ϑΥϯτܾΊΑ͏ฤ

Slide 54

Slide 54 text

Decide Guideline ೔ຊޠϑΥϯτ

Slide 55

Slide 55 text

Decide Guideline ࢒೦ͳ͕ΒɺσόΠε͝ͱʹ࢖͑ΔϑΥϯτ͸ ݻఆ͞Ε͍ͯΔɻ

Slide 56

Slide 56 text

Decide Guideline OS X, iOS ώϥΪϊ֯ΰ ώϥΪϊؙΰ 0TBLB ᕟΰγοΫ Windows, Windows Mobile .46*ΰγοΫ .41ΰγοΫ .41໌ே ϝΠϦΦ ᕟΰγοΫ

Slide 57

Slide 57 text

Decide Guideline ͭ·Γɺ.BDͰσβΠϯ͢Δ৔߹͸ώϥΪϊ֯ ΰҰ୒ͱͳΔɻώϥΪϊؙΰ͸͢͢Ί·ͤΜɻ

Slide 58

Slide 58 text

Decide Guideline ͡Ό͋ͳͥ͜ͷ࿩Λͯ͠Δ͔ͱ͍͏ͱɺԤจϑΥ ϯτ͸݁ߏࣗ༝ʹબ΂Δ͔Β

Slide 59

Slide 59 text

Decide Guideline Α͔ͭ͘ΘΕΔͷ͸ҎԼɻ Helvetica Neue Lato Roboto Slab ηϦϑମΛ࢖͏ʹͯ͠΋ɺͳΜ͔αϯηϦϑͬΆ͍ηϦϑ͕͔ͭΘΕΔ܏޲͋Γ

Slide 60

Slide 60 text

Decide Guideline ϑΥϯταΠζΛܾΊΑ͏

Slide 61

Slide 61 text

Decide Guideline ར༻͢ΔϑΥϯταΠζ͸ݫ֨ʹܾఆ͢Δ

Slide 62

Slide 62 text

Decide Guideline Զ͕Α͘࢖͏'POUTJ[F QY QY QY QY QY QY QY QY ͷഒ਺

Slide 63

Slide 63 text

Decide Guideline ༨നαΠζͱϘοΫεαΠζΛܾΊΑ͏

Slide 64

Slide 64 text

Decide Guideline ͨͱ͑͹ɺϘοΫεؒͷڑ཭ͳͲ͸͜͜ͰܾΊ ΔͱΑ͍

Slide 65

Slide 65 text

Decide Guideline Զ͸ͷഒ਺Λ࢖͍ͬͯ·͢ QY QY QY QYͳͲΛΑ͘࢖͍·͢ 314px 314px 314px QY QY

Slide 66

Slide 66 text

Decide Guideline Կͷഒ਺Ͱ΋͍͍͚ͲɺͳΜΒ͔ͷഒ਺ʹ͢Δ ͱͱͨΜʹ੔߹ੑͷऔΕͨσβΠϯʹͳΔͨΊɺ ഒ਺Λ࢖ͬͯσβΠϯ͢Δ͜ͱΛ͓͢͢Ί͠· ͢ɻ

Slide 67

Slide 67 text

Comprehensive Layout

Slide 68

Slide 68 text

Comprehensive Layout ͍Α͍Αɺ׬੒඼ͱಉ͡ݟͨ໨Λͭ͘Δ޻ఔ

Slide 69

Slide 69 text

Comprehensive Layout σΟϨΫτϦϚοϓͱϖʔύʔϓϩτλΠϓ͕͋Ε͹ ଎߈Ͱ׬੒ͤ͞Δ͜ͱ͕Մೳ ٯʹ͜͜Ͱ͕͔͔࣌ؒΔͬͯ͜ͱ͸े෼ʹܾΊ͕ͳ͞Εͯͳ͔ͬͨͱ͍͏͜ͱ

Slide 70

Slide 70 text

Comprehensive Layout ڞ༗ੑΛߟྀ͠ɺ*MMVTUSBUPS͔1IPUPTIPQ͍ͣΕ͔Ͱߦ͓͏

Slide 71

Slide 71 text

Comprehensive Layout Χϯϓͷ੍࡞ϧʔϧ

Slide 72

Slide 72 text

Comprehensive Layout ෦඼͔Βͭ͘Δ

Slide 73

Slide 73 text

Comprehensive Layout μϝͳ$PNQSFIFOTJWF-BZPVU͋Δ͋Δ w ϘλϯͳͲͷ෦඼ʹ͔͔Δυϩοϓγϟυ΢͕όϥό ϥ w ෦඼ͷ৭ͷ࢖͍෼͚͕࿦ཧഁ୼

Slide 74

Slide 74 text

Comprehensive Layout ͜Μͳ͜ͱΛආ͚ΔͨΊʹ෦඼͔Βͭ͘Δ

Slide 75

Slide 75 text

Comprehensive Layout ͬͦͭͬͯ͘͘͞ΈΑ͏

Slide 76

Slide 76 text

Coding

Slide 77

Slide 77 text

Coding Ұ൪ͱ͖ͬͭʹ͍͘Ͱ͋Ζ͏αΠτͷͭ͘Γํ

Slide 78

Slide 78 text

Coding )5.-ͷίʔσΟϯάΛߦ͏

Slide 79

Slide 79 text

Coding ·ͣ͸ྲྀΕ͔Β

Slide 80

Slide 80 text

Coding ࡞ۀϑΥϧμΛͭ͘Δ ࡞ۀϑΥϧμͷதʹJOEFYIUNMͱ͍͏ϑΝΠϧΛͭ͘Δ ͦͷϑΥϧμͷதʹɺKT JNBHFT DTTͱ͍͏ͭͷϑΥ ϧμΛͭ͘Δ ͬͦ͘͞ίʔσΟϯάελʔτʂ

Slide 81

Slide 81 text

Coding ɾɾɾͷલʹ

Slide 82

Slide 82 text

Coding

Slide 83

Slide 83 text

Coding ಓ۩Λଗ͑Α͏

Slide 84

Slide 84 text

Coding ಓ۩ͱ͸ɺΤσΟλ ௒͍͢͝ϝϞாͷ͜ͱ

Slide 85

Slide 85 text

Coding ࠓҰ൪Ξπ͍ΤσΟλ͸͜Ε Atom https://atom.io/

Slide 86

Slide 86 text

Coding ϓϥάΠϯΛೖΕ·͘Ζ͏

Slide 87

Slide 87 text

Coding pMFJDPOT QSPKFDUNBOBHFS UFSN BVUPDPNQMFUFQMVT USBJMJOHTQBDFT NJOJNBQ KBQBOFTFXSBQ BUPNDPMPSIJHIMJHIU BVUPJOEFOU ͲΜͳπʔϧ͔͸ɺ ޱ಄Ͱ࿩͠·͢

Slide 88

Slide 88 text

Coding ίʔσΟϯάͷجຊ

Slide 89

Slide 89 text

Coding Ͳ͜·ͰΠϝʔδͯ͠)5.-Λ૊ΊΔ͔͕উෛ

Slide 90

Slide 90 text

Coding ͔͜͜Βઌ͸ؤுͬͯίʔσΟϯά͢ΔͷΈͰ͢ɻ

Slide 91

Slide 91 text

Coding ίπͱ͔͋Μ·Γͳ͍Ͱ͢ɻ

Slide 92

Slide 92 text

Coding ͪͳΈʹɺαΠτΛެ։͢Δʹ͸ɺ ͞ΒʹʮσϓϩΠʯͱ͍͏޻ఔ͕ඞཁ

Slide 93

Slide 93 text

σϓϩΠͱ͸ɺιʔείʔυΛαʔόʹίϐϖͯ͠ੈքதͷਓ͕ݟΕΔঢ়ଶʹ͢ Δ͜ͱͰ͋Δɻ Coding

Slide 94

Slide 94 text

Coding ࣗ෼ͷ1$ͷத͚ͩʹιʔείʔυΛஔ͍͓͍ͯͨΒɺ ࣗ෼Ұਓ͔͠ݟΕͳ͍ɻ ނʹσϓϩΠ͕ඞཁɻ

Slide 95

Slide 95 text

Coding Ξοϓϩʔυͱࣅͨ֓೦ͩͱࢥ͍ͬͯͩ͘͞ɻ ͱ͍͏͔΄΅Ұॹɻ

Slide 96

Slide 96 text

Thank You!