Slide 1
Slide 1 text
Rapid React Prototyping
React.jsでUIデザインプロトタイプを作る
React.js Meet Up#1… Copyright Tsuyoshi Higuchi 2015
Slide 2
Slide 2 text
PROFILE
UI Designer, Front-End Engineer,
UX Architect
株式会社グノシーで
こんなことをやっています。
Tsuyoshi Higuchi
趣味でサービスやアプリを作ったりしてます。こんなのとか→ START MAPS
Slide 3
Slide 3 text
AGENDA
1. UIデザイナーがReact.jsを実務で扱ってみた。
2. Rapid PrototypingとReact.js
3. まとめ
Slide 4
Slide 4 text
1.
UIデザイナーがReact.jsを実務で
扱ってみた。
Slide 5
Slide 5 text
グノシーでは…
Platform展開を行うにあたって、
WebViewによる
スモールアプリケーションの
開発を行っています。
DeNAトラベル × Gunosy Chat UI
ココは
React.js
Slide 6
Slide 6 text
そこで、React.jsを採用
使って気づいた、これまでの開発と違うところ
Slide 7
Slide 7 text
React-wayに乗れないDOMと関係する
ライブラリ(jQueryなど)との共存
コンポーネントを意識しないデザインはつらい
マークアップエンジニアのつくったDOMはほぼ
ReactのElementに書き換えなければならない
Slide 8
Slide 8 text
早い段階からReact-wayにのることが重要
Slide 9
Slide 9 text
Rapid Prototyping
実機確認をいろいろな手法で実現して、
ユーザーヒヤリングや開発関係者との確認を素早く
何度も繰り返すことで、サービスの質を高めること。
Slide 10
Slide 10 text
Invision
最近はこのあたりをみんな使っている
しかし、画像ベースのツールが多く
細かい点でつらい
Prott Flinto
Slide 11
Slide 11 text
Design in Browser
PhotoshopやSketchを介さず、
Markup, Cssで直接デザインしていく方法。
言い換えれば直接コードを書く行為。
Slide 12
Slide 12 text
これらをReact-wayに乗せていかなければならない
Slide 13
Slide 13 text
React.jsはComponent指向
Slide 14
Slide 14 text
いくらツールや手法が便利でも、
コンポーネント指向のないツールや手法では
React.jsはまかないきれない
Slide 15
Slide 15 text
React.jsもコンポーネント定義がないまま
作っていくと迷う
Slide 16
Slide 16 text
コンポーネント志向 = UIデザインドリブン
プロトタイプからReact.jsで作れば色々捗りそう
Slide 17
Slide 17 text
2.
Rapid PrototypingとReact.js
Slide 18
Slide 18 text
プロトタイピングツールでやるとここが面倒臭い
- 遷移の設定をページ毎にアサインしなければならない
- Fixedレイヤー（ヘッダーなど）が矩形でしか設定できない
- コンポーネントだけの変更も対象ページ全て書き出さないとならない
Slide 19
Slide 19 text
Example
カメラアプリ的なもの
Slide 20
Slide 20 text
1.
グラフィックツールで
コンポーネント毎にUI
デザインの作成
レイヤーに.Component_
というPrefixをつけておく
LayerSectionやLayerをDOMに
見立ててデザイン
Slide 21
Slide 21 text
2.
コンポーネントの
子要素（ボタンなど）
は画像で出力
Component_add-button.png
Component_setting-trigger.png
Component_camera-roll.png
Component_camera-view.png
:pngをつけているレイヤーを
Pngファイルで出力にしている
Slide 22
Slide 22 text
3.
Reactコンポーネント
クラス作成
コンポーネント毎に
ファイルを分けておくとさらに
管理しやすい。
PSDからReact Elementを書き出す
ライブラリを近日公開します。
気が向いたらSketchとES6対応も。
!
Slide 23
Slide 23 text
4.
React Routerで
遷移を決める
CSSTransitonGroupを
使うなどすれば、
Transion Animationも
実装できる。
Slide 24
Slide 24 text
あとは、
画像にしているコンポーネント毎に、
さらにReact Elementを実装していったり
CSSをあてていく
Slide 25
Slide 25 text
プロトタイプをそのまま
実際の実装へもっていくことも可能になる
React NativeやReact Canvasでもそのままリッチアプリケーションも可能かも!?
Slide 26
Slide 26 text
コンポーネント単位で管理できるので、
ページ単位でデザインを更新しなくてよい。
Slide 27
Slide 27 text
3. まとめ
Slide 28
Slide 28 text
サービスデザインは
小さいところへのフォーカスがより重要になる
Slide 29
Slide 29 text
React.jsで小さく
ささっと作って
よりよく改善しよう！
Slide 30
Slide 30 text
最後に…
Slide 31
Slide 31 text
株式会社グノシーでは
フロントエンドエンジニアを
絶賛募集中です！