UIデザイン講習会

2020/7/25にtraPで実施したUIデザイン講習会の資料です

Transcript

1. 6*σβΠϯߨशձ 6*σβΠϯͷߨशձͰ͢ @spa
2. @spa Ͱ͢ WebϑϩϯτΤϯυΛ͍ͯ͠Δ͜ͱ͕ଟ͍ ࿩͢ਓ
3. ͜ͷߨशձͰ͢Δ͜ͱ • UIσβΠϯલʹߟ͑Δ΂͖͜ͱ • UIΛσβΠϯ͢Δ࣌ͷϓϩηε • ۩ମతͳݟͨ໨Λ࡞Δ࣌ͷίπ
4. ͜ͷߨशձͰ͠ͳ͍͜ͱ • σβΠϯιϑτͷѻ͍ํ • ϑϩϯτΤϯυ࣮૷ͷํ๏ • όοΫΤϯυͷϞσϧͱͷରԠͷऔΓํ • ͳͲ
5. ͓͠ͳ͕͖ • UIͱ͸ʁ • UIσβΠϯͷϓϩηε • OOUIͷ࣮ફ • ϏδϡΞϧσβΠϯͷϙΠϯτ
6. 6*ͱ͸ʁ ᶃ 6*
   JT
   OBOJ
7. 
   6*ͱ͸ʁ ͍͔ͭ͘ʮUIʯΛࢥ͍ු͔΂ͯΈ͍ͯͩ͘͞
8. 
   6*ͱ͸ʁ 6*ͱ͸ʁ • Ϣʔβʔͱػց͕৘ใΛ΍ΓऔΓ͢Δࡍͷڥք • ৘ใͷ΍ΓͱΓʁ • ৘ใͷදࣔ • ৘ใʹର͢Δ / ৘ใΛ༻͍ͨԿ͔͠Βͷૢ࡞
9. 
   6*ͱ͸ʁ ঢ়ଶΛద੾ʹӅṭ/ू໿ͯ͠৘ใΛදࣔ
10. 
    6*ͱ͸ʁ ಺෦ॲཧΛӅṭͯ͠৘ใ΁ͷૢ࡞Λఏڙ
11. 
    6*ͱ͸ʁ 6*σβΠϯͰߟ͑Δ͜ͱ • ͲͷΑ͏ʹͯ͠৘ใΛΘ͔Γ΍͘͢ఏڙ͢Δ͔ʁ • ϏδϡΞϧͷදݱ͸ͦͷ1ͭͷखஈʹա͗ͳ͍ • ಺෦ͷ৘ใΛ͏·͘ந৅Խͯ͋͛͠Δඞཁ͕͋Δ • ৘ใ΁ͷૢ࡞͸༰қ͔ʁ • ୭΋SQLΛ௚ʹॻ͍ͯૢ࡞ͨ͘͠͸ͳ͍ʢઐ༻πʔϧ͸ผʣ
12. 
    6*ͱ͸ʁ Θ͔Γ΍͍͢6*ͷͨΊʹ • ఏڙ͞ΕΔ৘ใͷཧղ͕༰қͰ͋Δ • ద੾ͳߏ଄Խ: ਓؒͷ৺ཧΛߟྀ • ϢʔβʔͷϝϯλϧϞσϧʹԊͬͨ΋ͷʹ͢Δ • ʮ͜͜Λ͜͏ͨ͠Β͜͏ͳΔͩΖ͏ʯΛཪ੾Βͳ͍
13. 
    6*ͱ͸ʁ ϝϯλϧϞσϧͷྫ: ϘλϯͱϦϯΫ Button https://example.com
14. 
    6*ͱ͸ʁ ࢀߟ
    ώϡʔϦεςΟοΫ • 10 Usability Heuristics for User Interface Design • UIΛධՁ͢Δ࣌ͷج४ͷͻͱͭ • ద੾ͳϑΟʔυόοΫΛͤΑɺϢʔβʔͷΘ͔Δݴ༿Λ༻͍Αɺ… • ৄ͘͠͸ิ଍ࢿྉ΁
15. 6*σβΠϯͷϓϩηε ᶄ 1SPDFTT
    GPS
    EFTJHOJOH
    6*
16. 
    6*σβΠϯͷϓϩηε ͜ͷষͰ͸ • UIσβΠϯͷεςοϓΛ෼ղͯͬ͟͠ͱோΊͯΈΔ • ⚠ Ұ͔Β࡞Δ৔߹Λ૝ఆ͍ͯ͠·͢ • ⚠ WebΞϓϦέʔγϣϯΛ೦಄ʹஔ͍͍ͯ·͢ • ήʔϜͳͲͷ৔߹ʹ΋Ԡ༻͕ޮ͘ͱ͸ࢥ͏
17. 
    6*σβΠϯͷϓϩηε 6*σβΠϯͷϓϩηε ཁٻ෼ੳ Ϟσϧநग़ Ϗϡʔఆٛ ϏδϡΞϧ
18. 
    6*σβΠϯͷϓϩηε ཁٻ෼ੳ • UXʹؔΘΔ෦෼ʢUI͚ͩͷ࿩Ͱ͸ͳ͍ʣ • ࠓ͔Β࡞Δର৅ʹ͍ͭͯ • ͦΕΛϢʔβʔ͕࢖ͬͯͲ͏خ͍͠ͷ͔ • ͦΕͷଘࡏͰͲΜͳ໰୊Λղܾ͠Α͏ͱͯ͠Δͷ͔ • ʢ࡞Δଆͷ໨ઢͱͯ͠ʣͦΕ͕Ͳ͏͋ͬͯཉ͍͠ͷ͔ • ࠓճͷߨशձͷείʔϓ͔Β͸গ͠֎ΕΔ……
19. 
    6*σβΠϯͷϓϩηε ཁٻ෼ੳ • ϢʔεέʔεΛ૝ఆ͠ɺԿ͕ඞཁͱ͞ΕͯΔ͔ݕ౼ • Ϣʔβʔ΁ͷௐࠪɺ΃ϧιφʢର৅ਓ෺૾ʣΛઃఆ͠ࢥߟ࣮ݧɺ… • ࠷ऴతͳ໨ඪ͸ • Ϣʔβʔͷඞཁͱ͢Δ৘ใɾૢ࡞͕੔ཧͰ͖Δ͜ͱ • ͦΕΒͷϏδϡΞϧදݱͷํ޲ੑ͕੔ཧͰ͖Δ͜ͱ
20. 
    6*σβΠϯͷϓϩηε 6*ͱ69ͷҧ͍ • UI͸Ϣʔβʔ͕໨ʹ͢Δ৘ใͷදݱ • UX͸ͦͷ΋ͷͷ࢖༻Λ௨ͯ͡ಘͨମݧશମ • ͓ؾ࣋ͪͷੈքʢ೉͍͠ʣ • UIΛ௨ͯ͡ൃੜ͢Δ • αϙʔτରԠͳͲ΋UXʹؔΘΔཁҼ
21. 
    6*σβΠϯͷϓϩηε Ϟσϧநग़ • ཁٻʹ͓͍ͯඞཁʹͳͬͯ͘ΔΦϒδΣΫτΛநग़͢Δ࡞ۀ • ྫ͑͹traQͳΒϢʔβʔɺϝοηʔδɺνϟϯωϧͳͲ • DDDͰݴ͏ͱ͜Ζͷentityͱ͔value object • ৘ใͷந৅ԽΛ͢Δ • OOUIͷॴͰৄ͘͠આ໌͠·͢
