UIデザイン講習会

Slide 1

Slide 1 text

6*σβΠϯߨशձ 6*σβΠϯͷߨशձͰ͢ @spa

Slide 2

Slide 2 text

@spa Ͱ͢ WebϑϩϯτΤϯυΛ͍ͯ͠Δ͜ͱ͕ଟ͍ ࿩͢ਓ

Slide 3

Slide 3 text

͜ͷߨशձͰ͢Δ͜ͱ • UIσβΠϯલʹߟ͑Δ΂͖͜ͱ • UIΛσβΠϯ͢Δ࣌ͷϓϩηε • ۩ମతͳݟͨ໨Λ࡞Δ࣌ͷίπ

Slide 4

Slide 4 text

͜ͷߨशձͰ͠ͳ͍͜ͱ • σβΠϯιϑτͷѻ͍ํ • ϑϩϯτΤϯυ࣮૷ͷํ๏ • όοΫΤϯυͷϞσϧͱͷରԠͷऔΓํ • ͳͲ

Slide 5

Slide 5 text

͓͠ͳ͕͖ • UIͱ͸ʁ • UIσβΠϯͷϓϩηε • OOUIͷ࣮ફ • ϏδϡΞϧσβΠϯͷϙΠϯτ

Slide 6

Slide 6 text

6*ͱ͸ʁ ᶃ 6*JTOBOJ

Slide 7

Slide 7 text

6*ͱ͸ʁ ͍͔ͭ͘ʮUIʯΛࢥ͍ු͔΂ͯΈ͍ͯͩ͘͞

Slide 8

Slide 8 text

6*ͱ͸ʁ 6*ͱ͸ʁ • Ϣʔβʔͱػց͕৘ใΛ΍ΓऔΓ͢Δࡍͷڥք • ৘ใͷ΍ΓͱΓʁ • ৘ใͷදࣔ • ৘ใʹର͢Δ / ৘ใΛ༻͍ͨԿ͔͠Βͷૢ࡞

Slide 9

Slide 9 text

6*ͱ͸ʁ ঢ়ଶΛద੾ʹӅṭ/ू໿ͯ͠৘ใΛදࣔ

Slide 10

Slide 10 text

6*ͱ͸ʁ ಺෦ॲཧΛӅṭͯ͠৘ใ΁ͷૢ࡞Λఏڙ

Slide 11

Slide 11 text

6*ͱ͸ʁ 6*σβΠϯͰߟ͑Δ͜ͱ • ͲͷΑ͏ʹͯ͠৘ใΛΘ͔Γ΍͘͢ఏڙ͢Δ͔ʁ • ϏδϡΞϧͷදݱ͸ͦͷ1ͭͷखஈʹա͗ͳ͍ • ಺෦ͷ৘ใΛ͏·͘ந৅Խͯ͋͛͠Δඞཁ͕͋Δ • ৘ใ΁ͷૢ࡞͸༰қ͔ʁ • ୭΋SQLΛ௚ʹॻ͍ͯૢ࡞ͨ͘͠͸ͳ͍ʢઐ༻πʔϧ͸ผʣ

Slide 12

Slide 12 text

6*ͱ͸ʁ Θ͔Γ΍͍͢6*ͷͨΊʹ • ఏڙ͞ΕΔ৘ใͷཧղ͕༰қͰ͋Δ • ద੾ͳߏ଄Խ: ਓؒͷ৺ཧΛߟྀ • ϢʔβʔͷϝϯλϧϞσϧʹԊͬͨ΋ͷʹ͢Δ • ʮ͜͜Λ͜͏ͨ͠Β͜͏ͳΔͩΖ͏ʯΛཪ੾Βͳ͍

Slide 13

Slide 13 text

6*ͱ͸ʁ ϝϯλϧϞσϧͷྫ: ϘλϯͱϦϯΫ Button https://example.com

Slide 14

Slide 14 text

6*ͱ͸ʁ ࢀߟώϡʔϦεςΟοΫ • 10 Usability Heuristics for User Interface Design • UIΛධՁ͢Δ࣌ͷج४ͷͻͱͭ • ద੾ͳϑΟʔυόοΫΛͤΑɺϢʔβʔͷΘ͔Δݴ༿Λ༻͍Αɺ… • ৄ͘͠͸ิ଍ࢿྉ΁

Slide 15

Slide 15 text

6*σβΠϯͷϓϩηε ᶄ 1SPDFTTGPSEFTJHOJOH6*

Slide 16

Slide 16 text

6*σβΠϯͷϓϩηε ͜ͷষͰ͸ • UIσβΠϯͷεςοϓΛ෼ղͯͬ͟͠ͱோΊͯΈΔ • ⚠ Ұ͔Β࡞Δ৔߹Λ૝ఆ͍ͯ͠·͢ • ⚠ WebΞϓϦέʔγϣϯΛ೦಄ʹஔ͍͍ͯ·͢ • ήʔϜͳͲͷ৔߹ʹ΋Ԡ༻͕ޮ͘ͱ͸ࢥ͏

Slide 17

Slide 17 text

6*σβΠϯͷϓϩηε 6*σβΠϯͷϓϩηε ཁٻ෼ੳ Ϟσϧநग़ Ϗϡʔఆٛ ϏδϡΞϧ

Slide 18

Slide 18 text

6*σβΠϯͷϓϩηε ཁٻ෼ੳ • UXʹؔΘΔ෦෼ʢUI͚ͩͷ࿩Ͱ͸ͳ͍ʣ • ࠓ͔Β࡞Δର৅ʹ͍ͭͯ • ͦΕΛϢʔβʔ͕࢖ͬͯͲ͏خ͍͠ͷ͔ • ͦΕͷଘࡏͰͲΜͳ໰୊Λղܾ͠Α͏ͱͯ͠Δͷ͔ • ʢ࡞Δଆͷ໨ઢͱͯ͠ʣͦΕ͕Ͳ͏͋ͬͯཉ͍͠ͷ͔ • ࠓճͷߨशձͷείʔϓ͔Β͸গ͠֎ΕΔ……

Slide 19

Slide 19 text

6*σβΠϯͷϓϩηε ཁٻ෼ੳ • ϢʔεέʔεΛ૝ఆ͠ɺԿ͕ඞཁͱ͞ΕͯΔ͔ݕ౼ • Ϣʔβʔ΁ͷௐࠪɺ΃ϧιφʢର৅ਓ෺૾ʣΛઃఆ͠ࢥߟ࣮ݧɺ… • ࠷ऴతͳ໨ඪ͸ • Ϣʔβʔͷඞཁͱ͢Δ৘ใɾૢ࡞͕੔ཧͰ͖Δ͜ͱ • ͦΕΒͷϏδϡΞϧදݱͷํ޲ੑ͕੔ཧͰ͖Δ͜ͱ

Slide 20

Slide 20 text

6*σβΠϯͷϓϩηε 6*ͱ69ͷҧ͍ • UI͸Ϣʔβʔ͕໨ʹ͢Δ৘ใͷදݱ • UX͸ͦͷ΋ͷͷ࢖༻Λ௨ͯ͡ಘͨମݧશମ • ͓ؾ࣋ͪͷੈքʢ೉͍͠ʣ • UIΛ௨ͯ͡ൃੜ͢Δ • αϙʔτରԠͳͲ΋UXʹؔΘΔཁҼ

Slide 21

Slide 21 text

6*σβΠϯͷϓϩηε Ϟσϧநग़ • ཁٻʹ͓͍ͯඞཁʹͳͬͯ͘ΔΦϒδΣΫτΛநग़͢Δ࡞ۀ • ྫ͑͹traQͳΒϢʔβʔɺϝοηʔδɺνϟϯωϧͳͲ • DDDͰݴ͏ͱ͜Ζͷentityͱ͔value object • ৘ใͷந৅ԽΛ͢Δ • OOUIͷॴͰৄ͘͠આ໌͠·͢

