--- title: SFAD — Screen First AI Development｜画面を起点にAIと業務システムを構築する開発メソドロジー tags: #sfad #ai開発 #業務システム #開発メソドロジー #アジャイル #dx #claude code #next.js #excel連携 author: [HARMONIC insight](https://image.docswell.com/user/HARMONICinsight) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/2JVVDP8XJQ.jpg?width=480 description: アジャイルは「進め方」の方法論。SFADは「作り方」の方法論。 画面を最初に作り、AIと協働しながら、業務システムを段階的に完成させる。 10ステップの固定プロセスで、誰がやっても同じ品質を再現できる開発メソドロジーです。 ■ SFADの3つのゼロ ・Zero Time — 画面が仕様書。テキスト仕様書による合意の時間を排除 ・Zero Effort — AIがコード生成・修正・テストを自動化 ・Zero Mistakes — 画面ベースの合意で認識ズレを構造的に排除 ■ 5つの核心原則 1. Screen First — 要件定義の前に画面を作り、見える形で合意する 2. Mock First — DB/APIの前にモックデータで画面を完成させる 3. Excel Boundary — 既存Excelをそのまま取込・表示。現行業務を壊さない 4. AI Co-pilot — 構成提案・コード生成・修正をAIが担当 5. Central Backlog — 要件・進捗・改善要望をトップページに集約 ■ この資料で分かること ・従来の開発手法（ウォーターフォール/アジャイル/ローコード）との構造的な違い ・10ステップの固定プロセスと各ステップにおけるAIの関与 ・SFADスターターキットの実画面デモ ・技術基盤（Next.js / Vercel / GitHub / Neon / Claude Code） ・適用領域とターゲット ■ 関連リンク 動画解説: https://youtu.be/3u15TiRqvME お問い合わせ: https://www.insight-office.com/ja published: April 03, 26 canonical: https://image.docswell.com/s/HARMONICinsight/Z2724R-sfad-methodology --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/2JVVDP8XJQ.jpg) SFAD Screen First AI Development 画面を起点に、AIと協働して、業務システムを構築する開発メソドロジ ー Zero Time Zero Effort Zero Mistakes 合意の即時化 作業の自動化 ミスの排除 Harmonic Insight 1 / 12 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/5EGLYP5RJL.jpg) こんな経験、ありませんか？ 仕様書を100ページ書いたのに → 「想定と違う」と言われた アジャイルを導入したのに → 儀式だけが増えて速くならなかった Excelで回している業務を → システム化したいが予算も時間もない SFADは、この3つの問題を構造的に解決します。 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/4JQYM2ZY7P.jpg) REALITY CHECK メソドロジーという幻想 海外から輸入された開発手法は、なぜ日本で機能していないのか アジャイルの「約束」 現場の「現実」 スプリントで小さく速く回す プロジェクトごとにやり方が違う 再現性ゼロ ペアプログラミングで品質を担保 個人が勝手にプロセスを変える 標準化ゼロ デイリースタンドアップで進捗を共有 ドキュメントが毎回バラバラ 品質保証ゼロ レトロスペクティブで継続的に改善 「アジャイルです」と言うだけ 実態は場当たり開発 ユーザーストーリーで顧客の声を反映 メソドロジーを借りただけ 本来の導入とは程遠い → 結果: 単なる「短期プロトタイプ手法」に 矮小化。儀式だけが残った。 2 / 12 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/K74WVL3ZE1.jpg) THE GAP アジャイルは進め方を変えた。 でも作り方は変えていない。 だから現場は変わらなかった。 進め方 （プロセス管理） アジャイル スクラム カンバン │ │ │ │ │ 作り方 （構築手法） ← 空白だった SFADは、この「作り方」を埋めるメソドロジーです。 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/LJ1Y3L1DEG.jpg) THE REAL QUESTION 本来メソドロジーに求められるもの 「誰がやっても、同じプロセスで、同じ品質を、再現できる」 それがメソドロジーの本来の役割。 再現性 標準プロセス 統一ドキュメント 品質保証 Reproducibility Standardized Process Unified Documents Quality Assurance 担当者が変わっても、プロ ジェクトが変わっても、 同じ手順で同じ品質のアウ トプットが出る。 10ステップの固定フローで 、 「次に何をすべきか」に迷 わない。 画面モック・要件一覧・権限マ トリクスなど、 成果物のフォーマットが標準化 されている。 各ステップの完了条件が明 確。 「何ができたら次に進める か」が定義されている。 SFADは、この4つの要件をすべて満たすために設計された。 3 / 12 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/GJWGPV8872.jpg) WHAT SFADとは何か 画面を最初に作り、AIと協働しながら、業務システムを段階的に完成させる開発手法。 顧客が「実際の画面」で合意形成を行い、AIがコード生成・修正・テストを支援し、開発のスピード・品質・コストを同時に最適 化する。 Zero Time Zero Effort Zero Mistakes 合意形成の即時化 作業の自動化 認識ズレの排除 画面が仕様書そのもの。 テキストで説明する時間を排除。 顧客は見たままに合意できる。 AIがコード生成・Excel取込・ 軽微な修正を自動化。 開発者は判断と設計に集中。 画面ベースの合意で「想定と違う」 を 防止。AIによる自動テスト・修正で 人的ミスを排除。 4 / 12 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/4EZLK48973.jpg) PRINCIPLES 5つの核心原則 #1 Screen First 要件定義の前に画面モックを作成。顧客と「見える形」で合意する。 画面が仕様書 #2 Mock First DB/APIの前にモックデータで画面を完成。実データ投入前に完成形を確認。 モックで先に動かす #3 Excel Boundary 既存Excelをそのまま取込・表示。現行業務を壊さずにシステム化。 Excelが架け橋 #4 AI Co-pilot 構成提案・コード生成・修正をAIが担当。開発者は判断とレビューに集中。 AIが開発パートナー #5 Central Backlog 要件・進捗・改善要望をトップページに集約。顧客と全体像を常に共有。 全体像をトップに集約 5 / 12 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/Y76WQ3PD7V.jpg) COMPARISON アジャイル × SFAD ＝ 共存できる ウォーターフォール アジャイル ローコード SFAD 実装完了後 スプリント末 設定時 最初 (Step 1) テキスト仕様書 ユーザーストーリー 設定画面 実画面モック AI活用 なし 部分的 なし 全工程で協働 Excel連携 別途開発 別途開発 コネクタ依存 標準 I/O 再現性 手順書依存 チーム依存 テンプレート 10Step固定 手戻りコスト 極めて高い 中程度 低い 最小 顧客が画面を見る時 合意の手段 要件変更対応 適用対象 困難 対応可能 設定変更 アジャイルは「進め方」。SFADは「作り方」。敵ではなく、補完する関係です。 大規模SI Web / アプリ 定型業務 即時 (AI修正) 業務システム全般 6 / 12 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/G75MRLK874.jpg) PROCESS 10ステップ — プロセス全体像 1 2 3 4 5 6 7 8 9 1 0 レイアウト カラー選択 TOP Page Backlog メニュー 構成決定 画面構成案 作成 Excelデータ アップロー ド 優先度順に 実装 DB移行 リファクタ 改善要望 AI修正 ユーザー アクセス権 ログイン 権限組込 AI AI AI SETUP BUILD CYCLE AI MIGRATE OPERATE LAUNCH Step 4 → 5 → 6 を機能ごとに繰り返す Step 8 改善要望 → Step 6 要件にフィードバック 全機能完了後に Step 7 へ進む リリース後の運用改善ループ 7 / 12 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/9J29DLWVER.jpg) AI CO-PILOT 全ステップにおけるAIの関与 AIが提案し、人間が承認する。だから誰がやっても同じ結果になる 1 初期設定 業種・規模に応じたテンプレート・レイアウトの推薦 推薦 2 Backlog構築 過去パターンからKPI・要件テンプレートを自動生成 生成 3 メニュー構成 ヒアリング内容から機能グループ案を自動分類・提案 提案 4 画面構成案 各機能の画面構成（一覧/入力/ダッシュボード等）を自動起案 起案 5 Excel取込 カラムマッピングの自動推定。データ型の判定・変換 自動化 6 機能実装 画面構成案 → 実装コードの生成。テスト自動生成 実装 7 DB移行 ExcelスキーマからDBスキーマ（Prisma）を自動設計 設計 8 改善要望 軽微な修正はAIが直接コード修正 → レビュー → デプロイ 修正 9 アクセス権 ロール・権限マトリクスからガード実装コードを生成 生成 1 0 本番化 全画面の権限チェック。操作ログ設計。セキュリティ検証 検証 8 / 12 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/DEY42QLQJM.jpg) WHY REPRODUCIBLE なぜ「誰がやっても同じ」が実現できるのか AIが提案し、人間は「選ぶ」「承認する」だけ。判断をAIに委ねることで属人性を排除。 AIがやること 人間がやること 従来の「作り方」 推薦する 起案する 推定する 生成する 設計する 修正する 選ぶ 承認する 確認する レビューする 設計する 考える 書く 個人の力量次第 → ≠ この設計はAI以前には不可能だった。SFADが今のタイミングでしか成立しない理由。 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/VJNY8K4278.jpg) TECH STACK SFADを支える技術基盤 メソドロジーの再現性を担保する、標準化された技術スタック AI開発 Claude Code フレームワーク Next.js ホスティング Vercel ソース管理 GitHub データベース Neon AIによるコード生成・修正・レビューの中核エンジン。 全10ステップを通じて開発者と協働する。 AI Partner React ベースのフルスタックフレームワーク。 SSR/SSG対応、API Routes、App Router。 Framework Next.js のネイティブホスティング。 プレビューデプロイで顧客確認が即座に可能。 Deploy コード管理・PR レビュー・Issue トラッキング。 Claude Code との統合でAI修正のワークフローを実現。 Source サーバーレス PostgreSQL。Step 7 のDB移行先。 Prisma ORM で型安全なデータアクセス。 Database 9 / 12 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/YE9PKVQDJ3.jpg) SCOPE 対象と適用領域 BEST FIT NOT IDEAL 業務システムの新規構築 リアルタイムシステム 社内ポータル、資産管理、勤怠、経費精算などの業務アプリ ミリ秒単位のレスポンスが求められる取引所・制御系 Excel業務のシステム化 大規模基幹システム Excelで運用している業務を段階的にWebアプリへ移行 1000画面超のERP。初期から全体設計が必要な案件 中小規模のSI案件 UI/UXが差別化要因 5〜50画面規模。顧客と密なコミュニケーションが可能 BtoCアプリなど独自のUI体験が競争優位になる製品 プロトタイプ → 本番化 PoCからそのまま本番システムに育てる開発スタイル TARGET SIer / 受託開発ベンダ 社内IT / 情シス AI活用を推進する組織 合意形成スピードを向上 Excel業務のシステム化 プロセスへのAI標準化 11 / 12 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/GE8DRPG5ED.jpg) DEMO 1/2 セットアップ — 開発初日の画面 SFADでは、開発初日からこの画面が動きます。 Step 2: Central Backlog（トップページ） Step 1: レイアウト・カラー選択 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/LELMK1G37R.jpg) DEMO 2/2 ビルドサイクル — 画面構成と要件管理 画面構成案を作り、優先度順に実装を進めます。 Step 4: 各機能の画面構成案 Step 6: 要件を優先度順に管理 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/4JMY2WQMJW.jpg) WHY SFAD 従来開発の課題と、SFADのアプローチ 業務システム構築で繰り返されてきた問題を、SFADはどう変えるか Before（従来開発） After（SFAD） 顧客が画面を見るのは実装後 初日から画面を見せて合意 仕様書ベースで認識ズレが多発 画面モックが仕様書を兼ねる 手戻りが常態化 認識ズレが構造的に起きない Excel連携は毎回別途開発 Excel取込が標準機能 担当者が変わるとやり方も変わる 10ステップ固定で誰でも同じ進め方 プロセスが属人的で再現性がない AIが生成・修正・テストを担う 「やり方を変える」のではなく「やり方が決まっている」。それがSFADです。 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/PJR9MY8L79.jpg) SFAD Screen First AI Development アジャイルは「進め方」の話。SFADは「作り方」の話。 画面から作る。AIと育てる。Excelで繋ぐ。 誰がやっても同じ10ステップで、同じ品質を再現できる。 誰がやっても同じ10ステップで、同じ品質を再現できる。 Zero Time Zero Effort Zero Mistakes Harmonic Insight 12 / 12 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/PEXQVGL6JX.jpg) PACKAGE SFADスターターパッケージ メソドロジーだけではなく、すぐに始められるツール一式をご提供します 1 実践ガイドブック（PDF） 2 スターターキット（GitHub） 3 インフラ構築マニュアル（PDF） 4 テンプレート集（Excel 5種） 5 動画教材（10本） 10ステップの詳細手順・判断基準・完了条件を網羅した5章構成のガイド テンプレート＋Excel I/Oライブラリ＋コンポーネント＋CLAUDE.md GitHub・Vercel・Claude Code・Neonのセットアップ手順書 要件一覧・画面構成案・権限マトリクス・改善要望・プロジェクト計画 各ステップのデモ＋Claude Codeの実践的な使い方 導入コンサルティングの一環としてご提供 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/3EK9Q4LGED.jpg) まずは、画面を見てください。 SFADの「Screen First」を、あなた自身の目で確かめてください。 無料デモを申し込む 資料をダウンロードする お問い合わせ 実際のスターターキットを動かしながら ご説明します SFADの詳細資料をPDFでお送りします 導入相談・見積もりのご依頼はこちら insight-office.com Harmonic Insight