メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model Component Design

コンポーネント指向の設計にメンタルモデルやドメインモデルのような概念を加える事で、コンポーネントに意味を持たせ、設計や評価を行いやすくする方法をまとめました。

*OOUX / Atomic Design / Domain-Driven Design（ドメイン駆動設計） などから得た知見を集約しています。

さらに詳しい内容はこちらの記事にもまとめています。
UIの設計・評価は、Atomic DesignやOOUXのようなコンポーネント指向で
https://medium.com/@tyshgc/ui-component-evaluate-and-design-143917c777bd

Transcript

1. MentalModel
   Component Design
   ϝϯλϧϞσϧ͔Βඥղ͘
   ΦϒδΣΫτࢦ޲తίϯϙʔωϯτઃܭ
   TSUYOSHI HIGUCHI 2016.09.07
   

   View Slide

2. P R O F I L E
   樋 口 剛 T S U Y O S H I H I G U C H I
   Service Designer & UI Developer
   ϑϦʔϥϯεͰελʔτΞοϓ΍৽͍͠ϓϩμΫτͷ
   αʔϏεσβΠϯͱ։ൃɾ࣮૷·Ͱߦ͍ͬͯ·͢ɻ
   @tyshgc
   

   View Slide

3. A G E N D A
   メンタルモデルとコンポーネント
   関心ごと、責務の分離
   モデリングフロー
   1
   2
   3
   

   View Slide

4. メンタルモデルとコンポーネント
   1
   

   View Slide

5. ίϯϙʔωϯτͱ͸Կʁ
   

   View Slide

6. ίϯϙʔωϯτ ελΠϧΨΠυ
   6*ύʔπ
   

   View Slide

7. コンポーネント
   w ଐੑͳͲͷ৘ใ
   w ΠϯλϥΫγϣϯ
   w ࢹ֮৘ใ
   ୯Ұతͳػೳ
   Λ͍࣋ͬͯΔ
   

   View Slide

8. OFF ON
   εΠον
   

   View Slide

9. OFF ON
   εΠον
   // @flow
   type Props = {
   flagment: ?boolean
   };
   class Switch extend Component {
   static defaultProps = {
   flagment: true
   };
   constructor(props: Props, context: any) {
   super(props, context);
   }
   onSwitchToggle() {
   //...
   }
   render() {
   //...
   }
   }
   

   View Slide

10. OFF ON
    ΍ΔؾεΠον
    쎛쎢ؾ
    

    View Slide

11. OFF ON
    ΍ΔؾεΠον
    쎛쎢ؾ
    // @flow
    type Props = {
    Motivation: ?boolean
    };
    class MotivationSwitch extend Component {
    static defaultProps = {
    Motivation: true
    };
    constructor(props: Props, context: any) {
    super(props, context);
    }
    onMotivationToggle() {
    //...
    }
    render() {
    //...
    }
    }
    

    View Slide

12. ػೳͷ֓೦͕มΘΔ
    ίϯϙʔωϯτͷҙຯ͕มΘΔ
    ࣋ͭ΂͖৘ใ΍ৼΔ෣͍΋ҧ͏
    

    View Slide

13. ֓೦Λந৅తʹදݱͨ͠΋ͷ
    ϝϯλϧϞσϧ
    

    View Slide

14. ར༻ऀ ։ൃऀ
    Ϊ
    Ỿ
    ỽ
    ϓ
    Λ
    ຒ
    Ί
    Δ
    αʔϏεΛͭ͘Δ
    ΍ΔؾΛ
    Φϯ͠Α͏
    εΠον
    Φϯͯ͠
    ΋Β͓͏
    

    View Slide

15. αʔϏε಺ʹ͋ΔϝϯλϧϞσϧΛ੔ཧ͢Δ
    υϝΠϯϞσϧΛநग़͢Δ
    αʔϏεʹ܎Δਓશ͕ͯڞ௨ͯ࣋ͭ֓͠೦Ϟσϧ
    

    View Slide

16. ਤॻؗαʔϏεͷυϝΠϯϞσϧ
    ିग़ ར༻ཤྺ
    ฦ٫ ར༻ऀ
    ਤॻͷିग़ͨ͠৘ใ ฦ٫Λड෇ͨ৘ใ ିग़ɾฦ٫ͷཤྺ ਤॻؗͷར༻ऀ
    αʔϏεʹରͯ͠
    ๊͘ϝϯλϧϞσϧ
    

    View Slide

17. ΦϒδΣΫτࢦ޲ϓϩάϥϛϯά
    υϝΠϯϞσϧΛநग़͢Δ
    ϞσϧΛΦϒδΣΫτʹ͢Δ
    

    View Slide

18. υϝΠϯϞσϧͷ֓೦͕มΘΔ
    ΦϒδΣΫτΛݟ௚͢
    ֓೦͕ؒҧ͍ͬͯͳ͍͔
    ϦϑΝΫλϦϯάΛ܁Γฦ͠
    ݟ௚͠ଓ͚Δ
    

    View Slide

19. ίϯϙʔωϯτ΋֓೦ʹԊΘͤΔ
    

    View Slide

20. ΦϒδΣΫτࢦ޲ίϯϙʔωϯτઃܭ
    υϝΠϯϞσϧΛநग़͢Δ
    ϞσϧΛίϯϙʔωϯτʹ͢Δ
    

    View Slide

21. υϝΠϯϞσϧͷ֓೦͕มΘΔ
    ίϯϙʔωϯτΛݟ௚͢
    ֓೦͕ؒҧ͍ͬͯΕ͹ɺ࣋ͭ΂͖৘ใ΍ৼΔ෣͍
    ͋Δ΂͖ࢹ֮৘ใ΋ݟ௚͢ඞཁ͕͋Δ
    

    View Slide