Slide 22

Slide 22 text

6*σβΠϯͷϓϩηε Ϗϡʔఆٛ • ΦϒδΣΫτΛͲͷΑ͏ʹදࣔ͢Δ͔ܾΊΔ • ϦετදࣔɺάϦουදࣔɺ୯ମͰͷදࣔ……ͳͲͳͲ • ͦΕΒͷදࣔͷ͞ΕํͷભҠؔ܎ΛܾΊΔ • ʮϫΠϠʔϑϨʔϜΛඳ͘ʯ࡞ۀʹ૬౰ • OOUIͷॴͰৄ͘͠આ໌͠·͢

Slide 23

Slide 23 text

6*σβΠϯͷϓϩηε ϏδϡΞϧఆٛ • ·ͣϏδϡΞϧͷํ޲ੑΛܾΊΔ • Կ͔ͷҰ෦ͷ৔߹͸શମʹϚον͢ΔΑ͏ʹ • ϓϩμΫτͷՁ஋Λදݱ͢Δ৭΍ܗɾεϖʔγϯάͳͲΛߟ͑Δ • ʮϓϩμΫτ͕Ͳ͏͋ͬͯཉ͍͔͠ʯΛදݱͰ͖Δ

Slide 24

Slide 24 text

6*σβΠϯͷϓϩηε ϏδϡΞϧఆٛ • ํ޲ੑʹԊ͏Α͏ʹύʔπͷϏδϡΞϧΛܾఆ͍ͯ͘͠ • ݸʑͷΦϒδΣΫτͷදݱ • Ϗϡʔͷදݱ • ͦͷଞඞཁͱͳΔίϯϙʔωϯτͷදݱ • ϢʔβʔͷϝϯλϧϞσϧ͔Βҳ୤͠ͳ͍޻෉͕ඞཁ

Slide 25

Slide 25 text

6*σβΠϯͷϓϩηε ͦͷઌ΁σβΠϯγεςϜ • ࡞͍ͬͯ͘ͱ͋Δఔ౓ϏδϡΞϧදݱͷύλʔϯ͕Ͱ͖ͯ͘Δ • ͲͷΑ͏ͳΦϒδΣΫτɾϏϡʔʹͲͷΑ͏ͳػೳΛׂΓ౰ͯΔ͔ • ϏδϡΞϧʢ৭ͱ͔typographyͱ͔ͷʣͷϧʔϧ • ͜ΕΛνʔϜ಺Ͱڞ༗ͨ͠΋ͷ͕σβΠϯγεςϜ • σβΠϯγεςϜʹԊͬͨ΋ͷΛ࡞Δ • ίϯελϯτʹߋ৽͍ͯ͘͠

Slide 26

Slide 26 text

6*σβΠϯͷϓϩηε ϓϩηεͷ·ͱΊ • ཁٻ෼ੳ • Ϟσϧநग़ • Ϗϡʔఆٛ • ϏδϡΞϧఆٛ: શମͷίϯηϓτ / ݸʑͷΦϒδΣΫτ΍Ϗϡʔ • σβΠϯγεςϜͷཱ֬

Slide 27

Slide 27 text

6*σβΠϯͷϓϩηε 6* σβΠϯ ϏδϡΞϧ ৘ใͷઃܭ ৘ใͷઃܭͱϏδϡΞϧσβΠϯ͕૬ޓʹӨڹΛ༩͑ͭͭਐΉ

Slide 28

Slide 28 text

006*ͷ࣮ફ ᶅ 006*JOQSBDUJDF

Slide 29

Slide 29 text

006*ͷ࣮ફ ͜ͷষͰ͸ • UIͷઃܭࢦ਑ͷҰͭͰ͋Δ OOUI ͱ͍͏ख๏Λݟ͍ͯ͘ • ৘ใͷ੔ཧͷ؍఺Ͱ༗༻ • σβΠϯϓϩηεͷϞσϧநग़ʙϏϡʔఆٛʹ૬౰͢Δ෦෼ • ⚠ ྫʹ࢖͏traQ͸͋Δఔ౓؆ུԽ͞Εͨ΋ͷʹͳΓ·͢ • ಛʹDMɾΞΫςΟϏςΟͷଘࡏΛল͍͍ͯΔͱ͍͏఺ʹ஫ҙ͍ͯͩ͘͠͞

Slide 30

Slide 30 text

006*ͷ࣮ફ ͜ͷষͷྲྀΕ • OOUIͱ͸ʁ • OOUIͷϓϩηε • ΦϒδΣΫτநग़ • Ϗϡʔఆٛ • ϨΠΞ΢τఆٛ • ϨΠΞ΢τύλʔϯʹ͍ͭͯ

Slide 31

Slide 31 text

006*ͷ࣮ફ 006*ͱ͸ • ʮΦϒδΣΫτࢦ޲UIʯͷ͜ͱ • ͋Δ΋ͷʢΦϒδΣΫτʣʹରͯ͠ૢ࡞Λߦ͏ελΠϧͷUI • ରٛޠ: λεΫࢦ޲UI • ΦϒδΣΫτࢦ޲ϓϩάϥϛϯά……ʁ • ͍ۙ

Slide 32

Slide 32 text

006*ͷ࣮ફ 006*WTλεΫࢦ޲ • OOUI : ໊ࢺ → ಈࢺ • λεΫʢ΍Γ͍ͨ͜ͱʣΛΦϒδΣΫτ΁ͷૢ࡞ʢΞΫγϣϯʣͰ ୡ੒͢Δ • λεΫࢦ޲: ಈࢺ → ໊ࢺ • λεΫͷશମ૾͕نఆ͞Ε͍ͯͯɺͦΕʹର৅Λ౰ͯ͸ΊΔ

Slide 33

Slide 33 text

006*ͷ࣮ફ έʔΩʹݟΔOOUI

Slide 34

Slide 34 text

006*ͷ࣮ફ 006*ৄࡉ • ಉ͡छྨͷΦϒδΣΫτ͕৭ʑͳํ๏Ͱදࣔ͞ΕΔ • γϯάϧϏϡʔ • ίϨΫγϣϯϏϡʔ • ΦϒδΣΫτ΁ͷΞΫγϣϯ͕ը໘ભҠΛੜΉ৔߹͕͋Δ • ྫ: ϙέϞϯͷಓ۩

Slide 35

Slide 35 text

006*ͷ࣮ફ 006*ͷϓϩηε • ΦϒδΣΫτநग़ • ϏϡʔɾφϏήʔγϣϯఆٛ • ϨΠΞ΢τઃܭ Ϟσϧநग़ Ϗϡʔઃܭ ^ USB24ΛݟͯΈΔ

Slide 36

Slide 36 text

006*ͷ࣮ફ ΦϒδΣΫτநग़ • ચ͍ग़ͨ͠λεΫ͔ΒΦϒδΣΫτͱଐੑɾΞΫγϣϯΛநग़ • ΦϒδΣΫτ͸໊ࢺʹͳ͍ͬͯΔ • Կ͔ͷ֓೦ͷΠϯελϯεͳΒɺద౰ͳந৅ԽΛ͢Δ • म০͸ଐੑͰ͋ΔՄೳੑ͕ߴ͍ • ྫ: ʮ3೥A૊ͷߴւ͞Μʯ →ΦϒδΣΫτʮֶੜʯͱͦͷଐੑʮֶ೥ʯʮ૊ʯ

Slide 37

Slide 37 text

006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • ૝ఆ͞ΕΔλεΫͷҰ෦ɹ໊ࢺͱϢʔβʔओମͷಈࢺΛڧௐͨ͠ #a ͷ ϝοηʔδҰཡ ΛݟΔ #a/b ͷԼʹ #a/b/c Λ ࡞੒͢Δ ϝοηʔδ Λ ϐϯ͢Δ @spa ʹ Ͷ͜ Λ͚ͭΔ ϐϯཹΊϝοηʔδ ʹ ελϯϓ Λ ͚ͭΔ ϝϯγϣϯ ͞ΕΔͱ ௨஌͕͘Δ

Slide 38

Slide 38 text

006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • λεΫ͔ΒΦϒδΣΫτʹ૬౰͢Δ΋ͷΛந৅Խ • ௨஌ɾϝϯγϣϯ͸ͦΕʹରͯ͠ૢ࡞ΛՃ͑Δ΋ͷͰ͸ͳ͍ͷͰআ֎ ϝοηʔδ νϟϯωϧ Ϣʔβʔ λά ελϯϓ

Slide 39

Slide 39 text

006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • ΦϒδΣΫτ͕ܾ·ͬͨΒͦΕΒͷଐੑΛߟ͑Δ • DBεΩʔϚͷΑ͏ʹ͸ͤͣɺϢʔβʔͷؔ৺ϕʔεͰϞσϦϯά͢Δ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾ౤ߘ͞Εͨϝοηʔδ ϝοηʔδ ɾ಺༰ ɾ౤ߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ

Slide 40

Slide 40 text

006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • ΦϒδΣΫτͷؔ܎ੑΛϞσϦϯά͢Δ • ͜͜Ͱ΋Ϣʔβʔͷؔ৺ϨϕϧͰͷந৅ԽͰे෼ ϝοηʔδ ɾ಺༰ ɾ౤ߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾ౤ߘ͞Εͨϝοηʔδ

Slide 41

Slide 41 text

006*ͷ࣮ફ λεΫΛ൓өͨ͠traQͷؔ܎ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾ౤ߘ͞Εͨϝοηʔδ ϝοηʔδ ɾ಺༰ ɾϐϯཹΊ͞Ε͍ͯΔ͔ ɾ౤ߘઌνϟϯωϧ ɾ౤ߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ Ϣʔβʔ ɾεΫϦʔϯ *% ɾද໊ࣔ ɾ෇͚ΒΕ͍ͯΔλά ελϯϓ λά

Slide 42

Slide 42 text

006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • ΦϒδΣΫτʹରͯ͠ՄೳͳΞΫγϣϯΛఆٛ͢Δ • جຊ͸Create, ( Read, ) Update, Delete νϟϯωϧ ɾ ɾࢠνϟϯωϧΛ௥Ճ͢Δ ɾ౤ߘ͢Δ ɾ࡟আ͢Δ ɾϐϯཹΊ͢Δ ղআ͢Δ ɾελϯϓΛ͚ͭΔ ֎͢ ϝοηʔδ ɾ

Slide 43

Slide 43 text

006*ͷ࣮ફ ΞΫγϣϯΛఆٛͨ͠ਤ ʢλάͱελϯϓ͸ඪ४ͷCRUDΛαϙʔτʣ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾ਌νϟϯωϧ ɾ౤ߘ͞Εͨϝοηʔδ ɾࢠνϟϯωϧΛ௥Ճ͢Δ ɾ< ؅ཧऀ > ௥Ճ͢Δ ɾ< ؅ཧऀ > ࡟আ͢Δ ϝοηʔδ ɾ಺༰ ɾϐϯཹΊ͞Ε͍ͯΔ͔ ɾ౤ߘઌνϟϯωϧ ɾ౤ߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ ɾ౤ߘ͢Δ ɾ< ౤ߘऀ > ࡟আ͢Δ ɾ< ౤ߘऀ > ฤू͢Δ ɾϐϯཹΊ͢Δ ղআ͢Δ ɾελϯϓΛ͚ͭΔ ֎͢ Ϣʔβʔ ɾεΫϦʔϯ *% ɾද໊ࣔ ɾ෇͚ΒΕ͍ͯΔλά ɾ< ؅ཧऀ > ࡞੒͢Δ ɾ< ؅ཧऀ > ࡟আ͢Δ ɾ< ࣗ෼ > ϓϩϑΟʔϧมߋ ɾλάΛ͚ͭΔ ελϯϓ λά

Slide 44

Slide 44 text

006*ͷ࣮ફ ΦϒδΣΫτநग़·ͱΊ • λεΫ͔ΒΦϒδΣΫτީิΛൈ͖ग़͢ • ީิΛ๬·ཻ͍͠౓Ͱந৅Խ͢Δ • ΋ͱ΋ͱͷλεΫͱݟൺ΂ͭͭ • ΦϒδΣΫτͷଐੑɾؔ࿈Λݕ౼ • ΦϒδΣΫτʹର͢ΔΞΫγϣϯΛݕ౼

Slide 45

Slide 45 text

006*ͷ࣮ફ ΦϒδΣΫτநग़OPUF • ͜ΕΒͷεςοϓͰ࢓༷͕ݻ·͍ͬͯ͘ • ΞϓϦέʔγϣϯͰ͸ Կ͕ݟ͑ͯ Կ͕Ͱ͖Δʁ ΛܾΊͨ • ٯʹλεΫɾϢʔεέʔεͷݕ౼ʹ໭Δ͜ͱ΋ • QͷྫͰ͸ΞΫγϣϯͷείʔϓʹݴٴͨ͠ • ͜Ε͸΋ͱͷཁٻ෼ੳஈ֊Ͱ΍͍ͬͯͳ͍͜ͱͩͬͨ

Slide 46

Slide 46 text

006*ͷ࣮ફ ΦϒδΣΫτநग़OPUF • ੾Γग़ͨ͠΋ͷΛϝΠϯΦϒδΣΫτͱ΋͍͏ • ࠓճ͸ॏཁͰͳ͍ΦϒδΣΫτΛଐੑͱͯ͠ѻͬͨ • ݁ՌͷϞσϧ͸ඞͣ͠΋αʔόʔαΠυͳͲɺ࣮૷্ͷϞσϧͱ͸Ұ க͠ͳ͍ • දࣔલʹద౰ʹ৘ใΛม׵ͯ͋͛͠Δඞཁ͕͋Δ͔΋ • ࣮͸αʔόʔ/ΫϥΠΞϯτϞσϧͷAPIͬͯΠϯλʔϑΣΠεͰ͢ΑͶ

Slide 47

Slide 47 text

006*ͷ࣮ફ Ϗϡʔఆٛ • ΦϒδΣΫτΛͲ͏ݟͤΔ͔ʢϏϡʔʣͷఆٛΛߦ͏εςοϓ • ·࣮ͩࡍͷϨΠΞ΢τ͸͠ͳ͍ • ϞσϦϯάͨؔ͠܎ΛϏϡʔͷભҠؔ܎ʹམͱ͠ࠐΉ

Slide 48

Slide 48 text

006*ͷ࣮ફ Ϗϡʔͷछྨ • ίϨΫγϣϯϏϡʔ • ෳ਺ͷΦϒδΣΫτΛҰཡදࣔ • શମ૾Λ೺Ѳ͍ͨ͠΋ͷ΍ɺλΠϜϥΠϯͳͲ • γϯάϧϏϡʔ • ͦͷΦϒδΣΫτͻͱͭʹ͍ͭͯɺৄࡉ৘ใΛදࣔ • ίϨΫγϣϯϏϡʔ͔ΒؾʹͳΔ΋ͷͷγϯάϧϏϡʔʹભҠ

Slide 49

Slide 49 text

006*ͷ࣮ફ ίϨΫγϣϯϏϡʔ / γϯάϧϏϡʔ

Slide 50

Slide 50 text

