Google Stitch はグラフ・チャートを含むUIを作れるか——データダッシュボード設計の実態と限界

2026.04.12

ダッシュボードを作りたい、というリクエストは多い。売上の推移グラフ、ユーザー数の棒グラフ、完了率の円グラフ——数字を視覚化する画面は、どんなサービスにも必要になる場面がある。

Google Stitch を使い始めたとき、「ダッシュボードもStitchで作れるのだろうか」と思った。早速試してみると、「できることとできないこと」の境界線がはっきりあることが分かった。その境界線を知らずに使い始めると、思ったより手間がかかる。逆に知っていれば、Stitchはダッシュボード設計の強力な起点になる。

この記事では、Google Stitch でデータダッシュボードおよびグラフ・チャートを含むUIを設計した経験をもとに、実態と限界を正直に整理する。

結論から言うと

一言で言えば、Google Stitch はダッシュボードの「レイアウト設計」と「視覚的なたたき台」には非常に向いているが、「インタラクティブなデータビジュアライゼーション」は生成できない。静的なグラフの配置・見た目のデザインは出力できるが、実データを流し込んで動くチャートコンポーネントの生成は対象外だ。

この前提のもとで使えば、Stitch はダッシュボード設計の初期フェーズで非常に大きな価値を発揮する。ゼロからFigmaで組むよりはるかに速く、「どんなレイアウトにするか」の議論を始められる。

Google Stitch でダッシュボードUIを作ってみた

実際に「売上管理ダッシュボード」のUIをStitchで作ってみた手順を記録する。目標は、月次売上グラフ・日別アクセス棒グラフ・商品カテゴリ別円グラフ・KPIカードを含む管理画面のレイアウトを設計することだった。

プロンプトと生成結果

試したプロンプト：「EC事業者向けの売上管理ダッシュボード（デスクトップPC用、1440px幅）。上部に4つのKPIカード（総売上・注文数・平均単価・返品率）。中央左に折れ線グラフ（月次売上推移）、中央右に棒グラフ（日別注文数）。下部に円グラフ（カテゴリ別売上比率）と最新注文リスト。配色はダークネイビー×ホワイト×アクセントグリーン。」

結果：1回の生成で、レイアウト構造はほぼ意図通りの画面が出力された。KPIカードが上部に横並び、グラフエリアが2カラム、下部にリストという構成が自然な形で生成された。デザインとしてはプロフェッショナルな印象で、クライアントへの初回提示には十分なクオリティだった。

ただし、グラフ部分は「それらしい形状のシェイプ」で表現されており、実際のデータが入った動的なチャートではない。折れ線グラフの線は固定された形で描かれており、棒グラフの高さは模擬的なものだ。実際に使ってみて分かったのは、Stitchのグラフは「グラフがある場所のデザイン」を作るツールであり、「グラフそのもの」を作るツールではないということだ。

グラフ・チャートの生成精度

各グラフタイプの生成精度を試した結果をまとめる。

折れ線グラフ（ラインチャート）：レイアウト上の位置・サイズ・軸ラベルの配置は自然に出力される。線の形状は模擬的だが、見た目のデザインとしてはそれらしい。

棒グラフ（バーチャート）：横並び・縦並びのどちらも指定できる。棒の高さは模擬値だが、配色・ラベル・余白のバランスはデザインとして成立している。

円グラフ・ドーナツチャート：円の分割比率は固定値で生成されるが、凡例の配置やカラーリングはプロンプトで指定できる。

ヒートマップ・散布図などの複雑なグラフ：基本的なレイアウトは生成できるが、精度が下がる傾向がある。複雑な可視化グラフはStitchよりも専用のデータビジュアライゼーションライブラリを使う設計の方が現実的だ。

ダッシュボードUI設計でStitchが得意なこと

KPIカードのデザイン

ダッシュボードの上部によく配置されるKPIカード（数値・ラベル・増減インジケーターを含むカード）は、Stitchが最も得意とする要素のひとつだ。「4つのKPIカードを横並びに、それぞれに数値・ラベル・前月比の矢印アイコンを含める」という指示で、整ったデザインが生成される。

