Reusable Component UI Design

React.jsで考える再利用性の高いUIデザイン

Transcript

1. Reusable Component UI Design
   React.jsで考える再利用性の高いUIデザイン
   Copyright Tsuyoshi Higuchi 2015
   

   View Slide

2. PROFILE
   UI Designer
   Front-End Engineer
   UX Architect
   やっています。
   Tsuyoshi Higuchi
   ココにいます。
   Gunosy inc.
   株式会社グノシー
   Developer DIV.
   

   View Slide

3. AGENDA
   1. 再利用性とは？
   2. UI Designのプロセスとコンポーネントの関係
   3. React.jsのUI Design ワークフロー
   4. まとめ
   

   View Slide

4. 1. 再利用性とは？
   

   View Slide

5. React.jsのコンセプトの一つとして、次のような
   ものがあります。
   

   View Slide

6. Reusable  Components
   ‘‘
   When  designing  interfaces,  break  down  the  
   common  design  elements  (buttons,  form  fields,  
   layout  components,  etc)  into  reusable  
   components  with  well-­‐defined  interfaces.  That  
   way,  the  next  time  you  need  to  build  some  UI  you  
   can  write  much  less  code,  which  means  faster  
   development  time,  fewer  bugs,  and  fewer  bytes  
   down  the  wire.
   ‘‘
   

   View Slide

7. Reusable Components
   再利用可能なコンポーネント
   

   View Slide

8. React.jsは再利用可能なコンポーネント思想を
   持ったViewライブラリ。
   1. UIコンポーネントを資産化できる
   2. テストのしやすさ
   3. 学習コストの低さ
   注目
   

   View Slide

9. 2. UI Designと
   コンポーネントの関係
   

   View Slide

10. UI Design
    Micro Design
    in
    Macro Design
    UIデザインとは…
    

    View Slide

11. Micro Design
    Macro Design
    
    
    
    
    
    
    
    etc…
    in PAGE
    Micro Design
    Micro
    Intraction
    Micro Design
    Micro Design
    

    View Slide

12. 
    
    
    
    
    
    etc…
    Micro
    Intraction
    Micro Design
    Macro Design
    in PAGE
    Micro Design Micro Design
    Micro Design
    Component
    Component
    Component
    Component
    

    View Slide

13. Component
    プロダクト内の
    ページやレイアウトに
    梱包されているもの
    Micro Design
    

    View Slide

14. こうしてUIデザインを見ると、
    同じ機能や構成を持つものが、
    一つのサービスやサイトの中に複数存在する…
    

    View Slide

15. 機能が同じなのに、
    ページ毎に同じようなデザインや実装を
    繰り返すのは…
    

    View Slide

16. 時間の浪費だ
    

    View Slide

17. プロダクトは違えど、
    機能にフォーカスすると構成が同じものが多い。
    ページ単位ではそれが見えにくい。
    

    View Slide

18. 機能をコンポーネントとして扱えば良い
    

    View Slide

19. 機能が同じであれば、 テストやバグフィクスが行いやすい
    機能が同じであれば、 使いまわせるので資産になる
    機能が同じであれば、 最小単位でのUX検証も可能になる
    

    View Slide

20. Reusable Component UI Design
    

    View Slide

21. これからは、
    再利用可能なコンポーネントを
    デザインしていこう！
    

    View Slide

22. という前に、
    便利なモノが既にある
    

    View Slide

23. React-Components.com
    React Rocks
    Open Souce at Facebook
    

    View Slide

24. 3. React.jsでの
    UI Design ワークフロー
    

    View Slide

25. よくあるワークフロー
    

    View Slide

26. ワイヤーフレームや
    ペーパープロトタイピングの作成 動線・導線の検証
    UI DESIGN
    

    View Slide

27. ページ・ステート単位での
    デザインカンプ（画像）作成
    プロトタイピングツールで
    遷移など検証
    ページやステート毎でカンプとか何枚画像いるんだ…
    Ajaxの通信エラーやプリローディングなどの抜けが多い
    

    View Slide

28. スタイルガイドの作成 Staticなフロント実装
    MARKUP, CSS,jQuery…
    スタイルガイドやStaticなフロント実装にjQuery
    React Wayじゃなくなる…
    

    View Slide

29. API設計・実装
    FRONT-END
    コア実装
    DOMやインタラクション用のNot React Wayなモノを
    エンジニアが書き直す無駄な作業…
    

    View Slide

30. インタラクションや
    スタイルなどフィードバック
    FEEDBACK
    各工程
    UIデザイナーは実装コストが見えない
    そのインタラクションどれほど意味あるの？
    

    View Slide

31. これまでのフローでは
    React.jsの価値が下がる
    

    View Slide

32. Modalを例にReactのDOMで考えてみる
    

    View Slide

33. Modalの基本セット
    リストタイトル文
    字列
    リストタイトル文
    字列
    リストタイトル文
    字列
    リストタイトル文
    字列
    Modal Title
    overlay
    modal_close-button
    modal_main
    modal_header
    modal
    

    View Slide

34. modal.jsx
    
    
    
    
    { useHeader? &&
    
    {this.modal_title}
    onClick={this.onCloseHandler}
    className="modal_close-button" />
    
    }
    
    {this.props.children}
    
    
    
    
    モーダルの
    ラッパー
    コンポーネント
    

    View Slide

35. modal_a.jsx
    var ModalA = React.createClass({
    render : function(){
    return (
    
    
    
    );
    }
    });
    モーダルの中身
    A用のコンポーネント
    

    View Slide

36. modal_b.jsx
    var ModalB = React.createClass({
    render : function(){
    return (
    
    
    
    );
    }
    });
    モーダルの中身
    B用のコンポーネント
    

    View Slide

37. ページ毎にコンポーネントを組み合わせる
    リストタイトル文
    字列
    リストタイトル文
    字列
    リストタイトル文
    字列
    リストタイトル文
    字列
    Modal Title
    A
    Landing Page
    リストタイトル文
    字列
    リストタイトル文
    字列
    リストタイトル文
    字列
    リストタイトル文
    字列
    Modal Title
    B
    List Page
    リストタイトル文
    字列
    リストタイトル文
    字列
    リストタイトル文
    字列
    リストタイトル文
    字列
    Modal Title
    A
    Detail Page
    

    View Slide

38. landing.jsx
    var Landing = React.createClass({
    render : function(){
    return (
    
    TOP PAGE
    
    
    
    
    
    );
    }
    });
    Landingページ
    

    View Slide

39. 1. コンポーネントごとに画像を用意する
    2. ReactのComponentで画像をラップする
    3. 最低限のスタイルだけ記述していく
    4. プロトタイプ完了
    5. DOMやTransitionの実装を行う
    プロトタイプの完成
    

    View Slide

40. 4. まとめ
    

    View Slide

41. 再利用性の高いコンポーネントを作れば…
    

    View Slide

42. 1. 統一性を担保できる
    2. 運用フェーズや部分的なリニューアルにもデザイン
    がしやすい
    3. エンジニアに無駄な作業をお願いしなくて良い
    4. 実装に近い形でモックアップできる
    5. コンポーネントの資産が貯まる
    

    View Slide

43. Reusable Componentsを理解することは、
    UIデザイナーにとってマイクロデザイン
    

    View Slide

44. すべてはコンポーネントに宿る
    

    View Slide