Slide 1

Slide 1 text

Almondo流!AI駆動開発 〜デザインと実装の未来/TDD開発〜 0→1から運用まで見据えた、 高速・高品質なソフトウェア開発への挑戦 依田 拳太郎 (Yoda Kentaro) Almondo Inc. 20250523

Slide 2

Slide 2 text

自己紹介 依田 拳太郎 Kentaro Yoda 株式会社 Almondo 経歴 42Tokyo Common Core 修了 医療系スタートアップ フルスタックエンジニア Next.js・PHP・AWS を活用し、フルスタックエンジニアとしてプロダクト開発に従事 株式会社 Almondo バックエンド・インフラ統括 SaaS 開発チームでバックエンドおよびインフラのリードを担当。AI サービスのバックエンド/イン フラの設計・実装・運用を統括 株式会社 Almondo AI ソリューション事業 PM/エンジニア/ソフトウェアチームマネージャー 複数案件の進行管理とエンジニア育成を担当。要件定義から実装まで幅広く携わり、開発プロセスの 標準化とマネジメントを推進

Slide 3

Slide 3 text

概要  問い "エンジニアだけどデザインも…""個人開発で全部やるのが大変…""同じコードを何度も書く..." そんな事思ったことはありませんか? もし、AIがデザインから実装までをシームレスに繋ぎ、 高速な試行錯誤と品質維持を両立できるとしたら?  本日のアジェンダ 1. バックエンド 2. フロントエンド 3. まとめ バックエンド開発の「壁」とAIへの期待 AlmondoのAI駆動開発:基本戦略と活用の心得 Almondo流AIエージェント活用術①: AIによる「暗黙知」の形式知化 Almondo流AIエージェント活用術②: TDD × AIによる高品質・高効率な開発フロー 総括:AI駆動バックエンド開発がもたらす価値 なぜ「デザイン×AI」なのか? 従来のAIデザインツールの課題 Almondoが目指す理想の開発体験 Almondo流!Cursor と Storybook による AI駆動開発フロー

Slide 4

Slide 4 text

バックエンド開発、こんな「壁」ありませんか? AIでこれらの「壁」を壊し、 開発をもっとスムーズにできないか?      開発標準が バラバラ...  言語、フレームワーク、インフラ、開発フ ローの統一ができない  技術継承も困難な状況 属人化した ノウハウ  個人の経験に依存する開発プロセス  新メンバーの立ち上がりに時間がかかる 開発スピード が上がらない  手戻りや修正が多発  品質を担保するには時間が必要

Slide 5

Slide 5 text

AIを「賢い相棒」に!AlmondoのAI駆動開発  AI活用の心得 AIは万能ではない。過度な期待は禁物。「どう使うか」が重要。  Almondoの基本戦略  目指すは「AIとの協調」による開発力向上    繰り返し可能な判断はAIへ 人間は本質的な思考に集中。ルールや手順など、繰り返し可能な判断はAIに委任して効率化。  AIで一貫性を担保 開発フローや実装スタイルをAIがサポート。統一された基準でプロジェクト全体の品質を維持。  開発者はAIと対話し判断 AIを壁打ち相手に、設計やレビューにおいて、仕様の背景や目的を対話的に検討。より良い判断を導く。 

Slide 6

Slide 6 text

チームの知恵をAIで「見える化」:開発基盤の強化  狙い AIでチームの「暗黙知」を「形式知」に変え、 属人化を防ぎ、開発の標準化を促進  AIによる言語化プロセス  効果  属人化の解消 特定のメンバーに依存していた知識やノウハウを共有財 産化  ナレッジ共有の促進 チーム内の暗黙知が形式化され、全メンバーがアクセス 可能に  オンボーディング効率化 新規メンバーの立ち上がり時間を短縮し、早期の戦力化 を実現 ルールの明文化  プロジェクト固有のルール、慣習などをAIとの対話を通じて書き出し 例:命名規則、エラーハンドリング方針など 隠れた判断基準の発見  AIが既存コードからパターンを学習し、暗黙の判断基準や設計意図を顕在化  コード解析  対話的質問  パターン認識 継続的なブラッシュアップ  AIとの対話を繰り返し、言語化された内容の精度を向上させる継続的な改善  時間とともに精度が向上 → チームの知的資産に 1 2 3

Slide 7

Slide 7 text

「TDD × AI」で安定とスピードを両立する開発フロー ? なぜAI開発にTDD(テスト駆動開発)? AIに「良い感じに」は通用しない。AIには明確な「ゴール」と「制約」が必要。 TDDがAIの能力を最大限に引き出す道しるべとなる。  TDDがAI開発にもたらす主なメリット  明確なゴール設定 テストがAIの「目的」と「完了条件」を明確に定義  実装範囲の限定 AIがどこまで何をすべきか明確に定義できる  AIの迷走防止 実装のブレを減らし、AIが複雑な問題に深入りするのを防ぐ  生きたドキュメント テストコードがAIへの仕様伝達手段として機能  Almondo流 TDD×AIサイクル   AIによる的確なサポートで、開発の安定性と品質を向上  1. テストを書く [AI]   2. レビューする [人]   3. 実装する [AI]   4. レビューする [人]   5. リファクタリン グ [人&AI]

