Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UIデザイン講習会

Spa
July 25, 2020

 UIデザイン講習会

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

Spa

July 25, 2020
Tweet

More Decks by Spa

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 6*ͱ͸ʁ

    6*JTOBOJ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 6*ͱ͸ʁ
    ঢ়ଶΛద੾ʹӅṭ/ू໿ͯ͠৘ใΛදࣔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 6*σβΠϯͷϓϩηε

    1SPDFTTGPSEFTJHOJOH6*

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 006*ͷ࣮ફ

    006*JOQSBDUJDF

    View full-size slide

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

    View full-size slide

  30. 006*ͷ࣮ફ
    ͜ͷষͷྲྀΕ
    • OOUIͱ͸ʁ
    • OOUIͷϓϩηε
    • ΦϒδΣΫτநग़
    • Ϗϡʔఆٛ
    • ϨΠΞ΢τఆٛ
    • ϨΠΞ΢τύλʔϯʹ͍ͭͯ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. 006*ͷ࣮ફ
    έʔΩʹݟΔOOUI

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    NPEBM
    NPEBM

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  82. ϏδϡΞϧσβΠϯ

    7JTVBMEFTJHO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  113. ϏδϡΞϧσβΠϯͷίπ
    λΠϙάϥϑΟߦؒɾஈམؒ
    ߦؒ
    αϯϓϧ

    ৘ʹᑫͤ͞͹ྲྀ͞Ε
    Δɻஐʹಇ͚͹ཱ͕֯
    ͭɻͲ͜΁ӽͯ͠΋ॅ
    Έʹ͍͘ͱޛͬͨ࣌ɺ
    ࢻ͕ੜΕͯɺը͕ग़དྷ
    Δɻͱ͔͘
    ৘ʹᑫͤ͞͹ྲྀ͞Ε
    Δɻஐʹಇ͚͹͕֯
    ཱͭɻͲ͜΁ӽͯ͠
    ΋ॅΈʹ͍͘ͱޛͬ
    ͨ࣌ɺࢻ͕ੜΕͯɺ
    ը͕ग़དྷΔɻͱ͔͘
    ৘ʹᑫͤ͞͹ྲྀ͞Ε
    Δɻஐʹಇ͚͹͕֯
    ཱͭɻͲ͜΁ӽͯ͠
    ΋ॅΈʹ͍͘ͱޛͬ
    ͨ࣌ɺࢻ͕ੜΕͯɺ
    ৘ʹᑫͤ͞͹ྲྀ͞Ε
    Δɻஐʹಇ͚͹͕֯
    ཱͭɻͲ͜΁ӽͯ͠
    ΋ॅΈʹ͍͘ͱޛͬ

    View full-size slide

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

    View full-size slide

  115. ϏδϡΞϧσβΠϯͷίπ

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  135. ׬
    ͓ΘΓͰ͢

    View full-size slide