22. 
    6*σβΠϯͷϓϩηε Ϗϡʔఆٛ • ΦϒδΣΫτΛͲͷΑ͏ʹදࣔ͢Δ͔ܾΊΔ • ϦετදࣔɺάϦουදࣔɺ୯ମͰͷදࣔ……ͳͲͳͲ • ͦΕΒͷදࣔͷ͞ΕํͷભҠؔ܎ΛܾΊΔ • ʮϫΠϠʔϑϨʔϜΛඳ͘ʯ࡞ۀʹ૬౰ • OOUIͷॴͰৄ͘͠આ໌͠·͢
23. 
    6*σβΠϯͷϓϩηε ϏδϡΞϧఆٛ • ·ͣϏδϡΞϧͷํ޲ੑΛܾΊΔ • Կ͔ͷҰ෦ͷ৔߹͸શମʹϚον͢ΔΑ͏ʹ • ϓϩμΫτͷՁ஋Λදݱ͢Δ৭΍ܗɾεϖʔγϯάͳͲΛߟ͑Δ • ʮϓϩμΫτ͕Ͳ͏͋ͬͯཉ͍͔͠ʯΛදݱͰ͖Δ
24. 
    6*σβΠϯͷϓϩηε ϏδϡΞϧఆٛ • ํ޲ੑʹԊ͏Α͏ʹύʔπͷϏδϡΞϧΛܾఆ͍ͯ͘͠ • ݸʑͷΦϒδΣΫτͷදݱ • Ϗϡʔͷදݱ • ͦͷଞඞཁͱͳΔίϯϙʔωϯτͷදݱ • ϢʔβʔͷϝϯλϧϞσϧ͔Βҳ୤͠ͳ͍޻෉͕ඞཁ
25. 
    6*σβΠϯͷϓϩηε ͦͷઌ΁
    σβΠϯγεςϜ • ࡞͍ͬͯ͘ͱ͋Δఔ౓ϏδϡΞϧදݱͷύλʔϯ͕Ͱ͖ͯ͘Δ • ͲͷΑ͏ͳΦϒδΣΫτɾϏϡʔʹͲͷΑ͏ͳػೳΛׂΓ౰ͯΔ͔ • ϏδϡΞϧʢ৭ͱ͔typographyͱ͔ͷʣͷϧʔϧ • ͜ΕΛνʔϜ಺Ͱڞ༗ͨ͠΋ͷ͕σβΠϯγεςϜ • σβΠϯγεςϜʹԊͬͨ΋ͷΛ࡞Δ • ίϯελϯτʹߋ৽͍ͯ͘͠
26. 
    6*σβΠϯͷϓϩηε ϓϩηεͷ·ͱΊ • ཁٻ෼ੳ • Ϟσϧநग़ • Ϗϡʔఆٛ • ϏδϡΞϧఆٛ: શମͷίϯηϓτ / ݸʑͷΦϒδΣΫτ΍Ϗϡʔ • σβΠϯγεςϜͷཱ֬
27. 
    6*σβΠϯͷϓϩηε 6* σβΠϯ ϏδϡΞϧ ৘ใͷઃܭ ৘ใͷઃܭͱϏδϡΞϧσβΠϯ͕૬ޓʹӨڹΛ༩͑ͭͭਐΉ
28. 006*ͷ࣮ફ ᶅ 006*
    JO
    QSBDUJDF
29. 
    006*ͷ࣮ફ ͜ͷষͰ͸ • UIͷઃܭࢦ਑ͷҰͭͰ͋Δ OOUI ͱ͍͏ख๏Λݟ͍ͯ͘ • ৘ใͷ੔ཧͷ؍఺Ͱ༗༻ • σβΠϯϓϩηεͷϞσϧநग़ʙϏϡʔఆٛʹ૬౰͢Δ෦෼ • ⚠ ྫʹ࢖͏traQ͸͋Δఔ౓؆ུԽ͞Εͨ΋ͷʹͳΓ·͢ • ಛʹDMɾΞΫςΟϏςΟͷଘࡏΛল͍͍ͯΔͱ͍͏఺ʹ஫ҙ͍ͯͩ͘͠͞
30. 
    006*ͷ࣮ફ ͜ͷষͷྲྀΕ • OOUIͱ͸ʁ • OOUIͷϓϩηε • ΦϒδΣΫτநग़ • Ϗϡʔఆٛ • ϨΠΞ΢τఆٛ • ϨΠΞ΢τύλʔϯʹ͍ͭͯ
31. 
    006*ͷ࣮ફ 006*
    ͱ͸ • ʮΦϒδΣΫτࢦ޲UIʯͷ͜ͱ • ͋Δ΋ͷʢΦϒδΣΫτʣʹରͯ͠ૢ࡞Λߦ͏ελΠϧͷUI • ରٛޠ: λεΫࢦ޲UI • ΦϒδΣΫτࢦ޲ϓϩάϥϛϯά……ʁ • ͍ۙ
32. 
    006*ͷ࣮ફ 006*
    WT
    λεΫࢦ޲ • OOUI : ໊ࢺ → ಈࢺ • λεΫʢ΍Γ͍ͨ͜ͱʣΛΦϒδΣΫτ΁ͷૢ࡞ʢΞΫγϣϯʣͰ ୡ੒͢Δ • λεΫࢦ޲: ಈࢺ → ໊ࢺ • λεΫͷશମ૾͕نఆ͞Ε͍ͯͯɺͦΕʹର৅Λ౰ͯ͸ΊΔ
33. 
    006*ͷ࣮ફ έʔΩʹݟΔOOUI
34. 
    006*ͷ࣮ફ 006*ৄࡉ • ಉ͡छྨͷΦϒδΣΫτ͕৭ʑͳํ๏Ͱදࣔ͞ΕΔ • γϯάϧϏϡʔ • ίϨΫγϣϯϏϡʔ • ΦϒδΣΫτ΁ͷΞΫγϣϯ͕ը໘ભҠΛੜΉ৔߹͕͋Δ • ྫ: ϙέϞϯͷಓ۩
35. 
    006*ͷ࣮ફ 006*ͷϓϩηε • ΦϒδΣΫτநग़ • ϏϡʔɾφϏήʔγϣϯఆٛ • ϨΠΞ΢τઃܭ Ϟσϧநग़ Ϗϡʔઃܭ ^ USB24ΛݟͯΈΔ
36. 
    006*ͷ࣮ફ ΦϒδΣΫτநग़ • ચ͍ग़ͨ͠λεΫ͔ΒΦϒδΣΫτͱଐੑɾΞΫγϣϯΛநग़ • ΦϒδΣΫτ͸໊ࢺʹͳ͍ͬͯΔ • Կ͔ͷ֓೦ͷΠϯελϯεͳΒɺద౰ͳந৅ԽΛ͢Δ • म০͸ଐੑͰ͋ΔՄೳੑ͕ߴ͍ • ྫ: ʮ3೥A૊ͷߴւ͞Μʯ →ΦϒδΣΫτʮֶੜʯͱͦͷଐੑʮֶ೥ʯʮ૊ʯ
37. 
    006*ͷ࣮ફ ΦϒδΣΫτநग़
    
    USB2ͷྫ • ૝ఆ͞ΕΔλεΫͷҰ෦ɹ໊ࢺͱϢʔβʔओମͷಈࢺΛڧௐͨ͠ #a ͷ ϝοηʔδҰཡ ΛݟΔ #a/b ͷԼʹ #a/b/c Λ ࡞੒͢Δ ϝοηʔδ Λ ϐϯ͢Δ @spa ʹ Ͷ͜ Λ͚ͭΔ ϐϯཹΊϝοηʔδ ʹ ελϯϓ Λ ͚ͭΔ ϝϯγϣϯ ͞ΕΔͱ ௨஌͕͘Δ
