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
4.4k
ランサーズを支える管理画面
管理画面チラ見せナイト #7に登壇した際の資料です。
manamin0521
October 02, 2018
Tweet
Share
More Decks by manamin0521
See All by manamin0521
Rails歴2年(🐥)の私が Cakeを半年触って学んだこと
manamin0521
1
1k
Other Decks in Programming
See All in Programming
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
310
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
880
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.8k
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
150
プログラマのための作曲入門
cheebow
0
520
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
140
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.5k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
310
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
900
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
Model Pollution
hschwentner
1
180
Featured
See All Featured
Bash Introduction
62gerente
615
210k
The Invisible Side of Design
smashingmag
301
51k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Speed Design
sergeychernyshev
32
1.1k
Agile that works and the tools we love
rasmusluckow
331
21k
A designer walks into a library…
pauljervisheath
208
24k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Automating Front-end Workflow
addyosmani
1371
200k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
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の規則を決めておく 管理画面といえども後々で全画面変えるのは大変、、、 (特に新画面の場合、コンフリクトが起きやすい) ・レイアウトの外枠だけでも(一緒に)決める 主なレイアウトを、使いやすさの観点からもデザイナーレビューしてもらう ページ作る毎にレイアウトに悩まなくて済むので効率もよい
当たり前だけど大事なこと!
エンジニア、デザイナー、ディレクター募集中!!