Farmnote

STUDIO

Vue.js歴 4年

ReactNative歴 8ヶ月

Flutter歴 3ヶ月

2000年頃から
UIデザイン・実装してるおっさんです

主な対象者

デザインと開発の連携をスムーズにしたい方

UIの触り心地って

意識してますか?

イテレーションと質

リーンイテレーションはMVPを目指してる

MVPでは作り込みは
悪とされる風潮

MLP
Minimum Lovable Product

愛される最小の

プロダクトを目指す

価値を確かめる為のイテレーション

質を高める為のイテレーション

目的別に

イテレーションを分離

エンジニアリングも変わる

表現のためのエンジニアリング
機能実装の為のエンジニアリング

表現の為にタイミングに合わせたアニメーションコードを書く

React界隈ではこの辺をCSSに完全にゆだねてるみたいで関心が薄めなのかあんまり話題にされてない

その為かはわからないけどReactには
Animation系の機構が特に備わってない

ReactNativeで
インタラクションの実装が

とにかく辛かった

60FPSを出すには
NativeDriverが必須

MatrixとOpacityレベルしか60FPS出ない

Androidでの最適化がまだなのかanimationめっちゃ遅かった

*2019年時点では改善されてるかも

プラットホーム毎に
違うAnimationの挙動

色々表現考えても
実装できないのでは

片手落ち

Flutterでは
自由になれた

触り心地の良いUIを
作るためにFlutterを
採用しました

描画結果が

プラットホームで変わらない

とはいえ言語も変われば、フレームワークも違うしエコシステムも違う

Android Studio
にFlutterPlugin突っ込めばとりあえず始められる

Lintも
テストも
デバッグツールも
標準搭載

Googleの次期OS
fuchsiaの標準UI実行環境

結果
Materialコンポーネントの
実装具合が、Android標準より進んでたりする。

さすが1.0だけあって
コンポーネントの品質・量
共に高い

プラットホームで描画内容が共通なのでプラットホーム固有バグが少ない

ReactNative書いてたらとりあえず、1ヶ月も書いてればなれる

Webとの共通化とかどうするの?

そもそもポインティングデバイスが違う

コンポーネントはポインティングデバイス毎に作り直す前提

OSではなく

操作方法に視点を置く

状態管理周り

Flutter React Vue
StatelessWidget SFC SFC
StateFullWidget 普通のコンポーネント 普通のコンポーネント
InheritedWidget Context 標準ではない
Redux Redux
ScopedModel MobX VueX
BloC ない ない

状態管理比較

Angularはよくわかってないので書けませんでした
Flutter React Native Vue
ScopedModel MobX VueX

Farmnoteでは
Vue.jsから始めたのでこうしてる

設計指針は2年前から
ほとんど変化なし

言語やフレームワークが違ってもアーキテクチャが近ければ読みかえで結構いける

重要視してるのはプロダクトの質。
それを担保するための試行錯誤の回数をいかに増やすか

デザインリサーチ

1. 調査や分析を行い
顧客の関心事のあてを作る

2. 仮説を立てモックやプロトタイプなどを利用し価値検証を行う

3. 価値を確認できた後にしっかり実装してユーザビリティテストを行いマーケットに受け入れられるものに仕上げる

デザインシステム

仮説を立てモックやプロトタイプなどを作る際にの有用なソリューション

コンポーネントを配置するだけでモックが作れてしまう状況を作る事でUXデザイナーがスタイリングに気を取られず、アイディエーションに集中できる状況を作る。

フロントエンド開発

1. 価値検証を経たモックorプロトタイプのデザインファイルのコンポーネントの依存関係をそのまま配置

2. 状態管理をしっかりと行う。
ドメイン設計とか超頑張ろう

3. 画面遷移に合わせたトランジションの試行錯誤

ファームノートは

Flutterできる人や
Vueできる人や
ReactNativeできる人が働いています。

興味あったらWantedlyのぞいてね!

ありがとうございました

Made with Slides.com