38. 
    006*ͷ࣮ફ ΦϒδΣΫτநग़
    
    USB2ͷྫ • λεΫ͔ΒΦϒδΣΫτʹ૬౰͢Δ΋ͷΛந৅Խ • ௨஌ɾϝϯγϣϯ͸ͦΕʹରͯ͠ૢ࡞ΛՃ͑Δ΋ͷͰ͸ͳ͍ͷͰআ֎ ϝοηʔδ νϟϯωϧ Ϣʔβʔ λά ελϯϓ
39. 
    006*ͷ࣮ફ ΦϒδΣΫτநग़
    
    USB2ͷྫ • ΦϒδΣΫτ͕ܾ·ͬͨΒͦΕΒͷଐੑΛߟ͑Δ • DBεΩʔϚͷΑ͏ʹ͸ͤͣɺϢʔβʔͷؔ৺ϕʔεͰϞσϦϯά͢Δ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾ౤ߘ͞Εͨϝοηʔδ ϝοηʔδ ɾ಺༰ ɾ౤ߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ
40. 
    006*ͷ࣮ફ ΦϒδΣΫτநग़
    
    USB2ͷྫ • ΦϒδΣΫτͷؔ܎ੑΛϞσϦϯά͢Δ • ͜͜Ͱ΋Ϣʔβʔͷؔ৺ϨϕϧͰͷந৅ԽͰे෼ ϝοηʔδ ɾ಺༰ ɾ౤ߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾ౤ߘ͞Εͨϝοηʔδ
41. 
    006*ͷ࣮ફ λεΫΛ൓өͨ͠traQͷؔ܎ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾ౤ߘ͞Εͨϝοηʔδ ϝοηʔδ ɾ಺༰ ɾϐϯཹΊ͞Ε͍ͯΔ͔ ɾ౤ߘઌνϟϯωϧ ɾ౤ߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ Ϣʔβʔ ɾεΫϦʔϯ *% ɾද໊ࣔ ɾ෇͚ΒΕ͍ͯΔλά ελϯϓ λά
42. 
    006*ͷ࣮ફ ΦϒδΣΫτநग़
    
    USB2ͷྫ • ΦϒδΣΫτʹରͯ͠ՄೳͳΞΫγϣϯΛఆٛ͢Δ • جຊ͸Create, ( Read, ) Update, Delete νϟϯωϧ ɾ ɾࢠνϟϯωϧΛ௥Ճ͢Δ ɾ౤ߘ͢Δ ɾ࡟আ͢Δ ɾϐϯཹΊ͢Δ  ղআ͢Δ ɾελϯϓΛ͚ͭΔ  ֎͢ ϝοηʔδ ɾ
43. 
    006*ͷ࣮ફ ΞΫγϣϯΛఆٛͨ͠ਤ ʢλάͱελϯϓ͸ඪ४ͷCRUDΛαϙʔτʣ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾ਌νϟϯωϧ ɾ౤ߘ͞Εͨϝοηʔδ ɾࢠνϟϯωϧΛ௥Ճ͢Δ ɾ< ؅ཧऀ > ௥Ճ͢Δ ɾ< ؅ཧऀ > ࡟আ͢Δ ϝοηʔδ ɾ಺༰ ɾϐϯཹΊ͞Ε͍ͯΔ͔ ɾ౤ߘઌνϟϯωϧ ɾ౤ߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ ɾ౤ߘ͢Δ ɾ< ౤ߘऀ > ࡟আ͢Δ ɾ< ౤ߘऀ > ฤू͢Δ ɾϐϯཹΊ͢Δ  ղআ͢Δ ɾελϯϓΛ͚ͭΔ  ֎͢ Ϣʔβʔ ɾεΫϦʔϯ *% ɾද໊ࣔ ɾ෇͚ΒΕ͍ͯΔλά ɾ< ؅ཧऀ > ࡞੒͢Δ ɾ< ؅ཧऀ > ࡟আ͢Δ ɾ< ࣗ෼ > ϓϩϑΟʔϧมߋ ɾλάΛ͚ͭΔ ελϯϓ λά
44. 
    006*ͷ࣮ફ ΦϒδΣΫτநग़
    
    ·ͱΊ • λεΫ͔ΒΦϒδΣΫτީิΛൈ͖ग़͢ • ީิΛ๬·ཻ͍͠౓Ͱந৅Խ͢Δ • ΋ͱ΋ͱͷλεΫͱݟൺ΂ͭͭ • ΦϒδΣΫτͷଐੑɾؔ࿈Λݕ౼ • ΦϒδΣΫτʹର͢ΔΞΫγϣϯΛݕ౼
45. 
    006*ͷ࣮ફ ΦϒδΣΫτநग़
    
    OPUF • ͜ΕΒͷεςοϓͰ࢓༷͕ݻ·͍ͬͯ͘ • ΞϓϦέʔγϣϯͰ͸ Կ͕ݟ͑ͯ Կ͕Ͱ͖Δʁ ΛܾΊͨ • ٯʹλεΫɾϢʔεέʔεͷݕ౼ʹ໭Δ͜ͱ΋ • QͷྫͰ͸ΞΫγϣϯͷείʔϓʹݴٴͨ͠ • ͜Ε͸΋ͱͷཁٻ෼ੳஈ֊Ͱ΍͍ͬͯͳ͍͜ͱͩͬͨ
46. 
    006*ͷ࣮ફ ΦϒδΣΫτநग़
    
    OPUF • ੾Γग़ͨ͠΋ͷΛϝΠϯΦϒδΣΫτͱ΋͍͏ • ࠓճ͸ॏཁͰͳ͍ΦϒδΣΫτΛଐੑͱͯ͠ѻͬͨ • ݁ՌͷϞσϧ͸ඞͣ͠΋αʔόʔαΠυͳͲɺ࣮૷্ͷϞσϧͱ͸Ұ க͠ͳ͍ • දࣔલʹద౰ʹ৘ใΛม׵ͯ͋͛͠Δඞཁ͕͋Δ͔΋ • ࣮͸αʔόʔ/ΫϥΠΞϯτϞσϧͷAPIͬͯΠϯλʔϑΣΠεͰ͢ΑͶ
47. 
    006*ͷ࣮ફ Ϗϡʔఆٛ • ΦϒδΣΫτΛͲ͏ݟͤΔ͔ʢϏϡʔʣͷఆٛΛߦ͏εςοϓ • ·࣮ͩࡍͷϨΠΞ΢τ͸͠ͳ͍ • ϞσϦϯάͨؔ͠܎ΛϏϡʔͷભҠؔ܎ʹམͱ͠ࠐΉ
48. 
    006*ͷ࣮ફ Ϗϡʔͷछྨ • ίϨΫγϣϯϏϡʔ • ෳ਺ͷΦϒδΣΫτΛҰཡදࣔ • શମ૾Λ೺Ѳ͍ͨ͠΋ͷ΍ɺλΠϜϥΠϯͳͲ • γϯάϧϏϡʔ • ͦͷΦϒδΣΫτͻͱͭʹ͍ͭͯɺৄࡉ৘ใΛදࣔ • ίϨΫγϣϯϏϡʔ͔ΒؾʹͳΔ΋ͷͷγϯάϧϏϡʔʹભҠ
49. 
    006*ͷ࣮ફ ίϨΫγϣϯϏϡʔ / γϯάϧϏϡʔ
50. 
    006*ͷ࣮ફ Ϗϡʔͷఆٛ • γϯάϧɾίϨΫγϣϯ྆ํͷϏϡʔΛͱΓ͋͑ͣ࡞Δ • ίϨΫγϣϯ͔ΒγϯάϧʹભҠͰ͖Δ • ϞσϦϯά݁Ռͷؔ܎ʹԠͯ͡ભҠؔ܎Λ෇͚଍͢
