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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for KNR KNR
November 12, 2023
Programming
5.2k
3

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

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

Avatar for KNR

KNR

November 12, 2023

More Decks by KNR

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

Other Decks in Programming

See All in Programming
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
Avatar for Manfred Steyer manfredsteyer
PRO
0
190
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
Avatar for Naoki Kishida kishida
2
150
技術記事、AIに書かせるか、自分で書くか？ 〜それでも私が自分の手で書く理由〜 / #QiitaConference
Avatar for Junichi Ito jnchito
2
1.5k
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
210
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
390
トークンをケチるな、設計しろ：GitHub Copilotを賢く使うコンテキスト戦略
Avatar for Ochtum ochtum
0
160
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
980
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.3k
ローカルLLMでどこまでコードが書けるか -拡張版 /　How much code can be written on a local LLM Extended
Avatar for Naoki Kishida kishida
12
4.4k
そのテスト、説明できますか？~LWテスト戦略FW~のご紹介
Avatar for Kei Nakahara nakahara
0
160
Vue × Nuxt × Oxc どこまで使える？実運用の現在地
Avatar for ANDPAD inc andpad
0
300

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
43k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
66
55k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.7k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
370
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.2k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
330
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k

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) ご清聴ありがとうございました