Streamlit in Snowflakeは標準の部品とHTMLのどちらで作るか｜同じ1枚を3通りで作った比較

同じ月次売上ダッシュボードを、Streamlit in Snowflakeで、まず2通りに作りました。1つはHTMLとCSSで手本の座標に合わせる作り方、もう1つは標準の部品だけの作り方です。どちらもAIが作りました。

先に結果を書くと、手本に近いのはHTMLとCSSの版で、早く作れてコードが短いのは標準の部品の版です。数字の不一致はどちらも0件で、KPIを差し替える変更の時間にも差は出ませんでした。

あとから、Streamlitの開発元が公開しているAI向けの手順書（developing-with-streamlit）をAIが読んでから作る、3つ目の版も足しました。標準の部品を中心にしたまま、再現度は47／47から72／70に上がりました。ただし、Snowflakeの中で使えるStreamlitの版では手順書の勧めがそのまま使えない所があり、ページの余白だけCSSを1行書いています。

お題は「とある町中華」の定点観測の1枚で、数字はダミーです。手本はPCの1440×900です。この記事は弊社の検証記録で、Snowflakeの公式の見解ではありません。

手本の画面

手本：先に用意した設計の画面（PC 1440×900）。この画面にどこまで近づけるかを測りました。数字はダミーです

2つの画面

図1：同じ2026年9月の全体。左はHTMLとCSSの版、右は標準の部品の版。どちらも撮影時に表示域を広げています。数字はダミーです

結果の比較

点は採点役のAI 2人が、作り手と製品名を伏せて付けた、写真で確認できた範囲の値です。

時間はそのまま比べられません。標準の部品の版は後から作り、集計のSQLをHTMLとCSSの版から流用しました。HTMLとCSSの版と標準の部品の版の時間には、人のサインインや許可を待った分を含みます。手順書ありの版は最後に作り、同じSQLを使いました。時間はサインインを待った分を除き、手順書を読んだ時間を含みます。

HTMLとCSSで作るメリットとデメリット

メリットは次の3つです。

• 手本の座標に合わせられます。KPI、グラフ、表の位置と大きさは、表示域を1440×900にしたときの実測で手本の指定どおりでした。ふだん開くと、外枠の分だけ全体が約89%に縮みます。
• 差し色、棒の下線、説明の箱の中身まで指定できます。
• 棒を透明なボタンにすると、Tabキーで棒まで移動し、Enterキーで月を切り替えられます。

デメリットは次の3つです。

• Streamlitの内部の名前に頼ります。`.st-key-…` や `data-testid` をCSSで指定しているので、版を上げると直しが要る場合があります。今回は版を上げる試験はしていません。
• 手本に近づけるほど、HTMLの量が増えます。最後の形では、月別売上にグラフ部品を使っていません。
• Snowsightの外枠に合わせて全体を縮めたので、12pxの文字が約10.7pxになりました。

部品ごとの違い

KPIは、HTMLとCSSの版が手本の配置で、標準の部品の版は `st.metric` の形です。標準の部品の版は推移線が前月比の色になり、選んだ月の点がありません。

図2：KPI 4枚の比較。数字はダミーです

月別売上は、標準の部品の版だと棒が短く、合計が棒の下に出ます。

図3：月別売上の比較。数字はダミーです

売れ筋は、どちらも読めます。標準の部品の版は表の罫線が残り、行が高くなります。

図4：売れ筋の比較。数字はダミーです

HTMLとCSSの版は、行に乗せると説明の箱が出ます。標準の部品の版の表には出ません。

図5：HTMLとCSSの版の売れ筋の説明の箱。数字はダミーです

ふだん開いたときの差は次のとおりです。

図6：左はSnowsightの外枠の中の表示域だけ（1383×806）、右は外枠を含む画面。窓の大きさはそろっていません。数字はダミーです

標準の部品で作るメリットとデメリット

メリットは次の3つです。

• 早く作れます。KPIは `st.metric` だけで、枠、前月比、推移線が出ます。
• コードが短く、CSSが要りません。色はテーマの設定で指定できます。
• Snowflakeのダッシュボードの例と同じ系統の書き方なので、例を読みながら直せます。

デメリットは次の3つです。

• 座標を指定できません。`st.columns` の比率で並べるので、手本の配置には届きません。
• 1画面に収まりません。KPIの図と表の高さを、標準の部品だけでは詰めきれませんでした。
• 表の行に説明の箱が出ません。推移線の色も前月比の色に従うので、指定の色にできません。

