Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
パートナーポータル フロントエンド技術紹介 - CADDi
Search
[email protected]
March 01, 2022
Technology
0
1.8k
パートナーポータル フロントエンド技術紹介 - CADDi
[email protected]
March 01, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
CADDi Company Deck_Global.pdf
caddi_eng
0
70
[ English ] Company Overview for Engineers
caddi_eng
0
1.2k
エンジニア向け会社紹介資料
caddi_eng
15
320k
CADDi 会社紹介・採用説明資料
caddi_eng
11
850k
機械学習チームのモノレポ移行
caddi_eng
0
510
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1.1k
2023.01_CADDi Thailand Company Overview
caddi_eng
0
15k
20220826_Company Briefing Online Event
caddi_eng
0
530
OpenSearchで実現する画像検索とテスト追加で目指す安定運用
caddi_eng
4
6.2k
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2024年12月度サービス・アップデート
oracle4engineer
PRO
1
270
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
32k
podman_update_2024-12
orimanabu
1
290
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
240
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
5分でわかるDuckDB
chanyou0311
10
3.3k
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
180
OCI技術資料 : ファイル・ストレージ 概要
ocise
3
11k
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
280
能動的ドメイン名ライフサイクル管理のすゝめ / Practice on Active Domain Name Lifecycle Management
nttcom
0
250
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
3
280
Server-Side Engineer of LINE Sukimani
lycorp_recruit_jp
0
360
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
How to train your dragon (web standard)
notwaldorf
88
5.7k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
450
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Automating Front-end Workflow
addyosmani
1366
200k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
For a Future-Friendly Web
brad_frost
175
9.4k
Side Projects
sachag
452
42k
Optimising Largest Contentful Paint
csswizardry
33
3k
Building Adaptive Systems
keathley
38
2.3k
The Language of Interfaces
destraynor
154
24k
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.次の発表で深く触れられます。お楽しみに