配色・アイコン種別・増加（緑）/減少（赤）の色分けも指定できるため、ブランドガイドラインに合わせたKPIカードのデザインたたき台をすぐに作れる。

レイアウト構造の素早い比較

「グリッドレイアウト版」「カード中心版」「リスト優先版」など、複数のダッシュボードレイアウトパターンをStitchで素早く生成して比較することは非常に有効だ。Stitch 2.0のマルチスクリーンキャンバスを使えば、最大5パターンのレイアウト案を同一セッションで並べて比較できる。

ゼロからFigmaで複数パターンを作るには数時間かかる作業が、Stitch では30〜60分で複数の方向性を揃えられる。この速度の差は、プロジェクト初期の意思決定に大きく影響する。

Stitch の限界を補う実践的なアプローチ

Stitch でダッシュボードのレイアウトとデザインの方向性を決めた後、実装フェーズでのギャップを埋める方法を整理する。

グラフライブラリとの組み合わせ

Stitch で設計したレイアウトをエンジニアに渡し、グラフ部分はChartJS・Recharts・D3.jsなどの専用ライブラリで実装してもらうという分担が現実的だ。「Stitchのデザインを参考に、このエリアにChartJSの折れ線グラフを実装する」という指示ができれば、設計と実装のつなぎ合わせがスムーズになる。

DESIGN.md にグラフの配色ルールを定義しておくと（例：「グラフのプライマリカラーは#1A73E8、グリッドラインは#E0E0E0」）、Stitch のデザインとライブラリのグラフの見た目を揃えやすくなる。

プレースホルダー思考で設計する

ダッシュボードを設計する際、「実データが入ったらどう見えるか」ではなく「このエリアにこのサイズのグラフが入ったらどう見えるか」という思考でStitchを使うと効果的だ。グラフをプレースホルダーとして扱い、レイアウト・余白・色・タイポグラフィを先に固める。その後、実際のグラフを「差し込む」という順序で進める。

よくある質問（FAQ）

Q1. リアルタイムデータが流れるダッシュボードをStitchで作れますか？

リアルタイムデータの表示はStitch単体では不可能です。Stitchが生成するのは静的なデザインであり、WebSocketやAPIと連動して動くダッシュボードは実装フェーズでエンジニアが別途構築します。Stitch の役割は「こういう画面にしたい」というデザイン方針を決めるところまでです。

Q2. テーブル（表形式）のデータ表示UIはStitchで作れますか？

作れます。ただしStitchの出力ルールとして、テーブルセル（tdタグ・thタグ）は推奨されません。代わりに「リスト形式でデータ一覧を表示」というアプローチで、視覚的にテーブルに近いレイアウトを箇条書きやカード形式で再現することが現実的です。実装時にエンジニアがテーブル構造に変換するのが標準的なフローです。

Q3. ダッシュボードのダークモードはStitchで作れますか？

作れます。プロンプトに「ダークモード・背景は#1A1A2E・テキストは白・グラフ配色はコントラスト高め」と指定することで、ダークモード版のダッシュボードが生成されます。ライトモードとダークモードの両方をStitch 2.0のマルチスクリーンで並べて比較検討することも可能です。

Q4. モバイル向けダッシュボードUIにも対応していますか？

対応しています。「スマートフォン用（375px幅）・縦スクロール・KPIカードは縦1列・グラフは全幅表示」と指定するとモバイル向けダッシュボードが生成されます。デスクトップ版とモバイル版を両方作り、レスポンシブ設計の方向性を決める用途でStitchは有効です。

Q5. ダッシュボードの「空の状態」（データがない初期画面）もStitchで設計すべきですか？

ぜひ設計することをおすすめします。データがある状態の画面だけ設計すると、初回ログイン直後の「何も表示されていない」状態でユーザーが迷子になります。「データが0件の初期状態：説明テキスト＋最初のデータを追加するCTA」というエンプティステートをStitchで生成し、正常状態と合わせて4状態セットで整備することを推奨します。