22. 関心ごと、責務の分離
    2
    

    View Slide

23. ϝϯλϧ
    Ϟσϧ
    ίϯςΫετͰมΘΔ
    ؔ৺͝ͱ͸Ͳ͜ʁ
    

    View Slide

24. 5P%PϦετίϯϙʔωϯτ
    ૟আ͢Δ
    - 14:00
    ങ͍෺
    - 16:00
    ͝൧࡞Δ
    - 18:00
    ब৸
    - 23:00
    

    View Slide

25. ૟আ͢Δ
    - 14:00
    ങ͍෺
    - 16:00
    ͝൧࡞Δ
    - 18:00
    ब৸
    - 23:00
    ૟আ͢Δ
    - 14:00
    ങ͍෺
    - 16:00
    5P%PϦετ 5P%P ෦඼
    ૟আ͢Δ
    - 14:00
    

    View Slide

26. ૟আ͢Δ
    - 14:00
    ങ͍෺
    - 16:00
    ͝൧࡞Δ
    - 18:00
    ब৸
    - 23:00
    ૟আ͢Δ
    - 14:00
    ങ͍෺
    - 16:00
    5P%PϦετ 5P%P ෦඼
    ૟আ͢Δ
    - 14:00
    ίϨΫγϣϯ ΤϯςΟςΟ 6*ύʔπ
    5P%PϦετͷߏ଄͸
    ஌Βͳͯ͘ྑ͍
    5P%Pͷߏ଄͸
    ஌Βͳͯ͘ྑ͍
    

    View Slide

27. ίϯϙʔωϯτ͸
    ૄ ݁ ߹
    جຊతʹͶ
    

    View Slide

28. ૟আ͢Δ
    - 14:00
    ങ͍෺
    - 16:00
    ͝൧࡞Δ
    - 18:00
    ब৸
    - 23:00
    5P%PϦετ
    {
    Todos:[
    {
    title: "૟আ͢Δ",
    id: 1,
    limitDate: "2016-09-07 14:00",
    isComplete: true
    },
    {
    title: "ങ͍෺",
    id: 2,
    limitDate: "2016-09-07 16:00",
    isComplete: false
    },
    ...
    ]
    }
    4UPSF
    

    View Slide

29. 5P%P
    ૟আ͢Δ
    - 14:00
    ༧ఆ໊ ظ೔
    ׬ྃ
    ͔ͨ͠ʁ
    νΣοΫͨ͠Β
    ׬ྃ͢Δ
    ৼΔ෣͍΋౉͢
    

    View Slide

30. νΣοΫϘοΫε
    ৼΔ෣͍
    νΣοΫ
    ͔ͨ͠ʁ
    

    View Slide

31. ੹຿΍ίϯςΫετͰཻ౓Λม͑Δ
    ίϯϙʔωϯτͷ
    ධՁج४͕ݟ͑Δ
    ίϯϙʔωϯτΛ෦඼ͱͯ͠ѻ͏͚ͩͰ͸ͳ͘ɺ
    ධՁͷ୯Ґͱͯ͠ѻ͏
    

    View Slide

32. モデリングフロー
    3
    

    View Slide

33. Ϟσϧ͸Ͳ͏΍ͬͯݟ͚ͭΔͷ͔ʁ
    

    View Slide

34. ΞΫλʔͱϢʔεέʔεΛ୳Δ
    5P%PΛ؅ཧ͢Δ 5P%PΛऴ͑Δ
    5P%PΛ࡞Δ
    ར༻ऀ
    

    View Slide

35. ڞ௨ݴޠʢϝϯλϧϞσϧʣΛநग़͢Δ
    5P%PΛ؅ཧ͢Δ 5P%PΛऴ͑Δ
    5P%PΛ࡞Δ
    ར༻ऀ
    

    View Slide

36. ଐੑ΍ৼΔ෣͍Λ୳Δ
    w ༧ఆ໊
    w ظ೔
    w ׬͔ྃͨ͠Ͳ͏͔
    5P%P
    ׬ྃͨ͠ΒνΣοΫ͢Δ
    

    View Slide

37. ϞσϦϯάͷϙΠϯτ
    

    View Slide

38. ۩ମతͳࣄ৅ ந৅Խ͞Εͨࣄ৅
    ۩ମͱந৅ͷԟ෮
    

    View Slide

39. ۩ମΛ΋ͱʹຊ࣭Λݟ͚ͭΔ
    ຊ࣭͕ݟ͑Δͱ
    ΑΓ۩ମతͳࣄ͕ݟ͑Δ
    

    View Slide

40. ֓೦Λந৅Խͨ͠ίϯϙʔωϯτ
    ίϯϙʔωϯτΛߏ଄తʹѻ͏
    ઃܭͱ͍͏ڞ௨ݴޠͰ։ൃ͍ͯ͘͠
    ϙΠϯτ
    

    View Slide

41. 参考
    いろいろ
    

    View Slide

42. 参考
    OOUX
    オブジェクト指向UX
    http://postd.cc/object-oriented-ux/
    http://alistapart.com/article/object-oriented-ux
    ӳޠهࣄʢຊՈʣ
    ೔ຊޠهࣄ
    

    View Slide

43. 参考
    ドメイン駆動開発
    Domain Driven Design
    実践ドメイン
    駆動設計
    エリック・エヴァンスの
    ドメイン駆動設計
    

    View Slide

44. 参考
    ユースケース駆動
    Use-Case Driven Design
    ユースケース駆動開発
    実践ガイド
    

    View Slide

45. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    5IBOLT
    T S U Y O S H I H I G U C H I @tyshgc
    

    View Slide