SFAD — Screen First AI Development｜画面を起点にAIと業務システムを構築する開発メソドロジー

SFAD Screen First AI Development 画面を起点に、AIと協働して、業務システムを構築する開発メソドロジ ー Zero Time Zero Effort Zero Mistakes 合意の即時化 作業の自動化 ミスの排除 Harmonic Insight 1 / 12

こんな経験、ありませんか？ 仕様書を100ページ書いたのに → 「想定と違う」と言われた アジャイルを導入したのに → 儀式だけが増えて速くならなかった Excelで回している業務を → システム化したいが予算も時間もない SFADは、この3つの問題を構造的に解決します。

REALITY CHECK メソドロジーという幻想 海外から輸入された開発手法は、なぜ日本で機能していないのか アジャイルの「約束」 現場の「現実」 スプリントで小さく速く回す プロジェクトごとにやり方が違う 再現性ゼロ ペアプログラミングで品質を担保 個人が勝手にプロセスを変える 標準化ゼロ デイリースタンドアップで進捗を共有 ドキュメントが毎回バラバラ 品質保証ゼロ レトロスペクティブで継続的に改善 「アジャイルです」と言うだけ 実態は場当たり開発 ユーザーストーリーで顧客の声を反映 メソドロジーを借りただけ 本来の導入とは程遠い → 結果: 単なる「短期プロトタイプ手法」に 矮小化。儀式だけが残った。 2 / 12

THE GAP アジャイルは進め方を変えた。 でも作り方は変えていない。 だから現場は変わらなかった。 進め方 （プロセス管理） アジャイル スクラム カンバン │ │ │ │ │ 作り方 （構築手法） ← 空白だった SFADは、この「作り方」を埋めるメソドロジーです。

THE REAL QUESTION 本来メソドロジーに求められるもの 「誰がやっても、同じプロセスで、同じ品質を、再現できる」 それがメソドロジーの本来の役割。 再現性 標準プロセス 統一ドキュメント 品質保証 Reproducibility Standardized Process Unified Documents Quality Assurance 担当者が変わっても、プロ ジェクトが変わっても、 同じ手順で同じ品質のアウ トプットが出る。 10ステップの固定フローで 、 「次に何をすべきか」に迷 わない。 画面モック・要件一覧・権限マ トリクスなど、 成果物のフォーマットが標準化 されている。 各ステップの完了条件が明 確。 「何ができたら次に進める か」が定義されている。 SFADは、この4つの要件をすべて満たすために設計された。 3 / 12

WHAT SFADとは何か 画面を最初に作り、AIと協働しながら、業務システムを段階的に完成させる開発手法。 顧客が「実際の画面」で合意形成を行い、AIがコード生成・修正・テストを支援し、開発のスピード・品質・コストを同時に最適 化する。 Zero Time Zero Effort Zero Mistakes 合意形成の即時化 作業の自動化 認識ズレの排除 画面が仕様書そのもの。 テキストで説明する時間を排除。 顧客は見たままに合意できる。 AIがコード生成・Excel取込・ 軽微な修正を自動化。 開発者は判断と設計に集中。 画面ベースの合意で「想定と違う」 を 防止。AIによる自動テスト・修正で 人的ミスを排除。 4 / 12

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

COMPARISON アジャイル × SFAD ＝ 共存できる ウォーターフォール アジャイル ローコード SFAD 実装完了後 スプリント末 設定時 最初 (Step 1) テキスト仕様書 ユーザーストーリー 設定画面 実画面モック AI活用 なし 部分的 なし 全工程で協働 Excel連携 別途開発 別途開発 コネクタ依存 標準 I/O 再現性 手順書依存 チーム依存 テンプレート 10Step固定 手戻りコスト 極めて高い 中程度 低い 最小 顧客が画面を見る時 合意の手段 要件変更対応 適用対象 困難 対応可能 設定変更 アジャイルは「進め方」。SFADは「作り方」。敵ではなく、補完する関係です。 大規模SI Web / アプリ 定型業務 即時 (AI修正) 業務システム全般 6 / 12

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

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

WHY REPRODUCIBLE なぜ「誰がやっても同じ」が実現できるのか AIが提案し、人間は「選ぶ」「承認する」だけ。判断をAIに委ねることで属人性を排除。 AIがやること 人間がやること 従来の「作り方」 推薦する 起案する 推定する 生成する 設計する 修正する 選ぶ 承認する 確認する レビューする 設計する 考える 書く 個人の力量次第 → ≠ この設計はAI以前には不可能だった。SFADが今のタイミングでしか成立しない理由。

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

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

DEMO 1/2 セットアップ — 開発初日の画面 SFADでは、開発初日からこの画面が動きます。 Step 2: Central Backlog（トップページ） Step 1: レイアウト・カラー選択

DEMO 2/2 ビルドサイクル — 画面構成と要件管理 画面構成案を作り、優先度順に実装を進めます。 Step 4: 各機能の画面構成案 Step 6: 要件を優先度順に管理

WHY SFAD 従来開発の課題と、SFADのアプローチ 業務システム構築で繰り返されてきた問題を、SFADはどう変えるか Before（従来開発） After（SFAD） 顧客が画面を見るのは実装後 初日から画面を見せて合意 仕様書ベースで認識ズレが多発 画面モックが仕様書を兼ねる 手戻りが常態化 認識ズレが構造的に起きない Excel連携は毎回別途開発 Excel取込が標準機能 担当者が変わるとやり方も変わる 10ステップ固定で誰でも同じ進め方 プロセスが属人的で再現性がない AIが生成・修正・テストを担う 「やり方を変える」のではなく「やり方が決まっている」。それがSFADです。

SFAD Screen First AI Development アジャイルは「進め方」の話。SFADは「作り方」の話。 画面から作る。AIと育てる。Excelで繋ぐ。 誰がやっても同じ10ステップで、同じ品質を再現できる。 誰がやっても同じ10ステップで、同じ品質を再現できる。 Zero Time Zero Effort Zero Mistakes Harmonic Insight 12 / 12

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の実践的な使い方 導入コンサルティングの一環としてご提供

まずは、画面を見てください。 SFADの「Screen First」を、あなた自身の目で確かめてください。 無料デモを申し込む 資料をダウンロードする お問い合わせ 実際のスターターキットを動かしながら ご説明します SFADの詳細資料をPDFでお送りします 導入相談・見積もりのご依頼はこちら insight-office.com Harmonic Insight