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

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

Avatar for KNR KNR
November 12, 2023
Programming
3
5.1k

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

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

Avatar for KNR

KNR

November 12, 2023
Tweet

More Decks by KNR

See All by KNR
AI駆動開発2025年振り返りとTips集
Avatar for KNR knr109
1
300
GPTs活用事例集
Avatar for KNR knr109
6
5.6k
2023年はたくさんアウトプットしたよ
Avatar for KNR knr109
1
1.5k
要件定義入門 (失敗しないために必要なこと)
Avatar for KNR knr109
54
24k
ChatGPTとLLMを活用して1週間で個人開発をした話
Avatar for KNR knr109
2
4.2k
(新人)エンジニアが開発しやすいREADMEの書き方
Avatar for KNR knr109
22
12k
クリエイター広場を作りました
Avatar for KNR knr109
0
230

Other Decks in Programming

See All in Programming
AtCoder Conference 2025
Avatar for shindannin shindannin
0
990
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
150
ゆくKotlin くるRust
Avatar for TATSUNO Yasuhiro exoego
1
210
実は歴史的なアップデートだと思う AWS Interconnect - multicloud
Avatar for maroon1st maroon1st
0
350
SourceGeneratorのススメ
Avatar for tkym htkym
0
160
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
620
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
110
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
220
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
350
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
310
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
5
4.2k
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
970

Featured

See All Featured
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
290
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.5k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
86
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
36
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
210
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
1
220

Transcript

  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) - 設計
  17. None
  18. None
  19. None

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

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

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

    (How) - 設計

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

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

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

  26. None

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

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

  29. None
  30. None

  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でプロトタイプを作成する - ダッシュボード

  46. None

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

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

  49. FlutterFlow AI Gen

  50. None

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

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