開発元の手順書を使った版

Streamlitの開発元は、AI向けの手順書を公開しています。Snowflakeのガイドで紹介されているもので、今はStreamlitの部品の中に同梱されています（GitHub）。AIがこの手順書を読んでから、同じ手本で作りました。

図7：手順書を使った版の2026年9月。数字はダミーです

手順書に従ってAIが変えたことは、主に次のとおりです。

• 見た目は `.streamlit/config.toml` で決め、HTMLは書かない
• グラフの方式をページの中でそろえる。今回の版で使えるAltairにそろえ、表もAltairで描いたので、行に乗せると説明の箱が出る
• KPIは枠付きのカードにそろえる
• 古い書き方（`use_container_width`）を使わない。データの一時保存には期限と件数の上限を付ける

KPIの推移線は、手順書の例にある `st.metric` の推移線だとカードが縦に長くなり、色も前月比の色になります。そこで、カードの右に小さなAltairのグラフで置き、選んだ月に点を付けました。

一方で、Snowflakeの中で選べるStreamlitは今回1.52.2まででした。手順書はStreamlit 1.57以降に同梱されるもので、手順書が勧める次の項目は1.52.2にありませんでした。

• ページの上下の余白を詰める設定（`paddingTop`、`paddingBottom`）
• カードを格子に並べる `st.grid`、グラフの `st.echarts_chart`
• 重ねたグラフで棒を押して選ぶこと。月別売上は、合計、棒、月の文字の3つのグラフに分けて並べた

初回は、上下の余白を減らせずに1画面に収まらず、2人とも不合格でした。手順書はページの余白をCSSで変えないよう求めていますが、余白だけはCSSを1行書いて詰めました。そのあと、棒を押すと出る操作ボタンが9月の合計を隠していたので、グラフの右端に空きを足して直しました。この2回の直しで、2人とも合格になりました。

残った差は、パネルの白地、題名の左の線、説明の箱が少し透けることなどです。どれも、直すにはCSSが要ります。

どちらを選ぶか

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

迷ったら標準の部品から始め、AIが開発元の手順書を読んでから作るのがよいと考えています。手順書を使って作り、2回直した版では、再現度は47／47から72／70に上がりました。集計のSQLはどの版でも同じものが使えました。ただし、標準の部品の版からHTMLとCSSの版へ移す手間は測っていません。

変わらなかったこと

KPIの4枚目を差し替える変更は、どちらの版でも確認込みで約3分でした。差分の行（足した行と消した行の合計）は、HTMLとCSSの版が18行、標準の部品の版が15行です。集計をコードで持っている点が同じなので、差が出なかったと見ています。ただし、これは1回の変更の結果です。部品の配置を変える依頼では、差が出る可能性があります。

確かめていないこと

• Streamlitの版を上げたときに、どちらの版がどれだけ壊れるか
• コンテナのランタイムでの動き。今回はどの版もウェアハウスのランタイムです。手順書が同梱される1.57以降の版で、CSSなしで1画面に収まるかも試していません
• 手順書ありの版の変更の時間
• スマホでの表示
• HTMLとCSSの版のプルダウンは、3回に1回切り替わらないことがあり、原因は分かっていません。標準の部品の版は3回とも切り替わりましたが、回数が少なく、差があるとは言えません

まとめ

• 手本に近いのはHTMLとCSSの版で、再現度は87／85と47／47でした。
• 早く作れてコードが短いのは、標準の部品の版でした。
• 数字の不一致はどちらも0件で、KPIを差し替える変更の時間にも差は出ませんでした。
• 開発元の手順書を使うと、標準の部品中心のまま再現度は72／70に上がりました。Snowflakeの中のStreamlitの版では、ページの余白だけCSSが要りました。

関連する記事

• BIダッシュボードをAIで作る比較｜プログラムを書く4通りと画面を操作する2通り
• AIでStreamlitのダッシュボードを作る手順（HTMLとCSSで手本に合わせる）
• AIでStreamlitのダッシュボードを標準の部品だけで作る手順
• Streamlit in Snowflakeは標準の部品とHTMLのどちらで作るか
• Streamlit in Snowflake で、セマンティックビューから月次画面を作る

石井 亮介（りょうさん）

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

XContact

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