Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
生成AI×ノーコード (スピーディーなアプリ開発の新時代)
Search
KNR
November 12, 2023
Programming
3
5.1k
生成AI×ノーコード (スピーディーなアプリ開発の新時代)
11月12日に開催された「FlutterFlow Tokyo Summit」にて登壇した「生成AI×ノーコード (スピーディーなアプリ開発の新時代)」の登壇資料です
KNR
November 12, 2023
Tweet
Share
More Decks by KNR
See All by KNR
GPTs活用事例集
knr109
6
5.3k
2023年はたくさんアウトプットしたよ
knr109
1
1.1k
要件定義入門 (失敗しないために必要なこと)
knr109
49
21k
ChatGPTとLLMを活用して1週間で個人開発をした話
knr109
2
3.6k
(新人)エンジニアが開発しやすいREADMEの書き方
knr109
19
11k
クリエイター広場を作りました
knr109
0
200
Other Decks in Programming
See All in Programming
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1k
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
thousanda
1
120
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
3
1.6k
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
110
Cloudflare Workersで進めるリモートMCP活用
syumai
12
1.6k
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
120
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.6k
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
190
Boast Code Party / RubyKaigi 2025 After Event
lemonade_37
0
120
一緒に働きたくなるプログラマの思想 #QiitaConference
mu_zaru
84
21k
Cursor/Devin全社導入の理想と現実
saitoryc
29
22k
MySQL初心者が311個のカラムにNot NULL制約を追加していってALTER TABLEについて学んだ話
hatsu38
2
150
Featured
See All Featured
Building Applications with DynamoDB
mza
94
6.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
430
Designing Experiences People Love
moore
142
24k
Typedesign – Prime Four
hannesfritz
41
2.6k
What's in a price? How to price your products and services
michaelherold
245
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
生成AI×ノーコード スピーディーなアプリ開発の新時代 KNR
1 2 3 4 自己紹介・今日のゴール 従来のアプリ開発 生成AIを使った上流工程 ノーコードでのアプリ開発 目次
1 2 3 4 自己紹介・今日のゴール 従来のアプリ開発 生成AIを使った上流工程 ノーコードでのアプリ開発 目次
自己紹介 名前: KNR (26) 会社: Web系のシステム開発 役職: 執行役員 実績: Qiita
2022年 1位 趣味: DJ, サウナ, イベント運営
今日のゴール 生成AIを使った要件定義、設計 (上流工程)の進め方がわかる ノーコード・ローコードを使ったアプリ開発 (プロトタイプの作成)がわかる
1 2 3 4 自己紹介 従来のアプリ開発と今 生成AIを使った上流工程 ノーコードでのアプリ開発 目次
アプリ開発の流れ
ノーコードの登場 ノーコード・ローコード
生成AIの登場 生成AI ノーコード・ローコード
生成AIの登場 生成AI ノーコード・ローコード 前半 後半
1 2 3 4 自己紹介 従来のアプリ開発と今 生成AIを使った上流工程 ノーコードでのアプリ開発 目次
生成AI(ChatGPT)を使った上流工程 (要件定義、設計) 建築業界における資料のDX化を例に考える
要件定義の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか
(How) - 設計
要件定義の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか
(How) - 設計
システム開発する目的 (Why) - お客さんからヒアリング 建築現場の資料のDX化により、資料作成、検索及び整理の迅速化 作成された資料を元に情報をナレッジ化し共有
要件定義の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか
(How) - 設計
None
None
None
要件定義の成果物 作成した仮説を元にヒアリングを行い要件を決めていく
生成AI(ChatGPT)を使った上流工程 (要件定義、設計) 要件定義 設計
設計の成果物 システム開発する目的 (Why) - 要件定義 どのように課題を解決するか (What) - 要件定義 どのようなシステムを作るのか
(How) - 設計
設計フェーズの成果物 機能設計 画面設計 (ワイヤー) データモデル
設計フェーズの成果物 機能設計 画面設計 (ワイヤー) データモデル
機能の仕様書 - プロンプト
None
設計フェーズの成果物 機能の仕様書 画面設計 (ワイヤー) データモデル
画面設計 (ワイヤー) - プロンプト
None
None
設計フェーズの成果物 これを元に実際は、画面のワイヤーを作成していきます
設計フェーズの成果物 機能の仕様書 画面設計 (ワイヤー) データモデル
データモデル - プロンプト
データモデル - 回答
データモデル - 回答
設計フェーズの成果物 機能仕様書 画面設計書 データ設計書
1 2 3 4 自己紹介 従来のアプリ開発と今 生成AIを使った上流工程 ノーコードでのアプリ開発 目次
ローコード・ノーコードでのアプリ開発 FlutterFlowの特徴 FlutterFlowでプロトタイプを作成する
ローコード・ノーコードでのアプリ開発 FlutterFlowの特徴 FlutterFlowでプロトタイプを作成する
FlutterFlowの特徴 GUIでサクッとアプリが開発できる ウィジェットやテンプレートが豊富 ソースコードをダウンロードできる FirebaseやSupabaseとの外部連携が容易
ノーコードでのアプリ開発 FlutterFlowと他のノーコードツール比較 FlutterFlowでプロトタイプを作成する
ノーコードでのアプリ開発 - 前提 今回作成するものは完成品ではなく、提案フェーズで見せるプロトタイプ
FlutterFlowでプロトタイプを作成する
FlutterFlowでプロトタイプを作成する - ダッシュボード
FlutterFlowでプロトタイプを作成する - ダッシュボード
None
FlutterFlowでプロトタイプを作成する - 資料作成
FlutterFlowでプロトタイプを作成する - 資料作成 画面作成自体もAIを使う
FlutterFlow AI Gen
None
まとめ 生成AIとFlutterFlowを使うことで提案フェーズで動くものを見せられる 実際の開発工数も大幅に削減できる
Twitter (X) ご清聴ありがとうございました