51. 
    006*ͷ࣮ફ Ϗϡʔͷఆٛ • ࠷ऴతʹϚʔδɾলུ͞ΕΔ৔߹͕͋Δ • ඞཁʹԠͯ͡ߟ͑Ε͹OKͳͷͰɺͱΓ͋͑ͣ͸શͯॻ͖ग़͢ • ໌Β͔ʹ།Ұ͔͠ଘࡏ͠ͳ͍ΦϒδΣΫτ͸౰વίϨΫγϣϯ ϏϡʔΛ࣋ͨͳ͍
52. 
    006*ͷ࣮ફ Ϗϡʔͷఆٛ
    
    USB2ͷྫ • νϟϯωϧ - ϝοηʔδ͸ 1:* ͷؔ܎ʹͳ͍ͬͯΔ • νϟϯωϧͷγϯάϧϏϡʔ͔ΒϝοηʔδͷίϨΫγϣϯϏϡʔ ʹભҠͯ͠ཉ͍͠ • ϝοηʔδ - Ϣʔβʔ͸ *:1 ͷؔ܎ʹͳ͍ͬͯΔ • Ϣʔβʔ͔ΒͦͷϢʔβʔ͕౤ߘͨ͠ϝοηʔδʹભҠ͢Δ……ʁ
53. 
    006*ͷ࣮ફ Ϗϡʔͷఆٛ
    
    USB2ͷྫ • ؆ུԽͨؔ͠܎ͷਤ ελϯϓ νϟϯωϧ ϝοηʔδ Ϣʔβʔ λά
54. 
    006*ͷ࣮ફ Ϗϡʔͷఆٛ
    
    USB2ͷྫ • ϏϡʔͷભҠؔ܎Λߟ͑ͯΈΔ • Ϣʔβʔ͔ΒͦͷϢʔβʔ͕౤ߘͨ͠ϝοηʔδ͸Ҿ͚ͳ͍ͷͰআ֎ νϟϯωϧ ίϨΫγϣϯ ϝοηʔδ ίϨΫγϣϯ Ϣʔβʔ ίϨΫγϣϯ νϟϯωϧ γϯάϧ ϝοηʔδ γϯάϧ Ϣʔβʔ γϯάϧ
55. 
    006*ͷ࣮ફ Ϗϡʔͷఆٛ
    
    USB2ͷྫ • ϝοηʔδͷγϯάϧϏϡʔΛίϨΫγϣϯϏϡʔʹ౷߹ νϟϯωϧ ίϨΫγϣϯ ϝοηʔδ ίϨΫγϣϯ Ϣʔβʔ ίϨΫγϣϯ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ
56. 
    006*ͷ࣮ફ Ϗϡʔͷఆٛ
    
    USB2ͷྫ • ϝοηʔδͷίϨΫγϣϯϏϡʔΛνϟϯωϧͷγϯάϧϏϡʔͱ͠ ͯ࢖͏ʢ࣮ࡍͷtraQʹ͍ۙʣ νϟϯωϧ ίϨΫγϣϯ ϝοηʔδ ίϨΫγϣϯ Ϣʔβʔ ίϨΫγϣϯ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ 
57. 
    006*ͷ࣮ફ ϧʔτφϏήʔγϣϯݕ౼ • ಛʹॏཁͦ͏ͳΦϒδΣΫτΛϧʔτφϏήʔγϣϯʹ഑ஔ • ϞόΠϧΞϓϦͳΒBottomBarͱ͔TabBarͱ͔ • ࢥߟͷى఺ͱͳΔʢ㲈ભҠઌ͕ଟ͍ʣΦϒδΣΫτ͕ྑ͍ • ΞϓϦέʔγϣϯશମͰ༏ઌ͞ΕΔ෺͕͋Ε͹ͦΕͰ΋
58. 
    006*ͷ࣮ફ ϧʔτφϏήʔγϣϯͷϙΠϯτ • ΞϓϦέʔγϣϯΛʮ΋ͷʯ͕ฒΜͰ͍Δ΋ͷͱͯ͠ߟ͑Δ • → ػೳΛφϏήʔγϣϯʹฒ΂Δͷ͸ѱख • ྫ֎: ʢର৅ΦϒδΣΫτ͕ࣗ໌ͳ৔߹ͷʣݕࡧɾઃఆ • φϏήʔγϣϯ߲໨Λબ୒ͨ͠ΒΦϒδΣΫτͷίϨΫγϣϯϏϡʔ ʹભҠ͢ΔʢίϨΫγϣϯϏϡʔ͕͋Δ৔߹ʣ
59. 
    006*ͷ࣮ફ traQͷϧʔτφϏήʔγϣϯ + νϟϯωϧͷίϨΫγϣϯϏϡʔ
60. 
    006*ͷ࣮ફ ϨΠΞ΢τઃܭ • ࣮ࡍʹݟ͑Δը໘ͷઃܭ • ͍ΘΏΔϫΠϠʔϑϨʔϜ • ϏϡʔΛը໘ʹͲͷΑ͏ʹ഑ஔ͢Δ͔ͷݕ౼ • 1ը໘ʹෳ਺Ϗϡʔ͕͋ͬͯ΋OK • ϞόΠϧͱPCͰग़͠෼͚ͯ͠΋OK
61. 
    006*ͷ࣮ફ ϨΠΞ΢τύλʔϯ • ࢹ֮දݱ͸ύλʔϯཱ͕͍֬ͯ͠ΔͷͰै͓ͬͯ͘ͱྑ͍ • φϏήʔγϣϯͷදࣔ • શମతͳը໘ϨΠΞ΢τ • ίϨΫγϣϯදࣔ • ΦϒδΣΫτͷCRUD • Ϣʔβʔͷೝ஌ෛՙ͕Լ͕Δ
62. 
    006*ͷ࣮ફ Ϗϡʔ഑ஔͷύλʔϯ • جຊతʹ্/ࠨ͕֓ཁɺԼ/ӈ͕ৄࡉͱ͍͏ྲྀΕ͕͋Δ • υϦϧμ΢ϯͷํ޲ੑ • ฒ΂ͯஔ͚ͳ͍৔߹͸ը໘ભҠ • ࠨ͔ΒӈʹϓογϡͰ͖Δͱ͏Ε͍͠ • ద੾ʹग़͠෼͚͠Α͏
63. 
    006*ͷ࣮ફ ఆ൪ը໘ύλʔϯ • μϒϧϖΠϯ: ࠨʹίϨΫγϣϯϏϡʔ + ӈʹγϯάϧϏϡʔ
64. 
    006*ͷ࣮ફ ఆ൪ը໘ύλʔϯ • γϯάϧϖΠϯ: ίϨΫγϣϯˠγϯάϧΛը໘ભҠͰରԠ
65. 
    006*ͷ࣮ફ φϏήʔγϣϯͷύλʔϯ • ϞόΠϧ͸Լ͔υϩϫʔʢφϏήʔγϣϯͷ৔߹ࠨ͕ଟ͍ʣ
66. 
    006*ͷ࣮ફ φϏήʔγϣϯͷύλʔϯ • PC͸্͔ࠨ
67. 
    006*ͷ࣮ફ ίϨΫγϣϯϏϡʔͷύλʔϯ • Ϧετදࣔ • άϦουදࣔ • ͦͷଞ • ϚοϐϯάͳͲ • Material Design Guideline ͳͲ͕ͱͯ΋ࢀߟʹͳΔ
