Rapid React Prototyping : React.jsでUIデザインプロトタイプを作る

React.jsを使ってプロトタイプを作る。

コンポーネント指向をすすめるなら、プロトタイピングは実用性と実現性を兼ね備えていく必要があるのかもしれない。
本当の意味でのRapid Prototypingはイニシャル開発だけに求めるものではない。

…というお話をまとめました。

## サンプルで使ったInVision -> https://projects.invisionapp.com/share/6V2T05XAN#/screens

Transcript

1. Rapid React Prototyping
   React.jsでUIデザインプロトタイプを作る
   React.js Meet Up#1… Copyright Tsuyoshi Higuchi 2015
   

   View Slide

2. PROFILE
   UI Designer, Front-End Engineer,
   UX Architect
   株式会社グノシーで
   こんなことをやっています。
   Tsuyoshi Higuchi
   趣味でサービスやアプリを作ったりしてます。こんなのとか→ START MAPS
   

   View Slide

3. AGENDA
   1. UIデザイナーがReact.jsを実務で扱ってみた。
   2. Rapid PrototypingとReact.js
   3. まとめ
   

   View Slide

4. 1.
   UIデザイナーがReact.jsを実務で
   扱ってみた。
   

   View Slide

5. グノシーでは…
   Platform展開を行うにあたって、
   WebViewによる
   スモールアプリケーションの
   開発を行っています。
   DeNAトラベル × Gunosy Chat UI
   ココは
   React.js
   

   View Slide

6. そこで、React.jsを採用
   使って気づいた、これまでの開発と違うところ
   

   View Slide

7. React-wayに乗れないDOMと関係する
   ライブラリ(jQueryなど)との共存
   コンポーネントを意識しないデザインはつらい
   マークアップエンジニアのつくったDOMはほぼ
   ReactのElementに書き換えなければならない
   

   View Slide

8. 早い段階からReact-wayにのることが重要
   

   View Slide

9. Rapid Prototyping
   実機確認をいろいろな手法で実現して、
   ユーザーヒヤリングや開発関係者との確認を素早く
   何度も繰り返すことで、サービスの質を高めること。
   

   View Slide

10. Invision
    最近はこのあたりをみんな使っている
    しかし、画像ベースのツールが多く
    細かい点でつらい
    Prott Flinto
    

    View Slide

11. Design in Browser
    PhotoshopやSketchを介さず、
    Markup, Cssで直接デザインしていく方法。
    言い換えれば直接コードを書く行為。
    

    View Slide

12. これらをReact-wayに乗せていかなければならない
    

    View Slide

13. React.jsはComponent指向
    

    View Slide

14. いくらツールや手法が便利でも、
    コンポーネント指向のないツールや手法では
    React.jsはまかないきれない
    

    View Slide

15. React.jsもコンポーネント定義がないまま
    作っていくと迷う
    

    View Slide

16. コンポーネント志向 = UIデザインドリブン
    プロトタイプからReact.jsで作れば色々捗りそう
    

    View Slide

17. 2.
    Rapid PrototypingとReact.js
    

    View Slide

18. プロトタイピングツールでやるとここが面倒臭い
    - 遷移の設定をページ毎にアサインしなければならない
    - Fixedレイヤー（ヘッダーなど）が矩形でしか設定できない
    - コンポーネントだけの変更も対象ページ全て書き出さないとならない
    

    View Slide

19. Example
    カメラアプリ的なもの
    

    View Slide

20. 1.
    グラフィックツールで
    コンポーネント毎にUI
    デザインの作成
    レイヤーに.Component_
    というPrefixをつけておく
    LayerSectionやLayerをDOMに
    見立ててデザイン
    

    View Slide

21. 2.
    コンポーネントの
    子要素（ボタンなど）
    は画像で出力
    Component_add-button.png
    Component_setting-trigger.png
    Component_camera-roll.png
    Component_camera-view.png
    :pngをつけているレイヤーを
    Pngファイルで出力にしている
    

    View Slide

22. 3.
    Reactコンポーネント
    クラス作成
    コンポーネント毎に
    ファイルを分けておくとさらに
    管理しやすい。
    PSDからReact Elementを書き出す
    ライブラリを近日公開します。
    気が向いたらSketchとES6対応も。
    !
    

    View Slide

23. 4.
    React Routerで
    遷移を決める
    CSSTransitonGroupを
    使うなどすれば、
    Transion Animationも
    実装できる。
    

    View Slide

24. あとは、
    画像にしているコンポーネント毎に、
    さらにReact Elementを実装していったり
    CSSをあてていく
    

    View Slide

25. プロトタイプをそのまま
    実際の実装へもっていくことも可能になる
    React NativeやReact Canvasでもそのままリッチアプリケーションも可能かも!?
    

    View Slide

26. コンポーネント単位で管理できるので、
    ページ単位でデザインを更新しなくてよい。
    

    View Slide

27. 3. まとめ
    

    View Slide

28. サービスデザインは
    小さいところへのフォーカスがより重要になる
    

    View Slide

29. React.jsで小さく
    ささっと作って
    よりよく改善しよう！
    

    View Slide

30. 最後に…
    

    View Slide

31. 株式会社グノシーでは
    フロントエンドエンジニアを
    絶賛募集中です！
    

    View Slide