Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
パートナーポータル フロントエンド技術紹介 - CADDi
[email protected]
March 01, 2022
Technology
0
1.1k
パートナーポータル フロントエンド技術紹介 - CADDi
[email protected]
March 01, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
Company Overview for Engineers(Japanese)
caddi_eng
13
70k
Company Overview for Engineers (English)
caddi_eng
0
11k
202210_CADDi Thailand Company Overview
caddi_eng
0
7.7k
20220826_Company Briefing Online Event
caddi_eng
0
170
OpenSearchで実現する画像検索とテスト追加で目指す安定運用
caddi_eng
2
4.4k
製造業向け新事業の基盤をエンジニア1人のチームでローコード&マネージドで半年で立ち上げた話_220810
caddi_eng
0
370
半年で製造業向けAIサービスをリリースした開発チームのノウハウ大公開!_220713
caddi_eng
0
380
敵か?味方か?表計算ソフトとの付き合い方_220628
caddi_eng
1
520
CADDi AI Lab Description
caddi_eng
0
12k
Other Decks in Technology
See All in Technology
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
470
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
160
Startup Studio Sereal / Culture Deck
sereal
0
590
データサイエンティストとしてどう学んでいくべきか/東京大学講義: データマイニング概論: #10
yp_genzitsu
10
5.9k
Optimizing your Swift code
kateinoigakukun
0
1.3k
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
1
180
1つのアプリを開発する複数の職能横断チームの運用と今後 ~ タクシーアプリ「GO」の現状と未来 ~
takahia1988
1
3.3k
本社オフィスを移転し、 オフィスファシリティ・コーポレートIT を刷新した話
rotomx
3
1.1k
NGINXENG JP#2 - 3-NGINX Plus・プロダクトのアップデート
hiropo20
0
120
lt53
98_justdoit
0
110
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
220
マネーフォワードクラウドを支える事業者基盤
machisuke
0
210
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
The Mythical Team-Month
searls
210
40k
Fireside Chat
paigeccino
16
1.8k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Transcript
A B O U T パートナーポータル
2 目次 - 自己紹介 - パートナーポータルとは? - FE全部見せます!(デモ) - UI/UX・デザインの話
- 変遷 - デザインのプロセス - コーディングルール
3 自己紹介 - 小倉 拳(Ken Ogura) - キャディ歴3年 - 生産管理系プロダクトのFEエンジニア
- React/Next.js/GraphQL/NestJS - 趣味:YouTuber
4 パートナーポータルとは? パートナー様(製作会社)が - CADDiからの見積に回答 - 注文内容を確認 するためのサービス CADDi初の社外向けWebApp
5 パートナーポータルのアーキテクチャ 今日はここを 掘り下げます
6 デモ - 画面共有 - 見積回答 - 受注した製品・図面の確認
7 UI/UXデザインの話 コンセプト - 今までの作業フローに慣れている人が 使い始めやすいUI/UX - PCでの作業に慣れていない人でも 使いやすいUI/UX
UI/UXデザインの話 ①今までの作業フローから乖離させない ▼半年前 見慣れないUIを 学習する必要がある ▼現在 表計算ソフトと同じ操作性 かつてはメール+表計算ソフトで見積のやりとり WebAppに移行してもらうのには工夫が必要
UI/UXデザインの話 ①今までの作業フローから乖離させない ▼半年前 見慣れないUIを 学習する必要がある ▼現在 表計算ソフトと同じ操作性 変更後:App使用率急増 26% →
90%超 かつてはメール+表計算ソフトで見積のやりとり WebAppに移行してもらうのには工夫が必要
UI/UXデザインの話 ②紙での見積と同じ体験を - パートナーポータル導入以前のユーザーの見積体験 - 印刷した図面を見ながら見積 - PCの画面と図面を同時に見たい - 当初:図面を別タブで開く
- →大量タブ状態になる - 現在:別ウィンドウに高々一つ表示 - さらに:いろいろなコンポーネントを折りたためる ようにして画面を広く使えるようにする
デザインのプロセス - 最初期:UI/UXに強いデザイナーに専属でチームに 入ってもらう - Figmaで紙芝居を作ってもらう - FEエンジニアと頻繁にMTGして各コンポーネント の意図を確認 -
リリース後:デザイナーは専属でなくなる - AntDのコンポーネントに置き換え - ラフなイメージの共有はMiroを使用
Figmaスクショ antd が公式で 提供している Figma Library にリンク Prototypeは使 わず 意図を文字で書
いておく
コーディングルール - 最初期: - style attribute禁止:styled-componentを使う - hooksはコンポーネントを返してはいけない - atomic-designを意識したディレクトリ構造に
- アロー関数ではなくfunctionを - etc… - 現在: - ファイルサイズは200行未満 - 以上
コーディングルール - 最初期: - style attribute禁止:styled-componentを使う - hooksはコンポーネントを返してはいけない - atomic-designを意識したディレクトリ構造に
- アロー関数ではなくfunctionを - etc… - 現在: - ファイルサイズは200行未満 - 以上 開発速度上がった 気がする
15 質疑 Q.希望見積金額はどう算出? A.人力で図面を読んで+原価計算ソフトに 情報入力+その情報をKlein経由でSPさんに 見積依頼 Q.テーブルのコピペはどうしている? A.AgGridの有償機能です
16 質疑 Q.ヒット機能 不評機能があれば A.ExcelライクUIは好評 一括更新機能は消えた Q.Kleinよりシンプルなのはなぜ? A.シンプルになるよう少々意識したが、もともとプロ ダクトの規模感が違う
17 質疑 Q.Ag-Grid + Antdはどう共存させた? A.cssがconflictするのであまり共存させない Q.ユーザーの声の拾い上げはどのように? A.エンジニア直接は少なく、担当者が聞きに行く Q.使用率測定はしている? A.全てのアクションではなく重い処理に
GoogleTagManagerを仕込んでいる
18 質疑 Q.UI改善は? A.ユーザーの声ドリブンが多い Q.ディレクトリ構造 A.次の発表で深く触れられます。お楽しみに