UIデザイン講習会

16bd45a651536942b63434b59bf3415e?s=47 Spa
July 25, 2020

 UIデザイン講習会

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

16bd45a651536942b63434b59bf3415e?s=128

Spa

July 25, 2020
Tweet

Transcript

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

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

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

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

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

  6. 6*ͱ͸ʁ ᶃ 6*JTOBOJ

  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*σβΠϯͷϓϩηε ᶄ 1SPDFTTGPSEFTJHOJOH6*

  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*JOQSBDUJDF

  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. ϏδϡΞϧσβΠϯ ᶆ 7JTVBMEFTJHO

  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 EQEQ 7FSUJWBM.BSHJO EQEQ

    )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. ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ1SJNBSZDPMPS • αʔϏεͷΠϝʔδͱͳΔ৭ • ཁॴཁॴͰ࢖͍ͬͯ͘ͷ͕ྑ͍ • ॏཁͳϘλϯɺಛʹ໨ཱ͍ͨͤͨཁૉɺ…… • ࢖͍͗͢Δͱҙຯ߹͍͕΅΍͚ͯ͠·͏ͷͰΞΫηϯτఔ౓ʹ

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

  124. ϏδϡΞϧσβΠϯͷίπ ৭ΧϥʔύϨοτ#BDLHSPVOEUFYUDPMPS • എܠ΍จࣈ৭ • 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. ׬ ͓ΘΓͰ͢