006*ͷ࣮ફ Ϗϡʔͷఆٛ • γϯάϧɾίϨΫγϣϯ྆ํͷϏϡʔΛͱΓ͋͑ͣ࡞Δ • ίϨΫγϣϯ͔ΒγϯάϧʹભҠͰ͖Δ • ϞσϦϯά݁Ռͷؔ܎ʹԠͯ͡ભҠؔ܎Λ෇͚଍͢

Slide 51

Slide 51 text

006*ͷ࣮ફ Ϗϡʔͷఆٛ • ࠷ऴతʹϚʔδɾলུ͞ΕΔ৔߹͕͋Δ • ඞཁʹԠͯ͡ߟ͑Ε͹OKͳͷͰɺͱΓ͋͑ͣ͸શͯॻ͖ग़͢ • ໌Β͔ʹ།Ұ͔͠ଘࡏ͠ͳ͍ΦϒδΣΫτ͸౰વίϨΫγϣϯ ϏϡʔΛ࣋ͨͳ͍

Slide 52

Slide 52 text

006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • νϟϯωϧ - ϝοηʔδ͸ 1:* ͷؔ܎ʹͳ͍ͬͯΔ • νϟϯωϧͷγϯάϧϏϡʔ͔ΒϝοηʔδͷίϨΫγϣϯϏϡʔ ʹભҠͯ͠ཉ͍͠ • ϝοηʔδ - Ϣʔβʔ͸ *:1 ͷؔ܎ʹͳ͍ͬͯΔ • Ϣʔβʔ͔ΒͦͷϢʔβʔ͕౤ߘͨ͠ϝοηʔδʹભҠ͢Δ……ʁ

Slide 53

Slide 53 text

006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • ؆ུԽͨؔ͠܎ͷਤ ελϯϓ νϟϯωϧ ϝοηʔδ Ϣʔβʔ λά

Slide 54

Slide 54 text

006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • ϏϡʔͷભҠؔ܎Λߟ͑ͯΈΔ • Ϣʔβʔ͔ΒͦͷϢʔβʔ͕౤ߘͨ͠ϝοηʔδ͸Ҿ͚ͳ͍ͷͰআ֎ νϟϯωϧ ίϨΫγϣϯ ϝοηʔδ ίϨΫγϣϯ Ϣʔβʔ ίϨΫγϣϯ νϟϯωϧ γϯάϧ ϝοηʔδ γϯάϧ Ϣʔβʔ γϯάϧ

Slide 55

Slide 55 text

006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • ϝοηʔδͷγϯάϧϏϡʔΛίϨΫγϣϯϏϡʔʹ౷߹ νϟϯωϧ ίϨΫγϣϯ ϝοηʔδ ίϨΫγϣϯ Ϣʔβʔ ίϨΫγϣϯ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ

Slide 56

Slide 56 text

006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • ϝοηʔδͷίϨΫγϣϯϏϡʔΛνϟϯωϧͷγϯάϧϏϡʔͱ͠ ͯ࢖͏ʢ࣮ࡍͷtraQʹ͍ۙʣ νϟϯωϧ ίϨΫγϣϯ ϝοηʔδ ίϨΫγϣϯ Ϣʔβʔ ίϨΫγϣϯ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ

Slide 57

Slide 57 text

006*ͷ࣮ફ ϧʔτφϏήʔγϣϯݕ౼ • ಛʹॏཁͦ͏ͳΦϒδΣΫτΛϧʔτφϏήʔγϣϯʹ഑ஔ • ϞόΠϧΞϓϦͳΒBottomBarͱ͔TabBarͱ͔ • ࢥߟͷى఺ͱͳΔʢ㲈ભҠઌ͕ଟ͍ʣΦϒδΣΫτ͕ྑ͍ • ΞϓϦέʔγϣϯશମͰ༏ઌ͞ΕΔ෺͕͋Ε͹ͦΕͰ΋

Slide 58

Slide 58 text

006*ͷ࣮ફ ϧʔτφϏήʔγϣϯͷϙΠϯτ • ΞϓϦέʔγϣϯΛʮ΋ͷʯ͕ฒΜͰ͍Δ΋ͷͱͯ͠ߟ͑Δ • → ػೳΛφϏήʔγϣϯʹฒ΂Δͷ͸ѱख • ྫ֎: ʢର৅ΦϒδΣΫτ͕ࣗ໌ͳ৔߹ͷʣݕࡧɾઃఆ • φϏήʔγϣϯ߲໨Λબ୒ͨ͠ΒΦϒδΣΫτͷίϨΫγϣϯϏϡʔ ʹભҠ͢ΔʢίϨΫγϣϯϏϡʔ͕͋Δ৔߹ʣ

Slide 59

Slide 59 text

006*ͷ࣮ફ traQͷϧʔτφϏήʔγϣϯ + νϟϯωϧͷίϨΫγϣϯϏϡʔ

Slide 60

Slide 60 text

006*ͷ࣮ફ ϨΠΞ΢τઃܭ • ࣮ࡍʹݟ͑Δը໘ͷઃܭ • ͍ΘΏΔϫΠϠʔϑϨʔϜ • ϏϡʔΛը໘ʹͲͷΑ͏ʹ഑ஔ͢Δ͔ͷݕ౼ • 1ը໘ʹෳ਺Ϗϡʔ͕͋ͬͯ΋OK • ϞόΠϧͱPCͰग़͠෼͚ͯ͠΋OK

Slide 61

Slide 61 text

006*ͷ࣮ફ ϨΠΞ΢τύλʔϯ • ࢹ֮දݱ͸ύλʔϯཱ͕͍֬ͯ͠ΔͷͰै͓ͬͯ͘ͱྑ͍ • φϏήʔγϣϯͷදࣔ • શମతͳը໘ϨΠΞ΢τ • ίϨΫγϣϯදࣔ • ΦϒδΣΫτͷCRUD • Ϣʔβʔͷೝ஌ෛՙ͕Լ͕Δ

Slide 62

Slide 62 text

006*ͷ࣮ફ Ϗϡʔ഑ஔͷύλʔϯ • جຊతʹ্/ࠨ͕֓ཁɺԼ/ӈ͕ৄࡉͱ͍͏ྲྀΕ͕͋Δ • υϦϧμ΢ϯͷํ޲ੑ • ฒ΂ͯஔ͚ͳ͍৔߹͸ը໘ભҠ • ࠨ͔ΒӈʹϓογϡͰ͖Δͱ͏Ε͍͠ • ద੾ʹग़͠෼͚͠Α͏

Slide 63

Slide 63 text

006*ͷ࣮ફ ఆ൪ը໘ύλʔϯ • μϒϧϖΠϯ: ࠨʹίϨΫγϣϯϏϡʔ + ӈʹγϯάϧϏϡʔ

Slide 64

Slide 64 text

006*ͷ࣮ફ ఆ൪ը໘ύλʔϯ • γϯάϧϖΠϯ: ίϨΫγϣϯˠγϯάϧΛը໘ભҠͰରԠ

Slide 65

Slide 65 text

006*ͷ࣮ફ φϏήʔγϣϯͷύλʔϯ • ϞόΠϧ͸Լ͔υϩϫʔʢφϏήʔγϣϯͷ৔߹ࠨ͕ଟ͍ʣ

Slide 66

Slide 66 text

006*ͷ࣮ફ φϏήʔγϣϯͷύλʔϯ • PC͸্͔ࠨ

Slide 67

Slide 67 text

006*ͷ࣮ફ ίϨΫγϣϯϏϡʔͷύλʔϯ • Ϧετදࣔ • άϦουදࣔ • ͦͷଞ • ϚοϐϯάͳͲ • Material Design Guideline ͳͲ͕ͱͯ΋ࢀߟʹͳΔ

