![[B-6-1a] 生成AI基礎講座B 「ニュースアプリをつくろう！①」](https://i.vimeocdn.com/video/2133773198-f2a15945b087c0d8b3cc072e52f7efdc68a427534677b31b8cd0c76e9f6a2747-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 Claude Code（ZEAMi）を使ったニュースアプリ開発の実践デモンストレーション第1回。 アイデアからプロット作成まで、AIとの対話を通じて約20分で完成。 「朝起きたらAIニュースを簡単にチェックしたい」という日常のニーズから、MVP設計、API選定まで、実際の開発プロセスを完全公開します。 🎯 動画トピック 📱 ニュースアプリ開発のスタート ・「朝、AIの最新情報を簡単にチェックしたい」というシンプルなニーズ ・UI/UXの知識がない状態からのスタート ・Claude Sonnet 4.5をパートナーにプロット作成 💬 AI主体モードの対話術 ・「あなたが」を繰り返してAIに主体的に考えさせる ・「ベストプラクティス」というキーワードで最適解を引き出す ・知識不足を正直に伝えることで、AIが詳細にリサーチ ・世の中のニュースアプリ（Flipboard、Google News、Apple News）を調査させる 🎯 MVP（最小実用製品）の定義 ・カテゴリボタン付きフィード（AI、テクノロジー、ビジネス等） ・カードスタイルのニュースフィード表示 ・基本的な検索機能 ・コア機能に絞り込む重要性：「MVPが安定してから枝葉を追加」 🔄 News API選定の思考プロセス ・News API → 24時間遅延が判明（致命的） ・GNews API → リアルタイム配信で採用 ・Claude API要約機能の必要性を検討 ・「使いたくないわけではないけれど」で多角的検討を促す ・デメリットも確認：「元記事リンクに飛べますか？」 💡 効果的なAI対話の6つのテクニック ・検索を促す：「しっかり調べて」 ・ベストプラクティスを要求 ・懸念点を明確化：「24時間遅延って何が問題？」 ・バランスを取る：安易な削除を防ぐ ・解像度を上げる：「もうちょっと具体的に」 ・確認を求める：仮定を排除 📋 プロット完成 ・マークダウン形式で体系的に整理 ・開発環境：React + Tailwind CSS ・次回：ZEAMiでの実装フェーズへ 🔑 今回のキーメッセージ 「AIに主体的に考えさせることで、自分の知識を超えた提案が得られる」 → 「あなたが調べて、あなたが提案して」という言葉で、AIが能動的にリサーチ 「わからないことは率直に聞く。AIは嘘をつかない対話相手」 → 懸念点を明確に伝えることで、表面的でない深い理解が得られる 「ベストプラクティスという言葉は魔法の呪文」 → 世の中で最も優れた実装を参考にした提案を引き出せる 「MVPでコア機能をエラーなく固めることが、アプリ開発成功の鍵」 → 安定してから機能拡張。約1時間でアイデアが形になる時代 ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-6-1b] 生成AI基礎講座B 「ニュースアプリをつくろう！②」](https://i.vimeocdn.com/video/2133773369-32d5e0921a544c80af8d98e376b19003f51ba7d6591046c3d40698a436b4c117-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 Claude Codeを使った実践的なニュースアプリ開発の完全ガイド第2弾。 プロジェクトセットアップから、効果的なプロンプト戦略、エラーハンドリングまで、わずか10分で実用レベルのアプリを完成させる全工程を公開。 「理解の確認→開発指示」の2段階アプローチで、AIが自律的に高品質な開発を進める方法を実演します。 🎯 動画トピック 📍 プロジェクトセットアップの基本 ・Finderでのディレクトリ作成（Develop/newsapp） ・Claude Codeで新しいプロジェクトを追加 ・Skip Permission Mode活用で一つ一つの確認をスキップ ・スムーズな開発環境の構築方法 ⚡ 効果的なプロンプト戦略の実践 ・いきなりコードを書かせない：理解確認の重要性 ・第1段階：「内容を理解してください。まだコードを書かなくていい」 ・第2段階：理解確認後に「では開発を始めてください」 ・AIに「言語化させる」ことで誤った方向の開発を防ぐ 💡 ベストプラクティス指示の重要性 ・「あなたのベストプラクティスで開発してください」→AIの専門知識を最大限活用 ・「しっかりエラーハンドリングをしてください」→自己修正能力の向上 ・「テストもしながら確認してください」→品質保証の自動化 ・「最後まで開発を進めていってください」→完成までの継続性確保 ・これらの指示を最初に与えることで自律的な高品質開発を実現 🎮 驚異的な開発速度と完成度 ・開発方針決定：約1分 ・コード記述：約10分 ・合計わずか10分で実用アプリが完成 ・完成した機能一覧： - カテゴリー別ニュースフィード（テクノロジー、ビジネス、エンタメ、スポーツ、AI） - リアルタイム検索機能 - 記事詳細表示と元記事リンク - キーワードハイライト - 読了時間・相対時間表示（18時間前など） - レスポンシブUI/UX - 包括的なエラーハンドリング 🔧 APIキー設定とエラー対処の実践 ・News APIでのAPIキー取得（ログインで即表示） ・アプリへのAPIキー設定方法 ・エラー発生時の対処法：スクリーンショットを送るだけ ・CORSエラーなどをAIが自動診断・修正 ・ローカルサーバーでの起動指示 ・専門知識不要のシンプルな問題解決プロセス 📝 動作確認と評価 ・各カテゴリーでニュースが正しく表示 ・「元記事を読む」ボタンが機能 ・時間表示（18時間前、16時間前など）が正常動作 ・カテゴリー切り替えがスムーズ ・開発開始から10分で8割方は完璧に動作 🚀 特定された改善点と次のステップ ・AIカテゴリーで1記事しか表示されない問題 ・カテゴライズ精度の向上（AIのカテゴリーマッピング改善） ・ニュースの鮮度向上（より最新の記事を優先表示） ・パーソナライゼーション機能の追加 ・次回動画でこれらの改善に取り組み、毎日使えるアプリへ進化 🔑 今回のキーメッセージ 「まずAIに理解させ、言語化させる」 → いきなりコードを書かせるのではなく、理解の確認を挟むことで、誤った方向での開発を防ぎ、品質を確保できる 「ベストプラクティス・エラーハンドリング・テストを指示する」 → 開これらを明確に指示することで、AIが自律的に高品質な開発を進め、人間の介入を最小限に抑えられる 「スクリーンショットを送るだけでエラー解決」 → 専門知識がなくても、画面を撮って送るだけでAIが問題を診断・修正してくれる。繰り返しこの方法を使うことで、ほとんどのエラーは解決可能 「10分で8割完成、フィードバックで100%へ」 → 従来なら数時間～数日かかる開発が10分で実用レベルに。初回で完璧でなくても、継続的改善で理想のアプリへと進化させられる ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-6-1c] 生成AI基礎講座B 「ニュースアプリをつくろう！③」](https://i.vimeocdn.com/video/2133769840-385d8ae468d0dde5a8ce50cedf98175c9d96df19d4f6c4846127afced55e7e9f-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ニュースアプリ開発シリーズ第3弾。前回作成したアプリの3つの課題（AIカテゴリー表示問題・記事の鮮度・重複表示）を、Claude Code（ZEAMi）を活用して段階的に解決していきます。 特に重要なのは、対症療法から「根本解決」へのアプローチ転換。同じ問題が繰り返される時の突破口となる実践的デバッグ技術を学びます。 🎯 動画トピック 🐛 AIカテゴリー表示問題の解決 ・「記事が見つかりませんでした」が表示される原因特定 ・検索バーでは動くのにカテゴリーでは動かない矛盾の調査 ・F12キー不要：AIにログ確認を依頼する新しいデバッグ方法 ・検索クエリ「AI OR 人工知能」→「AI」へのシンプル化で解決 💬 AIへの効果的な質問方法 ・状況説明の具体性：「古い」ではなく「1日前のものが多い」 ・手段を限定しない調査依頼：「APIの問題？改善できる？」 ・音声入力の活用で自然な対話を実現 ・一つずつ対応することの重要性：複数指示でAIが混乱する理由 📰 ニュース記事の鮮度問題と多言語対応 ・GNews APIの日本語ニュース制限を発見 ・並び順パラメータ未設定と国指定絞り込みの影響 ・英語ニュース追加で表示件数が10件→20件に倍増 ・2つのAPI同時呼び出しによるパフォーマンス最適化 🔄 新規ターミナルセッションの戦略的活用 ・開発履歴が長くなった時のリフレッシュ方法 ・「New Session」で別のAIインスタンスとして機能 ・プロジェクト理解から始める重要性 ・新鮮な視点で根本的解決策を見つける ❌ 記事重複問題：対症療法の限界 ・第1回修正：URLとタイトルで重複チェック → 一部残る ・第2回修正：URL正規化とタイトル正規化強化 → 依然として発生 ・「こうじゃないからこうします」の繰り返し ・小手先の修正では解決しないサイン ✨ 「根本解決」アプローチの実践 ・新規セッションで「根本解決したい」と明示的に依頼 ・AIが発見した3つの構造的問題 ① URL正規化が不十分（クエリパラメータ、大文字小文字） ② タイトル正規化の限界（わずかな表記ゆれ） ③ カテゴリー間の重複管理がない（スコープが狭い） 🛠️ 三層アプローチによる包括的解決 ・第1層：URL正規化（あらゆるパターンに対応） ・第2層：タイトル類似度判定 ・第3層：コンテンツハッシュ比較 ・スコープ拡大：「1回のAPI呼び出し」→「セッション全体」 ・結果：20件の重複が5件に減少 🔑 今回のキーメッセージ 「AIにログを確認させる時代」 → F12キーやOption+Command+Iは不要。「ログを確認してください」と依頼するだけ 「状況を伝え、手段はAIに考えさせる」 → 「〇〇だからこうして」ではなく「〇〇だけど、どう思う？」が効果的 「一つずつ、確実に」 → 複数の改善を同時依頼すると混乱。一つ解決してから次へ 「対症療法が続いたら新規セッション」 → 「こうじゃないからこうします」の繰り返しは根本に到達していないサイン 「『根本解決したい』という言葉の力」 → この一言で、AIが症状ではなく原因を分析し始める。構造的問題の特定を促す魔法のキーワード 「症状を直すのではなく、原因を直す」 → 個別の重複修正から、包括的な管理システム実装へ。持続可能で保守しやすいコードを生み出す本質 ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-6-2a] 生成AI基礎講座B 「チャットボット開発の裏側①」](https://i.vimeocdn.com/video/2133772734-13d21e860dafa836c69ed126b52bb4ccd1d78c968b3f6489377a0f71e073b0d6-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 福岡県糸島市・伊都の杜自治会で実際に運用されているAIチャットボットの開発実例を完全公開。 750世帯が登録する公式LINEの対応業務をAIで効率化し、24時間自動応答を実現した舞台裏を解説します。 「自治会長に成り代わって答えるAI」がどのように誕生したのか、開発の全プロセスを振り返ります。 🎯 動画トピック 📍 開発の背景と課題 ・公式LINE「伊都の杜ライン」750世帯の対応業務 ・即座の返信ニーズと自治会長の負担軽減 ・「AIの処理速度」と「人間の対応」の使い分け ⚡ チャットボットの実力をデモ ・基本的な質問対応（自治会費・ゴミ収集日・防犯カメラ） ・視察対応への活用（今年4回の視察実績） ・複雑な相談への段階的対応フロー ・実例：「公園の街灯が24時間点灯してうるさい」への対応 💡 相談対応の設計思想 ・Step 1: 共感と受け止め「ご不安なことと存じます」 ・Step 2: 感謝の表現「ご意見ありがとうございます」 ・Step 3: 自治会の姿勢明示 ・Step 4: 対応可能性の提示 ・Step 5: 詳細情報の収集 ・Step 6: 次のアクション提示 🛠️ 開発環境と技術 ・ZEAMi（Claude Codeベース）での開発プロセス ・AIとの対話を通じた開発履歴の振り返り ・RAG構造（検索拡張生成）の実装 ・自治会資料を知識ベースとして活用 🎨 UI/UX設計のこだわり ・「LINEが使えれば誰でも使える」徹底的なシンプル設計 ・30-40代だけでなく他地域展開も考慮したユーザビリティ ・質問例の提示で利用ハードルを下げる工夫 ・参考資料の明示による透明性確保 ・AI回答の限界を明記し、重要事項は人間確認を促す 📊 実際の活用シーン ・自治会費：月額900円、年間10,800円、支払い方法の案内 ・ゴミ収集：毎週月・木曜日の燃えるゴミ ・防犯カメラ：外周13箇所の設置状況と録画データ保存ルール ・環境活動：年2回（5月・10月）の清掃活動案内 🚀 今後の展開 ・チャットボットの愛称募集（現在「Eddie」は仮称） ・管理画面での会話履歴分析（次回授業で解説予定） ・他自治会・行政・教育分野への横展開可能性 ・データドリブンな自治会運営への活用 🔑 今回のキーメッセージ 「技術的な複雑さを排除し、ユーザーが使いやすいものを作る」 → 高度なAI技術も、インターフェースはLINE並みのシンプルさで提供 「AIと人間の役割分担を明確にする」 → 即答できる情報はAI、重要な判断は人間という使い分けで信頼性を確保 「実際の地域課題をAIで解決する」 → 理論だけでなく、750世帯への実運用で得られた実践知を共有 ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-6-2b] 生成AI基礎講座B 「チャットボット開発の裏側②」](https://i.vimeocdn.com/video/2133769929-5e0d93c7fc8d75acc496e066eef6ea2ceaee29889b3f2c0ece903dbed78f5d3b-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 自治会チャットボット開発シリーズ第2弾。管理画面の詳細解説と、誰でも実践できる「音声入力によるルールブック作成法」を公開。 文章を書くのが苦手でも、スマホに向かって話すだけで高品質なAI用ドキュメントが完成する革新的手法を実演します。 🎯 動画トピック 📊 管理画面の全機能解説 ・ルーム設定：チャットボットの名称、APIキー、プロンプト設定 ・ファイルアップロード：ルールブックやマニュアルの登録方法 ・使用量ダッシュボード：チャット数とコスト管理の可視化 ・自治会費での運営を前提とした予算管理機能 🎤 音声入力による効率的コンテンツ作成 ・「書かずに話す」アプローチの実践 ・タイピングの3〜5倍の速度で高品質ドキュメント作成 ・高齢者や技術が苦手な人でも参加可能な仕組み ・移動中や家事をしながらでもコンテンツ作成が可能 💡 AIを活用したルール構成の設計 ・「自治会のルールにはどんな項目が必要か」をAIに質問 ・総則、会員、会費、組織、環境美化、防犯・防災、交通安全など網羅的な構成案を取得 ・提案された構成を「アウトライン」として活用 ・必要な項目だけを選んで話せばOK（完璧主義不要） 📝 マークダウン形式でルールを作る理由 ・AIが最も読み込みやすく構造を正確に理解できる形式 ・見出し、リスト、表などの階層構造を明確に認識 ・高速処理と正確な情報抽出を実現 ・PDF、Word、HTMLなど様々な形式への変換が容易 🔧 実演：音声からルールブックへの変換プロセス AIに自治会ルールの構成を提案してもらう 提案された構成を見ながら音声で内容を話す 音声を文字起こし（Whisperなど） AIに「この内容をマークダウン形式で整理して」と依頼 完成したルールブックを管理画面にアップロード ⚙️ プロンプト設計の実践 ・「生成AI基礎講座A-2：自分好みのメタプロンプトを作ろう」の活用 ・自治会長の分身として機能するAIの設計 ・役割、トーン、注意事項を明確に定義 ・伊都の杜の特性（子育て世代が多い）への配慮 ・過度な期待を持たせない細やかな配慮 🎯 実際のデモンストレーション内容 ・Claude Sonnet 4.5やEddieエージェントを使用 ・「名称は伊都の杜自治会、事務所の所在地は...」と自然に話す ・AIが自動的に構造化されたマークダウンを生成 ・項目ごとに見出し、リスト、表形式で整理 📊 コスト管理の重要性 ・月次でのAPI使用料金の可視化 ・自治会費での持続可能な運営を実現 ・予算超過を防ぐリアルタイムモニタリング 🔑 今回のキーメッセージ 「論理的に文章を書くのは難しい。でも話すことは誰でもできる」 → 音声入力とAIの組み合わせが、コンテンツ作成の民主化を実現 「マークダウンはAIが最も理解しやすい形式」 → 既存のPDFやWordも、AIに変換を依頼するだけで最適化できる 「素材が大事。素材さえ整えば、あとはAIが形にしてくれる」 → 自治会で「話せる人」が1〜2人いれば、ルールブック作成は完了 「MVP（最小限の機能）をまず完成させる」 → チャットボットは「育てるもの」。完璧を目指さず、継続的改善が重要 ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-6-2c] 生成AI基礎講座B 「チャットボット開発の裏側③」](https://i.vimeocdn.com/video/2133770147-56c88634e45bd8b92aeea570455cd6969210ad04705729718046136a6a588787-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 チャットボット開発プロジェクトの完全振り返り。 AIとの対話を通じて開発経緯を整理し、プレゼンテーション資料を自動生成する実践例。 RAGシステムの技術詳細、3-4時間で実用レベルに到達した開発プロセス、そしてAIを活用した効果的な振り返り手法を解説します。 🎯 動画トピック 📍 プロジェクト全体の振り返り ・地域コミュニティ向けAIチャットボットの開発背景 ・3階層アクセス制御（スーパーアドミン/ルーム管理者/住民） ・開発期間：初期構築2時間、精度向上含め合計3-4時間 ・デプロイ後の実運用とチューニング過程 ⚡ 技術スタックと選定理由 ・フロントエンド：Next.js、React、Tailwind CSS ・バックエンド：Next.js API Routes ・データベース：Supabase（ベクトル検索対応） ・AI：OpenAI GPT-4o mini（コスト効率重視） ・デプロイ：Vercel 💡 RAGシステムの実装詳細 ・ファイルアップロード→テキスト抽出→チャンク分割の流れ ・マークダウン見出し/文末/単語境界での分割工夫 ・各チャンクへの親セクション見出し自動付与 ・エンベディング生成とSupabaseへの保存 🎮 検索精度85%→90%への向上施策 ・ハイブリッド検索の実装（ベクトル検索+キーワード検索） ・固有名詞や数値の誤り問題を解決 ・ベクトル検索：意味的類似性の理解 ・キーワード検索：完全一致で正確な情報取得 📝 ユーザー体験の最適化 ・ストリーミングレスポンスで待ち時間ストレス軽減 ・回答制約設定：参考情報に基づいてのみ回答 ・「推測しない、一般知識から補足しない」厳格なルール ・24時間対応と管理者負担の軽減 🚀 セキュリティとコスト管理 ・パスワード認証とCookie認証 ・OpenAI APIキーの暗号化 ・使用量ダッシュボード（過去30日間の推定コスト表示） ・GPT-4o mini採用によるコスト最適化 🔑 AIとの対話を活用した振り返り手法 ・開発後にAIへ「これまでの経緯を説明して」と依頼 ・技術スタック、RAGシステム、エラー対応の詳細説明を取得 ・「全然知らない人にプレゼンしたい」とさらに要約依頼 ・構造化されたプレゼン資料が自動生成される 💡 今回のキーメッセージ 「最初にプロットをしっかり固めることが成功の鍵」 → 後から機能追加は時間がかかりエラーも発生しやすい。やりたいことを明確に定義してから開発を始めることで、3-4時間での完成が可能に。 「AIに説明させることで自分の理解が深まる」 → 開発中はAIに任せている部分も多い。完成後に振り返り対話をすることで、技術的な理解が定着し、プレゼン資料としても活用できる。 「Claude Codeのような開発環境でも対話は普通にできる」 → ターミナルベースの環境でも、こうした振り返り対話を積極的に活用することで、学びを最大化できる。 ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-6-3a] 生成AI基礎講座B 「CSV管理ダッシュボードをつくろう①」](https://i.vimeocdn.com/video/2133769769-d521f6e65380ecc153c16cb4983895cc674c61e5203b0394326ba9312f3f130c-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 freee会計のCSVデータから自分専用の財務ダッシュボードを作る開発実践の第1回。 既存の会計ソフトダッシュボードは「機能が多すぎて使いにくい」という課題を解決するため、Claude Codeでの開発に挑戦。 開発を始める前に、AIと対話しながら「プロット（仕様）」を固めていく過程を実演します。 🎯 動画トピック 💼 CSV管理ダッシュボード開発の背景 ・日々の仕訳業務に追われ、会社全体の数値把握が不足している現実 ・freee会計など既存ダッシュボードの「機能過多」問題 ・自分にとって本当に必要な情報だけを集約したツールの必要性 ・CSVデータを活用して手に馴染んだダッシュボードを作る意義 📊 既存ダッシュボードの課題 ・様々な企業ニーズに応えるための機能過剰搭載 ・どの機能が何を表示するのか理解しにくい ・必要な情報を得るために複数画面を確認する非効率性 ・個人やチームの特定ニーズに合わせたカスタマイズの困難さ 🤖 AIとのプロット（仕様）作成プロセス ・開発前に「どう作るか」をAIと壁打ちして固める重要性 ・テレチャット（Claude Sonnet）を使った対話の実演 ・CSVデータをAIに効果的に理解させる方法 ・スクリーンショット画像とテキストを組み合わせた情報提供 ・データ構造（日付、勘定科目、金額、取引先等）の認識確認 🚀 開発方向性の決定 ・Webベースのインタラクティブダッシュボードを選択 ・CSVアップロードだけで即座に可視化できる利点 ・Google Spreadsheet連携やデスクトップアプリとの比較 ・元のサービスからデータをエクスポート→そのままインポートの簡便性 💡 「AIに考えさせる」対話戦略 ・自分で答えを出さず、AIに提案させることの重要性 ・「私はファイナンス担当だが経験が浅い」と正直に伝える ・「AIスタートアップの視点で必要な財務情報を提案して」と依頼 ・具体的な項目を列挙するのではなく、課題感と立場を伝える ・AIからの提案で自分では思いつかなかった視点を獲得 📈 AIスタートアップに必要な財務指標 ・キャッシュの健全性：Runway（資金が尽きるまでの期間）、バーンレート ・コスト分析：主要コストカテゴリ、固定費vs変動費の比率 ・トレンドと異常検知：支出トレンド、取引先別ランキング ・戦略的視点：月次・四半期KPI、予算vs実績比較 ・ダッシュボード構成の具体的な提案をAIから引き出す 🎓 汎用性の高い学習内容 ・会計ソフトのCSVに限定されない応用可能性 ・販売データ、顧客データ、アクセスログなど様々なCSVに対応 ・「自分の課題感」と「自分の立場」を明確に伝える重要性 ・AIの提案を受けながら開発を進める協働アプローチ 🔑 今回のキーメッセージ 「自分で具体的な項目を列挙するのではなく、AIに『課題感』と『自分の立場』を伝えて提案させる」 → 自分では思いつかなかった重要な視点を得られる。これが「AIに考えさせる」アプローチの核心 「既存ダッシュボードは機能が多すぎて、どれが何の機能かわからない」 → 自分専用のシンプルなダッシュボードを作ることで、日々の業務効率が劇的に向上 「開発前にプロット（仕様）を固めることで、実際の開発がスムーズに進む」 → AIとの対話を通じて、何を作るべきかを明確にすることが成功の第一歩 📺 次回予告 次回の動画では、今回固めたプロットを基に、実際にClaude Codeで開発を進めていきます。Webベースのインタラクティブダッシュボードが形になっていく過程をお楽しみに！ --- 📚 生成AI基礎講座B [B-6-3a] 🏫 セナリ学院（SENARI ACADEMY）オンデマンドコンテンツ ご不明点や質問はコメント欄までどうぞ！ ┈┈┈┈┈┈┈┈┈┈ 『セナリ学院』とは？🏫✨ ┈┈┈┈┈┈┈┈┈┈ SNS総フォロワー数4.1万人 平野友康が校長を務める 生成AIに特化したオンラインスクールです。 講師の得意分野はデザイナー、開発分野、業務改善、まちづくりなど幅広く、 多角的なアドバイスが可能です！ 今だけ14日間無料体験キャンペーン中！ 下記HPより詳細をご確認ください。 セナリ学院HP: https://www.teleport.jp/scenari/ ┈┈┈┈┈┈┈┈┈┈ ◆公式SNS Instagram: https://www.instagram.com/scenari.teleport/ X(旧Twitter): https://x.com/scenari_AI Facebook: https://www.facebook.com/people/%E3%82%BB%E3%83%8A%E3%83%AA%E5%AD%A6%E9%99%A2-Teleport/61576632806665/ note: https://note.com/scenari_teleport #セナリ学院 #teleport_ai #生成AIスクール
![[B-6-3b] 生成AI基礎講座B 「CSV管理ダッシュボードをつくろう②」](https://i.vimeocdn.com/video/2133773136-7bbccb6be31b3fb572b114f223961dbd4c7eea4fe2c32f1f48d619b0f57f665d-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 前回作成した開発プロットを実際にClaude Codeで実装していく実践編。 AIとの対話だけで、freee会計のCSVデータから財務ダッシュボードを自動生成。 「動くものを作ってから改善する」段階的開発アプローチを体験します。 🎯 動画トピック 📋 開発プロット完成への道 ・前回作成した機能要件に「開発目的」を追加 ・「なぜ作るのか」を明記することでAIの理解度が向上 ・技術スタックはAIに任せ、「何を実現したいか」に集中 ・Claude Codeに渡す最適なプロット構造 💻 開発環境の効率的な準備 ・Finderの「パスバー」機能でターミナルを素早く起動 ・プロジェクトフォルダの作成と管理 ・右クリック「ターミナルで開く」で1秒起動 ・開発作業を効率化する実用テクニック 🚀 Claude Codeでの実装開始 ・freee会計のCSVダミーデータを準備 ・「このデータからどんなツールが作れるか教えて」と自然な言葉で依頼 ・AIによる自動データ構造分析 ・2,000件の仕訳データから重要情報を抽出 📊 自動生成されたダッシュボード機能 ・CSVドラッグ&ドロップでファイル読み込み ・Runway表示とバーンレート自動計算 ・勘定科目別支出の可視化（給料・手当など） ・取引先別分析（上位10社の表示） ・月次トレンドグラフ（収入・支出・純キャッシュフロー） ・収支バランスの異常検知アラート ・コストカテゴリの自動分類 ⚡ わずか数分で完成した実装 ・npm run devで即座にローカル起動 ・総支出1.1億円などの財務指標を表示 ・複数のビジュアルグラフが自動生成 ・モックデータで安全に動作確認 🔧 改善フェーズへの移行 ・実際に使いながら改善点を発見 ・「日次推移が見られないのは残念」と自然な言葉で指摘 ・CSVに含まれる日付データの活用提案 ・仕訳件数の可視化機能を追加予定 ・ターミナル上の対話だけで継続的改善 🔑 今回のキーメッセージ 「開発プロットには機能だけでなく『目的』を書く」 → AIが「この人は何を作りたいのか」を理解することで、実装の質が劇的に向上 「技術スタックはAIに任せ、実現したいことに集中する」 → 選択はClaude Codeが最適判断してくれる 「完璧を求めず、動くものを作ってから改善する」 → わずか数分で基本機能が完成、その後実際に使いながら段階的に進化させる 「自然な言葉でAIと対話すれば、プログラミング知識不要」 → 「せっかくCSVに日付があるのに表示されないのは残念」→即座に実装される開発体験 ご不明点や質問はコメント欄までどうぞ！ ┈┈┈┈┈┈┈┈┈┈ 『セナリ学院』とは？🏫✨ ┈┈┈┈┈┈┈┈┈┈ SNS総フォロワー数4.1万人 平野友康が校長を務める 生成AIに特化したオンラインスクールです。 講師の得意分野はデザイナー、開発分野、業務改善、まちづくりなど幅広く、 多角的なアドバイスが可能です！ 今だけ14日間無料体験キャンペーン中！ 下記HPより詳細をご確認ください。 セナリ学院HP: https://www.teleport.jp/scenari/ ┈┈┈┈┈┈┈┈┈┈ ◆公式SNS Instagram: https://www.instagram.com/scenari.teleport/ X(旧Twitter): https://x.com/scenari_AI Facebook: https://www.facebook.com/people/%E3%82%BB%E3%83%8A%E3%83%AA%E5%AD%A6%E9%99%A2-Teleport/61576632806665/ note: https://note.com/scenari_teleport #セナリ学院 #teleport_ai #生成AIスクール
![[B-6-3c] 生成AI基礎講座B 「CSV管理ダッシュボードをつくろう③」](https://i.vimeocdn.com/video/2133772935-8cf8a5268ddab3ad4b8f46c3f70c0d09b12fce5a7deb6866e2d5eecaba23fb50-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 生成AI基礎講座B [B-6-3c]「CSV管理ダッシュボードをつくろう③」 前回作成したダッシュボードに「ドリルダウン機能」を実装し、より実用的なツールへブラッシュアップ。 全体集計から個別取引まで階層的にデータを確認できる財務管理ツールへと進化させます。 AIとの効果的な対話術、UI改善の実践、機能検証まで、実用ツールを作り込む過程を完全解説。 🎯 動画トピック 🔍 ドリルダウン機能とは ・データを階層的に掘り下げる機能の基礎理解 ・「森を見せているが木が見えない」状態からの脱却 ・第1階層（全体集計）→第2階層（カテゴリ別）→第3階層（個別取引）の3階層構造 ・財務ダッシュボードでの実践的な活用方法 💬 AIとの効果的な対話テクニック ・「まだコードは書かなくていい」で実装前の認識合わせ ・「コメントをお願いします」でAIの設計思想を先に引き出す ・いきなりコードを書かせない重要性と手戻り防止 ・AIが考える実装イメージと自分の望む結果の一致確認 ⚙️ ドリルダウン機能の設計と実装 ・3階層構造の具体的な設計プロセス ・サイドパネル形式での初期実装 ・合計金額・件数・平均の統計情報表示 ・月別フィルター、検索機能、ソート機能の追加 ・CSVエクスポート機能の実装 🎨 UI/UX改善の実践プロセス ・サイドパネルの使いにくさに気づく過程 ・「UIとしてわかりづらい」とぼかして伝えるフィードバック術 ・仕訳一覧タブの追加による抜本的改善 ・タブナビゲーション（ダッシュボード/仕訳一覧）の実装 ・シンプルなUIデザインの重要性 ✅ 機能検証とテストの実施 ・検索機能：「法定福利費」で正しく絞り込まれるか確認 ・月別フィルター：「12月」選択で12月データのみ表示されるか ・ソート機能：金額・日付での並べ替え動作確認 ・ページネーション：データの適切な分割表示 ・「できたはず」ではなく「本当にできているか」を確認する姿勢 🔄 ブラッシュアップの重要性 ・「できた」で終わらせない開発姿勢 ・実際に使いながら改善点を洗い出す ・内発的動機が支える継続的改善 ・自分が本当に使いたいものだから磨き上げられる ・実用的なツールへと進化させるプロセス 🔑 今回のキーメッセージ 「まだコードは書かなくていいのでコメントをお願いします」 → この一言で実装前にAIと認識をすり合わせ、大きな手戻りを防げる 「仕訳一覧みたいのがどこにあるか、UIとしてわかりづらい」 → 直接的な批判ではなく、ぼかして伝えることでAIが適切な改善策を提案してくれる 「森を見せているが木が見えない状態から、森も木も見える状態へ」 → ドリルダウン機能の本質は、全体像と詳細の両方を把握できること 「自分が本当に使いたいものを作るからこそ、ブラッシュアップが楽しく継続できる」 → 内発的動機がなければ「とりあえずできた」で終わってしまう ご不明点や質問はコメント欄までどうぞ！ ┈┈┈┈┈┈┈┈┈┈ 『セナリ学院』とは？🏫✨ ┈┈┈┈┈┈┈┈┈┈ SNS総フォロワー数4.1万人 平野友康が校長を務める 生成AIに特化したオンラインスクールです。 講師の得意分野はデザイナー、開発分野、業務改善、まちづくりなど幅広く、 多角的なアドバイスが可能です！ 今だけ14日間無料体験キャンペーン中！ 下記HPより詳細をご確認ください。 セナリ学院HP: https://www.teleport.jp/scenari/ ┈┈┈┈┈┈┈┈┈┈ ◆公式SNS Instagram: https://www.instagram.com/scenari.teleport/ X(旧Twitter): https://x.com/scenari_AI Facebook: https://www.facebook.com/people/%E3%82%BB%E3%83%8A%E3%83%AA%E5%AD%A6%E9%99%A2-Teleport/61576632806665/ note: https://note.com/scenari_teleport #セナリ学院 #teleport_ai #生成AIスクール
![[B-6-3d] 生成AI基礎講座B 「CSV管理ダッシュボードをつくろう④」](https://i.vimeocdn.com/video/2133773394-e69d6322ab2cf58a238f42ef319a7f7ce8075d79c688e5351d0c93b5e9519024-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 前回までに作成したCSV管理ダッシュボードのブラッシュアップフェーズを実践。 「15分で完成するモックプロトタイプ、その後の改善に時間をかける」開発の真髄を体験。 実際に触りながら課題を発見し、Claude Codeと対話しながら使いやすいダッシュボードに仕上げていきます。 🎯 動画トピック 🔍 検索機能のUX改善 ・「法定福利費」検索で関係ないデータも表示される課題発見 ・Claude Codeに現在の検索仕様を確認させる ・ベストプラクティスを提案させる対話手法 ・フィルターチップ方式の採用（勘定科目・取引先・適用を個別検索） ・検索結果のCSV出力機能も追加 ⚙️ ソート機能の不具合修正 ・昇順・降順が動作していない問題を発見 ・矢印は変わるのに並び替えが発生しない状態 ・「実装されているはずなのに動いていない」を伝える重要性 ・修正後の動作確認プロセス 💰 現金残高入力機能の実装 ・ランウェイ計算に必要な現金残高をどう入力するか ・3つの実装案から最適解を選択 ・案A：設定画面／案B：ダッシュボード上で編集（採用）／案C：ヘッダー常設 ・生存指標セクションでの直接編集が最も自然 ・5,000万円入力→月次支出600万円→ランウェイ8ヶ月とリアルタイム計算 🎨 CSVアップロード画面のUI最適化 ・初期状態が空白画面のみという課題 ・ダッシュボード骨格を表示する改善案を採用 ・全体像が見える状態でCSVアップロードできるUIに ・コンテキストの明確化による使いやすさの向上 📊 実装後の動作確認プロセス ・モックプロトタイプ作成は15分、その後のすり合わせが本質 ・実際に触って初めて分かる使いにくさ ・大規模開発でも小規模開発でも同じプロセスが重要 ・一つ一つの機能を丁寧にチェックしていく姿勢 💬 Claude Codeとの効果的な対話方法 ・「ベストプラクティスを考えて提案して」という依頼の仕方 ・コードを書かせる前に設計を提案させる ・「動いているかチェックして、動いていなかったら実装して」という指示 ・段階的に改善していく開発スタイル 🔑 今回のキーメッセージ 「モックプロトタイプは15分で完成するけど、その後のすり合わせとチェックが大事」 → AIによる高速実装と人間による丁寧な検証のバランスが実用的なツールを生む 「一つの検索メニューだけじゃ使いにくい。ベストプラクティスを考えて提案して」 → Claude Codeに考えさせることで、より良いUI/UX設計が得られる 「実装されているけど動いていない」 → 実際に触って確認することでしか発見できない不具合がある 「自分の手に馴染むものを作る」 → freee会計のような多機能ツールではなく、自分が本当に必要な機能だけを持つダッシュボードの価値 ご不明点や質問はコメント欄までどうぞ！ ┈┈┈┈┈┈┈┈┈┈ 『セナリ学院』とは？🏫✨ ┈┈┈┈┈┈┈┈┈┈ SNS総フォロワー数4.1万人 平野友康が校長を務める 生成AIに特化したオンラインスクールです。 講師の得意分野はデザイナー、開発分野、業務改善、まちづくりなど幅広く、 多角的なアドバイスが可能です！ 今だけ14日間無料体験キャンペーン中！ 下記HPより詳細をご確認ください。 セナリ学院HP: https://www.teleport.jp/scenari/ ┈┈┈┈┈┈┈┈┈┈ ◆公式SNS Instagram: https://www.instagram.com/scenari.teleport/ X(旧Twitter): https://x.com/scenari_AI Facebook: https://www.facebook.com/people/%E3%82%BB%E3%83%8A%E3%83%AA%E5%AD%A6%E9%99%A2-Teleport/61576632806665/ note: https://note.com/scenari_teleport #セナリ学院 #teleport_ai #生成AIスクール
すべての動画を表示しました
