パートナーポータル フロントエンド技術紹介 - CADDi

Transcript

1. A B O U T パートナーポータル
2. 2 目次 - 自己紹介 - パートナーポータルとは？ - FE全部見せます！（デモ） - UI/UX・デザインの話 - 変遷 - デザインのプロセス - コーディングルール
3. 3 自己紹介 - 小倉 拳(Ken Ogura) - キャディ歴3年 - 生産管理系プロダクトのFEエンジニア - React/Next.js/GraphQL/NestJS - 趣味：YouTuber
4. 4 パートナーポータルとは？ パートナー様（製作会社)が - CADDiからの見積に回答 - 注文内容を確認 するためのサービス CADDi初の社外向けWebApp
5. 5 パートナーポータルのアーキテクチャ 今日はここを 掘り下げます
6. 6 デモ - 画面共有 - 見積回答 - 受注した製品・図面の確認
7. 7 UI/UXデザインの話 コンセプト - 今までの作業フローに慣れている人が 使い始めやすいUI/UX - PCでの作業に慣れていない人でも 使いやすいUI/UX
8. UI/UXデザインの話 ①今までの作業フローから乖離させない ▼半年前 見慣れないUIを 学習する必要がある ▼現在 表計算ソフトと同じ操作性 かつてはメール＋表計算ソフトで見積のやりとり WebAppに移行してもらうのには工夫が必要
9. UI/UXデザインの話 ①今までの作業フローから乖離させない ▼半年前 見慣れないUIを 学習する必要がある ▼現在 表計算ソフトと同じ操作性 変更後：App使用率急増 26% → 90%超 かつてはメール＋表計算ソフトで見積のやりとり WebAppに移行してもらうのには工夫が必要
10. UI/UXデザインの話 ②紙での見積と同じ体験を - パートナーポータル導入以前のユーザーの見積体験 - 印刷した図面を見ながら見積 - PCの画面と図面を同時に見たい - 当初：図面を別タブで開く - →大量タブ状態になる - 現在：別ウィンドウに高々一つ表示 - さらに：いろいろなコンポーネントを折りたためる ようにして画面を広く使えるようにする
11. デザインのプロセス - 最初期：UI/UXに強いデザイナーに専属でチームに 入ってもらう - Figmaで紙芝居を作ってもらう - FEエンジニアと頻繁にMTGして各コンポーネント の意図を確認 - リリース後：デザイナーは専属でなくなる - AntDのコンポーネントに置き換え - ラフなイメージの共有はMiroを使用
12. Figmaスクショ antd が公式で 提供している Figma Library にリンク Prototypeは使 わず 意図を文字で書 いておく
13. コーディングルール - 最初期： - style attribute禁止：styled-componentを使う - hooksはコンポーネントを返してはいけない - atomic-designを意識したディレクトリ構造に - アロー関数ではなくfunctionを - etc… - 現在： - ファイルサイズは200行未満 - 以上
14. コーディングルール - 最初期： - style attribute禁止：styled-componentを使う - hooksはコンポーネントを返してはいけない - atomic-designを意識したディレクトリ構造に - アロー関数ではなくfunctionを - etc… - 現在： - ファイルサイズは200行未満 - 以上 開発速度上がった 気がする
15. 15 質疑 Q.希望見積金額はどう算出？ A.人力で図面を読んで＋原価計算ソフトに 情報入力＋その情報をKlein経由でSPさんに 見積依頼 Q.テーブルのコピペはどうしている？ A.AgGridの有償機能です
16. 16 質疑 Q.ヒット機能　不評機能があれば A.ExcelライクUIは好評　一括更新機能は消えた Q.Kleinよりシンプルなのはなぜ？ A.シンプルになるよう少々意識したが、もともとプロ ダクトの規模感が違う
17. 17 質疑 Q.Ag-Grid + Antdはどう共存させた？ A.cssがconflictするのであまり共存させない Q.ユーザーの声の拾い上げはどのように？ A.エンジニア直接は少なく、担当者が聞きに行く Q.使用率測定はしている？ A.全てのアクションではなく重い処理に GoogleTagManagerを仕込んでいる
18. 18 質疑 Q.UI改善は？ A.ユーザーの声ドリブンが多い Q.ディレクトリ構造 A.次の発表で深く触れられます。お楽しみに