Farmnote

STUDIO

Vue.js歴 4年

ReactNative歴 8ヶ月

Flutter歴 3ヶ月

2000年頃から
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だけあって
コンポーネントの品質・量
共に高い

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

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

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

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

OSではなく

操作方法に視点を置く

状態管理周り

状態管理比較

Angularはよくわかってないので書けませんでした

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

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

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

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

デザインリサーチ

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

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

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

デザインシステム

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

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

フロントエンド開発

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

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

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