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

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

Transcript

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

   View Slide

2. 1
   2
   3
   4
   自己紹介・今日のゴール
   従来のアプリ開発
   生成AIを使った上流工程
   ノーコードでのアプリ開発
   目次
   

   View Slide

3. 1
   2
   3
   4
   自己紹介・今日のゴール
   従来のアプリ開発
   生成AIを使った上流工程
   ノーコードでのアプリ開発
   目次
   

   View Slide

4. 自己紹介
   名前: KNR (26)
   会社: Web系のシステム開発
   役職: 執行役員
   実績: Qiita 2022年 1位
   趣味: DJ, サウナ, イベント運営
   

   View Slide

5. 今日のゴール
   生成AIを使った要件定義、設計 (上流工程)の進め方がわかる
   ノーコード・ローコードを使ったアプリ開発 (プロトタイプの作成)がわかる
   

   View Slide

6. 1
   2
   3
   4
   自己紹介
   従来のアプリ開発と今
   生成AIを使った上流工程
   ノーコードでのアプリ開発
   目次
   

   View Slide

7. アプリ開発の流れ
   

   View Slide

8. ノーコードの登場
   ノーコード・ローコード
   

   View Slide

9. 生成AIの登場
   生成AI ノーコード・ローコード
   

   View Slide

10. 生成AIの登場
    生成AI ノーコード・ローコード
    前半 後半
    

    View Slide

11. 1
    2
    3
    4
    自己紹介
    従来のアプリ開発と今
    生成AIを使った上流工程
    ノーコードでのアプリ開発
    目次
    

    View Slide

12. 生成AI(ChatGPT)を使った上流工程 (要件定義、設計)
    建築業界における資料のDX化を例に考える
    

    View Slide

13. 要件定義の成果物
    システム開発する目的 (Why) - 要件定義
    どのように課題を解決するか (What) - 要件定義
    どのようなシステムを作るのか (How) - 設計
    

    View Slide

14. 要件定義の成果物
    システム開発する目的 (Why) - 要件定義
    どのように課題を解決するか (What) - 要件定義
    どのようなシステムを作るのか (How) - 設計
    

    View Slide

15. システム開発する目的 (Why) - お客さんからヒアリング
    建築現場の資料のDX化により、資料作成、検索及び整理の迅速化
    作成された資料を元に情報をナレッジ化し共有
    

    View Slide

16. 要件定義の成果物
    システム開発する目的 (Why) - 要件定義
    どのように課題を解決するか (What) - 要件定義
    どのようなシステムを作るのか (How) - 設計
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. 要件定義の成果物
    作成した仮説を元にヒアリングを行い要件を決めていく
    

    View Slide

21. 生成AI(ChatGPT)を使った上流工程 (要件定義、設計)
    要件定義
    設計
    

    View Slide

22. 設計の成果物
    システム開発する目的 (Why) - 要件定義
    どのように課題を解決するか (What) - 要件定義
    どのようなシステムを作るのか (How) - 設計
    

    View Slide

23. 設計フェーズの成果物
    機能設計
    画面設計 (ワイヤー)
    データモデル
    

    View Slide

24. 設計フェーズの成果物
    機能設計
    画面設計 (ワイヤー)
    データモデル
    

    View Slide

25. 機能の仕様書 - プロンプト
    

    View Slide

26. View Slide

27. 設計フェーズの成果物
    機能の仕様書
    画面設計 (ワイヤー)
    データモデル
    

    View Slide

28. 画面設計 (ワイヤー) - プロンプト
    

    View Slide

29. View Slide

30. View Slide

31. 設計フェーズの成果物
    これを元に実際は、画面のワイヤーを作成していきます
    

    View Slide

32. 設計フェーズの成果物
    機能の仕様書
    画面設計 (ワイヤー)
    データモデル
    

    View Slide

33. データモデル - プロンプト
    

    View Slide

34. データモデル - 回答
    

    View Slide

35. データモデル - 回答
    

    View Slide

36. 設計フェーズの成果物
    機能仕様書 画面設計書 データ設計書
    

    View Slide

37. 1
    2
    3
    4
    自己紹介
    従来のアプリ開発と今
    生成AIを使った上流工程
    ノーコードでのアプリ開発
    目次
    

    View Slide

38. ローコード・ノーコードでのアプリ開発
    FlutterFlowの特徴
    FlutterFlowでプロトタイプを作成する
    

    View Slide

39. ローコード・ノーコードでのアプリ開発
    FlutterFlowの特徴
    FlutterFlowでプロトタイプを作成する
    

    View Slide

40. FlutterFlowの特徴
    GUIでサクッとアプリが開発できる
    ウィジェットやテンプレートが豊富
    ソースコードをダウンロードできる
    FirebaseやSupabaseとの外部連携が容易
    

    View Slide

41. ノーコードでのアプリ開発
    FlutterFlowと他のノーコードツール比較
    FlutterFlowでプロトタイプを作成する
    

    View Slide

42. ノーコードでのアプリ開発 - 前提
    今回作成するものは完成品ではなく、提案フェーズで見せるプロトタイプ
    

    View Slide

43. FlutterFlowでプロトタイプを作成する
    

    View Slide

44. FlutterFlowでプロトタイプを作成する - ダッシュボード
    

    View Slide

45. FlutterFlowでプロトタイプを作成する - ダッシュボード
    

    View Slide

46. View Slide

47. FlutterFlowでプロトタイプを作成する - 資料作成
    

    View Slide

48. FlutterFlowでプロトタイプを作成する - 資料作成
    画面作成自体もAIを使う
    

    View Slide

49. FlutterFlow AI Gen
    

    View Slide

50. View Slide

51. まとめ
    生成AIとFlutterFlowを使うことで提案フェーズで動くものを見せられる
    実際の開発工数も大幅に削減できる
    

    View Slide

52. Twitter (X)
    ご清聴ありがとうございました
    

    View Slide