ランサーズを支える管理画面

by manamin0521

Slide 1

Slide 1 text

ランサーズを支える管理画面管理画面チラ見せ♡ナイト #7 チラッ♡ ランサーズ株式会社　松原愛美

Slide 2

Slide 2 text

自己紹介ランサーズ株式会社1年目開発部　CREチーム　松原愛美普段の業務管理画面の機能やUIの改善 CakePHP2.8バージョンアップサービス保守開発 @manamin0521m

Slide 3

Slide 3 text

ランサーズとは

Slide 4

Slide 4 text

ランサーズとは

Slide 5

Slide 5 text

クラウドソーシングのプラットホーム仕事受注者＝ランサー仕事依頼者＝クライアントマッチング安心・安全

Slide 6

Slide 6 text

お仕事の流れ依頼を立てる提案承認・仮入金仕事開始選定

Slide 7

Slide 7 text

お仕事の流れ仕事完了報告承認相互評価仕事完了振込

Slide 8

Slide 8 text

今日のテーマ 1、最近会計の管理画面を作った話 2、安全な運営を支える管理画面 3、管理画面のUI改善

Slide 9

Slide 9 text

1. 最近会計の管理画面を作った話

Slide 10

Slide 10 text

誰が使う画面？？・カスタマーケア (＝カスタマーサポート) ・経理

Slide 11

Slide 11 text

カスタマーケアの業務のうち・お問い合わせ対応・監視業務・サービス運営

Slide 12

Slide 12 text

この部分の裏側について依頼を立てる提案承認・仮入金仕事開始充当　先払い

Slide 13

Slide 13 text

この管理画面で行うこと (実際に振り込まれた) 銀行の入金データクライアントが入力した振込申請データ一致することを確認(＝充当)

Slide 14

Slide 14 text

以前までの運用の流れ振込用データとエクセルの入金データを二画面見比べて手作業で運用

Slide 15

Slide 15 text

振込データ入金データ ※前まで PC1 PC2

Slide 16

Slide 16 text

課題・カスタマーケア間違えたりつけ忘れて金額が合わなくなる可能性がある（※経理とのダブルチェックで防いでいます）・エンジニア入金データ(Excel)と振込用データ(DB)を紐付けできない SQLで集計できない

Slide 17

Slide 17 text

1対nの手間一つの入金に対し、複数の依頼の振込データがある場合、一つ一つ書く必要があった

Slide 18

Slide 18 text

新管理画面をチラ見せ❤

Slide 19

Slide 19 text

①入金データをインポート

Slide 20

Slide 20 text

入金データ ②該当の入金データを選ぶと…？

Slide 21

Slide 21 text

入金データ ③振込データの中から金額が同じものを読み込んで表示

Slide 22

Slide 22 text

入金データ振込データ ④同じものを選択

Slide 23

Slide 23 text

入金データ振込データ ⑤一致するものを充当

Slide 24

Slide 24 text

⑥経理がチェック(監査)

Slide 25

Slide 25 text

⑦レポートがダウンロードできるようになる

Slide 26

Slide 26 text

Before 入金案件金額チェック会計仕訳 Before スプレットシート管理画面目視気合い

Slide 27

Slide 27 text

After 入金案件金額チェック会計仕訳 Before スプレットシート管理画面目視気合い After 管理画面管理画面システム SQL→CSV (自動)

Slide 28

Slide 28 text

喜びの声日々の作業時間が3分の1に！（1時間→20分！）間違いがあるかもしれないといった心理的不安感が取り払われた。カスタマーケア

Slide 29

Slide 29 text

2. 安全な運営を支える管理画面

Slide 30

Slide 30 text

誰が使う画面？？カスタマーケア (＝カスタマーサポート)

Slide 31

Slide 31 text

カスタマーケアの業務のうち・お問い合わせ対応・監視業務・サービス運営

Slide 32

Slide 32 text

サービスの安全を脅かすもの⚠ ・利用規約違反の恐れがある依頼・利用規約違反の恐れがあるメッセージ

Slide 33

Slide 33 text

サービスの安全を脅かすもの⚠ ・利用規約違反の恐れがある依頼・利用規約違反の恐れがあるメッセージ

Slide 34

