Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

1. 再利用性とは？

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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. ‘‘

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

時間の浪費だ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Reusable Component UI Design

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

React-Components.com React Rocks Open Souce at Facebook

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

よくあるワークフロー

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

modal.jsx

{ useHeader? &&

{this.modal_title}

} {this.props.children}

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

Slide 35

Slide 35 text

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

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

Slide 36

Slide 36 text

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

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

TOP PAGE

); } }); Landingページ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

4. まとめ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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