noteの過去と、今と、これからのこと。

2018/03/13
UI Crunch #12 「伝える」を加速させる。書く、読むUI
株式会社piece of cake
デザイナー沢登達也
@sawamemo

Transcript

1. UI Crunch #12 2018/03/13 OPUFͷ աڈͱɺ ࠓͱɺ ͜Ε͔Βͷ͜ͱɻ ୔ొୡ໵
2. ୔ొ
   ୡ໵ @sawamemo α ϫ ϊ Ϙ Ϧ
   λ π Ϡ גࣜձࣾQJFDF
   PG
   DBLFͷσβΠφʔɻ ܭ೥ͷडୗσβΠϯձࣾΛܦͯɺ ೥݄ʹೖࣾɻ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͸͡Ί·ͯ͠
3. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ʹ͍ͭͯ
4. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͱ͸ ೥૑ۀͷϕϯνϟʔاۀ ैۀһ
   ໊ ʢਖ਼ࣾһʣ ΄Ͳ ̎ͭͷϓϩμΫτΛӡӦ
5. ͱ͸ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ໊Ҏ্ͷΫϦΤΠλʔɺ ࣾҎ্ͷग़൛ࣾͱఏܞͯ͠ ίϯςϯπΛ഑৴͍ͯ͠Δɺ ϝσΟΞϓϥοτϑΥʔϜͰ͢ɻ ಡΉαʔϏε
6. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͱ͸ ݸਓ͕ࣗ༝ʹίϯςϯπΛ ࡞੒ͯ͠ɺ ϑΝϯͱͷίϛϡχ έʔγϣϯͰ͖Δίϯςϯπ഑৴ ϓϥοτϑΥʔϜͰ͢ɻ ಡΉ ɾ ॻ͘αʔϏε
7. ͱ͸ ʹ͍ͭͯ ͓࿩͍͖ͤͯͨͩ͞·͢ɻ ຊ೔͸ɺ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ
8. OPUFʹ͍ͭͯ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ OPUFͷาΈ αʔϏεϦϦʔε 2014/4 2017/10 2018/3 2014/10 J04
   
   BOESPJE൛ϦϦʔε ݱࡏ ਂ௡͞Μ$90ब೚ ͳΜ΍͔Μ΍͋Γ·ͯ͠
9. 5)&
   (6*-%ͷਂ௡͞Μ͕ $90ͱͯ͠ब೚ OPUFʹ͍ͭͯ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ
10. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ OPUFʹ͍ͭͯ ೔ʑͷΧΠθϯΛ OPUFʹϙετ͍ͯ͠·͢
11. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ OPUFʹ͍ͭͯ 6*ͷΧΠθϯ͸طʹɺ هࣄʹͳ͍ͬͯΔͷͰ͸ 6*
    $SVODIԿ࿩ͦ͏ ๻΋OPUFͰ ॻ͍͍ͯΔ͠
12. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ OPUFʹ͍ͭͯ ݱࡏͷΧΠθϯ͸هࣄͳͲʹ ·ͱΊΒΕ͍ͯΔ͕ɺաڈ΍ະདྷͷ࿩͸ ͋·Γͯ͠དྷͳ͔ͬͨɻ ࠓ೔͸ɺͦ͜Λ۷ΓԼ͍͖͛ͯ·͢ɻ
13. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ 01. 02. 03. ͸͡·ΓͷOPUF ݱࡏͷOPUF ͜Ε͔ΒͷOPUF BHFOEB
14. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ 01. ͸͡·ΓͷOPUF
15. ͸͡·ΓͷOPUF OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ϦϦʔε࣌ͷOPUF 2014/04/07
16. ͸͡·ΓͷOPUF ೥ ݱࡏ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ
17. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ೥ ͸͡·ΓͷOPUF ݕࡧ΋ΧςΰϦ΋ແ͘ɺશͯλΠ ϜϥΠϯʹू໿͞Ε͍ͯͨɻ λΠϜϥΠϯ্Ͱ౤ߘग़དྷͨҝɺ ॻ͘ͱಡΉΛγʔϜϨεʹߦ͑Δ Α͏ͳ6*ͩͬͨͱߟ͑ΒΕ·͢ɻ
18. ͸͡·ΓͷOPUF OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ೥ ݱࡏ
19. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ೥ ͸͡·ΓͷOPUF λΠϜϥΠϯͱهࣄͷߦ͖དྷͷҝ ͷ໭ΔϘλϯ΋ଘࡏɻ λΠϜϥΠ ϯ͕࣠ʹͳ͍ͬͯΔࣄ͕Θ͔Δɻ ໌ேମ͕࢖ΘΕ͓ͯΓɺࢴഔମ ͷಡΈ৺஍Λҙ͍ࣝͯ͠Δ͜ͱ͕ ࢕͑Δɻ
20. ϦϦʔεϲ݄ ສ66 ϦϦʔε࣌ ͳ͔ͳ͔ྑ͍ײ͡ ʂ ʂ ʂ ͸͡·ΓͷOPUF OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ
21. ͸͡·ΓͷOPUF ϦϦʔε͔Βஸ౓೥ޙͷOPUF 2016/04/07 OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ
22. ͸͡·ΓͷOPUF OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ೥ ೥
23. ೥ ͸͡·ΓͷOPUF ͓͢͢Ί ɾ ΧςΰϦ͕૿͑λΠϜϥ ΠϯҎ֎ͷ͕࣠ग़དྷͨɻ ʢݟ͑ͯ ͍ͳ͍͕λάػೳ΋૿͍͑ͯΔʣ ৽ͨͳهࣄʹग़ձ͏ҝͷ6*ͩͬ ͨͱߟ͑ΒΕ·͢ɻ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ
24. ͸͡·ΓͷOPUF OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ೥ ೥
25. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ೥ ͸͡·ΓͷOPUF λΠτϧͷαΠζ͕཈͑ΒΕɺ໌ ேମ͔ΒΰγοΫମʹɻߦؒ΋ए ׯ٧ΊΒΕ͍ͯΔɻ େ͖͍มԽ͸ແ͍͕ɺΧςΰϦ΍ ͓͢͢Ίͷ͕࣠ੜ·Εͨҝɺ͍ͭ Ͱ΋υϩϫʔϝχϡʔʹΞΫηε ग़དྷɺ֤ϖʔδ΁ભҠՄೳʹɻ
26. ͸͡·ΓͷOPUF OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ϦϦʔε͔Β೥ མͪண͍ͯ͠·͍ͬͯͨ
27. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͸͡·ΓͷOPUF ͜͜·Ͱ͕աڈͷOPUF
28. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ 02. ݱࡏͷOPUF
29. ݱࡏͷOPUF OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ࢪࡦΛͭʹ෼ྨ͍ͯ͠·͢ɻ ൃݟੑ ܧଓੑ ίϯςϯπύϫʔ
30. ൃݟੑ ݱࡏͷOPUF هࣄͷݟ͚ͭ΍͢͞΍ɺ୳͠΍͢͞ɺͳͲ ͷهࣄͷ઀఺ʹͳΔϙΠϯτΛΧΠθϯ͢ Δ͜ͱͰൃݟੑͷ޲্Λૂ͍·͢ɻ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ɾ ߋ৽௨஌Λ૿΍͢ ɾ ͓͢͢ΊهࣄΛ఻͑Δ ɾ FUD ྫ͑͹
31. ݱࡏͷOPUF OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ܧଓੑ OPUFΛ࢖͏͜ͱͰͷϝϦοτΛ૿΍ͨ͠Γ ɺෆ۩߹ʹΑΔෆຬͳͲΛղফ͢Δ͜ͱͰ ܧଓੑͷ޲্Λૂ͍·͢ɻ ɾ هࣄΛಡΜͰ΋Β͑Δ ɾ ҙਤ௨Γʹಈ࡞͢Δ6* ɾ FUD ྫ͑͹
32. ݱࡏͷOPUF OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ίϯςϯπύϫʔ OPUFͰॻ͔Εͨίϯςϯπͷ඼࣭ͷ޲্ ΍ɺॻ͘͜ͱࣗମͷϋʔυϧΛԼ͛Δ͜ͱ Ͱɺίϯςϯπύϫʔͷ޲্Λૂ͍·͢ɻ ɾ εΩϧΞοϓࢪࡦ ɾ Πϕϯτͷ։࠵ ɾ FUD ྫ͑͹
33. ݱࡏͷOPUF λΠϜϥΠϯͷΧΠθϯ ൃݟੑ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ
34. ݱࡏͷOPUF ϑΥϩʔϒʔελʔͷΧΠθϯ ൃݟੑ ܧଓੑ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ
35. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ݱࡏͷOPUF γΣΞϒʔελʔͷΧΠθϯ ൃݟੑ
36. ͦͷଞͨ͘͞Μ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ݱࡏͷOPUF
37. ݱࡏͷOPUF ݱࡏ͸ ͘͢͝੒௕͍ͯ͠·͢ɻ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ
38. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ 03. ͜Ε͔ΒͷOPUF
39. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͦ΋ͦ΋ɺOPUFͬͯͳΜͩʁ ͜Ε͔ΒͷOPUF
40. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͱ͍͏ॴ͔Βߟ͑௚͍ͯ͠·͢ɻ ͜Ε͔ΒͷOPUF ͦ΋ͦ΋ɺOPUFͬͯͳΜͩʁ
41. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF ͳ͔ͥʁ
42. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF ೥΋αʔϏεΛӡӦ͍ͯ͠Δͱɺ ্ཱͪ͛౰ॳͱݱࡏͱͰɺ αʔϏεͷ͋Δ΂͖͕࢟΅΍͚͖ͯͯ͠·͏ɻ
43. OPUFΛ୳͢
    ϫʔΫγϣοϓ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF
44. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF Ϗδϣϯ ϛογϣϯ ϓϩϛε λάϥΠϯ ͜ΜͳOPUF͸ݏͩ OPUFͷੑ֨
45. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF νʔϜͷೝࣝΛ੔͑Δ͜ͱͰɺ ൑அεϐʔυΛ্͛Δ Ϗδϣϯ ϛογϣϯ ϓϩϛε λάϥΠϯ ͜ΜͳOPUF͸ݏͩ OPUFͷੑ֨
46. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ੒௕ʹ଱͑͏ΔσβΠϯϧʔϧ ͜Ε͔ΒͷOPUF
47. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF σβΠφʔ ϲ݄ σβΠφʔ ϲ݄ Πϯλʔϯ ϲ݄ ύʔτφʔ ໿ϲ݄ ݄࣌఺ͷσβΠϯνʔϜ
48. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF σβΠφʔ ϲ݄ σβΠφʔ ϲ݄ Πϯλʔϯ ϲ݄ ύʔτφʔ ໿ϲ݄ ݄࣌఺ͷσβΠϯνʔϜ ͜Ε͔ΒͷOPUF σβΠϯγεςϜ΋ϧʔϧ΋͋Γ·ͤΜ ਏ͍
49. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF σβΠφʔ ϲ݄ σβΠφʔ ϲ݄ Πϯλʔϯ ϲ݄ ύʔτφʔ ໿ϲ݄ ݄࣌఺ͷσβΠϯνʔϜ ͜Ε͔ΒͷOPUF αʔϏεͷϑΣʔζʹΑͬͯ σβΠϯϧʔϧͷॏཁੑ͸มΘΔ෺ɻ Ͱ΋ࠓޙɺσβΠφʔ΋૿͍͑ͯ͘ ͍ͭ΍Δͷ͔ɻࠓͰ͢Ͷ
50. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF খ࢝͘͞ΊΔΨΠυϥΠϯ GSPOUJGZΛར༻
51. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF খ࢝͘͞ΊΔΨΠυϥΠϯ GSPOUJGZΛར༻ σβΠϯΨΠυ ΠϯλϥΫγϣϯ Πϥετ ίʔσΟϯάΨΠυϥΠϯ Ξηοτͷ؅ཧ FUD ͜Ε͔ΒͷOPUF
52. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF খ࢝͘͞ΊΔΨΠυϥΠϯ GSPOUJGZΛར༻ σβΠϯΨΠυ ΠϯλϥΫγϣϯ Πϥετ ίʔσΟϯάΨΠυϥΠϯ Ξηοτͷ؅ཧ FUD ͜Ε͔ΒͷOPUF ඼࣭ͷҡ࣋ͱɺσβΠϯΛ σβΠφʔͷ͚ͩͷ΋ͷʹ͠ͳ͍
53. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ Ϣʔβʔͱͷڞ૑ ͜Ε͔ΒͷOPUF
54. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ Α͋͘Δ։ൃελΠϧ ͜Ε͔ΒͷOPUF ։ൃνʔϜ ೦ೖΓͳ"#ςετ ೦ೖΓͳDMPTFEΠϯλϏϡʔ FUD ೦ೖΓͳԾઆݕূ
55. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ Α͋͘Δ։ൃελΠϧ ͜Ε͔ΒͷOPUF ։ൃνʔϜ ೦ೖΓͳ"#ςετ ೦ೖΓͳDMPTFEΠϯλϏϡʔ FUD ೦ೖΓͳԾઆݕূ OPUFνʔϜͷ৔߹ ͜Ε͔ΒͷOPUF
56. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF OPUFͷ։ൃελΠϧ ΋ͬͱྑ͍ ํ๏͕͋Δ ։ൃνʔϜ Ϣʔβʔ ໌೔࠲ஊձ΍ΔΑ ͍͍Ͷ ͏ʔΜ ͜ΜͳͷͲ͏ ʁ ͋Εࠓ࡞ͬͯΔΑ શવμϝͳͷͰɺ ΞϨͱίϨΛ ΍ͬͨ΄͏͕Α͘ͳ Εɺ࣮૷ॏ͍ͷͰ ͏গ͠଴ͬͯͶ
57. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF OPUFͷ։ൃελΠϧ ΋ͬͱྑ͍ ํ๏͕͋Δ ։ൃνʔϜ Ϣʔβʔ ໌೔࠲ஊձ΍ΔΑ ͍͍Ͷ ͏ʔΜ ͜ΜͳͷͲ͏ ʁ ͋Εࠓ࡞ͬͯΔΑ શવμϝͳͷͰɺ ΞϨͱίϨΛ ΍ͬͨ΄͏͕Α͘ͳ Εɺ࣮૷ॏ͍ͷͰ ͏গ͠଴ͬͯͶ ͜Ε͔ΒͷOPUF ݴͬͪΌ͏ελΠϧ ʢ΋ͪΖΜશͯͰ͸͋Γ·ͤΜ͕ʣ
58. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ͜Ε͔ΒͷOPUF OPUFͷ։ൃελΠϧ ΋ͬͱྑ͍ ํ๏͕͋Δ ։ൃνʔϜ Ϣʔβʔ ໌೔࠲ஊձ΍ΔΑ ͍͍Ͷ ͏ʔΜ ͜ΜͳͷͲ͏ ʁ ͋Εࠓ࡞ͬͯΔΑ શવμϝͳͷͰɺ ΞϨͱίϨΛ ΍ͬͨ΄͏͕Α͘ͳ Εɺ࣮૷ॏ͍ͷͰ ͏গ͠଴ͬͯͶ ͳΔ΂͘Φʔϓϯʹ͠ɺ ΫϦΤΠλʔͱαʔϏεΛҭͯΔ ͜Ε͔ΒͷOPUF OPUF࠲ஊձ ΧΠθϯใࠂ 4/4΍OPUFͰϑΟʔυόοΫ
59. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ 01. 02. 03. ͸͡·ΓͷOPUF ϑΣʔζ ʹΑͬͯ ࠷ ద ͳ 6 *΋ม Խ ͖ͯͨ͠ɻ  ͭ ͷ ج ४ Λ ݩ ʹ ߴ ଎ ͰΧΠθ ϯ Λ ਐΊ͍ͯΔɻ ઌ Λ ݟ ਾ ͑ͨ ౔ ୆ ࡞Γʹணख͠ɺΞΫ ηϧΛ౿Έࠐ΋͏ͱ ͍ͯ͠Δɻ ݱࡏͷOPUF ͜Ε͔ΒͷOPUF ·ͱΊ
60. OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ࠷ޙʹͳΓ·͕͢ɻ ·ͱΊ
61. OPUF͸ αʔϏε΋νʔϜ΋ΧΠθϯΛ Ҿ͖ଓ͖ਐΊ͍͖ͯ·͢ɻ ҰॹʹOPUFΛҭ͍͖͍ͯͯͨͱ ࢥ͍·͢ͷͰɺͲ͏ͧΑΖ͘͠ ͓ئ͍͍ͨ͠·͢ɻ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ ·ͱΊ
62. 5)"/,
    :06 ࠓޙͷOPUFʹ͝ظ଴͍ͩ͘͞ OPUFͷաڈͱɺࠓͱɺ͜Ε͔Βͷ͜ͱɻ