Slide 8

Slide 8 text

 Almondoが考える「AI駆動バックエンド開発」の提供価値  開発効率UP  定型作業の自動化  手戻りの削減  反復タスクの効率化  属人化を解消  ノウハウの共有促進  チーム全体の能力向上  新メンバーの立ち上がり短縮  品質安定&向上  ルール遵守の自動化  TDDによる品質担保  一貫した実装スタイル  創造性の解放  単純作業からの解放  本質的な課題への集中  創造的思考の時間確保 AIとの協調が生み出す、バックエンド開発の未来  AIとのより良いパートナーシップで、 高速・高品質な開発を実現しましょう

Slide 9

Slide 9 text

はじめに:なぜ「デザイン×AI」なのか?  従来のFigma中心のデザインプロセス 課題 意図の齟齬やコミュニケーションコスト 修正・変更に手間がかかる デザインと実装の一貫性維持が難しい  AIの進化とフロントエンド開発の変化  v0.dev等AIによるUI構築ツールの登場 「コードを用いてデザインする」時代の幕開け  Almondoではデザインをどうしていたか エンジニアがFigmaでデザインまで行っていた 引き継げない 育成コストが高い  → 実際にAIのUI構築ツールを用いて エンジニアがデザインできないかと考えた  静的なデザインカンプをデザイナーが作成  エンジニアが手作業でコードに「翻訳」  デザイナー→エンジニアへの受け渡しが発生  デザインと実装の間にズレが生じる

Slide 10

Slide 10 text

従来のAIデザインツールの課題 VS  主な課題と限界 課題 1 チャットセッションの独立性  複数画面開発時のコンテキスト維持が困難 各セッションが独立しているため、全体的な一貫性を保つのが 難しい 課題 2 生成コードの編集同期不可  v0: エディタ変更が同期されない 0→1開発には有用だが、反復的な開発プロセスには不向き 結論  中規模以上のシステム開発での 一貫したデザイン管理が困難  AI設計ツールのメリット  自然言語でUI生成 テキストプロンプトからUIデザインを自動的に 生成  高速なデザイン試行 短時間で複数のデザイン案を生成・比較可能  コード生成 デザインと同時に実装可能なコードを生成

Slide 11

Slide 11 text

理想の開発体験  v0のような対話型UI生成体験 AIとの対話でUIデザインと実装を一気通貫  デザインの即時フィードバック  会話形式での反復的な改善  一貫したデザインルールの適用 システム全体で統一されたUI/UXの実現  コンポーネント間の統一されたスタイル  全画面での一貫したユーザー体験  Figma代替としてのデザイン運用 コードベースでのデザインの継続的なメンテナンスと俯瞰的な確認  デザインの変更履歴管理  プロジェクト全体の一覧性確保  エンジニアでもデザインできる環境 デザイナーとエンジニアの垣根を取り払う新しいワークフロー  専門知識なしでのデザイン生成  デザイン→開発のサイクル短縮 これらを実現するためのアプローチとは?  私たちが求める理想の姿

Slide 12

Slide 12 text

 高速開発  品質向上  効率的な反復 Almondo Almondo Almondo Almondo Almondo流! 流! 流! 流! 流! 統一されたデザインとコンポーネントによる 高品質な画面を効率的に生成する +      Action 

Slide 13

Slide 13 text

Cursor と Storybook によるデザインから開発まで AI・デザイン・コンポーネントが融合する新しいワークフロー  シームレスなデザイン・開発フロー  高速開発  一貫したデザイン  チーム協業の効率化    AIエディタ Cursor 対話でUIを高速生成 AIとのチャットで自動コーディ ング アイデアを素早く形に  shadcn/ui & .cursorrules コードベースのUIコンポーネン ト群 開発ルールの定義と適用 デザインの一貫性を実現  Storybook UIコンポーネントを一覧化・可 視化 デザインの確認・テストを効率 化 Figmaのようなデザイン運用

Slide 14

Slide 14 text

実際にstorybookをホスティング コンポーネントライブラリをブラウザですぐに確認できる環境 Almondo Component Library - Storybook Almondo UI Components Button Primary Secondary Input Field 入力してください... Card Card Title Card content goes here Badge NEW INFO SUCCESS  今すぐアクセス! QRコードをスキャンして 実際のStorybookをご覧ください  Storybookを開く 実際に活用しているStorybookをホスティングして公開しています!  デザイン確認  コンポーネント共有  リアルタイム更新 

Slide 15

Slide 15 text

ご清聴ありがとうございました! ご清聴ありがとうございました!  AI駆動開発のキーポイント 暗黙知の明文化 AIとの対話によるチーム内暗黙知の言語化・共有の実現 TDDの活用 テスト駆動開発によるAIの迷走防止と品質担保 デザイン×AI CursorとStorybookによる効率的なUI開発プロセス 開発効率向上 属人化の排除と高速な開発サイクルの実現 依田 拳太郎 Kentaro Yoda | Almondo Inc. 質問はXで!