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*ͱ͸ʁ ࢀߟώϡʔϦεςΟοΫ • 10 Usability Heuristics for User Interface Design

    • UIΛධՁ͢Δ࣌ͷج४ͷͻͱͭ • ద੾ͳϑΟʔυόοΫΛͤΑɺϢʔβʔͷΘ͔Δݴ༿Λ༻͍Αɺ… • ৄ͘͠͸ิ଍ࢿྉ΁
  2. 6*σβΠϯͷϓϩηε ϓϩηεͷ·ͱΊ • ཁٻ෼ੳ • Ϟσϧநग़ • Ϗϡʔఆٛ • ϏδϡΞϧఆٛ:

    શମͷίϯηϓτ / ݸʑͷΦϒδΣΫτ΍Ϗϡʔ • σβΠϯγεςϜͷཱ֬
  3. 006*ͷ࣮ફ ͜ͷষͰ͸ • UIͷઃܭࢦ਑ͷҰͭͰ͋Δ OOUI ͱ͍͏ख๏Λݟ͍ͯ͘ • ৘ใͷ੔ཧͷ؍఺Ͱ༗༻ • σβΠϯϓϩηεͷϞσϧநग़ʙϏϡʔఆٛʹ૬౰͢Δ෦෼

    • ⚠ ྫʹ࢖͏traQ͸͋Δఔ౓؆ུԽ͞Εͨ΋ͷʹͳΓ·͢ • ಛʹDMɾΞΫςΟϏςΟͷଘࡏΛল͍͍ͯΔͱ͍͏఺ʹ஫ҙ͍ͯͩ͘͠͞
  4. 006*ͷ࣮ફ 006*WTλεΫࢦ޲ • OOUI : ໊ࢺ → ಈࢺ • λεΫʢ΍Γ͍ͨ͜ͱʣΛΦϒδΣΫτ΁ͷૢ࡞ʢΞΫγϣϯʣͰ

    ୡ੒͢Δ • λεΫࢦ޲: ಈࢺ → ໊ࢺ • λεΫͷશମ૾͕نఆ͞Ε͍ͯͯɺͦΕʹର৅Λ౰ͯ͸ΊΔ
  5. 006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • ૝ఆ͞ΕΔλεΫͷҰ෦ɹ໊ࢺͱϢʔβʔओମͷಈࢺΛڧௐͨ͠ #a ͷ ϝοηʔδҰཡ ΛݟΔ #a/b ͷԼʹ

    #a/b/c Λ ࡞੒͢Δ ϝοηʔδ Λ ϐϯ͢Δ @spa ʹ Ͷ͜ Λ͚ͭΔ ϐϯཹΊϝοηʔδ ʹ ελϯϓ Λ ͚ͭΔ ϝϯγϣϯ ͞ΕΔͱ ௨஌͕͘Δ
  6. 006*ͷ࣮ફ λεΫΛ൓өͨ͠traQͷؔ܎ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾ౤ߘ͞Εͨϝοηʔδ ϝοηʔδ ɾ಺༰ ɾϐϯཹΊ͞Ε͍ͯΔ͔ ɾ౤ߘઌνϟϯωϧ

    ɾ౤ߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ Ϣʔβʔ ɾεΫϦʔϯ *% ɾද໊ࣔ ɾ෇͚ΒΕ͍ͯΔλά ελϯϓ λά
  7. 006*ͷ࣮ફ ΦϒδΣΫτநग़USB2ͷྫ • ΦϒδΣΫτʹରͯ͠ՄೳͳΞΫγϣϯΛఆٛ͢Δ • جຊ͸Create, ( Read, ) Update,

    Delete νϟϯωϧ ɾ ɾࢠνϟϯωϧΛ௥Ճ͢Δ ɾ౤ߘ͢Δ ɾ࡟আ͢Δ ɾϐϯཹΊ͢Δ  ղআ͢Δ ɾελϯϓΛ͚ͭΔ  ֎͢ ϝοηʔδ ɾ
  8. 006*ͷ࣮ફ ΞΫγϣϯΛఆٛͨ͠ਤ ʢλάͱελϯϓ͸ඪ४ͷCRUDΛαϙʔτʣ νϟϯωϧ ɾνϟϯωϧ໊ ɾࢠνϟϯωϧ ɾ਌νϟϯωϧ ɾ౤ߘ͞Εͨϝοηʔδ ɾࢠνϟϯωϧΛ௥Ճ͢Δ ɾ<

    ؅ཧऀ > ௥Ճ͢Δ ɾ< ؅ཧऀ > ࡟আ͢Δ ϝοηʔδ ɾ಺༰ ɾϐϯཹΊ͞Ε͍ͯΔ͔ ɾ౤ߘઌνϟϯωϧ ɾ౤ߘͨ͠Ϣʔβʔ ɾԡ͞Ε͍ͯΔελϯϓ ɾ౤ߘ͢Δ ɾ< ౤ߘऀ > ࡟আ͢Δ ɾ< ౤ߘऀ > ฤू͢Δ ɾϐϯཹΊ͢Δ  ղআ͢Δ ɾελϯϓΛ͚ͭΔ  ֎͢ Ϣʔβʔ ɾεΫϦʔϯ *% ɾද໊ࣔ ɾ෇͚ΒΕ͍ͯΔλά ɾ< ؅ཧऀ > ࡞੒͢Δ ɾ< ؅ཧऀ > ࡟আ͢Δ ɾ< ࣗ෼ > ϓϩϑΟʔϧมߋ ɾλάΛ͚ͭΔ ελϯϓ λά
  9. 006*ͷ࣮ફ ΦϒδΣΫτநग़OPUF • ͜ΕΒͷεςοϓͰ࢓༷͕ݻ·͍ͬͯ͘ • ΞϓϦέʔγϣϯͰ͸ Կ͕ݟ͑ͯ Կ͕Ͱ͖Δʁ ΛܾΊͨ •

    ٯʹλεΫɾϢʔεέʔεͷݕ౼ʹ໭Δ͜ͱ΋ • QͷྫͰ͸ΞΫγϣϯͷείʔϓʹݴٴͨ͠ • ͜Ε͸΋ͱͷཁٻ෼ੳஈ֊Ͱ΍͍ͬͯͳ͍͜ͱͩͬͨ
  10. 006*ͷ࣮ફ Ϗϡʔͷछྨ • ίϨΫγϣϯϏϡʔ • ෳ਺ͷΦϒδΣΫτΛҰཡදࣔ • શମ૾Λ೺Ѳ͍ͨ͠΋ͷ΍ɺλΠϜϥΠϯͳͲ • γϯάϧϏϡʔ

    • ͦͷΦϒδΣΫτͻͱͭʹ͍ͭͯɺৄࡉ৘ใΛදࣔ • ίϨΫγϣϯϏϡʔ͔ΒؾʹͳΔ΋ͷͷγϯάϧϏϡʔʹભҠ
  11. 006*ͷ࣮ફ ϏϡʔͷఆٛUSB2ͷྫ • νϟϯωϧ - ϝοηʔδ͸ 1:* ͷؔ܎ʹͳ͍ͬͯΔ • νϟϯωϧͷγϯάϧϏϡʔ͔ΒϝοηʔδͷίϨΫγϣϯϏϡʔ

    ʹભҠͯ͠ཉ͍͠ • ϝοηʔδ - Ϣʔβʔ͸ *:1 ͷؔ܎ʹͳ͍ͬͯΔ • Ϣʔβʔ͔ΒͦͷϢʔβʔ͕౤ߘͨ͠ϝοηʔδʹભҠ͢Δ……ʁ
  12. 006*ͷ࣮ફ ఴ෇ϑΝΠϧҰཡΛ͚ͭͨtraQͷϏϡʔߏ଄ νϟϯωϧ ίϨΫγϣϯ  Ϧετ ϝοηʔδ ίϨΫγϣϯ  Ϧετ

    ఴ෇ϑΝΠϧ ίϨΫγϣϯ  άϦου λά ίϨΫγϣϯ  Ϧετ Ϣʔβʔ ίϨΫγϣϯ  Ϧετ νϟϯωϧ γϯάϧ Ϣʔβʔ γϯάϧ ϝΠϯφϏήʔγϣϯ ϞόΠϧ࣌υϩϫʔ  NPEBM NPEBM
  13. ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟจࣈαΠζ • ࠷΋؆୯ʹ৘ใʹڧऑΛ͚ͭΔ͜ͱ͕Ͱ͖Δ • جຊ͸ λΠτϧ >> ຊจ >

    ٭஫ • จࣈαΠζʹݟ߹ͬͨ༨ന͕ඞཁ • ࢖͑ΔจࣈαΠζͷϧʔϧΛ࡞͓ͬͯ͘ͱྑ͍ • λΠϓγεςϜͱ͍͏
  14. ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟϑΥϯτ΢ΣΠτ • ϑΥϯτ͸͍͔ͭ͘ͷଠ͞ʢ = ΢ΣΠτʣΛ͍࣋ͬͯΔ৔߹͕͋Δ • ౰વଠ͍ͱ໨ཱͭ • ଟ༻ʹ͸஫ҙ

    • ࡉ͘͢Δͱ໨ཱͨͳ͘ͳΔ • ༨നΛޮՌతʹ࢖͏ͱݟग़͠ʹ΋࢖͑Δ • খ͍͞จࣈͷ΢ΣΠτʹ͸஫ҙ
  15. ϏδϡΞϧσβΠϯͷίπ λΠϙάϥϑΟߦؒɾஈམؒ ߦؒ αϯϓϧ     ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹ཱ͕֯

    ͭɻͲ͜΁ӽͯ͠΋ॅ Έʹ͍͘ͱޛͬͨ࣌ɺ ࢻ͕ੜΕͯɺը͕ग़དྷ Δɻͱ͔͘ ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹͕֯ ཱͭɻͲ͜΁ӽͯ͠ ΋ॅΈʹ͍͘ͱޛͬ ͨ࣌ɺࢻ͕ੜΕͯɺ ը͕ग़དྷΔɻͱ͔͘ ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹͕֯ ཱͭɻͲ͜΁ӽͯ͠ ΋ॅΈʹ͍͘ͱޛͬ ͨ࣌ɺࢻ͕ੜΕͯɺ ৘ʹᑫͤ͞͹ྲྀ͞Ε Δɻஐʹಇ͚͹͕֯ ཱͭɻͲ͜΁ӽͯ͠ ΋ॅΈʹ͍͘ͱޛͬ
  16. ϏδϡΞϧσβΠϯͷίπ ৭ආ͚͍ͨ৭ • ݪ৭ʢ#ff0000, #00ff00, #0000ffʣ • ࢖Θͳ͍ํ͕ྑ͍ • ઈରʹจࣈ৭Λ͜ͷ৭ʹͯ͠͸͍͚ͳ͍

    • ϏϏουτʔϯ΋ʢ͜ͷ3ͭ΄ͲͰ͸ͳ͍͕ʣආ͚͍ͨ • গ͠࠼౓ΛԼ͛Δɾ໌౓Λ͍͡ΔͳͲͨ͠৭Λprimaryʹ࢖͏ͱྑ͍͔΋