生成AI×ノーコード (スピーディーなアプリ開発の新時代)

11月12日に開催された「FlutterFlow Tokyo Summit」にて登壇した「生成AI×ノーコード (スピーディーなアプリ開発の新時代)」の登壇資料です

1. 生成AI×ノーコード スピーディーなアプリ開発の新時代 KNR
2. 1 2 3 4 自己紹介・今日のゴール 従来のアプリ開発 生成AIを使った上流工程 ノーコードでのアプリ開発 目次
3. 1 2 3 4 自己紹介・今日のゴール 従来のアプリ開発 生成AIを使った上流工程 ノーコードでのアプリ開発 目次
4. 自己紹介 名前: KNR (26) 会社: Web系のシステム開発 役職: 執行役員 実績: Qiita 2022年 1位 趣味: DJ, サウナ, イベント運営
5. 今日のゴール 生成AIを使った要件定義、設計 (上流工程)の進め方がわかる ノーコード・ローコードを使ったアプリ開発 (プロトタイプの作成)がわかる
6. 1 2 3 4 自己紹介 従来のアプリ開発と今 生成AIを使った上流工程 ノーコードでのアプリ開発 目次
7. アプリ開発の流れ
8. ノーコードの登場 ノーコード・ローコード
9. 生成AIの登場 生成AI ノーコード・ローコード
10. 生成AIの登場 生成AI ノーコード・ローコード 前半 後半
11. 1 2 3 4 自己紹介 従来のアプリ開発と今 生成AIを使った上流工程 ノーコードでのアプリ開発 目次
12. 生成AI(ChatGPT)を使った上流工程 (要件定義、設計) 建築業界における資料のDX化を例に考える
13. 要件定義の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか (How) - 設計
14. 要件定義の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか (How) - 設計
15. システム開発する目的 (Why) - お客さんからヒアリング 建築現場の資料のDX化により、資料作成、検索及び整理の迅速化 作成された資料を元に情報をナレッジ化し共有
16. 要件定義の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか (How) - 設計
20. 要件定義の成果物 作成した仮説を元にヒアリングを行い要件を決めていく
21. 生成AI(ChatGPT)を使った上流工程 (要件定義、設計) 要件定義 設計
22. 設計の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか (How) - 設計
23. 設計フェーズの成果物 機能設計 画面設計 (ワイヤー) データモデル
24. 設計フェーズの成果物 機能設計 画面設計 (ワイヤー) データモデル
25. 機能の仕様書 - プロンプト
27. 設計フェーズの成果物 機能の仕様書 画面設計 (ワイヤー) データモデル
28. 画面設計 (ワイヤー) - プロンプト
31. 設計フェーズの成果物 これを元に実際は、画面のワイヤーを作成していきます
32. 設計フェーズの成果物 機能の仕様書 画面設計 (ワイヤー) データモデル
33. データモデル - プロンプト
34. データモデル - 回答
35. データモデル - 回答
36. 設計フェーズの成果物 機能仕様書 画面設計書 データ設計書
37. 1 2 3 4 自己紹介 従来のアプリ開発と今 生成AIを使った上流工程 ノーコードでのアプリ開発 目次
38. ローコード・ノーコードでのアプリ開発 FlutterFlowの特徴 FlutterFlowでプロトタイプを作成する
39. ローコード・ノーコードでのアプリ開発 FlutterFlowの特徴 FlutterFlowでプロトタイプを作成する
40. FlutterFlowの特徴 GUIでサクッとアプリが開発できる ウィジェットやテンプレートが豊富 ソースコードをダウンロードできる FirebaseやSupabaseとの外部連携が容易
41. ノーコードでのアプリ開発 FlutterFlowと他のノーコードツール比較 FlutterFlowでプロトタイプを作成する
42. ノーコードでのアプリ開発 - 前提 今回作成するものは完成品ではなく、提案フェーズで見せるプロトタイプ
43. FlutterFlowでプロトタイプを作成する
44. FlutterFlowでプロトタイプを作成する - ダッシュボード
45. FlutterFlowでプロトタイプを作成する - ダッシュボード
47. FlutterFlowでプロトタイプを作成する - 資料作成
48. FlutterFlowでプロトタイプを作成する - 資料作成 画面作成自体もAIを使う
49. FlutterFlow AI Gen
51. まとめ 生成AIとFlutterFlowを使うことで提案フェーズで動くものを見せられる 実際の開発工数も大幅に削減できる
52. Twitter (X) ご清聴ありがとうございました