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

Reusable Component UI Design

Reusable Component UI Design

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

Tsuyoshi Higuchi

March 30, 2015
Tweet

More Decks by Tsuyoshi Higuchi

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. 1. 再利用性とは?

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Micro Design
    Macro Design







    etc…
    in PAGE
    Micro Design
    Micro
    Intraction
    Micro Design
    Micro Design

    View full-size slide







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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 時間の浪費だ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Reusable Component UI Design

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. modal.jsx




    { useHeader? &&

    {this.modal_title}
    onClick={this.onCloseHandler}
    className="modal_close-button" />

    }

    {this.props.children}




    モーダルの
    ラッパー
    コンポーネント

    View full-size slide

  35. modal_a.jsx
    var ModalA = React.createClass({
    render : function(){
    return (



    );
    }
    });
    モーダルの中身
    A用のコンポーネント

    View full-size slide

  36. modal_b.jsx
    var ModalB = React.createClass({
    render : function(){
    return (



    );
    }
    });
    モーダルの中身
    B用のコンポーネント

    View full-size slide

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

    View full-size slide

  38. landing.jsx
    var Landing = React.createClass({
    render : function(){
    return (

    TOP PAGE





    );
    }
    });
    Landingページ

    View full-size slide

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

    View full-size slide

  40. 4. まとめ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide