プログラミング的思考〜ノーコードツールを"もっと"活用するための〜
Ryosuke Ishii
データパレード
Mokkup.aiというダッシュボードワイヤーフレームを使ってみる
Ryosuke Ishii
もくじ
さいしょに
みなさんはダッシュボードを作成するときに、画面はどのように決定しているでしょうか。自分だけが使うダッシュボードであれば、BIツールで画面を作りながら考え始めてもいいかもしれません。
しかしダッシュボード使用者が顧客であったり、自社別部門であったりと自分以外の人が使用する場合は実際にダッシュボードを作り出す前にモックアップを用意することが必要となります。
今回はモックアップにかける工数を減らすことができるかもしれないツールの紹介です。
操作画面をすぐに見たい方はもくじから「Mokkup.aiを使ってみる」に飛んでみてください。
Mokkup.aiとは
Mokkup.aiとは何かChatGPTに聞いてみました。
Mokkup.aiは、データアナリストやビジネスチーム向けのオンラインダッシュボードワイヤーフレーム作成ツールです。専門的なデザインスキルがなくても、直感的なドラッグ＆ドロップ操作で、プロフェッショナルなダッシュボードのワイヤーフレームを短時間で作成できます。
主な特徴：
- 豊富なテンプレートと要素：業界標準のテンプレートや多彩なチャート、ウィジェットを利用して、カスタマイズ可能なダッシュボードを構築できます。
- BIツールへのエクスポート：作成したワイヤーフレームは、TableauやPower BIなどのビジネスインテリジェンスツールにワンクリックでエクスポート可能です。
- リアルタイムなフィードバックとコラボレーション：チームメンバーとワイヤーフレームを共有し、コメント機能を通じてリアルタイムでフィードバックを収集できます。
このツールを活用することで、ダッシュボード開発の効率化が図れ、プロジェクトの迅速な進行が可能となります。
さらに、以下の動画でMokkup.aiの使い方や機能を視覚的に確認できます。
今までは手書きやPowerPointで図を書いていたけど、サクッとイメージしやすいダッシュボードが作れるっていうのはすごくいいことだね
モックアップの必要性
ここまで読んで、疑問に思う方もいらっしゃるかと思います。
「モックアップって必要なの？ アジャイルで作っちゃえばよくない？」
この疑問は出てくると思うので、解説します。
冒頭でも書きましたが、モックアップが重要な場面は自分以外の人が使用する場合は実際にダッシュボードを使用する場合です。
ご自身がITベンダーであったり、情シスであったりのダッシュボード導入を促す立場だと、実際にダッシュボードを作る前に相手の要望を聞いて反映する作業が必要です。ここで完成品を用意するのではなく、簡易的なサンプルを見せて、要望を聞いて作り直して・・・という行為が生まれるのですね。
セルフサービスBIとモックアップ
セルフサービスBIのそもそもの成り立ちは１人のデータ探索者が与えられたデータの中で直感的な操作をしてデータを根拠に仮説検証を繰り返すことが王道です。そのために分析する項目をドラッグ＆ドロップするとツールが適切なグラフを出してくれます。人間が直感的なデータ探索をするために必要な機能が搭載されています。
その後完成したチャートをダッシュボード化をします。
しかし自分以外の人が使用するダッシュボードは構築手順は少々異なります。
相手の意見をたくさんヒアリングし、提案を繰り返しながら、業務を満たすことと技術的に課題がないかを確認していきます。
相手と一緒に作っていくため、セルフサービスBIの構築手順がそのまま適用されません。このアーキテクトとしての課題がひとつあります。
自分で作って提案していくだけならやりやすいけど、既存の帳票や現場の要望などを組み込みながらダッシュボードの形を作る必要があるからね
ダミーデータを用意する苦労
要件定義をしている段階で、本番で活用するデータが手元にないことがあります。基幹システムと一緒にダッシュボードを作る場合であれば、そもそもシステムがまだない状態です。
また実際にデータがある場合でも、ダッシュボードを決める段階では実データがノイズになる場合があります。
ダッシュボードの形を決めたいのに、データの細かいところが見えて議論が遮られたり、まだ正しい抽出条件をセットできていないため、実際の数字とはかけ離れてしまい、相手がそこに注目してしまったり・・・。
「実際のデータ」であるほどに相手が数値を見てしまい、ダッシュボードの形を決める議論が遠ざかって行ってしまうのです
数値の検証は後工程にならないとやる意味がないのに、数値にとらわれてしまうのですね。
だからと言って要件定義用にダミーデータを用意する、これも苦労します。何年分、どんな粒度でを決めねばなりませんし、Excel立ち上げてデータを作って、思った通りいかなかったり・・・こんなことはしょっちゅうあります。
ダミーデータを作ることはダッシュボードの形を決めることの本懐ではありません。ないに越したことはありません。
鶏が先か卵が先か問題
ちなみにダッシュボード専門ツールであるMotionBoardであっても、モックアップで直接ツールを触ることは非効率です。ダッシュボードの要件定義は要望をもらってコロコロ形を変えていかねばならないので、実際のツールではなくホワイトボードなどでイメージを固める作業をした方が効率的です。
現代のアジャイル的な思考や、どんどん構築時間が短くなるBIツールを見ていると、要件定義段階でツールを使いたくなってしまうのですが、そもそもの成り立ちを考えると非効率となるわけです。
そうしてホワイトボードやPowerPoint、最近だとFigmaやCanvaを使っていたのですが、ダッシュボードのイメージを固めるには最適とは言えない状態でした。
Mokkup.aiを使ってみる
前置きが長くなりました。これらの課題の解決となるのがダッシュボード専門のワイヤーフレームを提供するMokkup.aiなのです。
簡易的にダッシュボードのイメージを固められるこのツールを操作してみましょう。
KPIチャートを作ってみる
こちらが開発画面です。左側にエレメントがあります。この中に棒グラフやコンボグラフなどのチャートが並んでいます。これらをキャンバスにドラッグ＆ドロップします。
今回はKPIsのエレメントを選びました。そうするとさらにテンプレートの中からイメージに合うものを選べます。
キャンバスに配置されるので、大きさを設定します。
KPIsエレメントを装飾します。文字や数値を自由に加工できます。有料版になると色の変更もできるそうです。
横棒グラフを作ってみる
横棒チャートを配置して、タイトルやデータを書き換えてみました。60秒くらいで設定できてしまいますね。
このような感じでサクサクとモックアップが作れます。
この操作性なら打ち合わせの途中で相手の意見を聞きながらその場で画面修正も簡単にできるね
テンプレートを見てみる
Mokkup.aiは標準でテンプレートが付いています。有料版でないと利用できないものもありますが、サムネイルで眺めることができます。
どのようなダッシュボードを作ればいいかわからない場合など、参考になりますね。
FinanceのテンプレートからPL表のレポートを見つけたので、そちらを使用してみました。すぐに使える形ですし、ここから自分の好きな形に加工できるので、大変助かります。
エクスポート機能がある
有料版のみですが、ここも目玉機能だと思います。完成したダッシュボードをPowerBIとTableauの定義ファイルに変換することができます。
もしMokkup.aiで細かくデザインをしたのであれば、移行ができるのはありがたいですね。
データソースの変更が大変そうだし、Mokkup.aiで深いデザインまではやらなくていいと思うから個人的には使わなそうな機能・・・です。
無料版でもかなり使えそうですが、有料版になるともっとお得です。月額8ドルは安く見えますね。
まとめ
私はこのツールに出会えてよかったです。ダッシュボードの要件定義をするときにドキュメントを作成する工数が大幅に減らせそうです。
また無料版の範囲内で十分効果があるように思えます。
有料版になるとカラーデザインが使えたり、テンプレートが多く活用できたり、BIツールへのエクスポートができますが、ダッシュボードの要件定義での使用内であれば、チャートの種類とデータやタイトルが書き変えられれば必要な要素を満たしているように思えます。
ぜひ誰かのためのダッシュボードを作る方には触れてほしいツールだと感じました。
ABOUT ME
㈱データパレードの代表取締役で高田馬場の町中華のChief Data Officerをしています。 BIツールのセールスエンジニア・システムエンジニア・カスタマーサクセス歴10年以上経験、データエンジニア領域とコンサルティングが得意です。また大学でデータサイエンスの講師をしています。BIツール研究所・DMS Cubeなどデータ系コミュニティーのアンバサダーをしています