68. 
    006*ͷ࣮ફ ίϨΫγϣϯϏϡʔͷ৭ʑ Ϧετ άϦου Ϛοϐϯά
69. 
    006*ͷ࣮ફ ίϨΫγϣϯϏϡʔΞΠςϜͷ৭ʑ Ϧετ Χʔυ
70. 
    006*ͷ࣮ફ γϯάϧϏϡʔͷύλʔϯ • ͦͷ΋ͷͷ৘ใͷΈΛදࣔ͢Δύλʔϯ • ଞΦϒδΣΫτͷίϨΫγϣϯΛϓϨϏϡʔతʹදࣔ͢Δύλʔϯ • جຊ͸ԡͨ͠ΒભҠ͕ൃੜ • ಺෦ʹଞΦϒδΣΫτͷίϨΫγϣϯΛؚΉύλʔϯ • ଐੑͷදݱͱͯ͠༻͍Δ • ଞͷΦϒδΣΫτͷίϨΫγϣϯͷΈΛؚΉύλʔϯ
71. 
    006*ͷ࣮ફ γϯάϧϏϡʔͷύλʔϯ
    
    USB2ͷྫ • ϢʔβʔϞʔμϧ͸࣍ͷΑ͏ͳදࣔͷ͞Εํ͕͋Δ • ϢʔβʔΦϒδΣΫτͷৄࡉදࣔ • Ϣʔβʔʹ͚ͭΒΕͨλάͷίϨΫγϣϯΛ಺แͨ͠දࣔ • Ϣʔβʔʹ͚ͭΒΕͨάϧʔϓͷίϨΫγϣϯΛ಺แͨ͠දࣔ • ͜ΕΒΛλϒόʔͰ੾Γସ͍͑ͯΔʢকདྷతͳ֦ு΋ݟਾ͑ͯʣ
72. 
    006*ͷ࣮ફ ϢʔβʔͷγϯάϧϏϡʔʢຒΊࠐΈϏϡʔͳ͠ / ͋Γʣ
73. 
    006*ͷ࣮ફ ϨΠΞ΢τͷఆٛ
    
    USB2ͷྫ • ϢʔβʔϞʔμϧ͸࣍ͷΑ͏ͳදࣔͷ͞Εํ͕͋Δ • ϢʔβʔΦϒδΣΫτͷৄࡉදࣔ • Ϣʔβʔʹ͚ͭΒΕͨλάͷίϨΫγϣϯΛ಺แͨ͠දࣔ • Ϣʔβʔʹ͚ͭΒΕͨάϧʔϓͷίϨΫγϣϯΛ಺แͨ͠දࣔ • ͜ΕΒΛλϒόʔͰ੾Γସ͍͑ͯΔʢকདྷతͳ֦ு΋ݟਾ͑ͯʣ
74. 
    006*ͷ࣮ફ ఴ෇ϑΝΠϧҰཡΛ͚ͭͨtraQͷϏϡʔߏ଄ νϟϯωϧ ίϨΫγϣϯ  Ϧετ ϝοηʔδ ίϨΫγϣϯ  Ϧετ ఴ෇ϑΝΠϧ ίϨΫγϣϯ  άϦου λά ίϨΫγϣϯ  Ϧετ Ϣʔβʔ ίϨΫγϣϯ  Ϧετ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ ϝΠϯφϏήʔγϣϯ ϞόΠϧ࣌υϩϫʔ  NPEBM NPEBM
75. 
    006*ͷ࣮ફ ΞΫγϣϯͷ഑ஔ
    • جຊతʹର৅ͱͳΔΦϒδΣΫτͷۙ͘ʹஔ͘ • ৽ن࡞੒ͷ৔߹͸ίϨΫγϣϯϏϡʔΛର৅ͱΈͳ͢ • ྫ: • Χʔυදࣔ͞ΕͯΔ΋ͷʹର͢Δૢ࡞ˠΧʔυͷத • Ϧετදࣔ΁ͷ৽ن௥ՃˠϦετશମͷӈ্ͳͲ
76. 
    006*ͷ࣮ફ ΞΫγϣϯͷ഑ஔ
    
    $SFBUF • ৽ن࡞੒͸ίϨΫγϣϯϏϡʔʹ͔͠ஔ͚ͳ͍ • ৽ن࡞੒ϘλϯΛԡ͢ͱϞʔμϧͰ಺༰ΛٻΊΒΕΔύλʔϯ • ύϥϝʔλʔύλʔϯ • ೖྗཝ͕ৗʹԼʹଘࡏ͍ͯͯ͠ɺೖྗˠܾఆͰ৽ن࡞੒ • ϓϨʔεϗϧμʔύλʔϯ
77. 
    006*ͷ࣮ફ ύϥϝʔλʔ / ϓϨʔεϗϧμʔ ύλʔϯ
78. 
    006*ͷ࣮ફ ΞΫγϣϯͷ഑ஔ
    
    6QEBUF • ߋ৽͸γϯάϧϏϡʔͰߦ͏ͷ͕جຊ • ಺༰͕શͯมߋՄೳͰɺࣗಈอଘ͞ΕΔύλʔϯ • ઃఆͳͲͰ࢖ΘΕΔ • ϘλϯΛԡ͢ͳͲͰฤूϞʔυʹҠߦ͠ɺ໌ࣔతʹอଘ͢Δύλʔϯ • ϓϩϑΟʔϧฤूͷΠϝʔδ
79. 
    006*ͷ࣮ફ ΞΫγϣϯͷ഑ஔ
    
    %FMFUF • ࡟আ͸γϯάϧͰ΋ίϨΫγϣϯͰ΋Մೳ • ࡟আͯ͠ྑ͍͔ͷ֬ೝΛग़͢ύλʔϯ • ࡟আͷऔΓফ͕͠Ͱ͖Δύλʔϯ • ίϨΫγϣϯϏϡʔʹฤूϞʔυΛ࣋ͨͤΔύλʔϯ • iOSͷTableView
80. 
    006*ͷ࣮ફ ίϨΫγϣϯͷϑΟϧλϦϯά • จࣈྻݕࡧ • ଐੑϑΟϧλ • ଐੑΛΦϒδΣΫτͱ͖ͯ͠Βͳ͍ͱ͍͚ͳ͍͔΋͠Εͳ͍ • શͯදࣔ ΛݸผͷΞΠςϜͱ͓͍ͯͨ͠ํ͕ྑ͍ • ιʔτ
81. 
    006*ͷ࣮ફ 006*ͷ·ͱΊ w ΦϒδΣΫτநग़
    w λεΫ͔ΒͷΦϒδΣΫτͷద੾ͳந৅Խ
    
    ଐੑ
    
    ΞΫγϣϯ
    w Ϗϡʔఆٛ
    w γϯάϧϏϡʔ
    
    ίϨΫγϣϯϏϡʔ
    
    ભҠؔ܎
    w ϨΠΞ΢τఆٛ
    w σβΠϯύλʔϯʹ͸جຊతʹै͓ͬͯ͘΂͖
82. ϏδϡΞϧσβΠϯ ᶆ 7JTVBM
    EFTJHO
83. 
    ϏδϡΞϧσβΠϯͷίπ ͜ͷষͷྲྀΕ • ໨ʹݟ͑Δ࠷ऴܗΛσβΠϯ͢Δͱ͖ͷίπʹ͍ͭͯͰ͢ • σβΠϯͷ4ݪଇ • εϖʔγϯά • λΠϙάϥϑΟ • ৭ • ϝϯλϧϞσϧ