Slide 68

Slide 68 text

006*ͷ࣮ફ ίϨΫγϣϯϏϡʔͷ৭ʑ Ϧετ άϦου Ϛοϐϯά

Slide 69

Slide 69 text

006*ͷ࣮ફ ίϨΫγϣϯϏϡʔΞΠςϜͷ৭ʑ Ϧετ Χʔυ

Slide 70

Slide 70 text

006*ͷ࣮ફ γϯάϧϏϡʔͷύλʔϯ • ͦͷ΋ͷͷ৘ใͷΈΛදࣔ͢Δύλʔϯ • ଞΦϒδΣΫτͷίϨΫγϣϯΛϓϨϏϡʔతʹදࣔ͢Δύλʔϯ • جຊ͸ԡͨ͠ΒભҠ͕ൃੜ • ಺෦ʹଞΦϒδΣΫτͷίϨΫγϣϯΛؚΉύλʔϯ • ଐੑͷදݱͱͯ͠༻͍Δ • ଞͷΦϒδΣΫτͷίϨΫγϣϯͷΈΛؚΉύλʔϯ

Slide 71

Slide 71 text

006*ͷ࣮ફ γϯάϧϏϡʔͷύλʔϯUSB2ͷྫ • ϢʔβʔϞʔμϧ͸࣍ͷΑ͏ͳදࣔͷ͞Εํ͕͋Δ • ϢʔβʔΦϒδΣΫτͷৄࡉදࣔ • Ϣʔβʔʹ͚ͭΒΕͨλάͷίϨΫγϣϯΛ಺แͨ͠දࣔ • Ϣʔβʔʹ͚ͭΒΕͨάϧʔϓͷίϨΫγϣϯΛ಺แͨ͠දࣔ • ͜ΕΒΛλϒόʔͰ੾Γସ͍͑ͯΔʢকདྷతͳ֦ு΋ݟਾ͑ͯʣ

Slide 72

Slide 72 text

006*ͷ࣮ફ ϢʔβʔͷγϯάϧϏϡʔʢຒΊࠐΈϏϡʔͳ͠ / ͋Γʣ

Slide 73

Slide 73 text

006*ͷ࣮ફ ϨΠΞ΢τͷఆٛUSB2ͷྫ • ϢʔβʔϞʔμϧ͸࣍ͷΑ͏ͳදࣔͷ͞Εํ͕͋Δ • ϢʔβʔΦϒδΣΫτͷৄࡉදࣔ • Ϣʔβʔʹ͚ͭΒΕͨλάͷίϨΫγϣϯΛ಺แͨ͠දࣔ • Ϣʔβʔʹ͚ͭΒΕͨάϧʔϓͷίϨΫγϣϯΛ಺แͨ͠දࣔ • ͜ΕΒΛλϒόʔͰ੾Γସ͍͑ͯΔʢকདྷతͳ֦ு΋ݟਾ͑ͯʣ

Slide 74

Slide 74 text

006*ͷ࣮ફ ఴ෇ϑΝΠϧҰཡΛ͚ͭͨtraQͷϏϡʔߏ଄ νϟϯωϧ ίϨΫγϣϯ Ϧετ ϝοηʔδ ίϨΫγϣϯ Ϧετ ఴ෇ϑΝΠϧ ίϨΫγϣϯ άϦου λά ίϨΫγϣϯ Ϧετ Ϣʔβʔ ίϨΫγϣϯ Ϧετ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ ϝΠϯφϏήʔγϣϯ ϞόΠϧ࣌υϩϫʔ NPEBM NPEBM

Slide 75

Slide 75 text

006*ͷ࣮ફ ΞΫγϣϯͷ഑ஔ • جຊతʹର৅ͱͳΔΦϒδΣΫτͷۙ͘ʹஔ͘ • ৽ن࡞੒ͷ৔߹͸ίϨΫγϣϯϏϡʔΛର৅ͱΈͳ͢ • ྫ: • Χʔυදࣔ͞ΕͯΔ΋ͷʹର͢Δૢ࡞ˠΧʔυͷத • Ϧετදࣔ΁ͷ৽ن௥ՃˠϦετશମͷӈ্ͳͲ

Slide 76

Slide 76 text

006*ͷ࣮ફ ΞΫγϣϯͷ഑ஔ$SFBUF • ৽ن࡞੒͸ίϨΫγϣϯϏϡʔʹ͔͠ஔ͚ͳ͍ • ৽ن࡞੒ϘλϯΛԡ͢ͱϞʔμϧͰ಺༰ΛٻΊΒΕΔύλʔϯ • ύϥϝʔλʔύλʔϯ • ೖྗཝ͕ৗʹԼʹଘࡏ͍ͯͯ͠ɺೖྗˠܾఆͰ৽ن࡞੒ • ϓϨʔεϗϧμʔύλʔϯ

Slide 77

Slide 77 text

006*ͷ࣮ફ ύϥϝʔλʔ / ϓϨʔεϗϧμʔ ύλʔϯ

Slide 78

Slide 78 text

006*ͷ࣮ફ ΞΫγϣϯͷ഑ஔ6QEBUF • ߋ৽͸γϯάϧϏϡʔͰߦ͏ͷ͕جຊ • ಺༰͕શͯมߋՄೳͰɺࣗಈอଘ͞ΕΔύλʔϯ • ઃఆͳͲͰ࢖ΘΕΔ • ϘλϯΛԡ͢ͳͲͰฤूϞʔυʹҠߦ͠ɺ໌ࣔతʹอଘ͢Δύλʔϯ • ϓϩϑΟʔϧฤूͷΠϝʔδ

Slide 79

Slide 79 text

006*ͷ࣮ફ ΞΫγϣϯͷ഑ஔ%FMFUF • ࡟আ͸γϯάϧͰ΋ίϨΫγϣϯͰ΋Մೳ • ࡟আͯ͠ྑ͍͔ͷ֬ೝΛग़͢ύλʔϯ • ࡟আͷऔΓফ͕͠Ͱ͖Δύλʔϯ • ίϨΫγϣϯϏϡʔʹฤूϞʔυΛ࣋ͨͤΔύλʔϯ • iOSͷTableView

Slide 80

Slide 80 text

006*ͷ࣮ફ ίϨΫγϣϯͷϑΟϧλϦϯά • จࣈྻݕࡧ • ଐੑϑΟϧλ • ଐੑΛΦϒδΣΫτͱ͖ͯ͠Βͳ͍ͱ͍͚ͳ͍͔΋͠Εͳ͍ • શͯදࣔ ΛݸผͷΞΠςϜͱ͓͍ͯͨ͠ํ͕ྑ͍ • ιʔτ

Slide 81

Slide 81 text

006*ͷ࣮ફ 006*ͷ·ͱΊ w ΦϒδΣΫτநग़ w λεΫ͔ΒͷΦϒδΣΫτͷద੾ͳந৅ԽଐੑΞΫγϣϯ w Ϗϡʔఆٛ w γϯάϧϏϡʔίϨΫγϣϯϏϡʔભҠؔ܎ w ϨΠΞ΢τఆٛ w σβΠϯύλʔϯʹ͸جຊతʹै͓ͬͯ͘΂͖

Slide 82

Slide 82 text

ϏδϡΞϧσβΠϯ ᶆ 7JTVBMEFTJHO

Slide 83

Slide 83 text

ϏδϡΞϧσβΠϯͷίπ ͜ͷষͷྲྀΕ • ໨ʹݟ͑Δ࠷ऴܗΛσβΠϯ͢Δͱ͖ͷίπʹ͍ͭͯͰ͢ • σβΠϯͷ4ݪଇ • εϖʔγϯά • λΠϙάϥϑΟ • ৭ • ϝϯλϧϞσϧ

