youtube版(スライド付き) 関連リンク Claude Code × Claude Design で趣味のアプリを作った話本書は、開発者の広瀬氏がAIコーディングエージェント「Claude Code」とUIモック生成ツール「Claude Design」を駆使し、個人で筋トレ記録アプリを開発した体験レポートです。新人エンジニアにとって、最新のAIアシスタントと協働する「次世代のシステム開発フロー」を学ぶ上で非常に参考になる内容となっています。 1. 開発の概要と技術構成電波の弱いジムでも快適に動くよう「オフラインファースト」を掲げたモバイルアプリを開発。技術選定や詳細設計は、Claude Codeに相談しながら一つずつ決定されました。フロントエンド: Expo SDK 54 (React Native), TypeScript バックエンド: Supabase (Postgres, Auth, RLS) 状態管理: TanStack Query (キャッシュを利用したオフライン対応) 2. AIと人間が協働する「開発フロー」開発は、設計・実装を担当する「Claude Code」と、UIデザインを担当する「Claude Design」をシームレスに行き来しながら進められました。計画・設計（Claude Code）: 要件（オフライン対応、指標計算など）を伝えて、データモデルや画面構成、分割されたタスクの提案を受け、対話しながら設計を決定。プロジェクト専属「Skill」の育成: 繰り返し行う手順（型定義の再生成、UIスタイルガイドなど）をMarkdown形式の手順書（Skill）として定義。AIが自律的にこれを参照して開発を進める仕組みを構築。デザインモックの生成（Claude Design）: Claude Codeに詳細なデザイン仕様を書き出してもらい、それをClaude Designに渡すことでイメージに沿ったUIモック（JSX）を生成。実装（Claude Codeへの受け渡し）: モックのデザインファイルをClaude Codeに読み込ませ、React Nativeの実装コードへ自動変換。ズレの監査とテスト: 自動でモックと実装コードの差分をチェックする監査エージェントを動かしつつ、最終的には自身の目で実機確認。また、コードの崩壊を防ぐため、機能ごとにJest（ユニットテスト）やMaestro（E2Eテスト）によるテストをこまめに実行。 3. 新人エンジニアが持ち帰りたい教訓 AIに毎回同じ説明をしない: 共通の前提やルールをあらかじめドキュメント（Skill）にまとめておくことで、指示の精度が上がり、開発テンポが向上します。こまめなテストで手戻りを防ぐ: AIは高速に大量のコードを出力するため、最後にまとめて確認するとバグの特定が困難になります。テストを小刻みに挟むことが成功の秘訣です。「作る楽しさ」を主目的にする: 評価軸や技術選定をすべて自分で決められる「趣味の個人開発」は、エンジニアとしての視野を広げ、結果として業務に活きる大きな経験値となります。最新ツールを組み合わせることで、一人でも設計・デザイン・実装・テストの全工程を高品質に回し切れる、夢のある開発手法を示した好例です。引用元: https://blog.asial.co.jp/6808/ AIウォーターフォール開発：コンテキストゼロのAIを一人前にする仕組み本書は、AIを活用したシステム開発において、AIが過去の設計判断やドキュメントのつながりを理解できないという課題を解決するための新しい開発手法を提案しています。 1. AI開発における課題：記憶喪失の「新人」 Claude Codeなどの高度なAIツールは非常に優秀ですが、セッションを開始するたびに記憶（コンテキスト）がリセットされてしまいます。プロジェクトの背景や過去の意思決定をその都度説明し直す必要があり、まるで「毎朝記憶を失ってやってくる新人エンジニア」に指示を出すような状態になってしまいます。ただ関連資料を渡すだけでは、仕様の矛盾や他への影響範囲にAI自身が気づくことは困難です。 2. 解決策：ドキュメントの「トレーサビリティ（追跡可能性）」この課題を解決するため、従来のウォーターフォール開発が持つ「トレーサビリティ（設計のつながりを追いかけられる状態）」の仕組みを導入します。「どの要件が、どの仕様に紐づき、どのテストで検証されるか」というドキュメント同士の「つながり」を、AIが自分で辿れるように設計します。具体的には、以下のレイヤーでドキュメントを体系化し、相互に関連付けます。 ADR（設計判断の理由・背景） REQ（要件） SPEC（仕様） BF（業務フロー） TC（テストケース） src（実際のソースコード） 3. 推進するための技術的アプローチこれらをAIに効率よく理解させるため、著者は以下の技術を組み合わせています。グラフデータベース（Neo4j）の活用: ドキュメントを「点（ノード）」、関係性を「線（エッジ）」として登録し、ドキュメント同士の「つながりの地図」を作ります。 GraphRAGによる検索の最適化: グラフ構造を辿ることで、関連する情報だけをピンポイントで検索し、AIに渡す情報を最小限に抑えます。 AIの行動のパターン化: 実装前に影響範囲を自己評価させる /impact-report や、仕様の矛盾をチェックする /spec-check などのカスタムコマンドを整備。「いきなりコードを書かせず、まず設計の整合性を確認させる」プロセスを徹底します。 CI/CDによる自動化: GitHub Actionsを使い、ドキュメントの参照関係が壊れていないかの自動チェックや、プルリクエスト時の影響範囲の自動レポートを行います。まとめ AI開発で本当に必要なのは、ドキュメントを大量に読ませることではなく「関係性を整理して伝えること」です。ドキュメント同士のつながりを可視化し、AIがそれを辿れる仕組み（トレーサビリティ）を作ることで、記憶がリセットされるAIでも、迷わずに安全な開発が行えるようになります。引用元: https://zenn.dev/abalol/articles/579296fa31056f Lookerとセマンティックレイヤーで作る会話分析の運用と評価データ分析において「別の切り口でデータを見たい」という要望への個別対応は、データエンジニアの大きな負担になります。ファインディ社では、Lookerの「会話分析（自然言語の質問に対して、AIが裏でクエリを自動作成・実行して回答する機能）」を活用し、ユーザーが自律的にデータを抽出・分析できる仕組みを構築しました。 ■ 1. セマンティックレイヤー（Explore）を入口にする理由データベースにある生のテーブルをそのままAIに渡すと、データの意味や集計ロジックが曖昧なため、誤った回答の原因になります。そこで、データの定義や集計ルールを1箇所に集約した「セマンティックレイヤー（LookerのExplore）」をAIの参照先に指定しました。これにより、以下のメリットが生まれます。・データの信頼性向上: AIがダッシュボードと同じ定義（SSoT: 正しい単一のデータソース）を参照するため、数値の食い違いを防げます。・コンテキストの最適化: AIに渡す情報が限定されるため、回答精度が向上します。 ※複数データを横断するファネル分析などの弱点に対しては、ユーザー行動を1行にまとめた「累積ファクトテーブル」をあらかじめ用意してExplore化することで解決しています。 ■ 2. エージェントのGit管理とCI/CD AIエージェントのシステムプロンプトや設定をGUI（画面）で直接編集すると、変更履歴が追えなくなります。そこで、エージェント定義をYAMLファイルに書き出してGitで管理し、GitHub Actionsを通じて自動でLookerに反映する仕組みを導入しました。 ■ 3. 回答品質を担保する「2軸評価」プロンプトや定義の変更が回答精度にどう影響したかを検証するため、CIで自動評価する仕組みを構築しました。・軸1（LLMによる採点）: Vertex AIの評価サービスを使い、別のLLM（LLM-as-a-Judge）が「指示に従えているか」「読みやすいか」などを客観的に段階評価します。・軸2（クエリの機械的検証）: AIが実際に発行したSQLクエリが、意図したテーブルやフィルタを使っているかをテスト（アサーション）で厳密に検証します。評価結果はプルリクエストに自動コメントされ、ユーザーからのフィードバックをもとに評価ケースを継続的にアップデートしています。 ■ 成果 Lookerユーザーの約半数が会話分析を活用するようになり、社内からのデータ抽出依頼はほぼゼロになりました。データチームは単純作業から解放され、より高度なデータ活用や分析業務に注力できるようになりました。引用元: https://tech.findy.co.jp/entry/2026/06/08/080000 素人でも手軽に“それっぽい”動画が作れてしまう編集ソフト『nizima ACTION!!』が便利すぎた。ずんだもんのLive2Dが簡単に動かせるし、リップシンクだってワンボタンでつけられちゃう。作業はブラウザ上で完結するので超気軽に動画制作を始められる Live2D公式の無料オンライン動画エディター『nizima ACTION!!』の紹介です。ブラウザ上で動作するためインストール不要で、手軽に動画制作を始められます。最大の特長は、音声合成ソフト「VOICEVOX」が内蔵されている点です。ずんだもんなどの音声や字幕をエディタ内で直接作成でき、さらにワンボタンでLive2Dモデルにリップシンク（口パク）を適用できます。素材連携も豊富で、初心者でも直感的に高品質な動画が作れます。引用元: https://news.denfaminicogamer.jp/kikakuthetower/260608n お便り投稿フォーム（株式会社ずんだもんは架空の登場組織です）

Ask this episode

“What did the council decide on item 42?” — answered with the speaker and the moment.

Transcript

Related