BIダッシュボードをAIで作る比較｜プログラムを書く4通りと画面を操作する2通り

同じ月次売上ダッシュボードを、Tableau、MotionBoard、Streamlitで、AIが作りました。データ、手本、採点の物差しは同じです。

AIでの作り方は大きく2つに分かれます。プログラムを書いて作る作り方と、ブラウザやアプリの画面をAIが操作して作る作り方です。やることが違うので、この2つは別の対局として比べました。両方を組み合わせた1通りは、最後に別に扱います。

図1：2つのやり方の違い

検証したのは2点です。1つは、画面の数字が正解値と合っているか。もう1つは、設計書どおりの画面になっているかです。

数字は、全部の作り方で誤りが0件でした。

設計書どおりかの採点では、Streamlitは、HTMLとCSSを書いた版が必須条件に合格し、再現度も一番高い結果でした。標準の部品だけの版は、1画面に収まらず不合格でした。開発元のAI向け手順書を使った版は、ページの余白だけCSSで詰めて合格しました。TableauとMotionBoardは、全部の作り方が合格です。

差が出たのは、作ったあとに直すときです。同じ変更を頼むと、プログラムを書く作り方は約3〜11分、画面を操作する作り方は約21〜26分、組み合わせは約34分かかりました。

この記事は弊社の検証記録です。製品の優劣ではなく、AIでの作り方の比較として読んでください。お題は「とある町中華」の月次売上で、数字はダミーです。

手本

手本はPCの1440×900で、寸法、色、文字、選択時の状態を細かく指定しました。製品でできるかどうかは考えずに決めた手本です。

図2：全部の作り方で共通の手本。数字はダミーです

点は、作り手と製品名を伏せて、採点役のAI 2人が付けました。写真で確認できた範囲の値です。製品の見た目から、どの製品かは分かる場合があります。

対局1 プログラムを書く作り方

AIがコードやファイルを書いて作る4通りです。直すときはコードを直します。

図3：プログラムを書いて作った4通りの画面。数字はダミーです

この対局では、手本に一番近いのはStreamlit HTMLとCSSでした。ただし、これはHTMLとCSSで手本に寄せた結果です。標準の部品だけでは47／47で、1画面に収まらず、長い品名も切れました。製品の標準の力というより、AIがWeb画面を書ける力が出た点です。

Tableauのファイル生成の再現度は74／72.5でした。

Streamlitの手順書ありの版は、Streamlitの開発元が公開しているAI向けの手順書（developing-with-streamlit）を、AIが読んでから作りました。標準の部品を中心にしたまま、再現度は72／70でした。手順書はStreamlit 1.57以降に同梱されるもので、勧める設定の一部（ページの余白の設定など）は、今回Snowflakeの中で使えた1.52.2にありません。そのため初回は1画面に収まりませんでした。余白だけCSSを1行書き、2回直して合格しています。詳しくはStreamlitの比較記事に書きました。

対局2 ブラウザやアプリを操作する作り方

AIが人と同じ画面を操作して作る2通りです。直すときも画面を操作します。

図4：画面を操作して作った2通りの画面。数字はダミーです

この対局では、2つの結果は近い値でした。どちらも約6時間かかり、1回の直しに約54分から約3時間かかっています。

別枠 プログラムと画面操作の組み合わせ

Tableauでファイルを生成したあと、最後に画面で見た目を直す作り方も試しました。どちらの対局にも入らないので、別に書きます。

時間は、生成の約2時間7分に、画面の直しの約1時間4分を足した値です。Tableauのファイル生成より出来ばえの点が上がりました。

差が出たのは直すとき

公開後によくある頼みごとを1つ決め、同じ文面で、Streamlit手順書ありの版を除く全部の作り方に出しました。KPIの4枚目「1回あたり」を「昼の売上比率」に差し替える依頼です。

図5：やり方ごとの時間。条件が違うので、単純には比べられません