Slide 84

Slide 84 text

ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ • σβΠϯɾϨΠΞ΢τͰԡ͑͞Δ΂͖ݪଇ • ۙ઀: ؔ܎͢Δ৘ใ͸͚ۙͮΔ • ੔ྻ: Ұ࿈ͷ৘ใΛ੔ྻͤͯ͞දࣔ͢Δ • ରൺ: ॏཁͳ৘ใͱͦ͏Ͱͳ͍৘ใͷίϯτϥετΛ͚ͭΔ • ൓෮: ಉҰͷϞνʔϑΛ܁Γฦ͠༻͍Δ

Slide 85

Slide 85 text

ϏδϡΞϧσβΠϯͷίπ ۙ઀1SPYJNJUZ ؔ܎͠ͳ͍৘ใ͸ԕ͚͟Δɺؔ܎͢Δ৘ใ͸͚ۙͮΔ ੔ྻ "MJHONFOU ݟ͑ͳ͍ઢʹἧ͑ͯ഑ஔ͢Δ͜ͱͰ৘ใͷؔ࿈ੑΛڧௐ ରൺ $POUSBTU ڧௐ͍ͨ͠৘ใ͸େ͖͞ɾ৭Λڧ͘දࣔ͢Δ ൓෮ 3FQFUJUJPO ಛ௃త ౷Ұతͳݟͨ໨ͷ΋ͷΛ܁Γฦ͠༻͍Δ

Slide 86

Slide 86 text

ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇۙ઀ ׬શผΞΠςϜˠ޿͍Ϛʔδϯ ݟग़͠ͱຊจͷ۠੾Γˠڱ͍Ϛʔδϯ

Slide 87

Slide 87 text

ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ੔ྻ ্ἧ͑ ྆୺ἧ͑ ࠨἧ͑

Slide 88

Slide 88 text

ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ੔ྻ • ੔ྻ͕όϥόϥͩͱݟͮΒ͍ • Լͷྫ͸˔͕શମॎதԝɺλΠτϧͱจষ͕ࠨɺจষ͕྆୺தԝ ݟͮΒ͍

Slide 89

Slide 89 text

ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇରൺ • ॏཁͳ৘ใ͸ڧௐɺͦ͏Ͱͳ͍৘ใ͸໨ཱͨͳ͘ • େ͖͞ɺ৭ɺଠ͞ɺεϖʔγϯάͰௐ੔

Slide 90

Slide 90 text

ϏδϡΞϧσβΠϯͷίπ ৭ɾϑΥϯταΠζɾϑΥϯτ΢ΣΠτͷมߋΛͳͯ͘͠ΈΔ

Slide 91

Slide 91 text

ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ൓෮ • ಉҰͷϞνʔϑΛ܁Γฦ͢ • ಛʹΞϓϦέʔγϣϯͷ৔߹ɺಉҰͷڍಈΛ͢Δίϯϙʔωϯτͷ ݟͨ໨Λ౷Ұ͢΂͖ Send Follow Send Follow OK! NG

Slide 92

Slide 92 text

ϏδϡΞϧσβΠϯͷίπ ήγϡλϧτ৺ཧֶ • ਓؒ͸·ͣશମͷߏ଄ʢήγϡλϧτʣΛೝࣝ͢Δ • ήγϡλϧτͱ৘ใͷ࿦ཧతߏ଄͕Ұக͍ͯ͠Δͱخ͍͠ • ۙ઀ͷཁҼ: ͍ۙ΋ͷΛ·ͱ·Γͱͯ͠ଊ͑Δ → ۙ઀ݪଇ • ྨಉͷཁҼ: ࣅͯΔ΋ͷΛ·ͱ·Γͱͯ͠ଊ͑Δ → ൓෮ݪଇ • ด߹ͷཁҼɺྑ͍࿈ଓͷཁҼͱ͍͏ͷ΋͋Δ

Slide 93

Slide 93 text

ϏδϡΞϧσβΠϯͷίπ ۙ઀ͷཁҼ ྨಉͷཁҼ ด߹ͷཁҼ Α͍࿈ଓͷཁҼ

Slide 94

Slide 94 text

ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά • Կ͔ͱԿ͔ͷؒͷۭനͷऔΓํʹ͍ͭͯ • ۙ઀ݪଇʹରԠ͢Δߏ੒ཁૉ • CSSϕʔεͩͱɺେࡶ೺ʹೋͭʹ෼͔ΕΔ • ίϯϙʔωϯτؒͷۭനʢmarginʣ • ίϯϙʔωϯτͱͦͷࢠཁૉͷؒͷۭനʢpaddingʣ

Slide 95

Slide 95 text

Slide 96

Slide 96 text

ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάNBSHJOͱQBEEJOH margin padding

Slide 97

Slide 97 text

ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ • ༨ന͸े෼ʹɺ͋ΒΏΔ΋ͷʹઃఆ͢Δ • ځ۶/༨༟͕ͳ͍ͳͱײͨ͡ΒύσΟϯάΛ͚ͭΔ͜ͱΛݕ౼ • Ұ؏ੑͷ͋ΔεϖʔγϯάΛ͢Δ • ੔ྻݪଇͱؔ࿈͕ਂ͍ • ༨നͷऔΓํͰҹ৅ΛίϯτϩʔϧͰ͖Δ • Ұ౓ʹೖΔ৘ใྔΛௐ੔͢Δ

Slide 98

Slide 98 text

ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ༨ന͸े෼ʹऔΔ • marginɾpadding͸ຊจจࣈαΠζͷ൒෼͙Β͍͸ཉ͍͠ • ࠨͷྫ͸ߦؒͷҰ؏ੑ΋่Ε͍ͯͯਏ͍ λΠτϧλΠτϧ ৘ʹᑫͤ͞͹ྲྀ͞ΕΔɻஐʹಇ͚͹ ཱ͕֯ͭɻͲ͜΁ӽͯ͠΋ॅΈʹ͘ ͍ͱޛͬͨ࣌ɺࢻ͕ੜΕͯɺը͕ग़ དྷΔɻͱ͔͘ʹਓ λΠτϧλΠτϧ ৘ʹᑫͤ͞͹ྲྀ͞ΕΔɻஐʹಇ ͚͹ཱ͕֯ͭɻͲ͜΁ӽͯ͠΋ ॅΈʹ͍͘ͱޛͬͨ࣌ɺࢻ͕ੜ

Slide 99

Slide 99 text

ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά • ۭനͷେ͖͞ɾͲ͜ʹۭനΛஔ͔͘ʹ͍ͭͯҰ؏ͨ͠ϧʔϧ͕͋Δͱ ྑ͍ • ΢Οϯυ΢શମͷύσΟϯά • λΠτϧͱຊจͷؒͷϚʔδϯɹͳͲ • Կ͔୯ҐΛܾΊͯͦΕͷഒ਺ʹ͢Δͱ೰Ήඞཁ͕ݮΔ • جຊ8pxͷഒ਺ɺඍௐ੔͍ͨ͠ͱ͖͸4pxͷഒ਺ɹͳͲ

Slide 100

Slide 100 text

ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά • ϧʔϧΛܾΊΔࡍ͸ɺର৅ͱͳΔίϯϙʔωϯτͷཻ౓Λߟྀ͢Δ • େ͖͍ॱʹ • ηΫγϣϯؒͷεϖʔε • ΦϒδΣΫτؒͷεϖʔε • ίϯϙʔωϯτ಺ͷεϖʔε • ্ԼࠨӈͰ౷Ұͨ͠༨നΛऔΔ

Slide 101