84. 
    ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ • σβΠϯɾϨΠΞ΢τͰԡ͑͞Δ΂͖ݪଇ • ۙ઀: ؔ܎͢Δ৘ใ͸͚ۙͮΔ • ੔ྻ: Ұ࿈ͷ৘ใΛ੔ྻͤͯ͞දࣔ͢Δ • ରൺ: ॏཁͳ৘ใͱͦ͏Ͱͳ͍৘ใͷίϯτϥετΛ͚ͭΔ • ൓෮: ಉҰͷϞνʔϑΛ܁Γฦ͠༻͍Δ
85. 
    ϏδϡΞϧσβΠϯͷίπ ۙ઀
    1SPYJNJUZ ؔ܎͠ͳ͍৘ใ͸ԕ͚͟Δɺؔ܎͢Δ৘ใ͸͚ۙͮΔ ੔ྻ "MJHONFOU ݟ͑ͳ͍ઢʹἧ͑ͯ഑ஔ͢Δ͜ͱͰ৘ใͷؔ࿈ੑΛڧௐ ରൺ $POUSBTU ڧௐ͍ͨ͠৘ใ͸େ͖͞ɾ৭Λڧ͘දࣔ͢Δ ൓෮ 3FQFUJUJPO ಛ௃త  ౷Ұతͳݟͨ໨ͷ΋ͷΛ܁Γฦ͠༻͍Δ
86. 
    ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ
    ۙ઀ ׬શผΞΠςϜˠ޿͍Ϛʔδϯ ݟग़͠ͱຊจͷ۠੾Γˠڱ͍Ϛʔδϯ
87. 
    ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ
    ੔ྻ ্ἧ͑ ྆୺ἧ͑ ࠨἧ͑
88. 
    ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ
    ੔ྻ • ੔ྻ͕όϥόϥͩͱݟͮΒ͍ • Լͷྫ͸˔͕શମॎதԝɺλΠτϧͱจষ͕ࠨɺจষ͕྆୺தԝ ݟͮΒ͍
89. 
    ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ
    ରൺ • ॏཁͳ৘ใ͸ڧௐɺͦ͏Ͱͳ͍৘ใ͸໨ཱͨͳ͘ • େ͖͞ɺ৭ɺଠ͞ɺεϖʔγϯάͰௐ੔
90. 
    ϏδϡΞϧσβΠϯͷίπ ৭ɾϑΥϯταΠζɾϑΥϯτ΢ΣΠτͷมߋΛͳͯ͘͠ΈΔ
91. 
    ϏδϡΞϧσβΠϯͷίπ σβΠϯͷݪଇ
    ൓෮ • ಉҰͷϞνʔϑΛ܁Γฦ͢ • ಛʹΞϓϦέʔγϣϯͷ৔߹ɺಉҰͷڍಈΛ͢Δίϯϙʔωϯτͷ ݟͨ໨Λ౷Ұ͢΂͖ Send Follow Send Follow OK! NG
92. 
    ϏδϡΞϧσβΠϯͷίπ ήγϡλϧτ৺ཧֶ • ਓؒ͸·ͣશମͷߏ଄ʢήγϡλϧτʣΛೝࣝ͢Δ • ήγϡλϧτͱ৘ใͷ࿦ཧతߏ଄͕Ұக͍ͯ͠Δͱخ͍͠ • ۙ઀ͷཁҼ: ͍ۙ΋ͷΛ·ͱ·Γͱͯ͠ଊ͑Δ → ۙ઀ݪଇ • ྨಉͷཁҼ: ࣅͯΔ΋ͷΛ·ͱ·Γͱͯ͠ଊ͑Δ → ൓෮ݪଇ • ด߹ͷཁҼɺྑ͍࿈ଓͷཁҼͱ͍͏ͷ΋͋Δ
93. 
    ϏδϡΞϧσβΠϯͷίπ ۙ઀ͷཁҼ ྨಉͷཁҼ ด߹ͷཁҼ Α͍࿈ଓͷཁҼ
94. 
    ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά • Կ͔ͱԿ͔ͷؒͷۭനͷऔΓํʹ͍ͭͯ • ۙ઀ݪଇʹରԠ͢Δߏ੒ཁૉ • CSSϕʔεͩͱɺେࡶ೺ʹೋͭʹ෼͔ΕΔ • ίϯϙʔωϯτؒͷۭനʢmarginʣ • ίϯϙʔωϯτͱͦͷࢠཁૉͷؒͷۭനʢpaddingʣ
95. 
    ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά • Կ͔ͱԿ͔ͷؒͷۭനͷऔΓํʹ͍ͭͯ • ۙ઀ݪଇʹରԠ͢Δߏ੒ཁૉ • CSSϕʔεͩͱɺେࡶ೺ʹೋͭʹ෼͔ΕΔ • ίϯϙʔωϯτؒͷۭനʢmarginʣ • ίϯϙʔωϯτͱͦͷࢠཁૉͷؒͷۭനʢpaddingʣ
96. 
    ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά
    
    NBSHJOͱQBEEJOH margin padding
97. 
    ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ • ༨ന͸े෼ʹɺ͋ΒΏΔ΋ͷʹઃఆ͢Δ • ځ۶/༨༟͕ͳ͍ͳͱײͨ͡ΒύσΟϯάΛ͚ͭΔ͜ͱΛݕ౼ • Ұ؏ੑͷ͋ΔεϖʔγϯάΛ͢Δ • ੔ྻݪଇͱؔ࿈͕ਂ͍ • ༨നͷऔΓํͰҹ৅ΛίϯτϩʔϧͰ͖Δ • Ұ౓ʹೖΔ৘ใྔΛௐ੔͢Δ
98. 
    ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ
    
    ༨ന͸े෼ʹऔΔ • marginɾpadding͸ຊจจࣈαΠζͷ൒෼͙Β͍͸ཉ͍͠ • ࠨͷྫ͸ߦؒͷҰ؏ੑ΋่Ε͍ͯͯਏ͍ λΠτϧλΠτϧ ৘ʹᑫͤ͞͹ྲྀ͞ΕΔɻஐʹಇ͚͹ ཱ͕֯ͭɻͲ͜΁ӽͯ͠΋ॅΈʹ͘ ͍ͱޛͬͨ࣌ɺࢻ͕ੜΕͯɺը͕ग़ དྷΔɻͱ͔͘ʹਓ λΠτϧλΠτϧ ৘ʹᑫͤ͞͹ྲྀ͞ΕΔɻஐʹಇ ͚͹ཱ͕֯ͭɻͲ͜΁ӽͯ͠΋ ॅΈʹ͍͘ͱޛͬͨ࣌ɺࢻ͕ੜ
99. 
    ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ
    
    Ұ؏ੑͷ͋Δεϖʔγϯά • ۭനͷେ͖͞ɾͲ͜ʹۭനΛஔ͔͘ʹ͍ͭͯҰ؏ͨ͠ϧʔϧ͕͋Δͱ ྑ͍ • ΢Οϯυ΢શମͷύσΟϯά • λΠτϧͱຊจͷؒͷϚʔδϯɹͳͲ • Կ͔୯ҐΛܾΊͯͦΕͷഒ਺ʹ͢Δͱ೰Ήඞཁ͕ݮΔ • جຊ8pxͷഒ਺ɺඍௐ੔͍ͨ͠ͱ͖͸4pxͷഒ਺ɹͳͲ
100. 
     ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ
     
     Ұ؏ੑͷ͋Δεϖʔγϯά • ϧʔϧΛܾΊΔࡍ͸ɺର৅ͱͳΔίϯϙʔωϯτͷཻ౓Λߟྀ͢Δ • େ͖͍ॱʹ • ηΫγϣϯؒͷεϖʔε • ΦϒδΣΫτؒͷεϖʔε • ίϯϙʔωϯτ಺ͷεϖʔε • ্ԼࠨӈͰ౷Ұͨ͠༨നΛऔΔ
