AIブラウザ操作×HTMLの手本でMotionBoardのダッシュボードを作る

AIにダッシュボードを作ってもらうとき、先にHTMLで画面の手本を作っておくと、MotionBoard re:Act でも手本に近い画面に仕上がります。手本づくりから再現までを、Oura Ring の記録で試しました。

この記事は、弊社が自社の環境で試した記録です。MotionBoard の開発元のメーカーが出している公式の手順ではありません。ボードは MotionBoard の画面の操作だけで作り、ボード定義のファイルを直接書き換えることはしていません。

AIブラウザ操作とは：AI がブラウザの画面を読み取り、人と同じようにクリックや文字の入力をして、Web のアプリを操作することです。この記事では、データパレードがこの方法で MotionBoard を操作した検証を、「AIブラウザ操作」と呼んでいます。開発元のメーカーが提供する AI の機能とは別のものです。

Claude in Chrome とは：Anthropic 社の AI「Claude」を、Google Chrome の拡張機能として動かす仕組みです。Claude が開いているページの内容を読み、クリック・入力・画面の切り替えを行います。今回の検証では、ログインは人が行い、その後の操作を Claude in Chrome で行いました。

AIブラウザ操作で目指すこと

ダッシュボードを作る仕事は、データの確認、画面の割り付け、部品の配置、色や書式の調整、数字の検算と、手順は決まっているのに手間がかかります。1つのボードに、数時間から数日かかることもあります。

AIブラウザ操作で目指しているのは、次のような形です。

• 手本とデータを渡して頼むだけで、AI が MotionBoard の画面を操作し、ボードを最後まで作る
• 新しい部品や設定を AI がマニュアルを読んで試し、手順とできないことを返す
• AI が画面の数字をデータと突き合わせ、検算してから渡す
• 人がするのは、ログインと、出来を見て決めることだけ

この記事は、そこへ向けて、今どこまで AI に任せられて、どこで人の手が要るかを確かめた記録です。

前回の検証では、依頼文だけからダッシュボードを作ってもらいました。今回は進め方を変えます。

1. 人とAIが会話しながら、HTMLでダッシュボードの手本を作る
2. その手本と同じ画面を、Claude が MotionBoard re:Act の画面操作だけで作る

渡す資料は、手本の画像と画面仕様、MotionBoard のオンラインマニュアルだけです。データは社長が1年以上つけている Oura Ring（指輪型の健康記録の機器）の記録で、自社の Amazon RDS（PostgreSQL）に入っています。

結論

• 手本の2画面（今朝の体調・1年の傾向）を、14回・約10時間でほぼ同じ見た目と動きまで作れた。崩してはいけない値（今朝・昨日・全期間・月）は、最終形ですべて手本と一致した
• 最初の骨組みを Opus 5.5、見た目の仕上げ7回を Sonnet 5.5 に分けた。仕上げを Sonnet に任せても、回ごとに手本との差は縮んだ。効いたのは、手本と今の画面を比べた「直す箇所の一覧」を毎回渡したこと
• MotionBoard の計算式に PostgreSQL の式とサブクエリがそのまま書けた。「データの最新日」を自動で求めるので、ほとんどの部品は毎朝開くだけで最新の表示になる

1. ダッシュボードの手本はHTMLで、AIと会話しながら作る

最初に、AI が RDS の Oura のデータ（毎日の体調・睡眠・活動・ストレス、5分ごとの睡眠の深さや心拍など十数個の表）を全部見て、何が分かるデータかを整理しました。そのうえで、社長と話しながら HTML で手本を作りました。

社長の要望は次のとおりです。

• 毎朝、今日の体調・昨夜の睡眠・昨日の活動から「今日はどれだけ動けるか」が分かる画面
• 1年以上の記録から、季節で睡眠が変わるか、ストレスがどう推移したかが分かる画面。スコアを先に、細かい数字は後に。スコアから詳細へたどれること
• パソコンで見る。落ち着いた色

1回目の手本は色を使いすぎていました。社長の指摘で、デジタル庁「ダッシュボードデザイン実践ガイドブック」の青のパレット（青とグレーだけ、悪い値だけ赤）に作り直し、長期の画面の一番上に平均スコアを置いて手本が決まりました。

手本が決まったら、MotionBoard 側の担当に渡す「画面仕様」を1枚にまとめます。表と項目、計算の決まり（「今朝」は最新日、昨日の活動は最新日の前日の行、など）、部品の一覧、色、崩してはいけない値です。崩してはいけない値は、手本を作ったときの実データから写しました。

2. 1回目（Opus）：数字はすべて合ったが、見た目は既定のまま

1回目は Opus 5.5 で、手本の画像・画面仕様・マニュアルだけを渡しました。102分・道具の使用374回で、2画面分（データソース定義26本）を作りました。

画面の数字は、今朝・昨日・全期間・月の値まで、手本とすべて一致しました。一方で見た目は、MotionBoard の初期の配色のまま、大きな数字が表の形で出ていて、積み上げ横棒は崩れていました。

この回でいちばん効いた発見は、マニュアルではなく画面の説明文から出てきました。データソース定義の「カスタム項目」は「SQL関数等を使用して計算式を入力する項目」です。試すと、PostgreSQL の式もサブクエリもそのまま通りました。

• 最新日：(SELECT MAX(day) FROM oura.daily_readiness) を式に入れ、「対象」という Y/N の項目を作ってフィルターで絞る。日付を書き込まないので毎日自動で追従する
• 別の表の値を同じ行に持ってくる：相関サブクエリ
• 秒を「○時間○分」に直す、日付をまたぐ就寝時刻を18時起点の分にして平均する、などの計算も式の中で済む

3. 2回目以降（Sonnet）：「直す箇所の一覧」を毎回渡す

2回目からは、本席（Opus）が手本と今の画面を見比べて「直す箇所の一覧」を書き、Sonnet 5.5 の担当に渡しました。一覧は上から優先順に、1行1項目で、色の値や並べ方まで具体的に書きます。

※時間は作業記録の最初から最後まで（担当の質問への返事待ちを含む）。O01e は録画が早く止まったため記録上の時間。道具の使用回数は、クリック・入力・画面の撮影などの1回ずつを数えた値。

Sonnet の担当は、指示した項目は丁寧に直しました。気をつける点は2つありました。

• 上限より早く自分で止める：120分の上限に対して、68〜83分で「残りは誤操作が増える」と止める回が続いた。「全部済むまで110分より前に止めない。15分つまずいた項目は飛ばして次へ」と書くと、残りの項目にも手を付けるようになった
• 見切れは拡大しないと見えない：担当も本席も縮小した画面写真で確かめていたため、目盛りの「00:…」や「20…」の省略、凡例の重なりを社長に指摘されるまで見落とした。部品ごとに拡大して確かめるよう指示を変えた
• 「済」の報告をそのまま信じない：表の塗りを「淡く塗った」と報告した回は、実際には薄すぎて見えなかった。画面切り替えボタンも、後から置いた背景の帯がボタンを覆って押せなくなっていた。塗りは本席が画面で見て気づき、ボタンは担当の報告を受けて本席が押して確かめた

4. スコアから詳細へたどる：月の選択

社長の一番の要望は「スコアから詳細をたどる」ことでした。長期の画面に「月を選ぶ」欄を付け、選んだ月で内訳3枚・実数10個・日別の表・見出しの月が変わるようにしました。

• 文字型のボード変数を1つ作る
• 入力アイテム（コンボボックス）の値が変わったら、変数に入れて、データを読み直すフローを作る
• 各定義に「年月」（TO_CHAR(day,'YYYY/MM')）の項目を足し、「年月 = 変数」でフィルターする
• 見出しの「2026年09月（30日）」のような文字は、テキスト部品では変数で変わらないため、同じ絞り込みの定義から作ってカード明細表で出す
• 月別の平均スコアのグラフの点を押しても選べるようにした。フローのきっかけは「データポイント選択変更時」で、押した点の月を同じ変数に入れ、選択欄の表示も合わせる
• 上の平均スコア4枚の下には、選んだ月の平均と前月との差を1行で出す

月を切り替えた後の値は、本席がデータベースから直接計算した値と照らし合わせて、一致を確かめました。

5. AIがつまずいた MotionBoard の操作

