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.9k
パートナーポータル フロントエンド技術紹介 - CADDi
[email protected]
March 01, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
製造業の会計システムをDDDで開発した話
caddi_eng
3
1.5k
【CADDI VIETNAM】Company Deck for Engineers
caddi_eng
0
840
CADDi Company Deck_Global.pdf
caddi_eng
1
360
[ English ] Company Overview for Engineers
caddi_eng
0
5k
エンジニア向け会社紹介資料
caddi_eng
16
470k
キャディ株式会社 会社紹介・採用説明資料
caddi_eng
12
1M
機械学習チームのモノレポ移行
caddi_eng
0
630
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1.3k
2023.01_CADDi Thailand Company Overview
caddi_eng
0
15k
Other Decks in Technology
See All in Technology
医療業界に特化した音声認識モデル構築のためのアノテーションの実態
thickstem
0
470
為什麼我們需要 Observability?
marcustung
0
480
バクラクのモノレポにおける AI Coding のための環境整備と {Roo,Claude} Code活用事例 / AI Coding in Bakuraku's Monorepo: Environment Setup & Case Studies with {Roo, Claude} Code
upamune
7
2.4k
Tenstorrent 開発者プログラム
tenstorrent_japan
0
160
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
2k
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.4k
データベースの引越しを Ora2Pg でスマートにやろう
jri_narita
0
180
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
690
AI とペアプロしてわかった 3 つのヒューマンエラー
takahiroikegawa
0
320
メルカリにおけるデータアナリティクス AI エージェント「Socrates」と ADK 活用事例
na0
15
7.3k
kintone開発組織のDevOpsへの移り変わりと実践
ueokande
1
280
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
510
Featured
See All Featured
Side Projects
sachag
454
42k
YesSQL, Process and Tooling at Scale
rocio
172
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Designing for Performance
lara
608
69k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Balancing Empowerment & Direction
lara
1
100
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Practical Orchestrator
shlominoach
188
11k
Building an army of robots
kneath
306
45k
For a Future-Friendly Web
brad_frost
178
9.8k
Scaling GitHub
holman
459
140k
4 Signs Your Business is Dying
shpigford
183
22k
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.次の発表で深く触れられます。お楽しみに