Tweet
Tweet

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

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