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
ランサーズを支える管理画面
Search
manamin0521
October 02, 2018
Programming
2
4k
ランサーズを支える管理画面
管理画面チラ見せナイト #7に登壇した際の資料です。
manamin0521
October 02, 2018
Tweet
Share
More Decks by manamin0521
See All by manamin0521
Rails歴2年(🐥)の私が Cakeを半年触って学んだこと
manamin0521
1
930
Other Decks in Programming
See All in Programming
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
120
A New Era of Testing
mannodermaus
2
510
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
1
360
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Faster Mobile Websites
deanohume
304
30k
What the flash - Photography Introduction
edds
67
11k
The Mythical Team-Month
searls
218
43k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
The Pragmatic Product Professional
lauravandoore
31
6.2k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
The World Runs on Bad Software
bkeepers
PRO
64
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
BBQ
matthewcrist
83
9.2k
Fireside Chat
paigeccino
31
2.9k
Transcript
ランサーズを支える 管理画面 管理画面チラ見せ♡ナイト #7 チラッ♡ ランサーズ株式会社 松原愛美
自己紹介 ランサーズ株式会社1年目 開発部 CREチーム 松原愛美 普段の業務 管理画面の機能やUIの改善 CakePHP2.8バージョンアップ サービス保守開発 @manamin0521m
ランサーズとは
ランサーズとは
クラウドソーシングのプラットホーム 仕事受注者= ランサー 仕事依頼者= クライアント マッチング 安心・安全
お仕事の流れ 依 頼 を 立 て る 提 案 承
認 ・ 仮 入 金 仕 事 開 始 選定
お仕事の流れ 仕 事 完 了 報 告 承 認 相
互 評 価 仕 事 完 了 振込
今日のテーマ 1、最近会計の管理画面を作った話 2、安全な運営を支える管理画面 3、管理画面のUI改善
1. 最近会計の管理画面を作った話
誰が使う画面?? ・カスタマーケア (=カスタマーサポート) ・経理
カスタマーケアの業務のうち ・お問い合わせ対応 ・監視業務 ・サービス運営
この部分の裏側について 依 頼 を 立 て る 提 案 承
認 ・ 仮 入 金 仕 事 開 始 充当 先払い
この管理画面で行うこと (実際に振り込まれた) 銀行の入金データ クライアントが 入力した 振込申請データ 一致することを確認(=充当)
以前までの運用の流れ 振込用データとエクセルの入金データを二画面見比べて手作業で運用
振込データ 入金データ ※前まで PC1 PC2
課題 ・カスタマーケア 間違えたりつけ忘れて金額が合わなくなる可能性がある (※経理とのダブルチェックで防いでいます) ・エンジニア 入金データ(Excel)と振込用データ(DB)を紐付けできない SQLで集計できない
1対nの手間 一つの入金に対し、 複数の依頼の振込 データがある場合、 一つ一つ書く必要が あった
新管理画面をチラ見せ❤
①入金データをインポート
入金データ ②該当の入金データを 選ぶと…?
入金データ ③振込データの中から 金額が同じものを 読み込んで表示
入金データ 振込データ ④同じものを選択
入金データ 振込データ ⑤一致するものを 充当
⑥経理がチェック(監査)
⑦レポートが ダウンロード できるようになる
Before 入金 案件 金額チェック 会計仕訳 Before スプレット シート 管理画面 目視
気合い
After 入金 案件 金額チェック 会計仕訳 Before スプレット シート 管理画面 目視
気合い After 管理画面 管理画面 システム SQL→CSV (自動)
喜びの声 日々の作業時間が3分の1に! (1時間→20分!) 間違いがあるかもしれないといった 心理的不安感が取り払われた。 カスタマーケア
2. 安全な運営を支える管理画面
誰が使う画面?? カスタマーケア (=カスタマーサポート)
カスタマーケアの業務のうち ・お問い合わせ対応 ・監視業務 ・サービス運営
サービスの安全を脅かすもの⚠ ・利用規約違反の恐れがある依頼 ・利用規約違反の恐れがあるメッセージ
サービスの安全を脅かすもの⚠ ・利用規約違反の恐れがある依頼 ・利用規約違反の恐れがあるメッセージ
違反内容
利用規約違反の恐れがある依頼への対応 依 頼 を 投 稿 す る 依 頼
一 時 非 公 開 N G 候 補 依 頼 非 公 開 利用規約違反を検出 違 反 確 定 ユ | ザ | 退 会 措 置
管理画面をチラ見せ❤
条件に一致すれば NG候補に表示
依頼非公開 依頼者にメール通知
バッチ→即時非公開 ・以前までは、依頼が公開されたままバッチ処理で検出 →検出されるまでに時差があり、その間に多くの人が 閲覧してしまうために、レピュテーションリスクがある ・24時間対応により公開されない期間を短くし、機会損出を防ぐ
サービスの安全を脅かすもの⚠ ・利用規約違反の恐れがある依頼 ・利用規約違反の恐れがあるメッセージ
利用規約違反の恐れがあるメッセージへの対応 ス パ ム が 送 ら れ る 検
知 ス パ ム 一 覧 依 頼 削 除 通 報 メ ッ セ | ジ 非 公 開 ユ | ザ | 退 会 措 置 違 反 確 定
スパムに怪しいものを検知すれば、 スパム一覧に表示(機械学習) 技術ブログ Lancers社におけるスパムメッセージに対する取り組み https://engineer.blog.lancers.jp/2017/12/spam_project/
3. 管理画面のUI改善
様々な管理画面を修正してきた話 5社ほど長期インターン 比較的新しめの会社が多かった ランサーズ 創業して10年、、、
様々な管理画面を修正してきた話 5社ほど長期インターン 比較的新しめの会社が多かった ランサーズ 創業して10年、、、 →盛り盛りで二郎状態
なぜ管理画面が乱れるのか ・決まりがない中、複数人のエンジニアが都度修正 →いろんなレイアウトが入り混じる ・管理画面の性質上、デザイナーが携わらず →CSSの書き方が統一されず ・工数が割けない →年数が経つごとに現場の用途と離れていく
Before・Afterをチラ見せ❤
旧:Before _人人人人人人人人_ > 突き抜けるtable <  ̄Y^Y^Y^Y^Y^Y^Y^ ̄
旧:After スッキリ
新:Before ページ毎の バラバラ感
新:After 統一して スッキリ
工数少なめにカイゼン
①使われていないものを削除 導線を考え移動 使われていないので一覧から削除
削除の方法 ・一番使用しているカスタマーケアにヒアリングして削除 ・アクセスログを調べて他に使用している人を把握 ・一旦消してみて、不具合があったら元に戻すことにする ※一覧からは消しても詳細画面には表示していました
②まとめる 用途別 長さを取っていたので hoverに Before Before
③CSSの決まりを作る style埋め込み 数行の小さい複数cssファイル 統一CSSファイル ※bootstrapと併用中 全体用CSS どこに何があるかわからず 共存 リファクタ ・id→class
・HTML要素→class ・!importantの削除
④UIの統一 タイトルサイズ テーブルUI 余 白 の 量 ボタンサイズ
古めの管理画面を運用していくポイント ・現場の用途に合わせて、数年に一度はUIメンテしたい →いらないものは消す →運用が変われば移動する →増えてきたらまとめる
新しく管理画面を作る時のポイント ・先にCSSの規則を決めておく 管理画面といえども後々で全画面変えるのは大変、、、 (特に新画面の場合、コンフリクトが起きやすい) ・レイアウトの外枠だけでも(一緒に)決める 主なレイアウトを、使いやすさの観点からもデザイナーレビューしてもらう ページ作る毎にレイアウトに悩まなくて済むので効率もよい
当たり前だけど大事なこと!
エンジニア、デザイナー、ディレクター募集中!!