🐕
デザインツールを触ってないエンジニアがStitch使ってみて
概要
想定読者
- デザインツールを触らないデータまわりのエンジニア(およびマネージャー)がStitch触ってみたので、同じようなデザインツール知識に富んでいないけれど、Stitchを気になっている方
想定読者ではないかもです😭
- デザインツール知識に富んでいて、Stitchの詳細活用方法を探している方：デザインツールど素人の雑感であるためでございます🙇
経緯
普段は実装の時はデータ周り諸々を、および開発組織のマネジメントをって感じなのですが、
きっかけとしてはpjに不確実性が高い内容(往々にして会社重要度&難易度が高い内容)の際に度々発生するスケジュール論争。
今のままのオペレーションを変えず、
タスク管理ツールのpj残数値及び過去ベロシティから自動算出して、
個人に依存せず算出工数も最小限かつ算出エビデンス(ロジック)のある見積もりをしたい。
とふと考えたはいいものの最終イメージが全く思い浮かばん。
- 前提、見積もるという行為には基準のずれが生じやすい
- 確定してから出したい、楽観的にだす、悲観的に出す、遠いラインの目処感が早く知りたい、そもそもスケジュールに縛られたくないetc
- 見積るという行為自体が顧客価値というより、精度、頻度、出せている期間等の観点から施策や調整の判断材料、信頼関係の醸成に価値がある
もちろん調整・意思決定・改善のためにマイルストーン設定・スケジュール算出は必須。
だからこそぼんやりとこちらがいいよな〜と思いつつ、現状の開発プロセスに最小限かつピッタリフィットする形は何かと考えたら迷走
そんな時にStitchを目にして「行き詰まった時は画面イメージ出した方がイメージ湧くのでは」と思った次第。
実施
- 学習は拒否にさせつつ以下プロンプトを実行させる。
あなたはB2BプロダクトのUIデザイナーです。以下の共通ルールで、指定された画面を最小構成で生成してください。
- テイスト: シンプル／ライトテーマ／余白広め／カードUI／丸み角22px／薄いシャドウ／グリッド整列
- フォント: 日本語Web安全フォントを前提に読みやすいUI
- 配色: グレー90% + アクセントはブルー系1色（リンク・ボタン）
- コンポーネント: 上部に薄いヘッダ（左にプロダクト名、右にプロフィール丸アイコン）、左に必要な場合だけサイドナビ
- グラフ: 折れ線は滑らか、凡例は右上、軸ラベルは最小限
- テーブル: ヘッダ固定／行はゼブラ／右寄せは数値、左寄せはテキスト
- 文言トーン: 事実ベースで簡潔、技術者向け
- アイコン: 必要最小限（Linear/設定/グラフ/チェック）
- 文言は日本語。日付は YYYY-MM-DD 表記。
以降の各画面プロンプトごとに、**別アートボード**で出力してください。
Design a clean, minimal “Setup & Connect” screen for an estimation simulator.
Goal:
- Connect to Linear and Notion
- Register a new development schedule from Slack shortcut without changing current ops
- Zero manual inputs beyond auth and project pick
Layout:
- Left column: short concept (見積もりは「精度・頻度・期間」の指標化に価値。個人に依存しない自動見積もり)
- Right card: “Connect to Linear” (OAuth button, workspace selector, success state)
- Secondary card: “Connect to Notion” (OAuth, database selector)
- Info strip: “入力は現行オペ変更なし／週次で自動集計／300回モンテカルロ”
Primary CTA:
- 「接続してはじめる」
Style:
- Neutral gray background, white cards, subtle shadow, single accent color
- SF Pro / Inter-like font, 14–16px body, large CTA
- Plenty of whitespace, no illustrations
Design a minimal “Estimation Dashboard” for a project.
Data sources:
- Linear project: remaining story points
- Past weekly velocity from Notion schedules (actuals)
- 300-run Monte Carlo simulation
Header:
- Project selector
- Last updated timestamp
- “Run weekly” badge (自動)
Hero KPIs (4 small cards):
- 残ポイント
- 推定完了確度(%) @ 目標日
- 推定完了日(P50)
- 推定完了日(P90)
Main two-column:
- Left: “Velocity Distribution & Forecast” line chart
- Past weekly velocity (light)
- Simulated completion curve (median + band)
- Right: “Milestone Forecast” list
- dev, QAテスト完了, stg, prdアプリ, prd
- Each shows P50/P90日付と信頼度
Secondary section:
- “Assumptions & Evidence (Logic)”
- 算出式の要約（Linear残数×過去ベロシティ、週次トリガ、300回MC）
- データ取得元リンク（Linear, Notion）
Footer:
- 「エビデンスをNotionに記録」(CTA)
- 「Slackに共有」(secondary)
Style:
- Same visual system as setup screen
- Focus on clarity; one accent color for charts; no 3D, no heavy visuals
結果がこちら
リアルタイムで調整可能の方が良いよなと思ったので調整
上半分くらいは該当pjのシミュレーションのままでいい。
下半分は他のpjのシミュレーション結果の羅列にしといてほしい。
なぜならば優先順位を変えたり複数選択式でassigneeを変えたりしたらリアルタイムでシミュレーション結果が変わってくるようなデザインにしたいから。
エビデンスはnotionの開発スケジュール過去結果とlinearの過去消費estimateを学習データとする
生まれたのがこちら
進んでるpjは予実とかもみれたら良いよなとか、
現状運用している開発スケジュールページから一元管理を保ちつつ、
どれだけ各メンバーに最小限でこの状態を作成するには...
とかイメージがどんどん膨れてきたり。
使ってみての所感
- 学習拒否を最初に固定できる点が安心
- モバイルデザイン切り替えがワンタップでレビューが早い
- コード出力とFigmaエクスポートができ、生成AIエージェント連携もしやすい
- ※Figmaは標準モード前提
- ミーティングでビジネス側の意図をデザイナーに伝える媒介として使いやすいのでは
- データエンジニアの視点でも、可視化の当たりを素早く決める用途に向く
- pocを有効的に進めるためのダッシュボード実装前のデザインすり合わせに有効と思った
- あとちょっとした個人開発figmaがっつりでなくてもこれでええやんと思った
- 本格的なサービスだと最終的にfigmaにexportするのだと思う
- 記録共有とかあるので組織で使えそう
- 生成スピードもストレスなく生成してくれ、なんか見えてなかった景色が広がる感覚もないでもない。
- figmaみたいに各ボタン細かくGUIで調整することはできないので、自然言語で大枠のデザインを作成する方が有効か？(コードも出てくるが、その画面上で編集できないので一度別エディタで生成ai等での編集を挟む必要がある)
これから
- データと言語を中心に扱ってるならば、この時代はそのテキスト情報を画面にも落とし込み少しでも効率的に、多くの方とコミュニケーションする形を模索するべきだと感じた
- デザイナーの職を奪うとかではなく、デザイナーの知識がない方がデザイナーの方に寄り添う、距離を積めるための効率的なコミュニケーション手段だと現時点では知識ない側として感じた
参考資料
Discussion