バイブコーディング × 設計思考

RevenueCat's VIBE CODING CATFE TOKYO** での発表資料

本資料では、AIを活用した直感的・感覚的な開発スタイルである「Vibe Coding」から、より持続可能で実用的な「Viable Coding」への移行を提案します。

主な内容

Vibe Codingの問題点
コード品質の低下やメンテナンス性の悪化
・AIのハルシネーションによる信頼性の課題
・要件定義の曖昧さによる長期的な成長の制約

Viable Codingへの移行
・明確な要件定義、設計、実装の分離による開発プロセスの改善
・AWSが提供するAI IDE「Kiro」や「Windsurf」などのツール活用例
・品質、効率、チーム協業を向上させる具体的な実践方法

デモ
・自動顔ぼかしアプリ「Photo Blur Editor」を題材に、Viable Codingの実践プロセスを紹介

AIとの協業を通じて、開発の初期段階から品質を確保し、スケーラブルで保守性の高いプロダクトを構築するための考え方と手法を解説します。

Transcript

1. バイブコーディング × 設計思考 VIBE CODING CATFE TOKYO 2025/7/31 nogu （@_nogu66 ）
2. 自己紹介 nogu @_nogu66 北海道出身 東京都在住 社内システムの改修 生成AI を活用した社内DX 生成AI × 自社データのプロダクト開発 個人 プロダクト開発、SNS 活動、ハッカソン参加
3. Viable Coding に移行しませんか？ Vibe Coding 感覚的な開発 その場の雰囲気や直感に 頼った開発スタイル Viable Coding 実用的な開発 明確な仕様と計画に基づ いた持続可能な開発 ※Viable （実行可能な）
4. こんな悩みありませんか？ コード品質とメンテナンス性 AI のハルシネーションと 過剰信頼 要件定義・設計フェーズ 非効率なコードの生成：動作するが 最適化されていないコード 誤ったコードや非現実的な提案 の生成 全体設計の欠如：部分最適化に陥り やすい ドキュメント不足：コードの理解と 引継ぎが困難 AI の出力への盲目的な信頼：検 証不足 一貫性のない実装：機能間の連 携不足 長期的なメンテナンス：技術負債 の蓄積 バグの混入：見落としやすい微妙 な問題 スケーラビリティの問題：将来の拡 張が困難 コードの一貫性：異なるスタイルや 命名規則 セキュリティリスク：脆弱性の 見逃し 要件の曖昧さ：明確な目標設定 の不足 持続可能な開発の障壁 信頼性とセキュリティの課題 長期的な成長の制約
5. Vibe Coding 定義 AI を活用した直感的・探索的なコーディング手法。 「感覚」や「雰囲気」を重視した開発アプローチ。 主な特徴 迅速なプロトタイピング アイデアを素早く形にできる 低い技術的障壁 少ないコード知識でも開発可能 試行錯誤重視 反復的な改善プロセス 直感的操作 自然言語でのコード生成 代表的なツールの一例
6. Viable Coding 概念と背景 バイブコーディングの進化形として登場。 要件・設計・実装の明確な分離により、AI と人間の協業を最適化する体系的なアプローチです。 バイブコーディングからの進化 感覚的な開発 持続可能な開発 短期的な成果 長期的な品質 個人の直感 チームの協働 試行錯誤 体系的手法
7. 移行のメリット 品質の向上 明確な仕様によ り一貫性のある 高品質なコード を実現 効率的な開発 計画的なアプロ ーチで開発時間 を短縮し、手戻 りを削減 チーム協業 共通の理解基盤 により、チーム 全体の生産性が 向上 長期的な成長 技術負債を抑制 し、持続可能な 開発サイクルを 構築
8. 開発プロセスの改善点 • 明確な要件定義による方向性の統一 • 一貫した設計ドキュメントの維持 • 段階的なタスク分解による実装の効率化 • 継続的な品質管理とメンテナンス性の確保 https://saigontechnology.com/blog/6-stages-for-software- development-procedure-you-need-to-know/ 従来の開発プロセス バイブコーディング × ×
9. Kiro 概要 AWS が提供するAI IDE AI エージェントを活用したアプリケーション開発を、アイデア段階 から本番運用まで一貫してサポートする新しいAI IDE です。 Spec 1. 単一プロンプトから要件へ 単一プロンプトから要件を展開し、ユーザーストーリーとEARS 記 法の受け入れ基準を生成 2. 要件に基づく技術設計 コードベースと仕様要件を分析し、データフロー図、TypeScript イ ンターフェース、データベーススキーマを自動生成 3. タスクの実装 タスクとサブタスクを生成し、依存関係に基づいて正しく順序付 け。単体テスト、統合テスト、アクセシビリティ要件も含む Hook ファイルの保存や作成時に実行されるイベント駆 動自動化
10. Kiro 概要 AWS が提供するAI IDE AI エージェントを活用したアプリケーション開発を、アイデア段階 から本番運用まで一貫してサポートする新しいAI IDE です。 Spec 1. 単一プロンプトから要件へ 単一プロンプトから要件を展開し、ユーザーストーリーとEARS 記 法の受け入れ基準を生成 2. 要件に基づく技術設計 コードベースと仕様要件を分析し、データフロー図、TypeScript イ ンターフェース、データベーススキーマを自動生成 3. タスクの実装 タスクとサブタスクを生成し、依存関係に基づいて正しく順序付 け。単体テスト、統合テスト、アクセシビリティ要件も含む Hook ファイルの保存や作成時に実行されるイベント駆 動自動化 Kiro じゃなくても いいよね？
11. Viable Coding の実践方法 開発プロセス 1 要件定義 ユーザーストーリーと受け入れ基準の明確化 2 設計 アーキテクチャ、データモデル、API の設計 3 タスク化 具体的な実装手順への分解 各開発者層にとっての意義 個人開発者：一貫性と品質の向上 ハッカソン参加者：短期間での効率的な開発 非エンジニア：技術的障壁の低減 https://www.e-xtreme.co.jp/topics/49002/
12. Windsurf のプランニングモード 主要機能 Notes: プロジェクトの文脈や背景情報を記録。要件や制約条件を明確化 Task List: 実行すべきタスクの一覧。優先順位と依存関係を管理 Current Goal: 現在の目標と進捗状況。フォーカスを維持し、方向性を 明確化 安定運用のポイント プランの 定期的な見直し 人間による レビューと修正 一貫性の 維持 Windsurf のプランニングモードインターフェース Notes 、Task List 、Current Goal の連携による効率的な開発
13. デモ 自動顔ぼかしアプリ「Photo Blur Editor 」 自動で顔を検出し、顔をぼかすことができる写真編集アプリ。また、自由に追加することも可能となっている。 Next.js TypeScript Tailwind CSS 開発プロセス 1 2 要件定義・技術設計 Kiro 3 実装・検証 Windsurf コンテキスト アプリの概要 言語 フレームワーク 顔検出エンジン 検出モデル バックエンド 画像処理 要件定義 requirements.md 技術設計 design.md タスク task.md Step2 の出力ファイル をもとに実装を進めて いく。
15. やってみた感想 Good Point 明確な仕様書により開発効率が向上 段階的な実装で早期に問題発見 AI との協業で品質を保ちながら開発 ドキュメント化で機能追加が容易 Bad Point 前提が間違っていたときに、手戻りが 発生する コンテキストへの追加忘れ どこまでコードの中身を見るか
16. まとめ Vibe Coding Viable Coding 感覚的な開発から持続可能な開発へ バイブコーディングからの進化 感覚的な開発 持続可能な開発 短期的な成果 長期的な品質 個人の直感 チームの協働 Viable Coding の重要性 品質と一貫性の確保：明確な仕様に基づ く開発 メンテナンス性の向上：理解しやすく修 正しやすいコード スケーラビリティの実現：将来の拡張に 対応可能 チーム開発の効率化：共通理解による協業 促進 持続可能な開発プロセス AI と人間の最適な役割分担：それぞれの 強みを活かす 継続的な改善と学習：プロセスの反復的な 最適化 技術負債の最小化：長期的な視点での品 質管理 知識の共有と標準化：組織全体での成長 促進 試行錯誤 体系的手法
17. Next Action 🔥Build in Public SNS を通して、開発経過や実践した内容を発信していきます。 🚀 アプリをリリース予定 Viable Coding で開発したプロダクトリリースして、フィードバックを得ながら改善を進めていき ます。 🐈 RevenueCat で収益化 アプリの収益化にRevenueCat を活用していきます。
18. nogu @_nogu66 Thank you!!