$30 off During Our Annual Pro Sale. View Details »

パートナーポータル フロントエンド技術紹介 - CADDi

パートナーポータル フロントエンド技術紹介 - CADDi

[email protected]

March 01, 2022
Tweet

Other Decks in Technology

Transcript

  1. A B O U T
    パートナーポータル

    View Slide

  2. 2
    目次
    - 自己紹介
    - パートナーポータルとは?
    - FE全部見せます!(デモ)
    - UI/UX・デザインの話
    - 変遷
    - デザインのプロセス
    - コーディングルール

    View Slide

  3. 3
    自己紹介
    - 小倉 拳(Ken Ogura)
    - キャディ歴3年
    - 生産管理系プロダクトのFEエンジニア
    - React/Next.js/GraphQL/NestJS
    - 趣味:YouTuber

    View Slide

  4. 4
    パートナーポータルとは?
    パートナー様(製作会社)が
    - CADDiからの見積に回答
    - 注文内容を確認
    するためのサービス
    CADDi初の社外向けWebApp

    View Slide

  5. 5
    パートナーポータルのアーキテクチャ
    今日はここを
    掘り下げます

    View Slide

  6. 6
    デモ
    - 画面共有
    - 見積回答
    - 受注した製品・図面の確認

    View Slide

  7. 7
    UI/UXデザインの話
    コンセプト
    - 今までの作業フローに慣れている人が
    使い始めやすいUI/UX
    - PCでの作業に慣れていない人でも
    使いやすいUI/UX

    View Slide

  8. UI/UXデザインの話
    ①今までの作業フローから乖離させない
    ▼半年前
    見慣れないUIを
    学習する必要がある
    ▼現在
    表計算ソフトと同じ操作性
    かつてはメール+表計算ソフトで見積のやりとり
    WebAppに移行してもらうのには工夫が必要

    View Slide

  9. UI/UXデザインの話
    ①今までの作業フローから乖離させない
    ▼半年前
    見慣れないUIを
    学習する必要がある
    ▼現在
    表計算ソフトと同じ操作性
    変更後:App使用率急増
    26% → 90%超
    かつてはメール+表計算ソフトで見積のやりとり
    WebAppに移行してもらうのには工夫が必要

    View Slide

  10. UI/UXデザインの話
    ②紙での見積と同じ体験を
    - パートナーポータル導入以前のユーザーの見積体験
    - 印刷した図面を見ながら見積
    - PCの画面と図面を同時に見たい
    - 当初:図面を別タブで開く
    - →大量タブ状態になる
    - 現在:別ウィンドウに高々一つ表示
    - さらに:いろいろなコンポーネントを折りたためる
    ようにして画面を広く使えるようにする

    View Slide

  11. デザインのプロセス
    - 最初期:UI/UXに強いデザイナーに専属でチームに
    入ってもらう
    - Figmaで紙芝居を作ってもらう
    - FEエンジニアと頻繁にMTGして各コンポーネント
    の意図を確認
    - リリース後:デザイナーは専属でなくなる
    - AntDのコンポーネントに置き換え
    - ラフなイメージの共有はMiroを使用

    View Slide

  12. Figmaスクショ
    antd が公式で
    提供している
    Figma Library
    にリンク
    Prototypeは使
    わず
    意図を文字で書
    いておく

    View Slide

  13. コーディングルール
    - 最初期:
    - style attribute禁止:styled-componentを使う
    - hooksはコンポーネントを返してはいけない
    - atomic-designを意識したディレクトリ構造に
    - アロー関数ではなくfunctionを
    - etc…
    - 現在:
    - ファイルサイズは200行未満
    - 以上

    View Slide

  14. コーディングルール
    - 最初期:
    - style attribute禁止:styled-componentを使う
    - hooksはコンポーネントを返してはいけない
    - atomic-designを意識したディレクトリ構造に
    - アロー関数ではなくfunctionを
    - etc…
    - 現在:
    - ファイルサイズは200行未満
    - 以上
    開発速度上がった
    気がする

    View Slide

  15. 15
    質疑
    Q.希望見積金額はどう算出?
    A.人力で図面を読んで+原価計算ソフトに
    情報入力+その情報をKlein経由でSPさんに
    見積依頼
    Q.テーブルのコピペはどうしている?
    A.AgGridの有償機能です

    View Slide

  16. 16
    質疑
    Q.ヒット機能 不評機能があれば
    A.ExcelライクUIは好評 一括更新機能は消えた
    Q.Kleinよりシンプルなのはなぜ?
    A.シンプルになるよう少々意識したが、もともとプロ
    ダクトの規模感が違う

    View Slide

  17. 17
    質疑
    Q.Ag-Grid + Antdはどう共存させた?
    A.cssがconflictするのであまり共存させない
    Q.ユーザーの声の拾い上げはどのように?
    A.エンジニア直接は少なく、担当者が聞きに行く
    Q.使用率測定はしている?
    A.全てのアクションではなく重い処理に
    GoogleTagManagerを仕込んでいる

    View Slide

  18. 18
    質疑
    Q.UI改善は?
    A.ユーザーの声ドリブンが多い
    Q.ディレクトリ構造
    A.次の発表で深く触れられます。お楽しみに

    View Slide