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

管理画面チラ見せナイト #7に登壇した際の資料です。

Transcript

1. ランサーズを支える 管理画面 管理画面チラ見せ♡ナイト #7 チラッ♡ ランサーズ株式会社　松原愛美
2. 自己紹介 ランサーズ株式会社1年目 開発部　CREチーム　松原愛美 普段の業務 管理画面の機能やUIの改善 CakePHP2.8バージョンアップ サービス保守開発 @manamin0521m
3. ランサーズとは
4. ランサーズとは
5. クラウドソーシングのプラットホーム 仕事受注者＝ ランサー 仕事依頼者＝ クライアント マッチング 安心・安全
6. お仕事の流れ 依 頼 を 立 て る 提 案 承 認 ・ 仮 入 金 仕 事 開 始 選定
7. お仕事の流れ 仕 事 完 了 報 告 承 認 相 互 評 価 仕 事 完 了 振込
8. 今日のテーマ 1、最近会計の管理画面を作った話 2、安全な運営を支える管理画面 3、管理画面のUI改善
9. 1. 最近会計の管理画面を作った話
10. 誰が使う画面？？ ・カスタマーケア (＝カスタマーサポート) ・経理
11. カスタマーケアの業務のうち ・お問い合わせ対応 ・監視業務 ・サービス運営
12. この部分の裏側について 依 頼 を 立 て る 提 案 承 認 ・ 仮 入 金 仕 事 開 始 充当 　先払い
    
13. この管理画面で行うこと (実際に振り込まれた) 銀行の入金データ クライアントが 入力した 振込申請データ 一致することを確認(＝充当)
14. 以前までの運用の流れ 振込用データとエクセルの入金データを二画面見比べて手作業で運用
15. 振込データ 入金データ ※前まで PC1 PC2
16. 課題 ・カスタマーケア 間違えたりつけ忘れて金額が合わなくなる可能性がある （※経理とのダブルチェックで防いでいます） ・エンジニア 入金データ(Excel)と振込用データ(DB)を紐付けできない SQLで集計できない
17. 1対nの手間 一つの入金に対し、 複数の依頼の振込 データがある場合、 一つ一つ書く必要が あった
18. 新管理画面をチラ見せ❤
19. ①入金データをインポート
20. 入金データ ②該当の入金データを 選ぶと…？
21. 入金データ ③振込データの中から 金額が同じものを 読み込んで表示
22. 入金データ 振込データ ④同じものを選択
23. 入金データ 振込データ ⑤一致するものを 充当
24. ⑥経理がチェック(監査)
25. ⑦レポートが ダウンロード できるようになる
26. Before 入金 案件 金額チェック 会計仕訳 Before スプレット シート 管理画面 目視 気合い
27. After 入金 案件 金額チェック 会計仕訳 Before スプレット シート 管理画面 目視 気合い After 管理画面 管理画面 システム SQL→CSV (自動)
28. 喜びの声 日々の作業時間が3分の1に！ （1時間→20分！） 間違いがあるかもしれないといった 心理的不安感が取り払われた。 カスタマーケア
29. 2. 安全な運営を支える管理画面
30. 誰が使う画面？？ カスタマーケア (＝カスタマーサポート)
31. カスタマーケアの業務のうち ・お問い合わせ対応 ・監視業務 ・サービス運営
32. サービスの安全を脅かすもの⚠ ・利用規約違反の恐れがある依頼 ・利用規約違反の恐れがあるメッセージ
33. サービスの安全を脅かすもの⚠ ・利用規約違反の恐れがある依頼 ・利用規約違反の恐れがあるメッセージ
34. 違反内容
35. 利用規約違反の恐れがある依頼への対応 依 頼 を 投 稿 す る 依 頼 一 時 非 公 開 N G 候 補 依 頼 非 公 開 利用規約違反を検出 違 反 確 定 ユ ｜ ザ ｜ 退 会 措 置
36. 管理画面をチラ見せ❤
37. 条件に一致すれば NG候補に表示
38. 依頼非公開 依頼者にメール通知
39. バッチ→即時非公開 ・以前までは、依頼が公開されたままバッチ処理で検出 →検出されるまでに時差があり、その間に多くの人が 閲覧してしまうために、レピュテーションリスクがある ・24時間対応により公開されない期間を短くし、機会損出を防ぐ
40. サービスの安全を脅かすもの⚠ ・利用規約違反の恐れがある依頼 ・利用規約違反の恐れがあるメッセージ
41. 利用規約違反の恐れがあるメッセージへの対応 ス パ ム が 送 ら れ る 検 知 ス パ ム 一 覧 依 頼 削 除 通 報 メ ッ セ ｜ ジ 非 公 開 ユ ｜ ザ ｜ 退 会 措 置 違 反 確 定
42. スパムに怪しいものを検知すれば、 スパム一覧に表示(機械学習) 技術ブログ Lancers社におけるスパムメッセージに対する取り組み https://engineer.blog.lancers.jp/2017/12/spam_project/
43. 3. 管理画面のUI改善
44. 様々な管理画面を修正してきた話 5社ほど長期インターン 比較的新しめの会社が多かった ランサーズ 創業して10年、、、
45. 様々な管理画面を修正してきた話 5社ほど長期インターン 比較的新しめの会社が多かった ランサーズ 創業して10年、、、 →盛り盛りで二郎状態
46. なぜ管理画面が乱れるのか ・決まりがない中、複数人のエンジニアが都度修正 →いろんなレイアウトが入り混じる ・管理画面の性質上、デザイナーが携わらず →CSSの書き方が統一されず ・工数が割けない →年数が経つごとに現場の用途と離れていく
47. Before・Afterをチラ見せ❤
48. 旧:Before ＿人人人人人人人人＿ ＞　突き抜けるtable　＜ ￣Y^Y^Y^Y^Y^Y^Y^￣
49. 旧:After スッキリ
50. 新:Before ページ毎の バラバラ感
51. 新:After 統一して スッキリ
52. 工数少なめにカイゼン
53. ①使われていないものを削除 導線を考え移動 使われていないので一覧から削除
54. 削除の方法 ・一番使用しているカスタマーケアにヒアリングして削除 ・アクセスログを調べて他に使用している人を把握 ・一旦消してみて、不具合があったら元に戻すことにする ※一覧からは消しても詳細画面には表示していました
55. ②まとめる 用途別 長さを取っていたので hoverに Before Before
56. ③CSSの決まりを作る style埋め込み 数行の小さい複数cssファイル 統一CSSファイル ※bootstrapと併用中 全体用CSS どこに何があるかわからず
     共存 リファクタ ・id→class ・HTML要素→class ・!importantの削除
57. ④UIの統一 タイトルサイズ テーブルUI 余 白 の 量 ボタンサイズ
58. 古めの管理画面を運用していくポイント ・現場の用途に合わせて、数年に一度はUIメンテしたい →いらないものは消す →運用が変われば移動する →増えてきたらまとめる
59. 新しく管理画面を作る時のポイント ・先にCSSの規則を決めておく 管理画面といえども後々で全画面変えるのは大変、、、 （特に新画面の場合、コンフリクトが起きやすい） ・レイアウトの外枠だけでも(一緒に)決める 主なレイアウトを、使いやすさの観点からもデザイナーレビューしてもらう ページ作る毎にレイアウトに悩まなくて済むので効率もよい
60. 当たり前だけど大事なこと！
61. エンジニア、デザイナー、ディレクター募集中！！