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

OOUI(オブジェクト指向UIデザイン)

shuufei
July 10, 2020

 OOUI(オブジェクト指向UIデザイン)

shuufei

July 10, 2020
Tweet

More Decks by shuufei

Other Decks in Design

Transcript

  1. 006*
    ΦϒδΣΫτࢦ޲6*σβΠϯ

    View Slide

  2. w ͜ͷࢿྉ಺Ͱ࢖͏αϯϓϧ͸ɺॻ੶ΦϒδΣΫτࢦ޲6*σβΠϯͷαϯϓϧΛར༻͍ͯ͠·͢ɻ

    View Slide

  3. "HFOEB
    ࣮ફͱΓ͋͑ͣ6*ઃܭͯ͠ΈΑ͏
    ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔
    006*ͷઃܭϓϩηε
    006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼
    ࣮ફ006*ͷख๏Ͱઃܭͯ͠ΈΑ͏

    View Slide

  4. ࣮ફͱΓ͋͑ͣ6*ઃܭͯ͠ΈΑ͏

    View Slide

  5. ࢴͱϖϯΛ͝༻ҙ͍ͩ͘͞

    View Slide

  6. Լهͷཁ݅Λຬͨ͢ΞϓϦέʔγϣϯͷ6*ΛϞόΠϧϨΠΞ΢τͰઃܭͯ͠Έ͍ͯͩ͘͞
    ࣾһ໊฽ΞϓϦέʔγϣϯ
    ໺ࡔ͞Μͷॴଐ
    νʔϜΛ֬ೝ͢Δ
    ాத͞ΜΛ
    ϑΝΠφϯε
    νʔϜʹ௥Ճ͢Δ
    ԣా͞ΜΛ
    σβΠϯνʔϜ
    ͔Β࡟আ͢Δ
    ϚʔέςΟϯά
    νʔϜͷࣾһ
    Λ֬ೝ͢Δ
    ࣾһΛ
    ৽نొ࿥͢Δ
    ৓೭಺͞Μͷ
    ΦϯϥΠϯ
    εςʔλεΛ
    ֬ೝ͢Δ
    ΤϯδχΞϦϯά
    νʔϜͷ঺հจΛ
    ֬ೝ͢Δ
    ాࡔ͞Μͷ࿈བྷઌ
    Λ֬ೝ͢Δ

    View Slide

  7. ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔

    View Slide

  8. ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔
    ΞϓϦέʔγϣϯ͕ѻ͏ΦϒδΣΫτΛى఺ʹ6*Λઃܭ͢Δ͜ͱ

    View Slide

  9. J5VOFT4UPSF J04

    ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔

    View Slide

  10. ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔
    λεΫࢦ޲ͱΦϒδΣΫτࢦ޲

    View Slide

  11. ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔
    λεΫࢦ޲ͱΦϒδΣΫτࢦ޲
    λεΫࢦ޲ͷ6*ྫ
    σδλϧΧϝϥ

    View Slide

  12. λεΫࢦ޲ͷ6*ྫ
    σδλϧΧϝϥ

    View Slide

  13. ΦϒδΣΫτࢦ޲6*ʹमਖ਼
    σδλϧΧϝϥ

    View Slide

  14. ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔
    λεΫࢦ޲ͱΦϒδΣΫτࢦ޲
    λεΫࢦ޲ͷ6*ྫ
    ϑʔυσϦόϦʔαʔϏε

    View Slide

  15. λεΫࢦ޲ͷ6*ྫ
    ϑʔυσϦόϦʔαʔϏε

    View Slide

  16. ΦϒδΣΫτࢦ޲6*ʹमਖ਼
    ϑʔυσϦόϦʔαʔϏε

    View Slide

  17. ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔
    λεΫࢦ޲ͱΦϒδΣΫτࢦ޲
    λεΫࢦ޲ͷಛ௃
    w ಈࢺ໊ࢺ
    w ·ͣλεΫΛબ୒͠ɺ࣍ʹҾ਺ͱͯ͠ΦϒδΣΫτ΍ύϥϝʔλΛࢦఆ͢Δ
    w φϏήʔγϣϯ͸λεΫΛखֻ͔Γʹ͢Δ
    ΦϒδΣΫτࢦ޲ͷಛ௃
    w ໊ࢺಈࢺ
    w ·ͣΦϒδΣΫτΛબ୒͠ɺ࣍ʹͦͷΦϒδΣΫτʹର͢ΔΞΫγϣϯΛબͿ
    w φϏήʔγϣϯ͸ΦϒδΣΫτΛखֻ͔Γʹ͢Δ

    View Slide

  18. ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔
    λεΫࢦ޲ͱΦϒδΣΫτࢦ޲
    Ͳ͕ͬͪ࢖͍΍ͦ͢͏ͩΖ͏͔

    View Slide

  19. ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔
    λεΫࢦ޲ͱΦϒδΣΫτࢦ޲
    ͳͥλεΫࢦ޲ΑΓΦϒδΣΫτࢦ޲ͷํ͕࢖͍΍ͦ͢͏ͳͷ͔
    w ͋ΔಛఆͷλεΫΛߦͳ͍ͬͯΔͱ͖ɺ్தͰλεΫ͕มΘΔ͜ͱ͕͋Δ
    w ૢ࡞͢Δର৅Λ֬ೝ͔ͯ͠Β͡Όͳ͍ͱλεΫΛܾΊΒΕͳ͍έʔε͕͋Δ

    View Slide

  20. ͋ΔಛఆͷλεΫΛߦͳ͍ͬͯΔͱ͖ɺ్தͰλεΫ͕มΘΔ͜ͱ͕͋Δ
    σδΧϝͷ6*ͷྫ
    w σʔλҰཡΛ֬ೝ͍ͯ͠Δͱ͖ɺ͜ͷσʔλΛ࡟আͨ͘͠ͳͬͨͳͲɻ
    w λεΫͷ੾ΓସΘΓࢀর࡟আ
    5XJUUFSͷྫ
    w λΠϜϥΠϯΛோΊ͍ͯΔͱ͖ɺπΠʔτͨ͘͠ͳͬͨͳͲɻ
    w λεΫͷ੾ΓସΘΓࢀর౤ߘ
    ຊ԰ͷྫ
    w ຊ԰ͰཱͪಡΈ͍ͯ͠Δͱ͖ɺͦͷຊΛങ͍ͨ͘ͳͬͨͳͲɻ
    w λεΫͷ੾ΓସΘΓࢀরߪೖ
    ຊ԰͕λεΫϕʔεͩͱɺ
    ΍Δ͜ͱʹΑͬͯೖΓޱ͕มΘͬͯ͠·͏

    View Slide

  21. ૢ࡞͢Δର৅ΛܾΊ͔ͯΒ͡Όͳ͍ͱλεΫΛܾΊΒΕͳ͍έʔε͕͋Δ
    ϑʔυσϦόϦʔαʔϏεͷ6*ͷྫ
    w ෳ਺ͷళฮͰ໎͍ͬͯΔͱ͖ɺϝχϡʔΛ΋ͱʹͲͷళͰߪೖ͢Δ͔ΛܾΊ͍ͨɻ
    5XJUUFSͷྫ
    w Ϧπʔτ΍͍͍Ͷͱ͍͏ΞΫγϣϯ͸ɺπΠʔτࣗମΛ֬ೝ͠ͳ͍ͱ࣮ߦ͢Δ͔Ͳ͏͔ܾ·Βͳ͍ɻ
    w <πΠʔτΛࢀর͢Δ>ɺ<Ϧπʔτ͢Δ>ɺ<͍͍Ͷ͢Δ>ͱ͍͏;͏ʹφϏήʔγϣϯ͕෼͔Ε͍ͯͨΒͲ͏ͩΖ͏͔ɻ

    View Slide

  22. ΦϒδΣΫτࢦ޲6*ͱ͸Կ͔
    λεΫࢦ޲ͱΦϒδΣΫτࢦ޲
    λεΫϕʔε͕༗ޮͳέʔε
    w ࠷ॳ͔Βૢ࡞͢ΔΦϒδΣΫτ͕ಛఆ͞Ε͍ͯΔɻ"5.ͷ6*ͳͲɻ
    w ੍໿Λઃ͚͍ͨ
    w ҆શੑ
    w ϑΥʔΧε
    w ઈରʹ్தͰλεΫ͕੾ΓସΘΒͳ͍

    View Slide

  23. 006*ͷઃܭϓϩηε

    View Slide

  24. 006*ͷઃܭϓϩηε
    େ·͔ͳྲྀΕ ॱෆಈ

    w ϞσϦϯάΦϒδΣΫτͷநग़
    w ΠϯλϥΫγϣϯϏϡʔͱφϏήʔγϣϯͷݕ౼
    w ϓϨθϯςʔγϣϯϨΠΞ΢τύλʔϯͷద༻

    View Slide

  25. 006*ͷઃܭϓϩηε
    ੜె
    w ࢯ໊
    w ੒੷
    w ҹ࡮͢Δ
    ίϨΫγϣϯ
    ੜె
    γϯάϧ
    ੜె
    ը໘ ը໘
    Ϟσϧ
    ΠϯλϥΫγϣϯ
    ϓϨθϯςʔγϣϯ

    View Slide

  26. ϞσϦϯάΦϒδΣΫτͷநग़
    006*ͷઃܭϓϩηε

    View Slide

  27. ͋Δੜె͕ॴଐ
    ͍ͯ͠Δ෦׆Λ
    ֬ೝ͢Δ
    ໺ٿ෦ͷސ໰ڭࢣ
    ͷి࿩൪߸Λ
    ֬ೝ͢Δ
    ೥#૊ͷ୲೚
    Λ֬ೝ͢Δ
    ͋Δੜె͕Կ૊
    ͔Λ֬ೝ͢Δ
    จԽࡇͷओ୲౰
    ڭһΛ֬ೝ͢Δ
    मֶཱྀߦͷ೔෇
    Λ֬ೝ͢Δ
    ೥"૊ͷ໊฽
    Λҹ࡮͢Δ
    ೥$૊ͷ͋Δ
    ੜెͷ੒੷Λ
    ֬ೝ͢Δ
    ϞσϦϯάΦϒδΣΫτͷநग़
    ໊ࢺͷநग़
    ֶߍ໊฽ΞϓϦέʔγϣϯ

    View Slide

  28. ͋Δੜె͕ॴଐ
    ͍ͯ͠Δ෦׆Λ
    ֬ೝ͢Δ
    ໺ٿ෦ͷސ໰ڭࢣ
    ͷి࿩൪߸Λ
    ֬ೝ͢Δ
    ೥#૊ͷ୲೚
    Λ֬ೝ͢Δ
    ͋Δੜె͕Կ૊
    ͔Λ֬ೝ͢Δ
    จԽࡇͷओ୲౰
    ڭһΛ֬ೝ͢Δ
    मֶཱྀߦͷ೔෇
    Λ֬ೝ͢Δ
    ೥"૊ͷ໊฽
    Λҹ࡮͢Δ
    ೥$૊ͷ͋Δ
    ੜెͷ੒੷Λ
    ֬ೝ͢Δ
    ϞσϦϯάΦϒδΣΫτͷநग़
    ໊ࢺͷநग़
    ֶߍ໊฽ΞϓϦέʔγϣϯ

    View Slide

  29. ϞσϦϯάΦϒδΣΫτͷநग़
    ໊ࢺΛந৅Խ͠ɺͦΕͧΕͷؔ܎Λ໌֬ʹ͢Δ
    ੜె


    ڭһ
    ి࿩൪߸

    ڭһ
    ੜె

    Πϕϯτ
    ڭһ
    Πϕϯτ
    ೔෇

    ੜె

    ੜె
    ੒੷

    View Slide

  30. ϞσϦϯάΦϒδΣΫτͷநग़
    ໊ࢺΛந৅Խ͠ɺͦΕͧΕͷؔ܎Λ໌֬ʹ͢Δ
    ੜె

    ڭһ
    ి࿩൪߸

    Πϕϯτ
    ೔෇
    ੒੷




    View Slide

  31. ϞσϦϯάΦϒδΣΫτͷநग़
    ੜె

    ڭһ
    ి࿩൪߸

    Πϕϯτ
    ೔෇
    ੒੷




    ϝΠϯΦϒδΣΫτΛಛఆ͠ɺϓϩύςΟͱΞΫγϣϯΛఆΊΔ

    View Slide

  32. ϞσϦϯάΦϒδΣΫτͷநग़
    ੜె
    w ࢯ໊
    w ੒੷

    w ໊শ
    w ੜె਺
    ڭһ
    w ࢯ໊
    w ి࿩൪߸
    Πϕϯτ
    w ໊শ
    w ೔෇

    w ໊শ




    ϝΠϯΦϒδΣΫτΛಛఆ͠ɺϓϩύςΟͱΞΫγϣϯΛఆΊΔ

    View Slide

  33. ϞσϦϯάΦϒδΣΫτͷநग़
    ੜె
    w ࢯ໊
    w ੒੷
    w ҹ࡮
    w ৽ن
    w ࡟আ

    w ໊শ
    w ੜె਺
    w ҹ࡮
    w ৽ن
    w ࡟আ
    ڭһ
    w ࢯ໊
    w ి࿩൪߸
    w ҹ࡮
    w ৽ن
    w ࡟আ
    Πϕϯτ
    w ໊শ
    w ೔෇
    w ҹ࡮
    w ৽ن
    w ࡟আ

    w ໊শ
    w ҹ࡮
    w ৽ن
    w ࡟আ




    ϝΠϯΦϒδΣΫτΛಛఆ͠ɺϓϩύςΟͱΞΫγϣϯΛఆΊΔ

    View Slide

  34. ϞσϦϯάΦϒδΣΫτͷநग़
    ͜ͷΞϓϦέʔγϣϯͰѻ͏ΦϒδΣΫτ͕ݟ͖͑ͯͨ

    View Slide

  35. ΠϯλϥΫγϣϯϏϡʔͱφϏήʔγϣϯͷݕ౼
    006*ͷઃܭϓϩηε

    View Slide

  36. ΠϯλϥΫγϣϯϏϡʔͱφϏήʔγϣϯͷݕ౼
    ϝΠϯΦϒδΣΫτʹňίϨΫγϣϯʼnͱňγϯάϧʼnͷϏϡʔΛ༩͑Δ
    ର৅ͷΦϒδΣΫτΛѻ͏ࡍɺҰཡͷத͔Βର৅ΦϒδΣΫτΛબ୒͢Δ͜ͱ͕ଟ͍ɻ
    ͳͷͰɺΦϒδΣΫτ͝ͱʹňҰཡը໘ʼnͱňৄࡉը໘ʼn͕͋Δ͸ͣɻ
    ίϨΫγϣϯ
    Πϕϯτ
    γϯάϧ
    Πϕϯτ
    ίϨΫγϣϯ
    ڭһ
    γϯάϧ
    ڭһ
    ίϨΫγϣϯ

    γϯάϧ

    ίϨΫγϣϯ
    ੜె
    γϯάϧ
    ੜె
    ίϨΫγϣϯ

    γϯάϧ

    View Slide

  37. ΠϯλϥΫγϣϯϏϡʔͱφϏήʔγϣϯͷݕ౼
    ͦΕͧΕͷϏϡʔͷݺͼग़ؔ͠܎Λݕ౼͢Δ
    ίϨΫγϣϯ
    Πϕϯτ
    γϯάϧ
    Πϕϯτ
    ίϨΫγϣϯ
    ڭһ
    γϯάϧ
    ڭһ
    ίϨΫγϣϯ

    γϯάϧ

    ίϨΫγϣϯ
    ੜె
    γϯάϧ
    ੜె
    ίϨΫγϣϯ

    γϯάϧ

    View Slide

  38. ͜ͷΞϓϦέʔγϣϯͷը໘ભҠ͕ݟ͖͑ͯͨ
    ΠϯλϥΫγϣϯϏϡʔͱφϏήʔγϣϯͷݕ౼

    View Slide

  39. ϓϨθϯςʔγϣϯϨΠΞ΢τύλʔϯͷద༻
    006*ͷઃܭϓϩηε

    View Slide

  40. ϓϨθϯςʔγϣϯϨΠΞ΢τύλʔϯͷద༻
    ϧʔτφϏήʔγϣϯͷ഑ஔ
    ϝΠϯΦϒδΣΫτΛφϏήʔγϣϯʹ഑ஔ͍ͯ͘͠ɻ

    View Slide

  41. ϓϨθϯςʔγϣϯϨΠΞ΢τύλʔϯͷద༻
    ΠϯλϥΫγϣϯͰఆٛͨ͠Ϗϡʔ͝ͱʹϨΠΞ΢τύλʔϯΛݕ౼͍ͯ͘͠
    ίϨΫγϣϯ΍γϯάϧͷϨΠΞ΢τύλʔϯʹ͍ͭͯ͸ॻ੶Λࢀর

    View Slide

  42. ϓϨθϯςʔγϣϯϨΠΞ΢τύλʔϯͷద༻
    ΠϯλϥΫγϣϯͰఆٛͨ͠Ϗϡʔ͝ͱʹϨΠΞ΢τύλʔϯΛݕ౼͍ͯ͘͠
    ίϨΫγϣϯ΍γϯάϧͷϨΠΞ΢τύλʔϯʹ͍ͭͯ͸ॻ੶Λࢀর

    View Slide

  43. ϓϨθϯςʔγϣϯϨΠΞ΢τύλʔϯͷద༻
    ΠϯλϥΫγϣϯͰఆٛͨ͠Ϗϡʔ͝ͱʹϨΠΞ΢τύλʔϯΛݕ౼͍ͯ͘͠
    ίϨΫγϣϯ΍γϯάϧͷϨΠΞ΢τύλʔϯʹ͍ͭͯ͸ॻ੶Λࢀর

    View Slide

  44. ࠷ޙʹɺઃܭͨ͠6*ͱҰ൪࠷ॳʹఆٛͨ͠ϢʔεέʔεΛরΒ͠߹Θͤɺ
    શͯͷϢʔεέʔεΛຬ͍ͨͯ͠Δ͔Ͳ͏͔Λ֬ೝ͢Δɻ
    ϓϨθϯςʔγϣϯϨΠΞ΢τύλʔϯͷద༻

    View Slide

  45. 006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼

    View Slide

  46. ۭ૝ͷॻྨਃ੥8FCΞϓϦέʔγϣϯΛྫʹɺ
    λεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲ʹमਖ਼ͯ͠Έ·͢ɻ
    006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼

    View Slide

  47. 006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼

    View Slide

  48. 006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼

    View Slide

  49. 006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼
    Ϣʔεέʔε
    ॻྨਃ੥͕Ͱ͖Δ
    ਃ੥தɾ࡞੒த
    ͷॻྨΛ֬ೝ
    Ͱ͖Δ
    աڈͷॻྨΛ΋ͱ
    ʹॻྨਃ੥
    ͕Ͱ͖Δ
    ঝೝ͕ඞཁͳ
    ॻྨΛ֬ೝͰ͖Δ
    ਃ੥ΛঝೝͰ͖Δ ਃ੥ΛฤूͰ͖Δ ਃ੥ΛഁغͰ͖Δ

    View Slide

  50. 006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼
    ΦϒδΣΫτͷநग़
    ॻྨ
    w ਃ੥ऀ
    w ঝೝऀ
    w ୲౰
    w ਃ੥೔
    w εςʔλε
    w ֹۚ
    w ༻్
    w ৽ن࡞੒
    w ࡟আ
    w ฤू
    w ෳ੡
    w ঝೝ

    View Slide

  51. 006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼
    ϏϡʔͱφϏήʔγϣϯͷݕ౼
    ίϨΫγϣϯ
    ॻྨ
    γϯάϧ
    ॻྨ

    View Slide

  52. 006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼
    ϨΠΞ΢τύλʔϯͷద༻

    View Slide

  53. 006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼
    ϨΠΞ΢τύλʔϯͷద༻

    View Slide

  54. 006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼
    ϨΠΞ΢τύλʔϯͷద༻

    View Slide

  55. 006*࣮ફྫλεΫࢦ޲͔ΒΦϒδΣΫτࢦ޲΁ͷमਖ਼
    վળ
    w λεΫΛ੾Γସ͑Δͨͼʹɺτοϓը໘ʹ໭Βͳͯ͘Α͘ͳͬͨɻ
    w τοϓը໘ͰφϏήʔγϣϯͷબ୒Λ໎Θͳͯ͘Α͘ͳͬͨɻ
    w ͙͢ʹॻྨҰཡ͕֬ೝͰ͖ΔͨΊɺॻྨશମΛݟ௨͠΍͘͢ͳͬͨɻ

    View Slide

  56. ͜͜·Ͱͷ·ͱΊ
    6*ઃܭ࣌ʹ͸ΦϒδΣΫτࢦ޲Ͱઃܭͨ͠ํ͕ྑͦ͞͏ɻ

    View Slide

  57. ࣮ફ006*ͷख๏Ͱઃܭͯ͠ΈΑ͏

    View Slide

  58. ࢴͱϖϯΛ͝༻ҙ͍ͩ͘͞

    View Slide

  59. Լهͷཁ݅Λຬͨ͢ΞϓϦέʔγϣϯͷ6*ΛϞόΠϧϨΠΞ΢τͰઃܭͯ͠Έ͍ͯͩ͘͞
    ࣾһ໊฽ΞϓϦέʔγϣϯ
    ໺ࡔ͞Μͷॴଐ
    νʔϜΛ֬ೝ͢Δ
    ాத͞ΜΛ
    ϑΝΠφϯε
    νʔϜʹ௥Ճ͢Δ
    ԣా͞ΜΛ
    σβΠϯνʔϜ
    ͔Β࡟আ͢Δ
    ϚʔέςΟϯά
    νʔϜͷࣾһ
    Λ֬ೝ͢Δ
    ࣾһΛ
    ৽نొ࿥͢Δ
    ৓೭಺͞Μͷ
    ΦϯϥΠϯ
    εςʔλεΛ
    ֬ೝ͢Δ
    ΤϯδχΞϦϯά
    νʔϜͷ঺հจΛ
    ֬ೝ͢Δ
    ాࡔ͞Μͷ࿈བྷઌ
    Λ֬ೝ͢Δ

    View Slide

  60. ࢀߟ
    w ΦϒδΣΫτࢦ޲6*σβΠϯ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ
    w IUUQTXXXTPDJPNFEJBDPKQ
    w IUUQTXXXTPDJPNFEJBDPKQ

    View Slide