Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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]
[ English ] Company Overview for Engineers
caddi_eng
0
750
エンジニア向け会社紹介資料
caddi_eng
14
310k
CADDi 会社紹介・採用説明資料
caddi_eng
11
820k
機械学習チームのモノレポ移行
caddi_eng
0
490
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1k
2023.01_CADDi Thailand Company Overview
caddi_eng
0
15k
20220826_Company Briefing Online Event
caddi_eng
0
520
OpenSearchで実現する画像検索とテスト追加で目指す安定運用
caddi_eng
4
6.1k
製造業向け新事業の基盤をエンジニア1人のチームでローコード&マネージドで半年で立ち上げた話_220810
caddi_eng
0
1.1k
Other Decks in Technology
See All in Technology
大規模トラフィックを支える ゲームバックエンドの課題と構成の変遷 ~安定したゲーム体験を実現するために~
colopl
0
750
Oracle Cloud Infrastructure:2024年11月度サービス・アップデート
oracle4engineer
PRO
0
120
4年で17倍に成長したエンジニア組織を支えるアーキテクチャの過去と未来
sansantech
PRO
1
4.7k
EthernetベースのGPUクラスタ導入による学びと展望
lycorptech_jp
PRO
0
420
2024/11/29_失敗談から学ぶ! エンジニア向けre:Invent攻略アンチパターン集
hiashisan
0
240
総会員数1,500万人のレストランWeb予約サービスにおけるRustの活用
kymmt90
3
2.7k
.NET のUnified AI Building Blocks 入門...!
okazuki
0
140
Postman Flowsで作るAPI連携LINE Bot
miura55
0
220
もう一度、 事業を支えるシステムに。
leveragestech
6
3k
Will multimodal language processing change the world?
keio_smilab
PRO
2
250
ヤプリのデータカタログ整備 1年間の歩み / Progress of Building a Data Catalog at Yappli
yamamotoyuta
3
620
最強DB講義 #35 大規模言語モデルに基づく検索モデル
mpkato
1
120
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Being A Developer After 40
akosma
87
590k
[RailsConf 2023] Rails as a piece of cake
palkan
52
5k
What's new in Ruby 2.0
geeforr
343
31k
Adopting Sorbet at Scale
ufuk
73
9.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
YesSQL, Process and Tooling at Scale
rocio
169
14k
The Cost Of JavaScript in 2023
addyosmani
45
6.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Visualization
eitanlees
145
15k
Designing Experiences People Love
moore
138
23k
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.次の発表で深く触れられます。お楽しみに