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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
420
GPTs活用事例集
Avatar for KNR knr109
6
6k
2023年はたくさんアウトプットしたよ
Avatar for KNR knr109
1
1.6k
要件定義入門 (失敗しないために必要なこと)
Avatar for KNR knr109
56
26k
ChatGPTとLLMを活用して1週間で個人開発をした話
Avatar for KNR knr109
2
4.3k
(新人)エンジニアが開発しやすいREADMEの書き方
Avatar for KNR knr109
22
13k
クリエイター広場を作りました
Avatar for KNR knr109
0
240

Other Decks in Programming

See All in Programming
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
870
フロントエンドとバックエンドで「1文字」を揃えよう
Avatar for てきめん tekimen youkidearitai
PRO
0
170
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
2
1.6k
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
Avatar for r-kagaya rkaga
3
1.8k
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
240
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
1
710
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
1
690
Moments When Things Go Wrong
Avatar for Aurimas Liutikas aurimas
3
140
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
4
1.3k
AI 時代のソフトウェア設計の学び方
Avatar for 増田 亨 masuda220
PRO
29
12k
技術記事、AIに書かせるか、自分で書くか？ 〜それでも私が自分の手で書く理由〜 / #QiitaConference
Avatar for Junichi Ito jnchito
2
1.3k

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
400
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.6k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
200
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
210
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
51k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
680
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
790
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k

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