• 時差付きの日時の列がある表を選べない：データソース選択画面の「プレビューを表示」を切ると選べる
• 式で使えない書き方：:: の型変換、%、|| はエラー。CAST()、MOD()、CONCAT() に置き換える
• 内訳の横棒が1行に重なる：複数の集計項目をそのまま横棒にすると、8本が1つの行に重なり項目名も出ない。「項目名・値」の2列の縦長の定義を作って、項目名を行軸に置く
• 時刻の目盛りが長い：「年/月/日 時:分:秒」の長い目盛りは、時刻を文字にした項目を行軸に使うと「02:00」になる
• 定義に項目を足した直後のエラー：「存在しない項目」と出たら、保存して編集を終了し、入り直す
• 背景の図形がボタンを覆う：後から置いた帯や図形の下のボタンは押せなくなる。ボタンを最前面に移す

6. 手本と残った違い

• 手本は1つの画面の中で「今朝／長期」を切り替えるが、MotionBoard 版はボード2つの間をボタンで行き来する。1つのボードに複数ページ（タブ）を持てるのは「レイアウトモード」のボードだけで、位置を px で決める「フリーレイアウト」のボードでは作れない。モードはボードを作るときに決まり、後から変えられない（マニュアル「ボードのタブを作成する」）
• 折れ線の曲線は MotionBoard の設定に無く、追っていない

まとめ｜AIでダッシュボードを作るなら、手本を先に

• 人とAIが会話しながら HTML で手本を作り、その手本と画面仕様を渡すと、Claude は MotionBoard re:Act でほぼ同じ見た目と動きの2画面を作れた
• 数字は1回目から合った。見た目は、手本と今の画面を比べた「直す箇所の一覧」を毎回渡すと、Sonnet 5.5 でも手本に寄っていった
• MotionBoard の計算式に PostgreSQL の式・サブクエリが書けるため、「最新日」のような毎日変わる条件も、ボードを直さずに追従できる
• AI の「済」の報告は、閲覧モードで押して見て確かめる必要がある

よくある質問（FAQ）

Q. 手本を HTML で作る必要はありますか？
A. 依頼文だけで作る方法より、見た目のゴールがはっきりします。「直す箇所の一覧」は手本と今の画面の差から書くので、手本があると一覧が具体的になります。

Q. 全部 Opus でやらないのはなぜですか？
A. 骨組みは判断が多いので Opus、仕上げは指示どおりに手を動かす作業が多いので Sonnet にしました。仕上げを Sonnet にしても、手本からの距離は回ごとに縮みました。

Q. 健康データを使って問題はありませんか？
A. 本人のデータを自社のデータベースに置き、読み取り専用の接続用ユーザーで MotionBoard からつないでいます。記事には画面の写真や本人の数値を載せていません。

参考リンク

• デジタル庁「ダッシュボードデザインの実践ガイドブックとデザインテンプレート」
• MotionBoard Cloud re:Act のマニュアル・サポート情報（開発元のメーカーのサイト）
• Claude in Chrome（Anthropic 社の紹介ページ）
• Oura Ring（公式サイト）

このシリーズの記事

1. AIブラウザ操作でMotionBoardのダッシュボードを13回作って比べた
2. AIブラウザ操作×HTMLの手本でMotionBoardのダッシュボードを作る（この記事）
3. AIブラウザ操作のダッシュボード作成を約2時間に｜テンプレート差し替え
4. AIブラウザ操作でMotionBoardのダッシュボードを作る5つの手順｜ベストプラクティス

関連シリーズ（Dr.Sum）

1. AIブラウザ操作でDr.Sumのデータフローに外部DBを取り込む｜型の壁と件数
2. AIブラウザ操作でDr.Sumの生成AIにSQLと式を頼む｜Claudeが検算
3. AIブラウザ操作でDr.Sumのデータフローを一から作る｜結合からジョブまで
4. AIブラウザ操作でDatalizer for Webを使う｜初期設定からAIまで

石井 亮介（りょうさん）

データパレード 代表取締役

XContact

㈱データパレードの代表取締役で、高田馬場の町中華「一番飯店」のChief Data Officerも務めています。BIツールのセールスエンジニア・システムエンジニア・カスタマーサクセス歴15年。大学のデータサイエンス教育で講師も担当してきました。現在は自社業務のほとんどをAIに移管し、AI10部署と50を超える自動処理が24時間動く「AI経営」を実践中。その実践知をこのブログで発信しています。