Slide 101 text

ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτҰ؏ੑͷ͋Δεϖʔγϯά • Material Design Guidelineͷྫʢ⚠marginͳͲͷ༻๏͕͜ͷࢿྉͱҟͳΔʣ (VUUFS EQEQ 7FSUJWBM.BSHJO EQEQ )PSJ[POUBM.BSHJO

Slide 102

Slide 102 text

ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτεϖʔεͷ༩͑Δҹ৅ • εϖʔεΛେ͖͘։͚Δ • ΏͬͨΓͱͨ͠ҹ৅ • ίϯςϯπʹूத͍ͤͨ࣌͞ • εϖʔεΛͦ͜·Ͱ։͚ͳ͍ • ଟ͘ͷ৘ใ͔Βબ͹ͤΔ࣌

Slide 103

Slide 103 text

ϏδϡΞϧσβΠϯͷίπ ྫ: ϝσΟΞϓϥοτϑΥʔϜʢτοϓʣ https://note.com/

Slide 104

Slide 104 text

ϏδϡΞϧσβΠϯͷίπ ྫ: ϝσΟΞϓϥοτϑΥʔϜʢίϯςϯπʣ https://note.com/

Slide 105

Slide 105 text

ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά·ͱΊ • marginͱpaddingͷ2ͭͷύλʔϯͷ༨നͷऔΓํ͕͋Δ • ͋ΒΏΔཁૉʹద੾ͳ༨നΛͱΔʂ • Ұ؏ੑͷ͋ΔεϖʔγϯάϧʔϧΛ࣋ͭ • ίϯϙʔωϯτͷཻ౓͝ͱʹద੾ͳ༨നΛ

Slide 106

Slide 106 text

ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ • จࣈͷදࣔͷ࢓ํͷ͜ͱ • େ͖͞ɺ৭ɺଠ͞ɺϑΥϯτɺจࣈؒɺߦؒɺஈམؒεϖʔε…… • ରൺݪଇɾۙ઀ݪଇʹରԠ͢Δ

Slide 107

Slide 107 text

ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟจࣈαΠζ • ࠷΋؆୯ʹ৘ใʹڧऑΛ͚ͭΔ͜ͱ͕Ͱ͖Δ • جຊ͸ λΠτϧ >> ຊจ > ٭஫ • จࣈαΠζʹݟ߹ͬͨ༨ന͕ඞཁ • ࢖͑ΔจࣈαΠζͷϧʔϧΛ࡞͓ͬͯ͘ͱྑ͍ • λΠϓγεςϜͱ͍͏

Slide 108

Slide 108 text

ϏδϡΞϧσβΠϯͷίπ traQͷλΠϓγεςϜ

Slide 109

Slide 109 text

ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟϑΥϯτ • ͍Ζ͍Ζ͋Δ • ΰγοΫ → ͋Δఔ౓ͷ୹จɺ໌ே → ຊͳͲͷ௕จ • ෳࡶͳσβΠϯͷϑΥϯτ͸͋Δఔ౓ͷจࣈαΠζΛ֬อ͢Δ

Slide 110

Slide 110 text

ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟϑΥϯτ΢ΣΠτ • ϑΥϯτ͸͍͔ͭ͘ͷଠ͞ʢ = ΢ΣΠτʣΛ͍࣋ͬͯΔ৔߹͕͋Δ • ౰વଠ͍ͱ໨ཱͭ • ଟ༻ʹ͸஫ҙ • ࡉ͘͢Δͱ໨ཱͨͳ͘ͳΔ • ༨നΛޮՌతʹ࢖͏ͱݟग़͠ʹ΋࢖͑Δ • খ͍͞จࣈͷ΢ΣΠτʹ͸஫ҙ

Slide 111

Slide 111 text

ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟจࣈؒ • ࢖͍͜ͳ͢ͷ͕೉͍͠ • ͔ͳΓ஫ҙਂ͍ௐ੔͕ඞཁ খ ͞ ͍ จ ࣈ Ͱ จ ࣈ ؒ Λ ͱ Δ ଠ͍ จࣈͷจࣈؒΛ٧ΊΔɻ

Slide 112

Slide 112 text

ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟߦؒɾஈམؒ • جຊతͳൃ૝͸εϖʔγϯάͷ࣌ͱಉ͡ʢߦؒ < ஈམؒʣ • ߦؒ͸௨ৗϑΥϯταΠζͷ1.2ഒఔ౓ • 1.2ഒҎԼ͸ಡΈͮΒ͘ͳΔ • 1.5ഒ → ΏͬͨΓΊͷUI • 2ഒ → ͔ͳΓΏͬͨΓɺίϯςϯπϝΠϯͷUI

Slide 113

Slide 113 text

ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟߦؒɾஈམؒ ߦؒ αϯϓϧ ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹ཱ͕֯ ͭɻͲ͜΁ӽͯ͠΋ॅ Έʹ͍͘ͱޛͬͨ࣌ɺ ࢻ͕ੜΕͯɺը͕ग़དྷ Δɻͱ͔͘ ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹͕֯ ཱͭɻͲ͜΁ӽͯ͠ ΋ॅΈʹ͍͘ͱޛͬ ͨ࣌ɺࢻ͕ੜΕͯɺ ը͕ग़དྷΔɻͱ͔͘ ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹͕֯ ཱͭɻͲ͜΁ӽͯ͠ ΋ॅΈʹ͍͘ͱޛͬ ͨ࣌ɺࢻ͕ੜΕͯɺ ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹͕֯ ཱͭɻͲ͜΁ӽͯ͠ ΋ॅΈʹ͍͘ͱޛͬ

Slide 114

Slide 114 text

ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ·ͱΊ • ·ͣຊจͷαΠζɾϑΥϯτΛܾΊΔ • ͔ͦ͜Β೿ੜͯ͠ݟग़͠΍٭஫ͳͲͷαΠζΛߟ͑Δ • → λΠϓγεςϜΛ࡞Δ • Ұ؏ੑΛ࣋ͬͨλΠϓγεςϜͷద༻Λ͍ͯ͘͠

Slide 115

Slide 115 text

ϏδϡΞϧσβΠϯͷίπ ৭ • ͍Ζ͍Ζͳཁૉ͕͋Δ • τʔϯ • ৭ͷ࣋ͭΠϝʔδ • ආ͚ͨํ͕ྑ͍৭ • ࠓճ͸ΧϥʔύϨοτΛ࡞Γɺద༻͢Δ͜ͱΛߟ͑Δ

Slide 116

Slide 116 text

ϏδϡΞϧσβΠϯͷίπ ৭جૅ஌ࣝ)4- • ৭Λ3ͭͷύϥϝʔλʔΛ࢖ͬͯද͢ํ๏ • ৭૬(Hue) : ͲΜͳ৭͔ • ࠼౓(Saturation) : ͲΕ͚ͩ৭઱΍͔͔ • ໌౓(Luminance) : ͲΕ͚ͩ໌Δ͍͔

Slide 117

Slide 117 text

ϏδϡΞϧσβΠϯͷίπ 24෼ׂͷ৭૬؀ʢ৭૬͸͜Εʹ͓͚ΔҐஔʣ

Slide 118

Slide 118 text

ϏδϡΞϧσβΠϯͷίπ ্͕࠼౓0→1ɺԼ͕໌౓0→1ʢ৭૬͸205°ʣ

Slide 119

Slide 119 text

ϏδϡΞϧσβΠϯͷίπ ৭جૅ஌ࣝτʔϯ • ࠼౓ͱ໌౓͕৭ͷงғؾΛܾΊΔ • 2ͭΛ߹ମͤͨ͞τʔϯͱ͍͏৭ͷ෼ྨ͕͋Δ • ϏϏουτʔϯɺϒϥΠττʔϯɺετϩϯάτʔϯɺ…… • ӳࣈͰུ͢͜ͱ͕͋Δʢv, b, s, lt, sf, …ʣ

