$30 off During Our Annual Pro Sale. View Details »

はじめてのOOUI / Let's get OOUI started

Ueni
March 09, 2022

はじめてのOOUI / Let's get OOUI started

Ueni

March 09, 2022
Tweet

More Decks by Ueni

Other Decks in Technology

Transcript

  1. @uenitty
    ͸͡Ίͯͷ OOUI
    wellday OOUIϫʔΫγϣοϓ 2022/03/09

    View Slide

  2. ࢀߟॻ
    2
    • ಺༰͸͔ͳΓল͍͍ͯ·͢


    • ࣗ෼ͷղऍͰ࠶ߏ੒͍ͯ͠·͢


    • ؒҧ͍͕͋ͬͨΒ͝ΊΜͳ͍͞


    • ͥͻຊΛಡΜͰ͍ͩ͘͞ʂ
    https://www.sociomedia.co.jp/10046

    View Slide

  3. OOUIͱ͸
    3
    • ΦϒδΣΫτࢦ޲UIʢObject-Oriented User Interfaceʣ


    • OOUI͸ʮ࢖͍΍͢͞ʯͱʮ։ൃ͠΍͢͞ʯཱ͕྆Ͱ͖Δ

    View Slide

  4. ΦϒδΣΫτࢦ޲ͱ͸
    4
    • ΦϒδΣΫτ


    • ໨౰ͯɺ໨తɺର৅෺ɺ΋ͷ


    • ࢦ޲


    • ͋Δํ޲΍໨తʹ޲͔͏͜ͱɺ޲͔ΘͤΔ͜ͱ


    • ΦϒδΣΫτࢦ޲


    • ໨౰ͯͷର৅෺ʹண໨͢Δ͜ͱ

    View Slide

  5. ΦϒδΣΫτࢦ޲ͱ͸
    5
    • ΦϒδΣΫτ


    • ໨౰ͯɺ໨తɺର৅෺ɺ΋ͷ


    • ࢦ޲


    • ͋Δํ޲΍໨తʹ޲͔͏͜ͱɺ޲͔ΘͤΔ͜ͱ


    • ΦϒδΣΫτࢦ޲


    • ໨౰ͯʹண໨͢Δ͜ͱ

    View Slide

  6. ۩ମྫ
    6
    • πΠʔτ Λ ౤ߘ͢Δ


    • πΠʔτ Λ Ӿཡ͢Δ


    • πΠʔτ ʹ ͍͍Ͷ͢Δ


    • πΠʔτ Λ ࡟আ͢Δ

    View Slide

  7. ۩ମྫ
    7
    • πΠʔτ Λ ౤ߘ͢Δ


    • πΠʔτ Λ Ӿཡ͢Δ


    • πΠʔτ ʹ ͍͍Ͷ͢Δ


    • πΠʔτ Λ ࡟আ͢Δ
    ໊ࢺ ಈࢺ
    ໨౰ͯ ػೳ
    ΦϒδΣΫτ λεΫ

    View Slide

  8. ΦϒδΣΫτΛࢦ޲ͨ͠UIͷྫ
    8
    πΠʔτ
    • ࠷ॳ͔Β໨౰ͯͷର৅෺͕ݟ͍͑ͯΔ


    • ૢ࡞ର৅Λબ୒ͯ͠ɺΞΫγϣϯΛબ୒͢Δ


    • ໊ࢺ → ಈࢺ


    • ܾ·ͬͨૢ࡞ॱং͸ͳ͍


    • ϞʔυϨε

    View Slide

  9. λεΫΛࢦ޲ͨ͠UIͷྫ
    9
    ౤ߘ͢Δ
    Ӿཡ͢Δ
    ͍͍Ͷ͢Δ
    ࡟আ͢Δ

    View Slide

  10. λεΫΛࢦ޲ͨ͠UIͷྫ
    10
    ౤ߘ͢Δ
    Ӿཡ͢Δ
    ͍͍Ͷ͢Δ
    ࡟আ͢Δ

    View Slide

  11. λεΫΛࢦ޲ͨ͠UIͷྫ
    11
    ౤ߘ͢Δ
    Ӿཡ͢Δ
    ͍͍Ͷ͢Δ
    ࡟আ͢Δ

    View Slide

  12. λεΫΛࢦ޲ͨ͠UIͷྫ
    12
    ౤ߘ͢Δ
    Ӿཡ͢Δ
    ͍͍Ͷ͢Δ
    ࡟আ͢Δ
    ͍͍Ͷ͢ΔπΠʔτΛ


    બ୒͍ͯͩ͘͠͞

    View Slide

  13. λεΫΛࢦ޲ͨ͠UIͷྫ
    13
    ౤ߘ͢Δ
    Ӿཡ͢Δ
    ͍͍Ͷ͢Δ
    ࡟আ͢Δ
    ͍͍Ͷ͢ΔπΠʔτΛ


    બ୒͍ͯͩ͘͠͞

    View Slide

  14. λεΫΛࢦ޲ͨ͠UIͷྫ
    14
    ౤ߘ͢Δ
    Ӿཡ͢Δ
    ͍͍Ͷ͢Δ
    ࡟আ͢Δ
    • ର৅෺͕ݟ͍͑ͯͳ͍


    • ΞΫγϣϯΛબ୒ͯ͠ɺૢ࡞ର৅Λબ୒͢Δ


    • ಈࢺ → ໊ࢺ


    • ૢ࡞Λ࢝ΊΔͱଞͷ͜ͱ͕Ͱ͖ͳ͍


    • Ϟʔμϧ

    View Slide

  15. λεΫࢦ޲UI
    15
    • Ͱ͖Δ͜ͱͷ෼͚ͩબ୒ࢶ͕ඞཁ
    ͳͨΊɺը໘ߏ੒΍ը໘ભҠ͸
    ෳࡶʹͳΔ


    • খ͞ͳ࢓༷มߋ΍ػೳ௥ՃͰ΋
    େن໛ͳ։ൃ͕ඞཁʹͳΓɺ
    ৚݅෼ذ͕૿͑ΔͨΊόά΋ଟ͍
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.39

    View Slide

  16. ΦϒδΣΫτࢦ޲UI
    16
    • Ͱ͖Δ͜ͱ͕ଟ͔ͬͨΓ૿͑ͨΓ
    ͯ͠΋ɺը໘ߏ੒΍ૢ࡞ํ๏͸
    γϯϓϧͳ··


    • ࢓༷มߋ΍ػೳ௥Ճͷ޻਺͸
    খن໛ͰࡁΈɺ৚݅෼ذ͕গͳ͘
    όά΋গͳ͍
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.40

    View Slide

  17. ΦϒδΣΫτࢦ޲UIͷݪଇ
    17
    • ΦϒδΣΫτΛ஌֮Ͱ͖௚઀తʹಇ͖͔͚ΒΕΔ


    • ΦϒδΣΫτ͸ࣗ਎ͷੑ࣭ͱঢ়ଶΛମݱ͢Δ


    • ΦϒδΣΫτબ୒→ΞΫγϣϯબ୒ ͷૢ࡞ॱং


    • ͢΂ͯͷΦϒδΣΫτ͕ޓ͍ʹڠௐ͠ͳ͕ΒUIΛߏ੒͢Δ

    View Slide

  18. ΦϒδΣΫτΛ஌֮Ͱ͖௚઀తʹಇ͖͔͚ΒΕΔ
    18
    • ର৅෺͕ݟ͓͑ͯΓɺʮԿΛͰ͖Δ͔ʯͷώϯτ͕ಘΒΕΔ


    • ৮Δ͜ͱ͕Ͱ͖ɺର৅෺ͷมԽͱͯ͠࡞ۀ݁Ռ͕ೝࣝͰ͖Δ
    􀁢
    􀁠

    View Slide

  19. ΦϒδΣΫτ͸ࣗ਎ͷੑ࣭ͱঢ়ଶΛମݱ͢Δ
    19
    • Ϣʔβʔ͕ঢ়گΛ೺Ѳ͠ɺ࣍ʹߦ͏΂͖ૢ࡞Λߟ͑ΒΕΔΑ͏ʹ͢Δ


    • ϢʔβʔͷΞΫγϣϯʹରͯ͠ϦΞϧλΠϜʹ൓ԠΛฦ͢


    • ϦΞϧੈքͷ෺ཧੑΛ࣋ͬͨʮ΋ͷʯͱಉ͡ײ֮Ͱѻ͑ΔΑ͏ʹ͢Δ
    https://www.sociomedia.co.jp/9267

    View Slide

  20. ΦϒδΣΫτબ୒→ΞΫγϣϯબ୒ ͷૢ࡞ॱং
    20
    • ʮ໊ࢺ→ಈࢺʯͷૢ࡞ॱংʹ͢Δ͜ͱ


    • ʮಈࢺ→໊ࢺʯ͸ݱ࣮Ͱ͸͋Γ͑ͳ͍
    ʢ౤͔͛ͯΒੴΛ࣋ͭਓ͸͍ͳ͍ʣ
    https://www.sociomedia.co.jp/8740
    1. ΦϒδΣΫτબ୒
    2. ΞΫγϣϯબ୒

    View Slide

  21. ͢΂ͯͷΦϒδΣΫτ͕ޓ͍ʹڠௐ͠ͳ͕ΒUIΛߏ੒͢Δ
    21
    • ϦΞϧੈքͷ๏ଇΛϝλϑΝʔʹɺ
    όʔνϟϧੈք΁ͷؔΘΓํΛ
    ࣗવʹମಘͰ͖ΔΑ͏ʹԋग़͢Δ


    • ΞϥϯɾέΠ͸͜ΕΛ
    ʮϢʔβʔΠϦϡʔδϣϯʯ
    ͱݺΜͰॏཁੑΛઆ͍ͨ
    https://www.apple.com/jp/macos/big-sur-preview/

    View Slide

  22. ͜Ε͸OOUI
    22
    https://www.apple.com/jp/newsroom/

    View Slide

  23. ͜Ε͸OOUI͡Όͳ͍
    23
    https://www.aichibank.co.jp/atm/using/guide/

    View Slide

  24. ͜Ε͸OOUI
    24
    https://abema.tv/

    View Slide

  25. ͜Ε͸OOUI͡Όͳ͍
    25
    https://abema.tv/channels/payperview-1/slots/AakjKLgTGb6msu
    ΞΧ΢ϯτ͋Γ &


    ίΠϯ͋Γͷ৔߹


    ߪೖ׬ྃ
    ΞΧ΢ϯτ͋Γ &


    ίΠϯͳ͠ͷ৔߹
    ్தͰΩϟϯηϧͷ৔߹


    ৼΓग़͠ʹ໭Δ
    ΞΧ΢ϯτͳ͠ &


    ίΠϯͳ͠ͷ৔߹

    View Slide

  26. OOUI͕࣮ݱ͢Δʮ࢖͍΍͢͞ʯ
    26
    • ୭Ͱ΋࢖͑Δಓ۩


    • iPhoneʹ͸આ໌ॻ͕ͳ͍


    • ΦϒδΣΫτͷ൓ԠΛݟͳ͕Βࢼߦࡨޡ͢ΔதͰɺ΍Γ͍ͨ͜ͱΛ
    ࣮ݱͰ͖Δ


    • ࣗ༝ͳૢ࡞ॱং


    • ϞʔυϨε

    View Slide

  27. OOUI͕࣮ݱ͢Δʮ࡞Γ΍͢͞ʯ
    27
    • গͳ͍ը໘਺ɺγϯϓϧͳը໘ભҠ


    • λεΫࢦ޲UIͩͱ5ʙ20ഒͷը໘਺͕ඞཁʹͳΔ※


    • গͳ͍৚݅෼ذ = গͳ͍όά


    • ෳࡶͳ৚݅෼ذ͸ɺϢʔβʔͷࢥߟ΍൑அͷதʹҠಈ͢Δ


    • ਖ਼֬ͳ޻਺ݟੵɺαʔϏε੒௕΁ͷૉૣ͍௥ै


    • มΘΓʹ͍͘΋ͷΛ࣠ʹ࣮૷͢Δ͜ͱʹͳΔͨΊɺมߋՕॴ͕໌֬ʹ
    ͳΓɺ޻਺͕গͳ͘ͳΔ
    ※ ΦϒδΣΫτࢦ޲UIσβΠϯ p.ix

    View Slide

  28. OOUIઃܭͷجຊεςοϓ
    28

    View Slide

  29. OOUIઃܭͷجຊεςοϓ
    29
    1. ΦϒδΣΫτͷநग़ʢϞσϧʣ


    2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ


    3. ϨΠΞ΢τύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ


    ͜ΕΒΛॱෆಉͰ܁Γฦ͠ௐ੔͠ɺશମͱͯ͠ͷ·ͱ·ΓΛ࡞Γ্͛Δ

    View Slide

  30. 1. ΦϒδΣΫτͷநग़ʢϞσϧʣ
    30
    • ϢʔβʔͷϝϯλϧϞσϧ΍ۀ຿ͷதʹͲͷΑ͏ͳ֓೦͕ଘࡏ͍ͯ͠Δ͔ௐ΂Δ


    • ͋Δ֓೦͕ΦϒδΣΫτͱ͍͑Δ͔൑அ͢Δख͕͔Γ


    • ਺͑ΒΕΔ໊ࢺͱͯ͠දͤΔ


    • ಉछͷू߹ͱͯ͠؅ཧ͞ΕಘΔ


    • ڞ௨ͷΞΫγϣϯΛ͍࣋ͬͯΔ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.54

    View Slide

  31. 2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ
    31
    • ͻͱ·ͱ·Γͷ৘ใදࣔྖҬʢϏϡʔʣͱ
    ͦΕΒͷݺͼग़ؔ͠܎ʢφϏήʔγϣϯʣ
    Λߟ͑Δ


    • 1ͭͷΦϒδΣΫτ͸ɺ৔໘ʹԠͯ࢟͡Λ
    ม͑ɺҟͳΔ໘ੵ΍৘ใͷৄࡉ౓Ͱ
    Ϣʔβʔʹ޲͚ͯද৅͞ΕΔͨΊɺ
    ͜ͷதؒతͳந৅౓ͷϨΠϠʔ͕
    ॊೈͳOOUIΛߏங͢Δ্ͰॏཁʹͳΔ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.100

    View Slide

  32. 2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ
    32
    • Ϗϡʔʢͻͱ·ͱ·Γͷ৘ใදࣔྖҬʣͷछྨ͸େ͖͘2ͭ


    • ίϨΫγϣϯɿಉछͷΦϒδΣΫτΛෳ਺ฒ΂ͯදࣔ͢Δ΋ͷ


    • γϯάϧɿ1ͭͷϏϡʔͰ1ͭͷΦϒδΣΫτΛදࣔ͢Δ΋ͷ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.56

    View Slide

  33. 2. ϏϡʔͱφϏήʔγϣϯͷݕ౼ʢΠϯλϥΫγϣϯʣ
    33
    • ΦϒδΣΫτؒͷܨ͕Γͱଟॏੑ͔ΒࢀরՄೳੑΛಋ͖ɺφϏήʔγϣϯΛఆٛ͢Δ


    • φϏήʔγϣϯ͸Ϗϡʔಉ࢜ͷݺͼग़ؔ͠܎Ͱ͋Γɺը໘ભҠͰ͸ͳ͍͜ͱʹ஫ҙ


    • ΠϯλϥΫγϣϯ૚͸ը໘ͱ͍͏୯Ґʹґଘ͠ͳ͍ந৅౓ͷϨΠϠʔ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.56

    View Slide

  34. 3. ϨΠΞ΢τύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ
    34
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.58
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.57

    View Slide

  35. 3. ϨΠΞ΢τύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ
    35
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.59
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.58

    View Slide

  36. 3. ϨΠΞ΢τύλʔϯͷద༻ʢϓϨθϯςʔγϣϯʣ
    36
    • ΠϯλϥΫγϣϯ૚Λ൓ө͢ΔΑ͏ʹϏϡʔΛ഑ஔͯ͠ɺϢʔ
    ザ
    ʔ
    が
    ࣮ࡍʹ
    ໨ʹ͢Δը໘Λߏ੒͢Δ


    • ը໘ͷ୯ҐΛม͑Δ͜ͱ
    で
    ɺ·ͬͨ͘ಉ
    じ
    UIϞ
    デ
    ϧͰҟͳΔը໘؀ڥʹ
    ରԠ
    で
    ͖Δ


    • ͢ͰʹҰൠԽ͍ͯ͠ΔϨΠΞ΢τύλʔϯΛ౿ऻ͢Δ͜ͱͰɺϢʔβʔͷ
    ֶशޮ཰΍ૢ࡞ੑΛ޲্Ͱ͖Δ

    View Slide

  37. جຊͷ࣮ફྫ
    37

    View Slide

  38. λεΫͷஅยΛચ͍ग़͢
    38
    • ΞϓϦέʔγϣϯ͕ൃ૝͞Εͨͱ͖
    ͷখ͞ͳ໰୊ҙࣝͷू·Γ


    • ࣄલͷϦαʔν΍ཁٻ෼ੳͳͲʹ
    Αͬͯἧ͑Δ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.64

    View Slide

  39. ໊ࢺΛநग़͢Δ
    39
    • ػցతʹൈ͖ग़͢ͷͰ͸ͳ͘ɺ
    Ϣʔβʔͷؔ৺ͷର৅ͱͳΔ֓೦͸
    Կ͔Λߟ͑ͯൈ͖ग़͢
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.65

    View Slide

  40. ໊ࢺಉ࢜ͷؔ܎Λ੔ཧ͢Δ
    40
    • λεΫʹෳ਺ͷ໊ࢺؚ͕·ΕΔ
    ৔߹͸ઢͰͭͳ͍Ͱؔ࿈Λࣔ͢
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.67

    View Slide

  41. ໊ࢺΛ൚Խ͠ɺཻ౓Λἧ͑Δ
    41
    • λεΫͷதʹग़ͯ͜ͳ໊͍ࢺΛ
    ৽ͨʹཱͯͯ΋ྑ͍


    • ·ͱΊํʹܾ·Γ͸ͳ͍
    ʢؔ৺ྖҬʹΑΔͨΊʣ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.68

    View Slide

  42. ໊ࢺͷؔ܎ੑΛͭͳ͛Δ
    42
    • ಉ໊͡ࢺΛ౷߹ͯ͠ɺ
    ωοτϫʔΫঢ়ʹͭͳ͛Δ


    • ΞϓϦέʔγϣϯશମΛ௨ͯ͡
    ѻΘΕΔΦϒδΣΫτͷߏ੒͕
    ݟ͑ͯ͘Δ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.69

    View Slide

  43. ϝΠϯΦϒδΣΫτͱͦͷଟॏੑΛಛఆ͢Δ
    43
    • ΦϒδΣΫτͷ༏ઌ౓Λߟ͑ͯɺ
    ओཁͳ΋ͷͱͦ͏Ͱͳ͍΋ͷʹ
    ෼͚Δ


    • ෼͚ํʹܾ·Γ͸ͳ͍
    ʢؔ৺ྖҬʹΑΔͨΊʣ


    • ϝΠϯΦϒδΣΫτؒͰଟॏʹͳΔ
    Մೳੑ͕͋Δ΋ͷͷଆʹʮ*ʯΛ
    ෇͚Δ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.70

    View Slide

  44. ෇ਵ͢ΔΦϒδΣΫτΛϓϩύςΟʹ͢Δ
    44
    • λεΫʹ໌ࣔ͞Ε͍ͯͳͯ͘΋ɺ
    ඞཁʹͳΓͦ͏ͳϓϩύςΟ͕
    ͋Ε͹௥Ճ͢Δ


    • ؔ࿈͢ΔϝΠϯΦϒδΣΫτಉ࢜΋
    ͦΕͧΕͷϓϩύςΟͰ͋Δͱ
    ߟ͑Δ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.71

    View Slide

  45. λεΫͷಈࢺ͔ΒΞΫγϣϯΛݟ͚ͭΔ
    45
    • ϓϩύςΟͱಉ༷ʹɺඞཁʹͳΓ
    ͦ͏ͳΞΫγϣϯ͕͋Ε͹ิ଍͢Δ


    • ʮ֬ೝ͢ΔʯͳͲ͸ΞΫγϣϯʹ
    ؚΊͳ͍ʢදࣔ͢Ε͹ࡁΉͨΊʣ


    • ϓϩύςΟʹඥͮ͘ΞΫγϣϯ͸ɺ
    ϝΠϯΦϒδΣΫτʹඥ͚ͮΔ͔
    ϓϩύςΟ໊ΛೖΕͨΞΫγϣϯΛ
    ͭ͘ΔͱΘ͔Γ΍͍͢
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.75

    View Slide

  46. ϝΠϯΦϒδΣΫτʹϏϡʔΛ༩͑Δ
    46
    • ্ਤ͸2छྨͷϏϡʔΛػցతʹ༻ҙ͍ͯ͠Δ͕࠷ऴతʹলུ͢Δ৔߹΋͋Δ
    ʢOOUIຊ p.79ࢀরʣɻলུͷ൑அ͸ޙͷஈ֊Ͱ΋ྑ͍


    • ίϨΫγϣϯϏϡʔ͔ΒγϯάϧϏϡʔΛݺͼग़͢ྲྀΕΛ໼ҹͰࣔ͢
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.79

    View Slide

  47. Ϗϡʔؒͷݺͼग़ؔ͠܎Λݕ౼͢Δ
    47
    • ϝΠϯΦϒδΣΫτಉ࢜ͷͭͳ͕Γͱଟॏੑ͔ΒࢀরՄೳੑΛಋ͖ग़͠ɺ
    φϏήʔγϣϯͱͯ͠ͷݺͼग़ؔ͠܎Λఆٛ͢Δ


    • ௨ৗɺγϯάϧϏϡʔΛࢀরݩͱͯ͠ɺଟॏੑ͕͋Δ৔߹͸ίϨΫγϣϯ
    Ϗϡʔ͕ࢀরઌʹɺଟॏੑ͕ͳ͍৔߹͸γϯάϧϏϡʔ͕ࢀরઌʹͳΔ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.82

    View Slide

  48. ϧʔτφϏήʔγϣϯ߲໨Λબఆ͢Δ
    48
    • ϝΠϯΦϒδΣΫτͷத͔Βಛʹॏཁͳ΋ͷΛฒ΂Δ


    • Ϣʔβʔ͕ΞϓϦέʔγϣϯΛ࢖͏ࡍʹɺ࠷ॳʹࢥ͍ු͔΂ΔΦϒδΣΫτ
    Λબఆ͢Δ


    • ΞϓϦέʔγϣϯΛʮػೳʯͰ͸ͳ͘ʮ΋ͷʯ͕ฒΜͰ͍ΔΠϝʔδͰଊ͑Δ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.82

    View Slide

  49. ϨΠΞ΢τΛݕ౼͢Δ
    49
    • ϝΠϯΦϒδΣΫτಉ࢜ͷ
    ࢀরؔ܎Λ౿·͑ͯϨΠΞ΢τ
    ύλʔϯΛద༻͢Δ


    • OOUIʹదͨ͠ϨΠΞ΢τύλʔϯ
    ͷղઆ͸OOUIຊΛࢀরͷ͜ͱ
    ʢεϥΠυʹॻ͖੾Εͳ͍΄Ͳ
    ͔ͬ͠Γղઆ͞Ε͍ͯ·͢ʣ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.92

    View Slide

  50. ϏδϡΞϧσβΠϯΛߦ͏
    50
    • ೥ʑมԽ͢ΔϏδϡΞϧදݱͷτϨϯυ΍ϓϥοτϑΥʔϜ͝ͱͷඪ४ͳͲΛ
    ߟྀͭͭ͠ɺݟ΍͘͢Θ͔Γ΍͍͢දݱʹ͢Δ
    ΦϒδΣΫτࢦ޲UIσβΠϯ p.121

    View Slide

  51. OOUIΛֶ΂Δࢿྉ
    51

    View Slide

  52. OOUIຊ
    52
    • ΦϒδΣΫτࢦ޲UIσβΠϯ
    ࢖͍΍͍͢ιϑτ΢ΣΞͷݪཧ


    • OOUIʹ͍ͭͯͷ೔ຊޠͷॻ੶͸
    ͨͿΜ͜Ε͚ͩ
    https://www.sociomedia.co.jp/10046

    View Slide

  53. • ຊΛಡΉલʹશମ૾Λ௫Ήͷʹ
    ͓͢͢Ί


    • 1࣌ؒ͋Γ·͢
    OOUIຊͷஶऀͷొஃಈը
    53
    https://youtu.be/2jqXiAhqCm0?t=4097
    􀊕

    View Slide

  54. OOUIຊͷஶऀͷϒϩάͱTwitter
    54
    • ຊͱ͸ҧ͏੾ΓޱͰઆ໌͞Ε͍ͯΔ͜ͱ͕͋Γɺཧղ͕ਂ·Δ
    https://www.sociomedia.co.jp/category/blog https://twitter.com/manabuueno

    View Slide

  55. ·ͱΊ
    55

    View Slide

  56. OOUI ΍͍͖ͬͯ·͠ΐ͏ʂ
    56
    • ΦϒδΣΫτࢦ޲UI


    • ʮ࢖͍΍͢͞ʯͱʮ։ൃ͠΍͢͞ʯΛཱ྆͢Διϑτ΢ΣΞͷʮݪཧʯ


    • ໊ࢺ → ಈࢺ


    • ○ϞʔυϨεɺ✗Ϟʔμϧ


    • എܠͷ఩ֶ΍۩ମతͳઃܭํ๏ɺ͢ͰʹλεΫࢦ޲ͳUIΛΦϒδΣΫτࢦ޲
    ʹ͢Δํ๏ͳͲৄࡉ৘ใ͸ɺॻ੶΍ಈը͕͓͢͢Ί

    View Slide