MotionBoardの推しポイントを紹介する【りょうさん】
Ryosuke Ishii
データパレード
AIブラウザ操作でMotionBoardのダッシュボードを作る5つの手順｜ベストプラクティス
Ryosuke Ishii
AIに MotionBoard のダッシュボードを作ってもらう検証を、これまで3本の記事にまとめてきました。その中でいちばん精度が高かったのは、AIがいきなり画面を作るのではなく、先にデータを確かめ、人と相談して、HTMLで画面の手本を作ってから MotionBoard を操作する進め方です。この記事では、その手順を、実際のお題1つで最初から最後まで通して紹介します。
結論
- 手順は5つです。①AIがデータベースを見てデータの癖と正しい値を押さえる ②人と相談して、誰が何を知りたいかと見せる数字を決める ③HTMLで画面の手本を作る ④手本をもとに、AIがブラウザ操作で MotionBoard を仕上げる ⑤写真で手本と見比べ、直す点を一覧にして詰める
- 例のお題（仕入先と販売チャネルの1画面）では、AIが作った1回目が90点、仕上げを1回して93点でした。AIが MotionBoard を操作した時間は、1回目90分と仕上げ13分の合計約1時間40分です
- 点数は弊社の独自の採点表（100点：数字30・割り付け20・見た目20・読みやすさ15・動き15）に沿って、手本と見比べて付けたものです。手本と画面仕様の準備にかかった時間は、この時間に含めていません
この記事は、弊社が自社の環境で試した記録です。MotionBoard の開発元のメーカーが出している公式の手順ではありません。ボードは MotionBoard の画面の操作だけで作り、ボード定義のファイルを直接書き換えることはしていません。
AIブラウザ操作とは：AI がブラウザの画面を読み取り、人と同じようにクリックや文字の入力をして、Web のアプリを操作することです。この記事では、データパレードがこの方法で MotionBoard を操作した検証を、「AIブラウザ操作」と呼んでいます。開発元のメーカーが提供する AI の機能とは別のものです。
Claude in Chrome とは：Anthropic 社の AI「Claude」を、Google Chrome の拡張機能として動かす仕組みです。Claude が開いているページの内容を読み、クリック・入力・画面の切り替えを行います。今回の検証では、ログインは人が行い、その後の操作を Claude in Chrome で行いました。
もくじ
5つの手順の全体像
| 手順 | 誰が | やること | できあがるもの |
|---|---|---|---|
| ① データを確かめる | AI | データベースを読み、項目の意味・期間・癖を調べ、正しい値を別に集計する | データの所見と正しい値の表 |
| ② 目的と数字を決める | 人とAI | 誰が・いつ・何を知りたいかを決め、AIの気づきをもとに見せる数字を選ぶ | 画面の目的と指標の一覧 |
| ③ HTMLで手本を作る | AI（人が確認） | 画面の手本と、1枚の画面仕様を作る | 手本の画像・画面仕様・崩してはいけない値 |
| ④ MotionBoardを仕上げる | AI | 見本入りテンプレートを複製し、データを差し替えて手本どおりに並べる | 数字が合ったボード |
| ⑤ 見比べて詰める | 人とAI | 手本と並べて撮り、採点し、直す点を上から直す | 仕上がったボード |
一から画面を作らせた検証（13回の比較）では、データの読み違いと見た目の詰めの甘さで点を落とす回が多くありました。①〜③で「何を、どの数字で、どんな見た目に」を先に決めておくと、④で AI が迷う所がほとんど無くなります。
手順1 AIがデータベースを見て、データの癖と正しい値を押さえる
最初に、AI がデータベースを読み、表の行数、期間、項目の意味を調べます。読むのは読み取り専用の接続で、明細そのものは外に出さず、集計した値だけを書き出します。
例のお題は「小売チェーンの仕入先と販売チャネルの状況」です。データは弊社が BI の練習用に持っている架空の小売チェーンの売上明細（約82万行）を使いました。ここで AI は、依頼文のままでは数字を誤る点を5つ見つけています。
- 「リベート達成額」は金額ではなかった：列の値は0〜12程度の整数で、明細1行ごとの件数と読めます。円として合計すると、ひと月で405,150円になり、売上（約31億円）と釣り合いません。そこで「達成額」を「達成数（件）」に置き換えることを提案しました
- 月の列が正しくなかった：月を表すはずの列に、日付と合わない値が入っていました。月は日付の列から作り直しています
- 最後の月は半月分だけだった：データの最終月は15日分しかありません。初めに表示する月を、日がすべてそろう最後の月にしました
- 販売チャネルの約6割が空欄だった：空欄を「未設定」として見せ、注記を付けることにしました
- 小分類の約7割が「小分類なし」だった：これを入れると他の小分類が見えなくなるため、上位8から外しました
AI は、画面に出す数字を別の SQL で計算し直し、手本のデータと突き合わせています。このお題では195項目すべてが一致しました。ここで作った「正しい値の表」が、④と⑤の答え合わせに使えます。
13回の比較の記事では、原価の項目が1個あたりの金額だと気づかず、粗利率が81%（正しくは約73%）と出た回が13回中7回ありました。データの意味を先に確かめておくと、この種の誤りを画面を作る前に防げます。
手順2 人と相談して、誰が何を知りたいかと見せる数字を決める
次に、人と AI で画面の目的を決めます。人が決めるのは「誰が、いつ、何を知りたいか」です。AI はそこに、手順1の気づきをもとに「この数字はこう置き換える」「この月を初めに出す」といった案を出し、人が選びます。
例のお題で決めたことは次のとおりです。
| 決めたこと | 中身 |
|---|---|
| 見る人と場面 | 仕入先と販路の状況を、月初に1画面で確かめる |
| 初めに出す月 | 日がすべてそろう最後の月（2015年2月）。最終月は「一部の日のみ」と表示 |
| 置き換えた指標 | リベート達成額・未達額 → 達成数・未達数（件）。達成率は件数で計算 |
| 外したもの | 小分類の「小分類なし」。注記で外したことを書く |
| 見せ方の決まり | 前月比は達成率だけ差（pt）、ほかは率（%）。金額のグラフは百万円 |
このやりとりは1回で終わらせず、手本（手順3）を見ながら何度か行います。弊社の別のボードでは、手本を見た人から「明細の表が丸出しで、見た目が良くない」と指摘があり、要点の数字とグラフを先に並べる手本に作り直しました。手本の段階で直すほうが、MotionBoard を作った後に直すより手間が少なく済みます。
手順3 HTMLで画面の手本を作る
決めた中身を、AI が HTML の画面にします。HTML なら、色や並びを数分で直して見比べられます。手本は、画面と同じ大きさ（今回は1920×1080）で画像に撮っておきます。
色と並びは、デジタル庁「ダッシュボードデザインの実践ガイドブック」の考え方に沿っています。主役の数字は左上、色は青とグレーを基本にして、悪い値だけ赤にしました。13回の比較でも、このガイドブックを渡した回がいちばん点が高くなっています。
手本と一緒に、1枚の「画面仕様」を作ります。書くのは次の4つです。
- 部品ごとの位置と大きさ、色の値
- 項目の計算の決まり（月の作り方、率は合計どうしで割る、など）
- データの癖（手順1で見つけたもの）
- 崩してはいけない値：手本の月と、比べる月の主な数字の表
「崩してはいけない値」は、④で AI が画面の数字を確かめるときの答えになります。
手順4 手本をもとに、AIがブラウザ操作で MotionBoard を仕上げる
ここで初めて、AI が MotionBoard を操作します。一から作らず、色や書式を設定済みのグラフと表を並べた「見本入りテンプレート」を複製して使います。
- テンプレートを［ボードを別名で保存］で複製する
- 見本のデータの元を、本物のデータに差し替える（色・凡例・書式は残る）
- 手本の画像と画面仕様を見ながら、部品を手本と同じ位置に並べ、足りない部品は見本を複製して作る
- 画面の数字を「崩してはいけない値」と突き合わせる
例のお題では、1回目（Opus 5.5・90分）で90点でした。数字は手本の月とその前の月ですべて一致し、「1位だけ濃い青」「金額は百万円」「表のマイナスは赤」といった見た目も初めからそろっていました。
テンプレートについては、別の記事（テンプレート差し替え）で詳しく紹介しています。
手順5 写真で手本と見比べ、直す点を一覧にして詰める
1回目のボードを、手本と同じ大きさで撮って横に並べます。採点表で採点し、手本との違いを「差が大きい順」に一覧にします。順番の目安は、割り付け → 大きな数字 → 表 → グラフ → 文言 → 余白・色です。
例のお題では、次のような点が残っていました。
- 表の下半分が空いている
- 長い社名が途中で切れる
- 月の選択欄の見出しが、検証用の名前のまま残っている（「対象月：」に直す）
- 折れ線の目盛りが細かすぎる
この一覧を AI に渡し、上から順に直してもらいました（Sonnet 5.5・13分）。結果は93点です。
見比べのときに、次の3つも行っています。
- 表示倍率を2通りにして撮る：同じ画面で、ブラウザの表示倍率を100%と75%に変えて撮ります。75%（大きな画面に近い見え方）でだけ、グラフが上に縮こまる・比較の数字が切れる、といった崩れが出ることがありました
- 別の AI にも写真を見せる：Claude が作った画面の写真を ChatGPT（Codex）にも見せ、見落としを拾います。指摘は実物で確かめてから採ります
- 複製の上で直す：できたボードを直すときは、先に複製を作り、複製だけを直します。元の版は残しておきます
この手順の結果
同じ手順で作った4つのお題の結果です。点数は弊社の採点表によるもので、お題ごとに中身が違うため、お題どうしの点の比較には向きません。
| お題 | 1回目（Opus） | 仕上げ後（Sonnet） | AIの作業時間（合計） |
|---|---|---|---|
| 仕入先と販売チャネル（1画面・新しいお題） | 90 | 93 | 約1.7時間 |
| 小売チェーン（1画面・2回目のお題） | 89 | 93 | 約1.8時間 |
| 商品と支払い（2ページ） | 83 | 92 | 約2.1時間 |
| Webサイト（2ページ） | 88 | — | 約1.5時間 |
テンプレートを使わず一から作った検証では、仕上げまでに何回も直しが要り、1つのボードに12時間かかったこともあります。手本とテンプレートを先にそろえると、1回目から90点前後に届き、仕上げは1回で済む回が多くなりました。
人がすること、AIに任せること
| 人がすること | AIに任せること |
|---|---|
| ログイン（パスワードは AI に渡さない） | データベースを読み、データの癖を調べる |
| 誰が・何を知りたいかを決める | 正しい値を別に集計し、突き合わせる |
| AI の案から、見せる数字を選ぶ | HTML の手本と画面仕様を作る |
| 手本を見て、直す点を伝える | MotionBoard を操作して、ボードを作る・直す |
| できたボードを使ってよいか決める | 写真を撮って見比べ、直す点を一覧にする |
AI が MotionBoard を操作している間、人は画面に手を出していません。人の手が要るのは、最初の目的決めと、手本と完成品の確認です。
自社でこの手順を使うなら
用意するもの、確かめておくことは次のとおりです。
- MotionBoard のボードを作れるユーザー：AI が操作するのは、人がログインしたブラウザです。ボードを作る・保存する権限が要ります
- データベースの読み取り専用の接続：手順1で AI がデータを読みます。書き込みのできない接続を用意します
- データを AI に渡してよいかの確認：社内の規程や、顧客との契約で、AI にデータを読ませてよいかを先に確かめます。今回の例は架空のデータです
- ブラウザの拡張機能を入れてよいか：Claude in Chrome は Chrome の拡張機能です。会社の決まりで入れられない場合があります
- 人が責任を持って確かめる所：画面の数字が正しい値と合っているか、できたボードを使ってよいかは、最後に人が決めます
時間の目安は、AI が MotionBoard を操作する時間で、1つのお題あたり約2時間です。手本と画面仕様の準備、人の確認の時間は、お題の大きさで変わります。
うまくいかないこと
MotionBoard の設定にない表示は、AI でも作れません。今回の検証では、次のものが出せませんでした。
- 前月比の「＋」の記号
- 一覧形式の表の列幅を、画面の幅に合わせて自動で広げること（大きい画面で右が空く）
- スマートフォンの幅での表示
手本にこうした表示があっても、最初から追わないと決めておくと、AI が同じところで時間を使わずに済みます。
まとめ｜AIブラウザ操作でダッシュボードを作るなら、手本を先に
- いちばん精度が高かったのは、データの確認 → 人との相談 → HTML の手本 → テンプレートで MotionBoard → 写真で見比べ、の順に進める方法でした
- データの癖（金額に見えて件数の列、正しくない月の列、半月分しかない最終月）は、AI がデータベースを読んだ段階で見つかり、画面を作る前に直せました
- 例のお題では、1回目90点、仕上げ1回で93点、AI の作業時間は約1時間40分でした
- 人がするのは、目的を決めることと、手本と完成品を確かめることです
よくある質問（FAQ）
Q. HTMLの手本は、人が作る必要がありますか？
A. 今回は AI が作り、人は見て直す点を伝えました。HTML の知識が無くても進められます。
Q. 自社のデータでも同じ点数になりますか？
A. 今回の点数は、架空のデータと弊社の採点表によるものです。項目の意味が分かりにくいデータほど、手順1と手順2に時間がかかります。データの意味を書いたメモがあると、AI の読み違いは減ります。
Q. なぜ2つのモデルを使い分けているのですか？
A. 1回目は、割り付けや計算を一から決めるため、考える力の強い Opus 5.5 を使いました。仕上げは、直す点の一覧どおりに直す作業なので、速い Sonnet 5.5 で足りました。
Q. 一から作るより、どれくらい速くなりますか？
A. テンプレートを使わず一から作った頃は、1つのボードに12時間かかったこともありました。この手順では、AI の作業時間は1つのお題で約2時間でした。
参考リンク
- デジタル庁「ダッシュボードデザインの実践ガイドブックとデザインテンプレート」
- MotionBoard Cloud re:Act のマニュアル・サポート情報（開発元のメーカーのサイト）
- Claude in Chrome（Anthropic 社の紹介ページ）
このシリーズの記事
- AIブラウザ操作でMotionBoardのダッシュボードを13回作って比べた
- AIブラウザ操作×HTMLの手本でMotionBoardのダッシュボードを作る
- AIブラウザ操作のダッシュボード作成を約2時間に｜テンプレート差し替え
- AIブラウザ操作でMotionBoardのダッシュボードを作る5つの手順｜ベストプラクティス（この記事）
関連シリーズ（Dr.Sum）
- AIブラウザ操作でDr.Sumのデータフローに外部DBを取り込む｜型の壁と件数
- AIブラウザ操作でDr.Sumの生成AIにSQLと式を頼む｜Claudeが検算
- AIブラウザ操作でDr.Sumのデータフローを一から作る｜結合からジョブまで
- AIブラウザ操作でDatalizer for Webを使う｜初期設定からAIまで
ABOUT ME
㈱データパレードの代表取締役で、高田馬場の町中華「一番飯店」のChief Data Officerも務めています。BIツールのセールスエンジニア・システムエンジニア・カスタマーサクセス歴15年。大学のデータサイエンス教育で講師も担当してきました。現在は自社業務のほとんどをAIに移管し、AI10部署と50を超える自動処理が24時間動く「AI経営」を実践中。その実践知をこのブログで発信しています。
