mae616 proto-medium — Figma か、コードか（媒体選択の判断軸）
プロトタイプ・デザイン検証の媒体（Figma / コード / 併用）を、確かめたい問いから逆算して決めるための判断軸。 人間がまだ判断に慣れていない前提で、AIが毎回この基準を通して推奨＋理由を提示し、人間が承認する運用にする。
基準の核（一言）
止まっている絵で判断できるなら Figma。動かさないと分からないならコード。
判断フロー（上から順に最初に当てはまったものを採る）
- 触った感触・動き・入力感が体験の核心か？ → コード （hover・スクロール・アニメーション・タイピング感は Figma では嘘になる）
- 実データ・実ロジックが体験を左右するか？（速度・データ量・エッジケース） → コード
- 色・タイポ・レイアウト・トーンの比較検討か？ → Figma （variants で複数案を並べて見るのが最も得意。手でドラッグして微調整もできる）
- 画面遷移・情報設計を俯瞰して合意したいか？ → Figma （画面一覧・フロー全体を1枚で見る。非開発者に見せる資料にもなる）
- デザインシステム・トークンの整備か？ → Figma
（
/design-ssotで Dev Mode からトークン抽出して実装へ流せる） - どれでもない・迷う → 併用: Figma でトーンボード → 良かった方向をコードで動かして確認
早見表
| Figma が向く（Claude が MCP で操作できる） | コードプロトが向く |
|---|---|
| 色・タイポ・レイアウトの比較検討（複数案並置） | hover・スクロール・アニメーション等の触感 |
| 画面一覧・遷移フローの俯瞰 | 実データ・レイテンシ・データ量が効く体験 |
| デザイントークン・コンポーネント整備 | 技術的に成立するかの検証 |
| 人に見せて合意を取る資料 | レスポンシブの実挙動 |
| 手でドラッグして微調整したいもの | 生成的・ゲーム的な「動きに世界観が宿る」表現 |
運用ルール
- 媒体を決めたら推奨＋理由を一言で人間に提示し、承認を得てから作る（判断を人間が学べるよう、理由は必ず言葉にする）
- 1ラウンド内の併用は可（例: Figma で3トーン並べて選定 → 選ばれたトーンをコードで動かす）
- Figma 側の実働スキル: 書き込みは
figma-generate-design/figma-use、実装への引き渡しはdesign-ssot。コード側の置き場はproto-loopの規約（proto/*ブランチ /samples/）に従う - Figma プロトの URL は設定集（Setting Book）に記録して揮発を防ぐ
よくある誤り
- 「デザインの話だから」と何でも Figma に寄せる（動きが核心の体験は Figma では検証できない）
- 「どうせ実装するから」と何でもコードで作る（トーン比較はFigmaの方が数倍速く、非開発者とも共有できる）
- 併用時に Figma とコードで別々の判断をして分岐する（結論は設定集に一本化する）