プログラムを書く作り方は、直した所が差分で残ります。差分の行は、Streamlitの2本が15〜18行、Tableauのファイル生成が24行前後でした。

画面を操作する作り方は、画面の中に見えない結び付きが残ります。MotionBoardでは、項目名を変えたら、選んだ月の点の色が戻りました。色の条件が項目名に結び付いていたためです。

一番時間がかかったのは、組み合わせの作り方です。最初の1枚では出来ばえが高い道でしたが、ファイルを生成し直すと画面の直しが消えるので、14項目をやり直しました。この道では、曜日×時間の説明の箱が変更後に出ませんでした。元の版を同じ手順で開いても出ず、原因は分かっていません。

製品ごとに残った壁

どの製品にも、手本に届かない所が残りました。主な例を挙げます。

Streamlitは再現度が一番高い結果でしたが、これはHTMLとCSSで手本に寄せた結果です。標準の部品だけでは47／47でした。製品の標準の力というより、AIがWeb画面を書ける力が出た点です。

どれを選ぶか

今回の結果からは、次のように考えています。

利用者が自分で直せるかは、今回は測っていません。画面操作の行は、製品の作りからの見立てです。

公平さのために書いておくこと

• 作った順番は、Tableau画面操作、ファイル生成、生成＋画面、Streamlit HTMLとCSS、MotionBoard、Streamlit標準の部品、Streamlit手順書ありです。後の回は、仕様と進め方の経験を引き継いでいます
• Tableau画面操作はスマホ用も作りました。点はPCだけで採点し直した値ですが、時間にはスマホの分を含みます
• Tableauのファイル生成には、これまでの生成スクリプトの蓄積があります。MotionBoardはテンプレートを使わず白紙から作りました
• Streamlit標準の部品の版と手順書ありの版は、集計のSQLをHTMLとCSSの版から流用しました
• 直しの回数は道ごとに違います。Tableauの画面操作とファイル生成は3回、生成＋画面は生成の最終版を引き継いで画面で1回、MotionBoardは2回、Streamlit HTMLとCSSは1回、手順書ありは2回、標準の部品は0回です。生成＋画面の時間は、生成の分との合計です
• 変更の時間も測り方がそろっていません。Streamlitの2本は目安で、ほかは時刻を測りました。Tableauは、ファイル生成、生成＋画面、画面操作の順に作業したので、後の道ほど慣れの影響があります
• PCの表示条件と確認の範囲も、道ごとに違います。下の「確かめていないこと」に書きました
• 変更の依頼は1種類だけです。部品の配置を変える依頼では、結果が変わる可能性があります。Streamlit手順書ありの版には、変更の依頼を出していません

確かめていないこと

• 製品の版を上げたときの影響
• 利用者が自分で直せるか、権限や配信の管理
• MotionBoardとStreamlitの本物の1440×900の窓での表示。Streamlitは外枠を除いた表示域で確かめ、MotionBoardはアプリの外枠を縮めて確かめました
• スマホでの表示

まとめ

• プログラムを書く作り方と画面を操作する作り方は、別の対局として見る必要があります。
• AIが作ると、どのツールでも店主が読める1枚までは作れました。
• 差が出たのは作ったあとの変更で、プログラムは約3〜11分、画面操作は約21〜26分、組み合わせは約34分でした。
• 画面で積み上げた直しは、次の変更のときに負担になります。AIと長く直していくなら、作りをコードやファイルで持つかどうかが分かれ目だと考えています。

関連する記事

• AIでTableauのダッシュボードを作る5つの手順
• AIでMotionBoardのダッシュボードを作る手順
• AIでStreamlitのダッシュボードを作る手順
• AIでStreamlitのダッシュボードを標準の部品だけで作る手順
• Streamlit in Snowflakeは標準の部品とHTMLのどちらで作るか

石井 亮介（りょうさん）

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

XContact

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