ハウテレビジョン開発者ブログスマートフォン用の表示で見るハウテレビジョン開発者ブログ『外資就活ドットコム』を日夜開発している技術陣がプログラミングネタ・業務改善ネタ・よしなしごとについて記していきます。データサイエンティストはじめにデータアナリストのn_maoです。BtoCなWEBサイトやスマホアプリ、リアル店舗の小売業など多くのビジネスでは、ユーザー行動を正しく分析することで、継続率や売上げの向上につながる重要な示唆を得ることが可能です。ユーザー行動分析の中で、あるページからあるページへの遷移確率を算出したり、特定のユーザー群(例えば、多くのお金を払ってくれるユーザー達)に特徴的に見られる行動パターンなどを列挙することがあります。多くのWEBサイトでは大量のページやアクションが存在し、それらの組み合わせ(パターン)となるとさらに膨大な数となるため、全てのユーザーの全行動を視覚的に把握するのは困難です。解析手法の選択」「解釈を行いやすいような視覚化」など、様々な工夫が必要となります。今回はその中でも、行動パターンの視覚化を行う方法に焦点を当て、私が良く使うグラフ表現方法の基本形をまとめてみました。次節以降で順に見ていきます。有向グラフによる視覚化ページ間の遷移は、順序関係をもつ系列データのため、有向グラフによる視覚化が可能です。Diagramとネットワークグラフの2種類の手法を紹介します。chartを利用して描いてみました。図1では、ノードが1ページを表し、エッジの太さで遷移頻度を表しています。Diagramは、ページ遷移の様子をとてもシンプルに表現できる良い手法です。Analytics(GA)でも行動フローとして利用されていますね。この図はループやサイクルがないことに注意してください。Aのような遷移は表現できません。ノードの位置が同じだからといって、特に意味はありません。配置上都合が良かっただけです。綺麗に揃っていることで誤解を招きやすいので注意してください。GAの行動フローは(おそらく)この辺りの特徴を踏まえ、セッション開始からの遷移数という情報を与えるという工夫を行っています。GAの行動フローの例GAの行動フローでは、ノードの位置と、セッションからの遷移数を合わせています。この図で最も注目してほしいポイントは、この図のハイライトされたルートを辿っていくと、2番目の接点の位置に「/」が再度登場していることです。最初の通過地点に「/archives」があるにもかかわらず、2番目の接点にも3番目の接点にも「/archives」があります。Diagramはサイクルが表現できないはずなのに、なぜこんなことが起こるのでしょうか。グラフを生成する際、同じページでもセッション開始からの遷移数が違えば別のものとして区別しているのでしょう。この図では、「/archives」からの遷移の全体像ではなく、あくまでセッション開始から1遷移後の「/archives」からの遷移といった、部分的な情報であることに気をつけて解釈してください。※部分的な情報だから悪だというわけではないです。目的に応じて正しく利用し、正しく解釈しましょう。ネットワークグラフループやサイクルを含む行動パターンを視覚化したい場合には、以下のようなネットワークグラフで表現すると良いでしょう。以下の全ての図はgraphvizを利用して描いています。ネットワークグラフの例エッジの向きは遷移の向き、エッジの太さは遷移数を表しています。Diagramより少しごちゃごちゃしていますね。ページの階層構造など、何かでグルーピングできる場合は、位置を揃えてあげると見やすいです。味気ないので色もつけましょう。色もつけたネットワークグラフの例これで見やすくなりました。この図はGAとは異なり、セッション開始から何遷移目かといった情報は無く、(対象データの)すべてのページ遷移の傾向を確認することが可能となります。Diagramでもネットワークグラフでも、長さ3以上のパターンの表現は難しいです。図4では、「/」から「コラム一覧」への遷移数と、「コラム一覧」から「コラムA」への遷移数はそれぞれ確認できますが、「/」から「コラム一覧」へ遷移し、かつその後「コラムA」に遷移した数は表現できません。解決策としては、エッジを分けたり、非連結グラフにすることが考えられますが、その場合グラフサイズを小さくしないと複雑になりすぎるのでおすすめできません。何か良い方法ないでしょうか?無向グラフによる視覚化ページの遷移は順序を持っていますが、必ずしも順序を考慮した方が良いわけではなく、順序情報を除いた方が良いケースも多々あります。いった場合は無向グラフで表現しましょう。以下ではネットワークグラフと二部グラフの場合の表現方法、そしてクラスやノードの影響力などを考慮した少し高度なグラフ表現方法について述べます。ネットワークグラフまずはネットワークグラフです。有向グラフの場合と同様、階層を揃え、コンテンツカテゴリーで色分けしています。上図では有向グラフと違い、サイクルは集約された1本のエッジになっています。向きがないことでさっぱりしましたね。向きに意味がなければシンプルに無向グラフで表現した方が伝わりやすいでしょう。二部グラフまた、例えばどのような属性のユーザーがどんなページを見ているか?といったように、「属性」と「ページ」という2つのグループに分けられ、かつ同じグループのノード同士が結ばれない場合は二部グラフであるため、グループでまとめてあげるとスッキリします。何の工夫もなく描いてみました。見にくいですね!グループでまとめて上手に表現してみましょう。左が属性、右がページグループです。どの属性カテゴリーとどのページが接続関係にあるのかが分かりやすくなりました。以下は応用例なので参考程度に。継続的に利用してくれるユーザークラス(継続クラス)と、最近利用してくれなくなったユーザークラス(休眠クラス)という2つのクラスにどのような行動パターンの違いがあるのかを確認したい場合、所属クラスや各クラスへの影響度合いなどを考慮するとより直感的に捉えることが可能となります。datasetを使用して、各クラスにのみ特徴的に出現したパターンを列挙し、視覚化した図です。以下では、パターンを構成する要素をアイテムと呼ぶこととします。左(rank1〜3)が「再発しなかった患者クラス」、右(rank-1〜-3)が「再発した患者クラス」にのみ出現したアイテムを表し、ランク0に両方のクラスに出現するアイテムを位置させています。ランク0以外のランクは、アイテムが所属するパターンの影響力の総和を、クラスごとに均等3分割したものです。自己ループは、パタン長1で出現したことを表しています。このように表現することで、各クラスに対するパターンの影響度を、アイテムレベルで直感的に把握しやすくなります。終わりに今回は、ユーザー行動を視覚化するいくつかのグラフ表現方法についてご紹介しました。トライしてみてください。これらの表現が全てではありませんし、最後の図9のように既存手法にひと工夫加えることで、より直感的な把握が可能になります。大事なことは、何の情報が必要で、何が不要なのかを正しく取捨選択し、目的にあった表現方法を考えることだと思います。そのために引き出しは多い方が良いですね。いうことで他にも面白い視覚化方法がありましたら教えてください。21:13ユーザーの行動パターンをグラフで視覚化する方法Tweet関連記事2018-11-21golang.tokyo#19の参加レポと、GoでOGP画像を作った話どうも、7月にとあるプロジェクトの振り返り記事の前編を書いて...2018-07-20業務未経験からエンジニアになって半年を振り返るこんにちは、ハウテレビジョンエンジニアのFです。このよう...2015-12-18サーバの監視システムを設計したときに考えたこと弊社では少し前にサーバをAWSに移行しました。WebDriverで、新規会員登録フローのE2Eブラウザテストを自動化してみた。エンジニアの@bumcruです。はてなブログPro『外資就活ドットコム』の開発チームです。技術ネタ・プログラミングネタ等々書いていきます。業務未経験からエンジニアになって半年を振り返るDocker初心者がRails+MySQLの環境構築をDockerでやってみた月別アーカイブ検索はてなブログをはじめよう!howtvさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。