Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
@taishi_jade Taishi Yamasaki お前も生成AI鬼にならないか?
Slide 2
Slide 2 text
自己紹介 Taishi Yamasaki C E O A l p h a B y t e , I n c . @ t a i s h i _ j a d e 元々シリコンバレーで起業してCTO プログラミングは独学 + Computer Science Z世代向けのアプリ作ってた 月1プロダクトリリース AI関連のアプリ/SaaSの開発 生成AIプロダクトのPoC/MVP/R&Dの支援
Slide 3
Slide 3 text
日本版プロダクトハント 開発したプロダクトを投稿するプラットフォーム 1~2週間で開発/リリース 1日2~4時間くらいのコミット Bolt / Cursor / Supabase / Vercel Solomaker.dev 個人開発を盛り上げたい 🎉
Slide 4
Slide 4 text
画像/動画/音声/声など全部生成できる 3週間くらいで開発 1日2~4時間くらいのコミット Windsurf/Cursor/Supabase/Vercel Stripe/Sentry EIZO.AI 生成の喜びを感じまくりたい
Slide 5
Slide 5 text
生成AIアプリ 生成AIで生活やエンタメ変えまくり GRWM HabitMax MONA アプリ技術スタック ✅ expo + React Native (Since 2016~) AIエディタ ✅ Cursor / Windsurf バックエンド ✅ Supabase / Firebase
Slide 6
Slide 6 text
生成AI駆動開発の破壊力
Slide 7
Slide 7 text
1 Bolt Web上でフロント/バック/DB/認証/デプロイ/ モバイルアプリなどの開発が完結可能 Curor & Windsurf AIでコードが書けるエディタ VSCodeのようなユーザビリティでAIがデフォル トで使える Next.js + Vercel 最強コンボ Next.jsを使っていればCI/CDなど何も考えなく ていい
Slide 8
Slide 8 text
Supabase Supabaseは、Firebaseの代替となるOSSのバッ クエンドサービスで、DB・認証・ストレージを 提供 Radix UI React向けのカスタマイズ可能なUIコンポーネ ントライブラリ Sentry アプリケーションのエラーログやパフォーマン スをリアルタイムで監視するバグトラッキング &エラーモニタリングツール
Slide 9
Slide 9 text
構造生成 技術スタック選定 ライブラリ選定 アーキテクチャ設計 DB/バックエンド設計 インフラ/デプロイ 詳細修正 瞬速公開 Githubにプッシュでデプロイ 環境変数 開発環境構築 1 2 3 QA + 修正 UI/UX調整 コンポーネント共通化 ロジック抽象化 人力+AIコーディング
Slide 10
Slide 10 text
2 1 3
Slide 11
Slide 11 text
5 4
Slide 12
Slide 12 text
✅GOOD ・全体のページ設計 ・フレームワーク、ライブラリ選定 ・Boltに慣れてたら 1~2時間で全てのページが完成する ❌BAD ・UI…AI感がスゴい 🤮 ・ロジック…認証やDBは未実装(12月上旬) Boltのみで出力した状態
Slide 13
Slide 13 text
Boltだけで完結はしなかった (12月上旬) ローカルにCloneして Cursorでも頑張る
Slide 14
Slide 14 text
1 2 3 4
Slide 15
Slide 15 text
色やレイアウトの調整 Figmaでやるようなデザインコンポーネント の作成をいきなりコードでやる CursorでUI/UXを修正していく
Slide 16
Slide 16 text
躊躇せずに色んなスタイルを試して スクラップ&ビルド CursorでUI/UXを修正していく
Slide 17
Slide 17 text
CursorでUI/UXを修正していく 躊躇せずに色んなスタイルを試して スクラップ&ビルド
Slide 18
Slide 18 text
デザインに関してはデザイナーに任せるのが 本来はベスト でも時間はかかるので省けるならMVPは デザインセンスのあるエンジニアのみでも可 Figmaを最初から完璧に用意するのではなく デザイナーと自然言語で議論しながら進める CursorでUI/UXを修正していく
Slide 19
Slide 19 text
Pro Tips TTTP(徹底的にパクる) 類似サービスのデザインコンポーネントを 観察すると共通点がある 実際に作るとなぜその設計になってるか理由 がわかる CursorでUI/UXを修正していく
Slide 20
Slide 20 text
例: カードUIを使わない UGCは文字数や画像アスペクト比のコント ロールが難しい レイアウトが崩れてることに気づかせないUI 設計 CursorでUI/UXを修正していく
Slide 21
Slide 21 text
自分の味は出すように頑張るけど 仕組み的な部分でエゴを出しすぎると 時間を無駄にするので最初から細かい所に こだわりすぎないこと CursorでUI/UXを修正していく
Slide 22
Slide 22 text
Webサービスに 必要な技術 (これで全部じゃない) SEO対策 ユーザー認証 エディタ機能 OGP生成 ISR SSR SSG メール送信 通知機能 いいね コメント 管理画面 決済処理 自動デプロイ アクセス解析 ストレージ最適化 外部API連携
Slide 23
Slide 23 text
Google社内で25%のコードは 既にAIが書いてる 今はプログラミングの方法が 変わり始めてる 自然言語プログラミングの加速
Slide 24
Slide 24 text
駆動開発は速くなるが 品質が上がるわけではない 引き続き コンピューターサイエンス ソフトウェアエンジニアリング デザイン思考 などは必須 速い≠良い
Slide 25
Slide 25 text
AIが出してくるものを理解する必要 プロンプトでAIがどれくらいできるか 感覚として知っておく必要 QAしてデバッグの繰り返しを高速に AIの守備範囲を理解する
Slide 26
Slide 26 text
ソフトウェアエンジニアの未来 LLMを既存システムに組み込む 生成のプロセス管理(非同期、Webhook、UXフロー設計) 0 to 1のフローならBolt, LovableなどのTxt2Appの活用 Cursor、Windsurfの活用(必須) ClineをGithub Actionに組み込む業務など Devinなどと協業前提でのチーム設計、ワークフロー設計 AIエージェント設計、ノーコード to コードのフロー 開発速度自体は10x当たり前
Slide 27
Slide 27 text
@taishi_jade @ T A I S H I _ J A D E Thank You