Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

KNR
November 12, 2023

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

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

KNR

November 12, 2023
Tweet

More Decks by KNR

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. アプリ開発の流れ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. データモデル - 回答

    View full-size slide

  29. データモデル - 回答

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. FlutterFlow AI Gen

    View full-size slide

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

    View full-size slide

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

    View full-size slide