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_eng
14
220k
CADDi 会社紹介・採用説明資料
caddi_eng
11
690k
機械学習チームのモノレポ移行
caddi_eng
0
350
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
730
2023.01_CADDi Thailand Company Overview
caddi_eng
0
14k
Company Overview for Engineers (English)
caddi_eng
0
14k
20220826_Company Briefing Online Event
caddi_eng
0
430
OpenSearchで実現する画像検索とテスト追加で目指す安定運用
caddi_eng
3
5.9k
製造業向け新事業の基盤をエンジニア1人のチームでローコード&マネージドで半年で立ち上げた話_220810
caddi_eng
0
970
Other Decks in Technology
See All in Technology
Azure AI ことはじめ
tsubakimoto_s
0
130
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
AOAI Dev Day - Opening Session
yoshidashingo
2
440
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
How to Think Like a Performance Engineer
csswizardry
4
590
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
Classmethod Odyssey 登壇資料
yamahiro
0
390
Featured
See All Featured
Docker and Python
trallard
37
2.9k
Web development in the modern age
philhawksworth
203
10k
Bash Introduction
62gerente
607
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Side Projects
sachag
451
42k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Code Review Best Practice
trishagee
58
16k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
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.次の発表で深く触れられます。お楽しみに