ノウキナビKPI自動収集ソフト ノビルナビ開発日誌Vol.3

こんにちは！

ノウキナビエンジニアの山崎です。

 

今回は「業績評価指標（KPI）を自動収集するソフト」ノビルナビの開発日誌第3弾です。

前回の記事はこちら！

 

前回、課題を4点挙げました。

・データの表示（正確なデータを表示する）

・データの整理（わかりやすくデータを整理する）

・データの収集（1日ごとにデータを抜け漏れなく収集する）

・データの分析（データに関連性を設け、分析の足がかりにする）

 

今回は、このうちデータの表示とデータの整理に関して掘り下げていきたいと思います。

 

データ表示の現在

現状、ノビルナビではデータをこのように表示しています。

※動画は開発中のものです。

※データは全てテスト用のダミーのものを入力しています。

 

見ていただけたように、フィルター機能を作り、指標を整理できるようにしています。

日時によっても指標の中の数値が変化し、1日ごとに指標のデータを更新できるようにしています。

現状のノビルナビはひとまず指標データを表示してみる。そしてそのデータを分類し、日付および属性でフィルタリングできるようにする。

この2つが実現している状態です。

 

果たしてわかりやすいと言えるのか？

データの表示の並びは全て同じ大きさのブロックに各値が表示され、整列しています。

これは果たしてわかりやすいといえるのでしょうか。

無造作に指標がつらつらと並んでいてどれをみるべきかいまいちピンときません。

UI/UXの観点からよりユーザーに使いやすく理解しやすい構造にしなければなりません。

どうすればそういったデータの表示や整理ができるでしょうか。

 

わかりやすいデータ表示を作るには

一目見た時にわかりやすいデータ表示にするには、指標の中でも特に積極的に取り組むべき指標には優先順位を作る必要があると思います。

重要度の高い指標は、トップに表示し、わかりやすくアイコンをつけてあげれば、ユーザが閲覧した時に着目すべき点が一目瞭然となります。

 

また、現状は事業が持つすべての指標を丸ごと表示しています。全体で共有するような機会であれば、その表示で問題ないですが、基本的にはスタッフ1人1人が閲覧する想定です。

スタッフ1人1人にアカウントを用意し、そのアカウントによって最初に表示する指標を変更してあげれば、スタッフごとに適した指標の表示が実現できそうです。

 

データの整理においてもよりクリティカルに知りたい情報を一気に取得できる項目があった方が良さそうです。

例えば、指定された期間で目標値に達成していない指標のみを一覧表示するボタンや、過去のデータと比較して成長率が高い指標を一覧表示するボタンなどがあれば指標の見方をボタン1つで整理できます。

達成率ベースで指標を見るのか、成長率ベースで指標を見るのかなど、指標を見るにあたっての軸となる項目を一括指定できるボタンがあれば分析も捗ることでしょう。

 

また、指標を見ながら今後の対策やAP（アクションプラン）を練っていく際は、必ず紙に書き込んで次回までの計画を立てます。

そういった計画もノビルナビで管理することができるようにすれば、指標の成長率を分析した時にそのAPの効果はあったのかなかったのか、より効果的な方法はなんなのかを模索することができます。

スタッフをアカウントで分類する利点はここにもありそうです。

ノビルナビ上にそのスタッフだけのアクションプランノートやカレンダーを作成し、特定の指標の成長のために取り組むタスクを書き込みます。

これらのタスクはGoogleカレンダーやChatwork、Slackといったツールと連携し、共有することができます。

これらのタスクに取り組むことは今後の指標にとってプラスの影響を与えるのかを分析することができ、タスクの価値を可視化できます。

 

さらには、現状のデータ表示だとグラフを活用していないため直感的にわかりやすいデータとはなっていません。

例えば、新品ショップの売上を指標ごとに比較したい時、弊社のノウキナビ自社ショップ、yahooショップ、楽天ショップのうちそれぞれがどれほどの割合を占めているのかを知りたいときに、数値を見ただけではなんとなくでしか理解できません。このような時は円グラフを使えば一目瞭然の結果が出ます。

時系列に沿ったアクセス数の推移なども重要なデータ指標の1つです。曜日や時間帯ごとのアクセス数のばらつきを分析すれば、どの時間帯が最も同時閲覧者が多いのかがわかります。それによって広告やPRの手法も変わってくるでしょう。

これらグラフを活用した分析は、指標を組み合わせてチャートを描き出す必要があります。指標の中で関連性がないもの同士を比較しても意味がないので、組み合わせすることができる指標グループをあらかじめ決めた方が良さそうです。

 