101. 
     ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ
     
     Ұ؏ੑͷ͋Δεϖʔγϯά • Material Design Guidelineͷྫʢ⚠marginͳͲͷ༻๏͕͜ͷࢿྉͱҟͳΔʣ (VUUFS EQ
     
     EQ 7FSUJWBM
     .BSHJO EQ
     
     EQ )PSJ[POUBM
     .BSHJO
102. 
     ϏδϡΞϧσβΠϯͷίπ εϖʔγϯάͷϙΠϯτ
     
     εϖʔεͷ༩͑Δҹ৅ • εϖʔεΛେ͖͘։͚Δ • ΏͬͨΓͱͨ͠ҹ৅ • ίϯςϯπʹूத͍ͤͨ࣌͞ • εϖʔεΛͦ͜·Ͱ։͚ͳ͍ • ଟ͘ͷ৘ใ͔Βબ͹ͤΔ࣌
103. 
     ϏδϡΞϧσβΠϯͷίπ ྫ: ϝσΟΞϓϥοτϑΥʔϜʢτοϓʣ https://note.com/
104. 
     ϏδϡΞϧσβΠϯͷίπ ྫ: ϝσΟΞϓϥοτϑΥʔϜʢίϯςϯπʣ https://note.com/
105. 
     ϏδϡΞϧσβΠϯͷίπ εϖʔγϯά
     
     ·ͱΊ • marginͱpaddingͷ2ͭͷύλʔϯͷ༨നͷऔΓํ͕͋Δ • ͋ΒΏΔཁૉʹద੾ͳ༨നΛͱΔʂ • Ұ؏ੑͷ͋ΔεϖʔγϯάϧʔϧΛ࣋ͭ • ίϯϙʔωϯτͷཻ౓͝ͱʹద੾ͳ༨നΛ
106. 
     ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ • จࣈͷදࣔͷ࢓ํͷ͜ͱ • େ͖͞ɺ৭ɺଠ͞ɺϑΥϯτɺจࣈؒɺߦؒɺஈམؒεϖʔε…… • ରൺݪଇɾۙ઀ݪଇʹରԠ͢Δ
107. 
     ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ
     
     จࣈαΠζ • ࠷΋؆୯ʹ৘ใʹڧऑΛ͚ͭΔ͜ͱ͕Ͱ͖Δ • جຊ͸ λΠτϧ >> ຊจ > ٭஫ • จࣈαΠζʹݟ߹ͬͨ༨ന͕ඞཁ • ࢖͑ΔจࣈαΠζͷϧʔϧΛ࡞͓ͬͯ͘ͱྑ͍ • λΠϓγεςϜͱ͍͏
108. 
     ϏδϡΞϧσβΠϯͷίπ traQͷλΠϓγεςϜ
109. 
     ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ
     
     ϑΥϯτ • ͍Ζ͍Ζ͋Δ • ΰγοΫ → ͋Δఔ౓ͷ୹จɺ໌ே → ຊͳͲͷ௕จ • ෳࡶͳσβΠϯͷϑΥϯτ͸͋Δఔ౓ͷจࣈαΠζΛ֬อ͢Δ
110. 
     ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ
     
     ϑΥϯτ΢ΣΠτ • ϑΥϯτ͸͍͔ͭ͘ͷଠ͞ʢ = ΢ΣΠτʣΛ͍࣋ͬͯΔ৔߹͕͋Δ • ౰વଠ͍ͱ໨ཱͭ • ଟ༻ʹ͸஫ҙ • ࡉ͘͢Δͱ໨ཱͨͳ͘ͳΔ • ༨നΛޮՌతʹ࢖͏ͱݟग़͠ʹ΋࢖͑Δ • খ͍͞จࣈͷ΢ΣΠτʹ͸஫ҙ
111. 
     ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ
     
     จࣈؒ • ࢖͍͜ͳ͢ͷ͕೉͍͠ • ͔ͳΓ஫ҙਂ͍ௐ੔͕ඞཁ খ ͞ ͍ จ ࣈ Ͱ จ ࣈ ؒ Λ ͱ Δ ଠ͍ จࣈͷจࣈؒΛ٧ΊΔɻ
112. 
     ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ
     
     ߦؒɾஈམؒ • جຊతͳൃ૝͸εϖʔγϯάͷ࣌ͱಉ͡ʢߦؒ < ஈམؒʣ • ߦؒ͸௨ৗϑΥϯταΠζͷ1.2ഒఔ౓ • 1.2ഒҎԼ͸ಡΈͮΒ͘ͳΔ • 1.5ഒ → ΏͬͨΓΊͷUI • 2ഒ → ͔ͳΓΏͬͨΓɺίϯςϯπϝΠϯͷUI
113. 
     ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ
     
     ߦؒɾஈམؒ ߦؒ αϯϓϧ     ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹ཱ͕֯ ͭɻͲ͜΁ӽͯ͠΋ॅ Έʹ͍͘ͱޛͬͨ࣌ɺ ࢻ͕ੜΕͯɺը͕ग़དྷ Δɻͱ͔͘ ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹͕֯ ཱͭɻͲ͜΁ӽͯ͠ ΋ॅΈʹ͍͘ͱޛͬ ͨ࣌ɺࢻ͕ੜΕͯɺ ը͕ग़དྷΔɻͱ͔͘ ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹͕֯ ཱͭɻͲ͜΁ӽͯ͠ ΋ॅΈʹ͍͘ͱޛͬ ͨ࣌ɺࢻ͕ੜΕͯɺ ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹͕֯ ཱͭɻͲ͜΁ӽͯ͠ ΋ॅΈʹ͍͘ͱޛͬ
114. 
     ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟ
     
     ·ͱΊ • ·ͣຊจͷαΠζɾϑΥϯτΛܾΊΔ • ͔ͦ͜Β೿ੜͯ͠ݟग़͠΍٭஫ͳͲͷαΠζΛߟ͑Δ • → λΠϓγεςϜΛ࡞Δ • Ұ؏ੑΛ࣋ͬͨλΠϓγεςϜͷద༻Λ͍ͯ͘͠
115. 
     ϏδϡΞϧσβΠϯͷίπ ৭ • ͍Ζ͍Ζͳཁૉ͕͋Δ • τʔϯ • ৭ͷ࣋ͭΠϝʔδ • ආ͚ͨํ͕ྑ͍৭ • ࠓճ͸ΧϥʔύϨοτΛ࡞Γɺద༻͢Δ͜ͱΛߟ͑Δ
116. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     جૅ஌ࣝ
     
     )4- • ৭Λ3ͭͷύϥϝʔλʔΛ࢖ͬͯද͢ํ๏ • ৭૬(Hue) : ͲΜͳ৭͔ • ࠼౓(Saturation) : ͲΕ͚ͩ৭઱΍͔͔ • ໌౓(Luminance) : ͲΕ͚ͩ໌Δ͍͔
117. 
     ϏδϡΞϧσβΠϯͷίπ 24෼ׂͷ৭૬؀ʢ৭૬͸͜Εʹ͓͚ΔҐஔʣ
118. 
     ϏδϡΞϧσβΠϯͷίπ ্͕࠼౓0→1ɺԼ͕໌౓0→1ʢ৭૬͸205°ʣ
119. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     جૅ஌ࣝ
     
     τʔϯ • ࠼౓ͱ໌౓͕৭ͷงғؾΛܾΊΔ • 2ͭΛ߹ମͤͨ͞τʔϯͱ͍͏৭ͷ෼ྨ͕͋Δ • ϏϏουτʔϯɺϒϥΠττʔϯɺετϩϯάτʔϯɺ…… • ӳࣈͰུ͢͜ͱ͕͋Δʢv, b, s, lt, sf, …ʣ
120. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     جૅ஌ࣝ
     
     τʔϯͱ৭ͷ૊Έ߹Θͤ • τʔϯΛج४ʹ͢Δͱɺ࣍ͷΑ͏ʹ৭Λબ΂͍͍ͯײ͡ʹͳΔ • ಉ͡τʔϯ͔Β2৭ • ಉ͡৭૬ͰҟͳΔτʔϯ͔Β2৭ • ͦͷଞ͸৭૬ϕʔεͷิ৭ɺτϥΠΞυɺςτϥʔυͳͲ • άά͍ͬͯͩ͘͞
121. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     ΧϥʔύϨοτ • ࣍ͷఔ౓ͷ৭͕୯७͚ͩͲ࢖͍΍͍͢ΧϥʔύϨοτ • Primary color: αʔϏεશମͷΩʔΧϥʔ • Secondary color: Primaryͱͷ۠ผΛ͍ͨ͠ͱ͖ͷ৭ • Text Color: จࣈ৭ • Background Color: എܠ৭
122. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     ΧϥʔύϨοτ
     
     1SJNBSZ
     DPMPS • αʔϏεͷΠϝʔδͱͳΔ৭ • ཁॴཁॴͰ࢖͍ͬͯ͘ͷ͕ྑ͍ • ॏཁͳϘλϯɺಛʹ໨ཱ͍ͨͤͨཁૉɺ…… • ࢖͍͗͢Δͱҙຯ߹͍͕΅΍͚ͯ͠·͏ͷͰΞΫηϯτఔ౓ʹ • UI༻ʹओཁʹ༻͍Δผͷ৭Λઃఆͯ͠΋ྑ͍ʢtraQ͸ͦ͏ʣ
123. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     ΧϥʔύϨοτ
     
     4FDPOEBSZ
     DPMPS • PrimaryҎ֎Ͱ͋Δ͜ͱΛࣔͨ͢Ίͷ৭ • ΩϟϯηϧͳͲɺऑ͍ΞΫγϣϯʹରͯ͠࢖͏ • ࠼౓௿Ίͷ഑৭ʹ͢ΔͱΘ͔Γ΍͍͢ • ϘʔμʔΛڧ੍͢Δ͜ͱ΋ߟ͑ΒΕΔ
124. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     ΧϥʔύϨοτ
     
     #BDLHSPVOE
     
     UFYU
     DPMPS • എܠ΍จࣈ৭ • Primary colorͱಉ͡৭૬ͷࠇ΍നΛ࢖͏ͱ͍͍ײ͡ʹ·ͱ·Δ
125. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     ΧϥʔύϨοτ
     
     ࡞Δʹ͸ʁ • ͍Ζ͍Ζͳ৭Λ࢖͏ͷ͸ͱͯ΋೉͍͠ͷͰ৭਺ΛߜΔ • PrimaryΛҰ৭ܾΊΔ • ͜Ε͸αʔϏεͷओ࣠ͷ৭ͳͷͰؤுܾͬͯΊΔ • v͔Βগ͠֎ͯ͠b, l, lt, sfͳͲΛ࢖͏ͷ͕ྲྀߦΓͬΆ͍ • secondary, text, background͸ಉ৭૬ผτʔϯ͔ΒબͿ
126. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     ΧϥʔύϨοτ
     
     ࢖͍ํ • ΧϥʔύϨοτΛ࡞ͬͯ΋ͦͷ࢖͍ํΛܾΊͳ͍ͱҙຯ͕ͳ͍ • Primary colorΛΞΫηϯτఔ౓ʹ࢖͏+શମΛനܥͰ·ͱΊΔ • ͖ͬ͢ΓϞμϯɺμʔΫϞʔυରԠָ͕ • Primary colorΛଟ͘࢖͏ • ൥͘ͳΓ͕ͪͰඇৗʹ೉͍͠
127. 
     ϏδϡΞϧσβΠϯͷίπ ΧϥʔύϨοτͷΠϝʔδ
128. 
     ϏδϡΞϧσβΠϯͷίπ ΧϥʔύϨοτͷΠϝʔδ
129. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     ආ͚͍ͨ৭ • ਅͬࠇʢ#000000ʣ • Ͳͷ৭ʹରͯ͠࢖ͬͯ΋ίϯτϥετ͕ݫ͍͠ • จࣈ৭ʹ΋എܠ৭ʹ΋ίϯτϥετ͕ݫ͍͠ • ໌౓Λগ্͛ͯ͠ɺprimary colorͷ৭૬ʹدͤΔͱ
130. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     ආ͚͍ͨ৭ • ݪ৭ʢ#ff0000, #00ff00, #0000ffʣ • ࢖Θͳ͍ํ͕ྑ͍ • ઈରʹจࣈ৭Λ͜ͷ৭ʹͯ͠͸͍͚ͳ͍ • ϏϏουτʔϯ΋ʢ͜ͷ3ͭ΄ͲͰ͸ͳ͍͕ʣආ͚͍ͨ • গ͠࠼౓ΛԼ͛Δɾ໌౓Λ͍͡ΔͳͲͨ͠৭Λprimaryʹ࢖͏ͱྑ͍͔΋
131. 
     ϏδϡΞϧσβΠϯͷίπ ৭
     
     ৭ͷ࣋ͭΠϝʔδ • ৭ʹ͸͔ͦ͜Β࿈૝͞ΕΔΠϝʔδ͕͋Δ • άά͍ͬͯͩ͘͞ • ੺͕ΤωϧΪογϡɺ੨͕৴པɹͳͲ
132. 
     ϏδϡΞϧσβΠϯͷίπ ϝϯλϧϞσϧ • Ϣʔβʔͷ͍࣋ͬͯΔɺද৅ʹର͢ΔߦಈͷΠϝʔδ • ʮ͜ͷݟͨ໨ͷύʔπ͸ϘλϯͳͷͰɺԡ͢ͱԿ͔ى͜Δʯ • ίϯϙʔωϯτͷݟͨ໨͸͜ΕΛ൓ө͍ͯͯ͠ཉ͍͠ • ίϯϙʔωϯτ͕ঢ়ଶΛ࣋ͭ৔߹΋൓ө͍ͯͯ͠ཉ͍͠ • ʮ൒ಁ໌ͳϘλϯ͸disabledͩʯ
133. 
     ϏδϡΞϧσβΠϯͷίπ ϝϯλϧϞσϧ
     
     ೝ஌ෛՙ • ϝϯλϧϞσϧʹԊ͍ͬͯͳ͍UIύʔπ͸ɺͦͷҙຯΛೝ஌ͮ͠Β͍ • Ϣʔβʔʹೝ஌ෛՙΛڧ͍͍ͯΔঢ়ଶ • Կ͔ελϯμʔυͳදݱ͕͋Δ৔߹͸ͦΕʹै͏ • OSඪ४ͳͲ • ಉҰαʔϏε಺Ͱ͸ಉ͡΋ͷΛද͢ͷʹಉ͡දݱΛ࢖͏ʢ൓෮ݪଇʣ
134. 
     ϏδϡΞϧσβΠϯͷίπ ϏδϡΞϧσβΠϯ·ͱΊ • σβΠϯͷ4ݪଇ • εϖʔγϯά • ͱʹ͔͘ద੾ͳ༨നΛ͚ͭͯ͋͛Δ • λΠϙάϥϑΟ • ৭ • ϝϯλϧϞσϧ
135. ׬ ͓ΘΓͰ͢