＊ 本ブログはリクルートホールディングス主催・2017年の夏インターンシップに参加した神戸大学　藤原巧さんが執筆したものです。彼が取り組んだ Python可視化ツールを本ブログ、GitHubで共有します。

会社でExcelに手動で数字と矢印のグラフを書いて、消耗している人はいませんか？
この記事ではそのような業務の一部を自動化して解放します！！！

本アプリケーションはオープンソースで開発しており、誰でもソースコードを見ることができ、また無料で使用することができます！
(https://github.com/recruit-tech/g2g)

1. はじめに

Web系の企業ではページ遷移やページ離脱を解析し、特にページの離脱率が多い部分に関してUIの改善などを行います。

実際、インターン先のマーケット関連の部署では「ページの遷移や離脱をグラフで表し、離脱率が高いところを見つける」といった業務がありました。

しかしながら、このような作業を手作業で可視化しているケースもあり、「可能であれば自動化したい」という要望がありました。

この業務の特徴として

1. 社内向けなので見た目はそこまで重要でない
2. 定期的に実施するものなので累積するとかなり時間がとられる

といった特徴があり、自動化対象としてうってつけです。

そこで、従来のグラフに近い形でアウトプットされるページ遷移可視化ツールを、実際に業務に取り入れやすいようなソフトをコンセプトに開発しました。

2. コンセプト

このツールの目的は、Pythonなどのツールをあまり使ったことがない人でも使いやすいUIを提供し、従来手作業で行っていたページ遷移の可視化を自動化することです。

従来Excel上で作業していた人が作業しやすいように、以下の4点について工夫をしました。

1. 使いやすいUI
2. 遷移・離脱率データの可視化方法
3. 拡張性
4. デザイン性

2.1. 使いやすいUI

グラフ(ページのつながり)を入力する部分と、離脱率や遷移率などのパラメータを入力する部分に分けています。

グラフの入力部分はblockdiagというツールの書式に従っており、直感的に矢印で遷移を記述ができます。

各パラメータの入力部分は、Excelで行います。名前とパラメータを表形式で書くだけなので、これも直感的に記述ができます。

2.2. 遷移・離脱率データの可視化方法

他社のページ遷移の可視化手法として、Sankey Diaglamや、KLabさんが提案する方法が挙げられます。

今回は、従来会社で作っていた見た目に近い形で提供したかったので、グラフを描画し、それに着色する方法にしました。

これを実現するために、グラフ描画ツールとしては、blockdiagを使用し、それに着色することで離脱率等を可視化する仕組みを実装しました。

2.3. 拡張性

グラフを着色していく上で、様々な手法で離脱率が高い部分などを強調する可能性があります。

例えば、

1. ほかの色は白色で描画しておいて、上位N個は赤色で強調する
2. カラーマップを定義してそれに従った色を割り振る
3. “1. 2.”を組み合わせてまず全体的にカラーマップで着色しておいて，その後特に重要な部分を別の色で着色する

などが考えられます。 現在思いついている選択方法では考えられないようなケースも出てくる可能性もあります。

Pythonを使用し、柔軟に、かつ簡単に新たな選択方法を定義できるように実装しました。

2.4. デザイン性

強調する色やcolor_mapを選択するのは、多くの人にとって手間であり、色の指定方法がRGBのみでは直感的ではなく、多くのソフト使用者は苦労すると考えられます。

そこで、本ソフトでは色にCSS4 colorに対応させ、redやblueなどの基本的な色に加え、salmonやskyblueなどの色も設定出来るようにしています。

その他にも、https://matplotlib.org/examples/color/ に書いている色に対応しています。

color_mapに関しても、 https://matplotlib.org/examples/color/　に書いているものはほとんど対応しています。

しかし、強調する色やcolor_mapを考える手間、人によって違うと見にくくなる可能性を考えると、ある程度デフォルトカラーを用意しておいた方が良いと考えられます。

そこで、

• 要注意な色
• OKな色
• 離脱率とは別に強調させたいときの色
• もっと強調させたい時の色

を4種用意しました。

カラーマップとしては、色が極端に鮮やかな色を使用しておらず、カラーマップとしてよく使用されるcoolwarmを標準としています。

default

と書くとそれが適応されます。

3. 使い方

ブログではイメージしやすいように架空のECサイトの画面遷移を例にして解説します。数字は適当です。

3.1. ページ遷移を定義する

ページの遷移はblockdiagの書式に乗っ取って、.diagファイルとして保存します。
ファイルの内容は矢印で書き表し、

という風に書くことができます。

分岐を書く時は、上記の"検索結果"のように複数行に分けて記述します。実際のファイル例は、sample/map.diag をご参照ください。

3.2. Excelファイルをかく

Excelファイルにノードの情報を記述する

Excelファイルのnode sheetに各ノードのパラメータ情報を記述します。実際のファイル例は、sample/data.xlsx をご参照ください。

といった形式で書きます。

Excelファイルに色の情報を記述する

Excelファイルのcolor sheetに各ノードのパラメータ情報を記述します。

と書くとparamA値が10から20の間をredで着色します。

と書くと、25%以下すべてをblueで着色します。

数字で挟む方法の他に、関数のように記述することができます。

と書くと、上位3つを緑に着色します。

複数の規則を書くと、上から順番に適応されます。(つまり、最後にある条件が適応されやすいです)

デフォルトの関数としては、

• TOP(x): 上位x個を選択
• BOTTOM(x): 下位x個を選択
• MINMAX(x,y): x以上y未満を選択
• ALL(): すべてを選択

が実装されています。

3.3. 実行する

以下のコマンドで実行可能です。

出力される際は、出力ファイル名.diag と 出力ファイル名.pdf の2つが出力されます。

上記コマンドだとMacで日本語の文字化けが確認されました。もし、文字化けした場合は

のコマンドをお試しください。

3.4. 拡張する

TOPやBOTTOMなどの関数を追加・拡張することができます。
これに関しては、githubのREADME.mdを参照していただければと思います。

4. まとめ

今回の取り組みでは、実際の業務で使いやすい可視化ツールを意識して作成しました。可視化にかける時間は極力少ないほうが良いので、可能な限り自動化したいと考えています。

実際の業務を改善するために、現に業務をしている人とコミュニケーションを取りながら、手作業で行っていることを1つずつ丁寧に自動化していきました。

しかしながら、多くの作業者が手作業をしているうちに、”めんどくさい”という気持ちが薄れ、自動化を諦めているケースもあります。そこで、まずは本ツールのような自動化ソフトを通じて少しでも作業を”めんどくさい”と感じさせる必要があります。

作業を”めんどくさい”と感じはじめれば、その作業の自動化を進めるモチベーションがわき、より本質的なデータ解析の方により時間を割くキッカケになれば幸いです。

以上、ここまで藤原さんの取り組みでした。私はExcelを直接編集したくないので、PythonからExcelを出力して使います。これは一見不合理ですが、あとで数字の参照を行いたくなったときに、Excel形式で保存されたファイルを参照するだけで良いので、そんなに不合理ではないです。エンジニアの人にもオススメです