以上のように、データ1つ表示するだけでもさまざまに工夫できそうなことが浮かんできます。

あまり詰め込みすぎて、データの表示や整理にばかり時間を使うわけにもいかないので、次回では、「指標に優先順位をつける」ということと、「クリティカルな情報を取得できるボタンの作成」を課題とし、取り組んでいきたいと思います。

 

また、3つ目の課題として、データの収集が上がっていました。

現在、データはスプレッドシートに保管している状態です。

そこに各データの保管場所に散らばったデータ群を一挙に集めて、正しい形式で保管していきます。

それらの処理も作成していきたいと思います。

 

技術的なことに関して所感

これらノビルナビの表示やフィルターはNuxt.js+Composition-apiと、 CSSフレームワークとしてBuefyを使用し開発いたしました。

 

Nuxt.jsは、javascriptのフレームワークである「Vue.js」をもとに開発された、また別のフレームワークです。

近年その文法が変わり、composition-apiという書き方が生まれ、注目され始めています。

composition-apiの特徴は、より再利用性の高いコードを書くこと。また、コードの保守性を十分に保つことです。

今までのVue.jsやNuxt.jsは、機能ごとにコードを分割していたわけではなく、ロジックごとに分割していました。そのため、あらゆる処理が飛び飛びであちこちに書かれている状態だったのです。

それはコードを見た時にどこで何の処理をしているのかわかりにくく、コードの保守性はよくありません。さらに、コードを再利用することもままならない状態です。

そこで、コードを機能ごとにまとめ、全体を通してスッキリさせることができるように文法を変更しました。それがcomposition-apiです。

もし、詳しく知りたい方がいたらこちら

 

Vue.jsやNuxt.jsの特徴は、なんといってもリアクティブという概念です。

リアクティブとは、「反応的な」という意味を持ち、ある値が変わると、その値に依存する別の値も自動的に再計算される仕組みのことです。

ノビルナビの例でいうと、日付の期間が変更されると、その日付の期間に基づいて指標の値を表示していた目標値や実数値といった変数も同時に変化します。それはこのリアクティブというシステムのおかげなのです。

 

さらにBuefyは、見た目のデザインを決めるCSSのフレームワークです。代表的なのは「BootStrap」や「Bulma」でしょうか。

Buefyは、そんなBulmaとVueを掛け合わせたCSSフレームワークです。

これを使うと、例えばボタンのレイアウトやカレンダーのレイアウトをあらかじめ決められたナイスなデザインを使って設計することができます。

デザインに乏しい私でも大丈夫な気がしてきます。

 

他には、素のjavascriptよりも安全にコード設計することができる「Typescript」を使用し、意図しない不具合が起こらないようにしています。

Typescriptは、値に型を定義することができる仕組みを持ったjavascriptです。「型」とは、例えば、ノビルナビで言うと、日付の部分はDate型しか受け付けないようになっています。そこに文字を入れようとしても、入れることができないようにしているのです。そうすることによって、日付は日付としての役割を全うし続けることができます。

他には、目標値の部分だと、数字（Number型）しか入らないようにしています。そこに文字や日付が入ってしまうと、データの表示がおかしくなってしまうからです。

 

型はスプレッドシートやエクセルでいうところの表示型式だと思っていただければわかりやすいです。

 

javascriptでは、こういった型は設定できず、ゆるい規制の中でプログラムを実行していました。

今後はプログラムの中のルールをより厳しくして、開発の段階から不具合を発見しようと導入が増えているのがTypescriptです。

Typescriptは奥が深いですが、開発していくとそのありがたさに気づきます。変なデータを入力していると、実行する前に教えてくれるからです。

これらのライブラリやフレームワークをなぜ使うのかという理由は、私が楽をするための何物でもありません。これらの偉大な先人たちが開発してくださった技術を使えばそこそこ難しい設計もできてしまいます。

しかし、正しく使いこなす必要がありますので、甘えすぎないように気をつけます。

 

次回までの課題まとめ

・「指標に優先順位をつける」

・「クリティカルな情報を取得できるボタンの作成」

・「正確なデータの収集」

 

以上、ノウキナビエンジニアの山崎でした！

 

弊社では、中古農機具を取り扱う販売サイト「ノウキナビ」を運営しております。

中古農機の買取や、新品農機具の販売、メーカー純正パーツの取り寄せサービスなども展開しておりますので是非一度ご覧になってみてはいかがでしょうか！

次回の「ノビルナビ開発日誌」をお楽しみに！