Slide 120

Slide 120 text

ϏδϡΞϧσβΠϯͷίπ ৭جૅ஌ࣝτʔϯͱ৭ͷ૊Έ߹Θͤ • τʔϯΛج४ʹ͢Δͱɺ࣍ͷΑ͏ʹ৭Λબ΂͍͍ͯײ͡ʹͳΔ • ಉ͡τʔϯ͔Β2৭ • ಉ͡৭૬ͰҟͳΔτʔϯ͔Β2৭ • ͦͷଞ͸৭૬ϕʔεͷิ৭ɺτϥΠΞυɺςτϥʔυͳͲ • άά͍ͬͯͩ͘͞

Slide 121

Slide 121 text

ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ • ࣍ͷఔ౓ͷ৭͕୯७͚ͩͲ࢖͍΍͍͢ΧϥʔύϨοτ • Primary color: αʔϏεશମͷΩʔΧϥʔ • Secondary color: Primaryͱͷ۠ผΛ͍ͨ͠ͱ͖ͷ৭ • Text Color: จࣈ৭ • Background Color: എܠ৭

Slide 122

Slide 122 text

ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ1SJNBSZDPMPS • αʔϏεͷΠϝʔδͱͳΔ৭ • ཁॴཁॴͰ࢖͍ͬͯ͘ͷ͕ྑ͍ • ॏཁͳϘλϯɺಛʹ໨ཱ͍ͨͤͨཁૉɺ…… • ࢖͍͗͢Δͱҙຯ߹͍͕΅΍͚ͯ͠·͏ͷͰΞΫηϯτఔ౓ʹ • UI༻ʹओཁʹ༻͍Δผͷ৭Λઃఆͯ͠΋ྑ͍ʢtraQ͸ͦ͏ʣ

Slide 123

Slide 123 text

ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ4FDPOEBSZDPMPS • PrimaryҎ֎Ͱ͋Δ͜ͱΛࣔͨ͢Ίͷ৭ • ΩϟϯηϧͳͲɺऑ͍ΞΫγϣϯʹରͯ͠࢖͏ • ࠼౓௿Ίͷ഑৭ʹ͢ΔͱΘ͔Γ΍͍͢ • ϘʔμʔΛڧ੍͢Δ͜ͱ΋ߟ͑ΒΕΔ

Slide 124

Slide 124 text

ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ#BDLHSPVOEUFYUDPMPS • എܠ΍จࣈ৭ • Primary colorͱಉ͡৭૬ͷࠇ΍നΛ࢖͏ͱ͍͍ײ͡ʹ·ͱ·Δ

Slide 125

Slide 125 text

ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ࡞Δʹ͸ʁ • ͍Ζ͍Ζͳ৭Λ࢖͏ͷ͸ͱͯ΋೉͍͠ͷͰ৭਺ΛߜΔ • PrimaryΛҰ৭ܾΊΔ • ͜Ε͸αʔϏεͷओ࣠ͷ৭ͳͷͰؤுܾͬͯΊΔ • v͔Βগ͠֎ͯ͠b, l, lt, sfͳͲΛ࢖͏ͷ͕ྲྀߦΓͬΆ͍ • secondary, text, background͸ಉ৭૬ผτʔϯ͔ΒબͿ

Slide 126

Slide 126 text

ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ࢖͍ํ • ΧϥʔύϨοτΛ࡞ͬͯ΋ͦͷ࢖͍ํΛܾΊͳ͍ͱҙຯ͕ͳ͍ • Primary colorΛΞΫηϯτఔ౓ʹ࢖͏+શମΛനܥͰ·ͱΊΔ • ͖ͬ͢ΓϞμϯɺμʔΫϞʔυରԠָ͕ • Primary colorΛଟ͘࢖͏ • ൥͘ͳΓ͕ͪͰඇৗʹ೉͍͠

Slide 127

Slide 127 text

ϏδϡΞϧσβΠϯͷίπ ΧϥʔύϨοτͷΠϝʔδ

Slide 128

Slide 128 text

ϏδϡΞϧσβΠϯͷίπ ΧϥʔύϨοτͷΠϝʔδ

Slide 129

Slide 129 text

ϏδϡΞϧσβΠϯͷίπ ৭ආ͚͍ͨ৭ • ਅͬࠇʢ#000000ʣ • Ͳͷ৭ʹରͯ͠࢖ͬͯ΋ίϯτϥετ͕ݫ͍͠ • จࣈ৭ʹ΋എܠ৭ʹ΋ίϯτϥετ͕ݫ͍͠ • ໌౓Λগ্͛ͯ͠ɺprimary colorͷ৭૬ʹدͤΔͱ

Slide 130

Slide 130 text

ϏδϡΞϧσβΠϯͷίπ ৭ආ͚͍ͨ৭ • ݪ৭ʢ#ff0000, #00ff00, #0000ffʣ • ࢖Θͳ͍ํ͕ྑ͍ • ઈରʹจࣈ৭Λ͜ͷ৭ʹͯ͠͸͍͚ͳ͍ • ϏϏουτʔϯ΋ʢ͜ͷ3ͭ΄ͲͰ͸ͳ͍͕ʣආ͚͍ͨ • গ͠࠼౓ΛԼ͛Δɾ໌౓Λ͍͡ΔͳͲͨ͠৭Λprimaryʹ࢖͏ͱྑ͍͔΋

Slide 131

Slide 131 text

ϏδϡΞϧσβΠϯͷίπ ৭৭ͷ࣋ͭΠϝʔδ • ৭ʹ͸͔ͦ͜Β࿈૝͞ΕΔΠϝʔδ͕͋Δ • άά͍ͬͯͩ͘͞ • ੺͕ΤωϧΪογϡɺ੨͕৴པɹͳͲ

Slide 132

Slide 132 text

ϏδϡΞϧσβΠϯͷίπ ϝϯλϧϞσϧ • Ϣʔβʔͷ͍࣋ͬͯΔɺද৅ʹର͢ΔߦಈͷΠϝʔδ • ʮ͜ͷݟͨ໨ͷύʔπ͸ϘλϯͳͷͰɺԡ͢ͱԿ͔ى͜Δʯ • ίϯϙʔωϯτͷݟͨ໨͸͜ΕΛ൓ө͍ͯͯ͠ཉ͍͠ • ίϯϙʔωϯτ͕ঢ়ଶΛ࣋ͭ৔߹΋൓ө͍ͯͯ͠ཉ͍͠ • ʮ൒ಁ໌ͳϘλϯ͸disabledͩʯ

Slide 133

Slide 133 text

ϏδϡΞϧσβΠϯͷίπ ϝϯλϧϞσϧೝ஌ෛՙ • ϝϯλϧϞσϧʹԊ͍ͬͯͳ͍UIύʔπ͸ɺͦͷҙຯΛೝ஌ͮ͠Β͍ • Ϣʔβʔʹೝ஌ෛՙΛڧ͍͍ͯΔঢ়ଶ • Կ͔ελϯμʔυͳදݱ͕͋Δ৔߹͸ͦΕʹै͏ • OSඪ४ͳͲ • ಉҰαʔϏε಺Ͱ͸ಉ͡΋ͷΛද͢ͷʹಉ͡දݱΛ࢖͏ʢ൓෮ݪଇʣ

Slide 134

Slide 134 text

ϏδϡΞϧσβΠϯͷίπ ϏδϡΞϧσβΠϯ·ͱΊ • σβΠϯͷ4ݪଇ • εϖʔγϯά • ͱʹ͔͘ద੾ͳ༨നΛ͚ͭͯ͋͛Δ • λΠϙάϥϑΟ • ৭ • ϝϯλϧϞσϧ

Slide 135

Slide 135 text

׬ ͓ΘΓͰ͢