フロントエンドイチゲキ実装 ― Figmaデザインと画面設計書からAIに実装・テストを書かせるための”下ごしらえ” / 20260627 Yusuke Mazuka

2026/6/27 プロダクトヒストリーカンファレンス2026
https://lp-prohis.youtrust.jp/

株式会社SHIFT
AIモダナイゼーション技術企画部 フルスタックエンジニア
馬塚 勇介

Transcript

1. Copyright SHIFT Inc., All Rights Reserved. 2026 / Copyright SHIFT I 1 PRODUCT HISTORY CONFERENCE 2026 株式会社SHIFT AIモダナイゼーション統括部 Yusuke Mazuka 27 6 13:20-14:00 馬塚 勇介 フロントエンドイチゲキ実装 ――Figmaデザインと画面設計書から AIに実装・テストを書かせるための"下ごしらえ”
2. 2 Copyright SHIFT Inc., All Rights Reserved. 自己紹介 馬塚 勇介｜Yusuke Mazuka 株式会社SHIFT AIモダナイゼーション統括部 フルスタックエンジニア 独立系ソフトウェアベンダーにてWebアプリ開発等に従事し た後、2020年にSHIFT入社 SHIFTではスクラム開発チーム向けにExtreme Programming の各種プラクティスのコーチングや技術支援を実施 現在はSHIFTの開発標準（SHIFT DQS）におけるAI駆動開発 プロセスの策定とボイラープレートの作成を推進している
3. 3 Copyright SHIFT Inc., All Rights Reserved. アジェンダ 1. 「イチゲキ実装」とは 2. “下ごしらえ” の重要性 3. 5つの “下ごしらえ” 5. まとめ 4. “下ごしらえ” の効果検証
4. 4 Copyright SHIFT Inc., All Rights Reserved. アジェンダ 1. 「イチゲキ実装」とは 2. “下ごしらえ” の重要性 3. 5つの “下ごしらえ” 5. まとめ 4. “下ごしらえ” の効果検証
5. 5 Copyright SHIFT Inc., All Rights Reserved. フロントエンドアプリケーションの実装を AIを使用してイチゲキで完成させる仕組み イチゲキ実装 とは...
6. 6 Copyright SHIFT Inc., All Rights Reserved. “イチゲキ実装”の全体像 Step -0 下ごしらえ Step -1 UI実装 • Figmaで作成したデザ インをReactコードへ 変換 • 見た目・構造の忠実度 に集中するフェーズ Step -2 機能実装 • UI実装結果にビジネス ロジックとインタラク ションを追加 • 動く画面に仕上げる フェーズ Step -3 テスト＆検証 • コンポーネントテスト • ビジュアルギャップ検 証 下ごしらえがあって初めて "イチゲキ" が成立する 本日のメインテーマ
7. 7 Copyright SHIFT Inc., All Rights Reserved. 前提：Figma Designを“管理対象のSSOT”にする なぜFigma Designを「信頼できる唯一の情報源（SSOT） 」とするのか？ Figma Designが“下ごしらえ”の土台となる 初稿・アイデアを高速に生成 Claude Design ／ Figma Make 合意・統治・追跡できる成果物へ Figma Designに取り込みSSOT化 • システムの画面イメージの全体像をお客様に示すことができる • 「何をいつ合意したか」の証跡が残る（成果物として納品可能） • 再利用できる設計資産となる（コンポーネント、バリアント、デザイントークン） 大規模システムの受託開発では、お客様と「画面イメージ」を合意することが不可欠
8. 8 Copyright SHIFT Inc., All Rights Reserved. アジェンダ 1. 「イチゲキ実装」とは 2. “下ごしらえ” の重要性 3. 5つの “下ごしらえ” 5. まとめ 4. “下ごしらえ” の効果検証
9. 9 Copyright SHIFT Inc., All Rights Reserved. AI駆動開発でぶつかった3つの壁 壁 1 曖昧な設計書 壁 2 車輪の再発明 壁 3 目視の限界 曖昧な点をAIが推測で補完し、 同じ設計でも結果がばらつく AIが共通部品の存在を把握せず、 同様の機能を毎回ゼロから実装 人のレビューが追いつかず、 デザインと実装のギャップの 見落としが多発
10. 10 Copyright SHIFT Inc., All Rights Reserved. 我々がたどった道 - 試行錯誤の歴史 試行① Figma MCP（下ごしらえなし） Figma MCP直結 AIが実装 試行② JSON中間ファイル作成 Figma JSON出力 React生成 試行③ Figma Make + ボイラープレート Figma Make React生成 ボイラープレート 適用
11. 11 Copyright SHIFT Inc., All Rights Reserved. 試行① Figma MCP（下ごしらえなし） DevinからMCPを介してFigmaデザインを読み取り、直接実装 Figmaデザイン Reactコードを生成 Figma URL +実装指示 実装させたいFigmaデザイ ンのURLをDevinに渡して 実装指示 1 Devinが、MCPを使用して Figmaデザインを読み取り 読み取った内容をReact コードとして実装 2 3
12. 12 Copyright SHIFT Inc., All Rights Reserved. 試行① Figma MCP（下ごしらえ無し） UIの再現性 & 安定性 ともに低い 全く違うデザインで作成される要素や、完全に 無視される要素が多数発生 実行するたびに出力が変わり、再現性に欠ける Stepperのデザイン が大きく異なる 検索ボタンが 消失 そのままでは情報量が膨大すぎて、読み飛ばしや情報消失が発生してしまう そもそもDevinで使用できるMCPがFigma公式 ではなく3rd Party製のものだった... ※現在はFigma公式MCPが使用できるようになっています
13. 13 Copyright SHIFT Inc., All Rights Reserved. 試行② JSON中間ファイル作成 プログラムによってFigmaから必要な情報だけをJSONに出力 Figmaデザイン figma-info.json プログラム 実行指示 JSON出力 プログラム Reactコード 生成 プログラム 実行 Figmaから必要な情報のみ を抜き出してJSON化する プログラムを予め作成 1 FigmaのURLをDevinに 渡してJSON出力プログラム を実行指示 出力されたJSONを参照して DevinがReactコードを生成 2 3 このステップでは Figmaは参照しない
14. 14 Copyright SHIFT Inc., All Rights Reserved. 試行② JSON中間ファイル作成 JSON化によって忠実性と安定性は一定程度向上 ボタンデザイン が異なる Figmaのレイヤー設計や命名に、生成結果が大きく依存する 試行①よりは多少改善されたが、不十分 同じJSONを参照するため、出力のブレが減少 JSONファイル化により、Gitでのdiff管理 も可能 フィールドの 背景色が未反映 Stepperの背景色が 異なる Figma上のレイヤー構造が複雑な場合や、 命名が不規則な場合は精度低下
15. 15 Copyright SHIFT Inc., All Rights Reserved. 試行③ Figma Make + ボイラープレート Figmaデザイン Reactコード コード生成指示 Figma Make ボイラープレート Figma Makeで、実装させたいFigma デザインのコード生成指示 生成されたReactコードに対して、 Devinでボイラープレートコードを適用 1 2 生成 Figma MakeでReactコードを生成し、そこにボイラープレートコードを適用 基盤コードや 共通部品 注：2026年5月にFigma Makeの「ローカルコード連携」機能がリリースされました（ベータ）
16. 16 Copyright SHIFT Inc., All Rights Reserved. 試行③ Figma Make + ボイラープレート UI実装は大幅に精度が向上 生成されたコード自体は元のFigmaデザイン にかなり忠実 コードの作りが違うため、後から共通基盤 コードをうまく適用できない Figma MakeとDevinでツールを跨ぐことに なるため、“イチゲキ” 化できない FigmaのAIクレジットの上限制約あり *ビジネスプラン/フルシートで3,500クレジット/月 既存の共通部品を利用して実装できないため、次ステップでの活用が困難
17. 17 Copyright SHIFT Inc., All Rights Reserved. アジェンダ 1. 「イチゲキ実装」とは 2. “下ごしらえ” の重要性 3. 5つの “下ごしらえ” 5. まとめ 4. “下ごしらえ” の効果検証
18. 18 Copyright SHIFT Inc., All Rights Reserved. ｚ ｚ ｚｚｚ ｚｚｚｚｚｚｚｚ ｚｚｚ ｚｚｚｚｚｚｚｚ ５つの下ごしらえ 1 2 Figma Code Connect デザインシステムルールファイル 3 デザインガイドラインの整備 4 設計書記述ルール 5 テスト設計ガイドライン Step-2：機能実装 に効く”下ごしらえ” Step-1：UI実装 に効く”下ごしらえ”
19. 19 Copyright SHIFT Inc., All Rights Reserved. ｚ ｚ ｚｚｚ ｚｚｚｚｚｚｚｚ ｚｚｚ ｚｚｚｚｚｚｚｚ ５つの下ごしらえ 1 2 Figma Code Connect デザインシステムルールファイル 3 デザインガイドラインの整備 4 設計書記述ルール 5 テスト設計ガイドライン Step-2：機能実装 に効く”下ごしらえ” Step-1：UI実装 に効く”下ごしらえ”
20. Copyright SHIFT Inc., All Rights Reserved. 20 下ごしらえ① Figma Code Connect
21. 21 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ① Figma Code Connect Code Connectは、FigmaとReactコードを宣言的に紐づける仕組み import figma from '@figma/code-connect'; import { Button } from './Button'; figma.connect(Button, ‘<FIGMA_BUTTON_NODE_URL>’, { props: { variant: figma.enum('Variant', { Primary: 'primary', Secondary: 'secondary', Neutral: 'neutral', }), label: figma.string('Label text'), }, }); button.figma.tsx $ npx figma connect publish
22. 22 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ① Figma Code Connect AIは、Figmaで定義されたコンポーネントとReactコードの関係を知らない Reactコンポーネント Figmaコンポーネント 実装のつど毎回コンポーネントの名前から探し出させるのは無駄 対応関係が不明
23. 23 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ① Figma Code Connect MCPを介してFigmaコンポーネントの実装方法をLLMに提供 • FigmaコンポーネントとReact コンポーネントを紐づけ • デザイン上のバリアントとProps を紐づけ Code Connect マッピング・ コードスニペット 情報を提供 提供された情報を 使用してコード実装 Figma MCP
24. 24 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ① Figma Code Connect デザイナーとエンジニアの下ごしらえ作業 デザイナー エンジニア 1. コードベース上でコンポーネントを実装 2. Code Connect 定義ファイルを作成し、バリ アントとPropsのマッピングや使用例を記述 3. `figma connect publish` コマンドで Figmaに公開 接続 1. Figma上でコンポーネントを作成 全てのコンポーネントに対して接続を確立
25. Copyright SHIFT Inc., All Rights Reserved. 25 下ごしらえ② デザインシステムルールファイル
26. 26 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ② デザインシステムルールファイル 前提：デザインシステムをTailwind CSSプラグインとして取り込み 1 Figmaでデザイン トークンを定義 2 デザイントークンを JSONで出力 3 Tailwind CSS プラグインに変換 4 アプリケーションで 利用 • カラー • タイポグラフィ • エレベーション • 角丸（BorderRadius） • … "Color": { “Primary": { "value": "#e8f1fe", } … } theme: { colors: { blue:tokens.Primary.value … } } <button className={` bg-primary text-white border-4 `} /> *本資料で使用している Figma、Tailwind CSS、React の名称およびロゴは各社の商標です。各社との提携・公認を示すものではありません。
27. 27 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ② デザインシステムルールファイル AIは、Figmaのデザイントークンとユーティリティクラスの関係を知らない Color/Primary #0062EF Spacing/md 16px Radius/lg 8px FontSize/body 14px bg-primary p-4 rounded-lg text-body Tailwindのユーティリティクラス Figmaのデザイントークン 対応関係が不明
28. 28 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ② デザインシステムルールファイル Figma MCPのcreate_design_system_rulesツールでルールファイルを作成 AI実装時に CLAUDE.md 経由でルールが自動的に読み込まれる Figma MCP create_design_system_rules 自動生成 デザインシステムルールファイル（.md） Figma トークン Tailwind CSS クラス Color/Primary #0062EF → bg-primary Spacing/md 16px → p-4 Radius/lg 8px → rounded-lg 読み込み AIエージェント Claude / Devin など 迷わず実装！ create_design_system_rules … コードベースを解析して「Figmaデータをどうコードベースにマッピングすべきか」 をまとめたルールファイルを書き出すツール
29. 29 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ② デザインシステムルールファイル デザインシステムルールファイル（例） design-system-rules.md 1. トークン定義 2. 色 3. タイポグラフィ 4. スペーシング 5. エレベーション 6. コンポーネントライブラリ 7. フレームワーク・ライブラリ 8. アイコン 9. スタイリング方針 10. …
30. Copyright SHIFT Inc., All Rights Reserved. 30 下ごしらえ③ デザインガイドラインの整備
31. 31 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ③ デザインガイドラインの整備 AI実装のためのデザインルールをガイド化し、デザイナーと共有 Figmaデザインガイドライン • コンポーネント運用 • フレーム・レイヤー命名規則 • バリアントの定義 • レイアウトとスペーシング • Local Styles の利用 • アクセシビリティ注釈 • ... デザイナー エンジニア コンポーネント化・命名ルール
32. 32 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ③ デザインガイドラインの整備 Figmaでのデザイン段階から、AIによる実装を見据えた設計 Point 1 デザイン上の名前と、ボイラープレートのコン ポーネント名を揃える → AIが利用すべきコンポーネントが明確になる レイヤー名の統一 Point 2 オブジェクトの階層構造を極力浅くする → 階層が深いとJSONのネストも増え、 読み飛ばしリスクが高まる 階層構造の最適化
33. 33 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ③ デザインガイドラインの整備 Figmaでのデザイン段階から、AIによる実装を見据えた設計 Point 3 FigmaアノテーションとMCPを活用してアクセシビリティ対応をコードに反映 1 alt、aria-label、role 等を アノテーションに記載 Annotations alt: "会社ロゴ" aria-label: "送信" role: "button" 2 Figma MCPがアノテーション 情報をLLMに渡す Figma MCP Server ▼ AI エージェント / LLM アノテーション情報を含む デザインコンテキスト 3 Reactコードに a11y 属性が 反映される <img alt="会社ロゴ" /> <button aria-label="送信"> <div role="dialog">
34. 34 Copyright SHIFT Inc., All Rights Reserved. ５つの下ごしらえ ｚ ｚ ｚｚｚ ｚｚｚｚｚｚｚｚ ｚｚｚ ｚｚｚｚｚｚｚｚ 1 2 Figma Code Connect デザインシステムルールファイル 3 デザインガイドラインの整備 4 設計書記述ルール 5 テスト設計ガイドライン Step-2：機能実装 に効く”下ごしらえ” Step-1：UI実装 に効く”下ごしらえ”
35. Copyright SHIFT Inc., All Rights Reserved. 35 下ごしらえ④ 設計書記述ルール
36. 36 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ④ 設計書記述ルール 項目 備考 郵便番号 都道府県 プルダウンから選択する 市区町村 全角でテキスト入力 番地 テキスト入力 建物名 任意入力。文字数は常識的な範囲で、 入力順は上から自然に 郵便番号はハイフンを除いて7桁？ 番地は「丁目・番・号」に分けなくて良い？ 必須指定や桁数指定がないものはどうする？ 生成のたびに想像で埋めた仕様がランダムに変わる → 再現性がなくレビューで気付けない Before：非構造化フォーマット ＆ 備考欄に自由記述 必須。7桁。 入力したら住所が自動補完されるとよい
37. 37 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ④ 設計書記述ルール 項目 必須 最大桁 バリデーション 順 郵便番号 ✓ 7 数字・7桁固定 1 都道府県 ✓ － 列挙値(47) 2 市区町村 ✓ 40 全角文字 3 番地 ✓ 40 全角・半角英数 4 建物名 － 60 任意入力 5 《実際の設計書テンプレート》 After：備考欄を廃止し、専用カラムに構造化
38. 38 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ④ 設計書記述ルール ドキュメントの ”書き方” を規定することで AIにその “読み方” を明示することができる
39. 39 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ④ 設計書記述ルール 設計書の記述に応じた既存コードを使用するようにAIに明示 画面設計書 TextFieldコンポーネント AI実装ルール • 設計書の記述に対応する機能を 予め共通部品として提供 • 設計書の記述とReactの実装済み コード（Props）を紐づけ
40. 40 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ④ 設計書記述ルール 画面項目の 入出力仕様実装 API呼び出し 実装 イベント処理 実装 画面遷移制御 実装 Storybook 実装 動作確認 • 最大桁数 • 必須属性 • バリデーション • フォーカス順 • 表示/非表示条件 • 活性/非活性条件 • キーボード設定 • 入力補完 • デフォルト値 • 選択肢設定 • 入力値編集 • エンドポイント定義 • リクエスト/ レスポンス型定義 • モックハンドラ/ リゾルバ • 初期表示イベント • クリックイベント • フォーカスイベント • ロストフォーカス イベント • 値変更イベント • ルーティング定義 • ナビゲーション ガード • 離脱防止ダイアログ • FormのStory • PageのStory • 依存関係インストール • Lint実行 • ビルド実行 • Storybook起動確認 • アプリ起動確認 • テスト設計・実装 Playbook呼び出し AIが設計書の各セクションごとに、サブエージェントで実装
41. Copyright SHIFT Inc., All Rights Reserved. 41 下ごしらえ⑤ テスト設計ガイドライン
42. 42 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ⑤ テスト設計ガイドライン SHIFTの標準テスト観点と設計書テンプレートを元にテストガイドを作成 テスト観点ごとに テストタイプも規定 テスト設計ガイドライン SHIFT標準テスト観点 画面設計書テンプレート
43. 43 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえ⑤ テスト設計ガイドライン ガイドラインと設計書から、テスト仕様書とテストコードを自動生成 テスト設計 ガイドライン 画面設計書 自動テスト 仕様書 手動テスト 仕様書 自動テスト コード 生成 生成 ガイドラインに基づいて 自動/手動テスト仕様書を作成 CI Push INPUT 設計書のフォーマットが定まっていることで、テストケースの抽出も容易
44. 44 Copyright SHIFT Inc., All Rights Reserved. アジェンダ 1. 「イチゲキ実装」とは 2. “下ごしらえ” の重要性 3. 5つの “下ごしらえ” 5. まとめ 4. “下ごしらえ” の効果検証
45. 45 Copyright SHIFT Inc., All Rights Reserved. 4. “下ごしらえ” の効果検証 “下ごしらえ” の結果、UI実装と機能実装が期待通りできているか検証する 特に「Step-1 UI実装」にフォーカス ビジュアルギャップ検証
46. 46 Copyright SHIFT Inc., All Rights Reserved. 4. “下ごしらえ” の効果検証：ビジュアルギャップ検証 デザインと実装の乖離を機械的に検出し、目視による負担や見落としを防ぐ ビジュアルギャップ 検証テストを自動実行 （Playwright利用） Figmaデザイン （expected） アプリケーション （actual） ビジュアルギャップ （diff） 検証結果をAIが レポート出力
47. 47 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえの効果検証：ビジュアルギャップ検証 検出したギャップの修正と再検証を自律的に繰り返させる ギャップ検出 1 コード自動修正 再ビルド・再検証 デザインと実装が一致するまでループ 目視確認と手戻りをゼロ化 修正と検証の反復を完全自動化 2 3
48. 48 Copyright SHIFT Inc., All Rights Reserved. アジェンダ 1. 「イチゲキ実装」とは 2. “下ごしらえ” の重要性 3. 5つの “下ごしらえ” 5. まとめ 4. “下ごしらえ” の効果検証
49. 49 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえの成果 入力フォーム1画面あたりの実装工数 従来 10〜12 時間／画面 下ごしらえ後 4 時間／画面 AIとの対話回数も低減 約 1/3 に削減
50. 50 Copyright SHIFT Inc., All Rights Reserved. 下ごしらえの効用 他のプロジェクトでも同じ下ごしらえがそのまま効く
51. Copyright SHIFT Inc., All Rights Reserved. 51 下ごしらえを制する者が、AI駆動開発を制す
52. Copyright SHIFT Inc., All Rights Reserved. ご清聴ありがとうございました