Slide 34 text

違反内容

Slide 35

Slide 35 text

利用規約違反の恐れがある依頼への対応依頼を投稿する依頼一時非公開 N G 候補依頼非公開利用規約違反を検出違反確定ユ｜ザ｜退会措置

Slide 36

Slide 36 text

管理画面をチラ見せ❤

Slide 37

Slide 37 text

条件に一致すれば NG候補に表示

Slide 38

Slide 38 text

依頼非公開依頼者にメール通知

Slide 39

Slide 39 text

バッチ→即時非公開・以前までは、依頼が公開されたままバッチ処理で検出 →検出されるまでに時差があり、その間に多くの人が閲覧してしまうために、レピュテーションリスクがある・24時間対応により公開されない期間を短くし、機会損出を防ぐ

Slide 40

Slide 40 text

サービスの安全を脅かすもの⚠ ・利用規約違反の恐れがある依頼・利用規約違反の恐れがあるメッセージ

Slide 41

Slide 41 text

利用規約違反の恐れがあるメッセージへの対応スパムが送られる検知スパム一覧依頼削除通報メッセ｜ジ非公開ユ｜ザ｜退会措置違反確定

Slide 42

Slide 42 text

スパムに怪しいものを検知すれば、スパム一覧に表示(機械学習) 技術ブログ Lancers社におけるスパムメッセージに対する取り組み https://engineer.blog.lancers.jp/2017/12/spam_project/

Slide 43

Slide 43 text

3. 管理画面のUI改善

Slide 44

Slide 44 text

様々な管理画面を修正してきた話 5社ほど長期インターン比較的新しめの会社が多かったランサーズ創業して10年、、、

Slide 45

Slide 45 text

様々な管理画面を修正してきた話 5社ほど長期インターン比較的新しめの会社が多かったランサーズ創業して10年、、、 →盛り盛りで二郎状態

Slide 46

Slide 46 text

なぜ管理画面が乱れるのか・決まりがない中、複数人のエンジニアが都度修正 →いろんなレイアウトが入り混じる・管理画面の性質上、デザイナーが携わらず →CSSの書き方が統一されず・工数が割けない →年数が経つごとに現場の用途と離れていく

Slide 47

Slide 47 text

Before・Afterをチラ見せ❤

Slide 48

Slide 48 text

旧:Before ＿人人人人人人人人＿＞　突き抜けるtable　＜￣Y^Y^Y^Y^Y^Y^Y^￣

Slide 49

Slide 49 text

旧:After スッキリ

Slide 50

Slide 50 text

新:Before ページ毎のバラバラ感

Slide 51

Slide 51 text

新:After 統一してスッキリ

Slide 52

Slide 52 text

工数少なめにカイゼン

Slide 53

Slide 53 text

①使われていないものを削除導線を考え移動使われていないので一覧から削除

Slide 54

Slide 54 text

削除の方法・一番使用しているカスタマーケアにヒアリングして削除・アクセスログを調べて他に使用している人を把握・一旦消してみて、不具合があったら元に戻すことにする ※一覧からは消しても詳細画面には表示していました

Slide 55

Slide 55 text

②まとめる用途別長さを取っていたので hoverに Before Before

Slide 56

Slide 56 text

③CSSの決まりを作る style埋め込み数行の小さい複数cssファイル統一CSSファイル ※bootstrapと併用中全体用CSS どこに何があるかわからず 共存リファクタ・id→class ・HTML要素→class ・!importantの削除

Slide 57

Slide 57 text

④UIの統一タイトルサイズテーブルUI 余白の量ボタンサイズ

Slide 58

Slide 58 text

古めの管理画面を運用していくポイント・現場の用途に合わせて、数年に一度はUIメンテしたい →いらないものは消す →運用が変われば移動する →増えてきたらまとめる

Slide 59

Slide 59 text

新しく管理画面を作る時のポイント・先にCSSの規則を決めておく管理画面といえども後々で全画面変えるのは大変、、、（特に新画面の場合、コンフリクトが起きやすい）・レイアウトの外枠だけでも(一緒に)決める主なレイアウトを、使いやすさの観点からもデザイナーレビューしてもらうページ作る毎にレイアウトに悩まなくて済むので効率もよい