![[B-7-1] 生成AI基礎講座B_ClaudeCode発展編「プロットを極める！①」](https://i.vimeocdn.com/video/2133773060-d98b2aff7b3c532a6bd2d0984c013bc0d58e9e7f5cbe5932ac3429aaf2620564-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ClaudeCode発展編として、プロット（仕様書）作成の実践技術を完全公開。 AIとの「壁打ち対話」から始まり、ふわっとしたアイデアを明確な機能設計に落とし込むまでの全プロセスを実演。 「予測メモ帳」を実例に、用語統一・機能の絞り込み・言語化精度の向上テクニックを徹底解説します。 🎯 動画トピック 📍 講座の位置づけ ・これまでの基礎編から一段階上のレベルへ ・実際の開発プロセスを最初から最後まで完全公開 ・1-2時間の内容を見やすく編集して提供 ⚡ プロット作成の3段階フロー ・壁打ち：音声入力でふわっとしたアイデアを自由に語る（5-10分） ・ドラフト：AIが構想をまとめた仕様書を生成（数分） ・ブラッシュアップ：用語統一・機能絞り込み・言語化（10-20分） ・ChatGPTやClaudeなど、メモリー機能を持つAIの活用法 💡 AIとの壁打ち対話手法 ・完璧な文章不要：思いつくままに構想を語る ・課題の明確化から理想の姿、具体的なユースケースまで ・「機能ベースの仕様書としてまとめて」という指示の重要性 ・「ふわっとしているところは質問して」で対話形式に 🎮 実例：予測メモ帳の開発構想 ・コンセプト：「書こうと思った時にはもう書かれている」 ・スナックメモ、予測カード、儚いメモなど独自用語の定義 ・V0で実装する機能と非目標の明確な切り分け ・ワンタップ作成、自動消滅、30日アーカイブの設計思想 📝 仕様書ブラッシュアップの実践 ・「初見の人が見て齟齬なく伝わるか」という判断基準 ・ChatGPT直接編集機能の効果的活用法 ・AIが提案した15項目からコア機能のみに削減 ・「予測変換」「予測入力」→「予測カード」への統一作業 🔑 用語統一の重要性 ・同じ概念を複数の言葉で表現しない徹底ルール ・用語統一の基準：「他人に説明できるレベルか？」 ・技術ではなく機能ベースで書くことでノイズを排除 ・自分の中でふわっとしている概念は用語を決めることで明確化 🚀 開発成功の本質 「優れたプロットは、初見の人が理解できる明快さと、開発に必要な機能の絞り込みの両立」 → 最初からカチッと作らず、AIとの対話で徐々に形を整える 「用語を他人に説明できないなら、まだ自分の中でふわっとしている証拠」 → 言語化精度を高めることが開発の方向性を決定する 「しっかりしたプロットがあれば、ClaudeCodeでの開発はスムーズに進行」 → プロット作成に時間をかけることが、結果的に開発時間を短縮する ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-7-2] 生成AI基礎講座B 「プロットを極める②」](https://i.vimeocdn.com/video/2133770235-f0555eabe7bd203298df8d781964c325c7aac18127de8eeef34d0aafdb1a44aa-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ClaudeCode発展編として、プランモードを活用した開発仕様の策定プロセスを完全公開。 前回作成したプロット（仕様書）を基に、ClaudeCodeのプランモードで技術スタック選択から実装順序まで、AIと対話しながら開発計画を固める全プロセスを実演。 「予測メモ帳」を実例に、効率的な仕様策定テクニックと、AIへの効果的な指示出しを徹底解説します。 🎯 動画トピック 📍 講座の位置づけ ・プロット作成（①）からアプリ開発（②）への橋渡し ・ClaudeCodeのプランモード機能を初めて使う方向け ・実際の開発現場での対話テクニックを公開 ⚡ プランモード活用の実践フロー ・プロジェクト準備：新規フォルダ作成からClaudeCode起動まで ・プランモード起動：Shift + Tabキーで対話型仕様策定モードへ ・仕様の明確化：簡潔なプロットから詳細な開発計画まで ・技術選定：Next.js、Supabase等の技術スタックを対話的に決定 💡 AIへの効果的な指示出しテクニック ・簡潔さの重要性：「優れたアプリほど数行で伝えられる」 ・用語の統一：予測カード、アーカイブ、ピン留めなど誤解のない言葉選び ・時間感覚の操作：「時間はたっぷりある」でモックでなく本物を作らせる ・質問を促す：「質問してください」で認識のズレを防ぐ 🎮 実例：予測メモ帳の開発仕様策定 ・コンセプト：数秒〜1分で素早く残せる授業メモアプリ ・予測カード：AIが生成したテンプレートを選択して使用 ・アーカイブ：閲覧または手動チェックで自動移動、検索可能 ・技術構成：Next.js + React + Tailwind CSS + Supabase 🔧 技術スタック選択の実践 ・フロントエンド：Next.js + React（定番で使いやすい） ・AI機能：OpenAI API（今回の選択理由） ・データ保存：Supabase（デバイス間同期を考慮） ・認証：Supabase Auth（複数人利用を想定） ⚙️ 実装順序の調整テクニック ・AIの傾向：「実装しやすい順」だとUIから作り始める ・正しい優先順位：データ基盤とAI予測機能を最優先に ・フィードバック方法：率直に「いいプランっぽくないよね」と伝える ・実装フェーズ：①基盤・予測機能 → ②表示・学習 → ③UI調整 🔑 プランモードの真価 ・強制的な質問実行：「質問しろ」と言っても質問しないAIの特性を補完 ・選択肢の提示：複数選択可能な項目で柔軟に対応 ・認識のズレ防止：開発前に仕様を明確化して後戻りを減らす ・細かい仕様はスルー：アーキテクチャに関わらない詳細は後回し 🚀 開発成功の本質 「裏側をきちんと作る。見た目はダサくても機能が動くことが重要」 → フロントエンドは後からいくらでも調整可能 「細かい質問はスルーする勇気。変に答えると縛られる」 → アーキテクチャレベルに関わる部分だけ優先的に決める 「プランモードで仕様を固めれば、その後の開発フェーズはスムーズ」 → 対話的に認識を合わせることが、効率的な開発の鍵 ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-7-3] 生成AI基礎講座B 「開発準備①ーレポジトリ・API・superbaseー」](https://i.vimeocdn.com/video/2133770533-e3e79902b08c7251f25c3cd17a73e6f2a7df65e53f45c65dce94fa63a44ce682-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ClaudeCode発展編として、本格的な開発に入る前の「環境構築」を完全実演。 GitHubリポジトリの作成からSupabase設定、API連携まで、開発の土台となる準備作業をゼロから解説。 初心者がつまずきやすい.envファイルの扱い方や、セキュリティ面での注意点も丁寧に説明します。 🎯 動画トピック 📍 講座の位置づけ ・ClaudeCodeでの開発準備段階を完全網羅 ・実際の画面操作を見ながら一緒に設定できる構成 ・次回のSupabase MCP連携へ向けた重要な基礎固め ⚙️ 開発環境構築の3ステップ ・GitHubリポジトリ作成：コード管理の基盤を整える ・API設定：OpenAI APIキーの取得と課金設定 ・Supabase準備：データベースプロジェクトの立ち上げ 🔍 ClaudeCodeの便利機能 ・Control+Tでネクストタスクを表示/非表示 ・AIが実行予定のタスクを事前確認できる ・MVPが完成するまでの待ち時間を有効活用 ・開発の全体像を把握しながら準備を進められる ⚠️ APIエラーへの対処法 ・API Error 500が出る主な原因と対策 ・ネットワークの一時的な途切れへの対応 ・一度に大量のコード生成をさせない工夫 ・段階的なタスク実行でエラーを回避 🔐 .envファイルの重要性 ・環境変数（Environment）ファイルの役割を理解 ・APIキーを安全に管理するセキュリティの基本 ・.env.exampleと.env.localの使い分け ・「ソースコードに直接APIキーを書かない」という鉄則 ・Gitにアップロードしてはいけないファイルの管理 📦 実際の設定手順を完全実演 ・GitHubでPublic/Privateの違いと選び方 ・Supabaseプロジェクト作成とリージョン選択（Tokyo推奨） ・パスワード自動生成機能の活用方法 ・OpenAI APIキー取得ページへの直接アクセス ・VSCodeとターミナル両方での.env.local作成方法 ・cpコマンドでファイルをコピーする実践 💡 効率的な準備のコツ ・ClaudeCodeが提示するURLを活用すれば設定画面に直行できる ・GitHubとSupabaseのプロジェクト名を統一すると管理しやすい ・生成されたパスワードは必ずコピーして安全に保管 ・Connect機能からSupabase接続情報を簡単取得 🚀 次回予告：Supabase MCP連携 「手動でSQLを書かずに、AIにデータベース設定を任せる方法を解説」 → Supabase MCPを使えば、データベース構造の構築もAIが自動化 → より効率的な開発フローを実現 🔑 開発準備の本質 「地味に見える環境構築こそが、スムーズな開発の土台」 → 後からトラブルにならないよう、最初に正しく設定する 「.envファイルでのAPIキー管理は、セキュリティの基本中の基本」 → 機密情報の漏洩を防ぐための必須知識 「準備がしっかりできていれば、ClaudeCodeでの開発は驚くほど快適」 → この動画の設定を完了させれば、次のステップへスムーズに進める ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール #ClaudeCode #開発環境構築 #GitHub #Supabase
![[B-7-4] 生成AI基礎講座B 「開発準備②ーsuperbaseMCPー」](https://i.vimeocdn.com/video/2133772921-3a2e70e2042b53b90a889bdc12ea377e0c70fa53904c39e722eb35077e7ec83c-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ClaudeCode発展編として、Supabase MCPの接続方法を完全実演。 AIがデータベースを直接操作できるようになる革新的な連携機能を、初心者でも迷わず設定できるよう丁寧に解説。 手動でSQLをコピペする手間から解放され、開発効率が劇的に向上します。 🎯 動画トピック 📍 講座の位置づけ ・前回の環境構築に続く、実践的な開発準備の仕上げ ・Supabase MCPという最新技術を使った効率化手法 ・実際の画面操作を見ながら一緒に設定できる構成 🔌 Supabase MCPとは ・Model Context Protocol：AIと外部サービスを繋ぐ仕組み ・ClaudeがSupabaseのデータベースを直接操作可能に ・SQL生成→コピー→実行→結果報告という手間が完全に不要 ・開発スピードとストレスが大幅に改善 ⚙️ MCP設定の4ステップ ・環境ファイルの指定：スペース+@で.env.localを選択 ・接続状態の確認：/mcpコマンドで現在の状態をチェック ・MCPのインストール：1行のコマンドで簡単セットアップ ・認証：ブラウザで自動ログイン、ワンクリックで完了 💡 便利なポイント ・Claude Codeなら設定が驚くほど簡単 ・一度認証すれば全プロジェクトにアクセス可能 ・プロジェクト単位での制限設定も可能 ・Supabaseダッシュボードを開かずに開発が進む 🔍 実際の動作確認 ・「プロジェクト一覧を表示して」と依頼するだけ ・AIが自動でSupabaseに接続して情報を取得 ・テーブル作成もAIが自動実行 ・手動作業ゼロでデータベースが完成 📚 公式ドキュメントの活用法 ・「Supabase MCP」で検索→公式ドキュメントへ ・セキュリティ情報は必ず一読を推奨 ・クライアント選択で「Claude Code」を指定 ・「または」の方のコマンドが最も簡単 🔐 セキュリティのポイント ・MCPは広範なアクセス権限を付与する機能 ・機密情報を含むプロジェクトは個別設定で保護可能 ・認証時に組織とプロジェクトを適切に選択 ・公式のセキュリティガイドラインを確認 ⚡ 開発効率が劇的に向上 従来の方法： ① ClaudeにSQL文を依頼 ② 生成されたSQLをコピー ③ Supabaseで手動実行 ④ 結果をClaudeに報告 ⑤ 次のステップへ MCP接続後： ① ClaudeにDB作成を依頼 ② すべて自動で完了！ 🚀 次回予告：実際の開発実践 「ローカルで動き出したメモ帳アプリの開発を進めていきます」 → Supabase MCPを活用した実践的な開発フロー → データベース操作の自動化を体験 🔑 Supabase MCP導入の本質 「手作業の削減は、開発速度だけでなく品質向上にも直結」 → ヒューマンエラーが減り、AIの実行も確実に 「最新ツールの活用が、AI時代の開発者の必須スキル」 → 効率化技術を知っているかどうかで生産性に大きな差 「一度設定すれば、今後のすべての開発で恩恵を受けられる」 → この動画の設定完了で、開発体験が大きく変わる ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール #ClaudeCode #SupabaseMCP #MCP #AI開発 #開発効率化
![[B-7-5] 生成AI基礎講座B 「開発①ー認証機能とGitの基本コミット＆プッシュー」](https://i.vimeocdn.com/video/2133770817-1c83e8dd630835901cc8c9fa1dc7aad8772898087b99888d1b764dfc51df4add-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 生成AI基礎講座Bの開発実践編として、認証機能の実装とGitの基本操作を完全解説。 メール認証の重要性、Supabaseでのテストユーザー作成、URLによる動作確認テクニック、そしてコミット＆プッシュの概念を初心者にも分かりやすく実演します。 🎯 動画トピック 📍 講座の位置づけ ・Claude Codeを使った実践的なアプリ開発の第一歩 ・認証機能という重要なセキュリティ機能の実装 ・Gitによるバージョン管理の基礎を習得 🔐 メール認証機能の重要性 ・なぜ必須か：架空メールでの登録防止、複数アカウント作成防止、他人のメール悪用防止 ・Supabaseでの確認方法 → Authentication → Settings → Email Providers → 「Confirm Email」をチェック 👤 テストユーザーの作成 ・Supabaseダッシュボードから直接作成 ・Authentication → Users → Add User ・「Auto Confirm User」にチェックで認証済みユーザーとして作成 ・架空のメールアドレスでもテスト可能に 🔍 URLで動作確認する技術 ・UIが未完成でも動作状況を判断可能 ・/auth/login → ログインページ ・/（スラッシュのみ）→ ホームページ = ログイン成功 💾 Gitのコミットとプッシュ コミット = ローカルのセーブポイント ・ゲームのセーブと同じイメージ ・作業状態を記録し、いつでも戻れる プッシュ = GitHubへアップロード ・クラウドにバックアップ ・PCトラブルから保護、他ツールからもアクセス可能 実践方法 ・Claude Codeに「作業を終わりたい」→ 自動でコミット準備 ・「GitHubにプッシュして」→ 完了 ・フェーズが1つ終わったらコミットする習慣を 🔑 重要ポイント 「メール認証は開発の基本的なセキュリティ対策」 → ログイン機能があれば必ず確認 「Gitは保険であり、挑戦を可能にするツール」 → セーブポイントがあるから大胆に開発できる 「細かい技術より概念理解が重要」 → 「セーブ」と「アップロード」のイメージで十分 🚀 次回予告：フェーズ2の開発実践 より実践的な機能開発へ進みます ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール #ClaudeCode #Supabase #Git #認証機能 #AI開発
![[B-7-6] 生成AI基礎講座B 「開発②ーメモリ不足を防ぐコンパクト機能の使い方ー」](https://i.vimeocdn.com/video/2133771437-c40c1bb4681e414dc306fbe987441c92d12331100a58d4988da995766662a140-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 生成AI基礎講座Bの開発実践編として、Claude Codeでの開発に欠かせない「コンテキストウィンドウ管理」を完全解説。 AIが記憶できる容量の仕組み、メモリ使用状況の確認方法、コンパクト機能の効果的な使い方、そして新規セッションでの効率的な作業再開テクニックを実演します。 🎯 動画トピック 📍 講座の位置づけ ・Claude Codeでの長期開発に必須の知識 ・メモリ管理ができると開発の質と効率が劇的に向上 ・AIとの対話を継続的に最適化する技術を習得 🧠 コンテキストウィンドウとは ・AIの短期記憶の仕組み：20万トークン（約20万文字） ・人間の記憶に例えると：今日の朝ごはんは覚えているが、1週間前は覚えていない ・容量が満杯になると古い情報から消える → 初期の重要な要件が抜け落ちるリスク 📊 コンテキストウィンドウの構造 ・システムプロンプト：Claude Sonnet 4.5の基本設定（固定） ・MCP Tools：SupabaseなどのツールでデフォルトAppearance20%消費 ・メッセージ：会話履歴（時間とともに増加） ・フリースペース：残り使用可能容量 🔍 使用状況の確認方法 ・`/context`コマンドで現在の使用率を視覚的に確認 ・「Context left until auto-compact」で自動圧縮までの残量を表示 ・フリースペース10%以下が要注意サイン 🔧 コンパクト機能の使い方 手動コンパクトのタイミング ・フェーズの区切りなど、キリの良いところで実行 ・`/compact`コマンドで会話履歴を圧縮 ・重要な情報を残しながらメモリを解放 使い分けの判断 ・プロジェクト立ち上げや大規模開発 → コンパクトを活用 ・小規模な機能追加 → 新規セッションで対応 ・コンパクト自体もトークンを消費するため、頻繁な実行は逆効果 🆕 新規セッションでの作業再開テクニック 効率的な方法：コミットメッセージを活用 ・「最近のコミットメッセージを見て」→ わずか30%のメモリで状況把握 ・「直近のコミットの中身、どんな感じ?」→ 詳細確認で理解度チェック 非推奨：プロジェクトファイル全体を読ませる ・完全な情報は得られるが、何万字も読むためメモリを大きく圧迫 ・せっかくの新規セッションの意味が薄れる 🔑 重要ポイント 「コンテキストウィンドウ管理は開発の質を左右する」 → メモリ不足で重要情報が抜けると、AIの精度が落ちる 「手動コンパクトは保険のようなもの」 → 自動より手動の方が、作業の区切りで実行できて効率的 「コミットメッセージだけで十分」 → 実践者も「精度が落ちたと感じたことはない」と証言 🚀 次回予告：開発実践での動作確認の重要性 実際のメモ帳アプリで動作確認のポイントを解説します ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料! #セナリ学院 #teleport_ai #生成AIスクール #ClaudeCode #コンテキストウィンドウ #AI開発 #メモリ管理 #開発効率化
![[B-7-7] 生成AI基礎講座B 「開発③ー動作確認・コンパクトー」](https://i.vimeocdn.com/video/2133770720-f9b649adfdd0eea182937ad3a78c99a652527b0451b9ea176f07893aee1e2829-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ClaudeCodeを使ったメモアプリ開発の第3回。フェーズ2の動作確認から、サーバーログによるAI動作の検証、データベース保存の確認、そしてセッション管理まで。「本当に動いているか？」を丁寧に確認することで、AIも慎重に対応してくれるようになる—人間とAIの"意気投合"を体感できる回です。 🎯 動画トピック 📍 動作確認の基本姿勢 ・フェーズごとにこまめに確認する重要性 ・一気に書き上げず、人間の目で見て検証 ・ダークモード対応バグへの一時対処法 ⚡ AI予測カードの検証 ・3〜5個の予測カード表示と動作確認 ・クリックでメモが作成される流れ ・入力内容に応じた予測の変化を観察 ・「映画の予約」→「映画の感想」への派生を確認 💡 サーバーログで"裏側"を確認 ・「本当にAIが動いているか？」という問いの重要性 ・OpenAI API呼び出しのログ確認方法 ・GPT-4o miniモデルの動作検証 ・エラーログのハンドリング改善 💾 データベース（Supabase）保存の確認 ・PC→データベース→スマホの連携構造 ・Supabaseダッシュボードでの直接確認 ・メモの追加・削除がDBに反映されているか検証 ・アーカイブ機能・ユーザー認証の動作確認 ⌨️ セッション管理とスラッシュコマンド ・/clearでコンテキストをリセット ・コミットメッセージに引き継ぎ情報を記録 ・MDファイルよりコミットメッセージが効率的な理由 ・古いドキュメントがAIのノイズになる問題 🔑 今回のキーメッセージ 「人間が慎重に動作確認をすると、AIも慎重になってくれる」 → 人間の呼吸を理解して、AIも「あ、この呼吸ね」と意気投合する 「表面上動いていても、本当かと常に思うこと」 → サーバーログやDBを確認して裏側を固める姿勢が大切 「ドキュメントは読ませない、コミットメッセージを読ませる」 → 日時と順番が正確に残るコミットメッセージが最新情報の源泉 #ClaudeCode #生成AI #AI開発 #Supabase #メモアプリ開発 ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-7-8] 生成AI基礎講座B 「開発④リファクタリング」](https://i.vimeocdn.com/video/2133771116-e9c2ae0a7566649fb3e4e2eb2d3c8753bc77fbb4be4ebfaaeac33f82207ab265-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 生成AI基礎講座B「開発④リファクタリング」 MVP完成後のコードを徹底的に整理し、型安全性を確保する開発プロセスを実践解説。 Claude Codeとの対話を通じて、「動作を変えずに内部構造を改善する」リファクタリングの本質を学びます。 2025年のベストプラクティスに基づき、エラーが起きにくい堅牢なコードベースを構築する方法を伝授。 🎯 動画トピック 🧹 リファクタリングの基本 ・「コードのお片付け」とは何か ・動作を変えずに内部構造を改善する技術 ・定期的に実施しないと破綻する理由 ・MVP完成時がベストタイミング 🔐 型安全性の重要性 ・Zodバリデーション：データの「魔法のルールブック」 ・年齢は数字、名前は文字：型定義の実践例 ・「バグを防ぐ番犬」としての型システム ・TypeScriptで型エラーを未然に防ぐ方法 ⚡ 2025年のベストプラクティス ・「2025年っぽいいい感じの実装」をClaude Codeに依頼 ・React 19の最新機能活用チェック ・コードの書き方は常に進化している ・スタック、アーキテクチャ、エラーハンドリングの確認 🏗️ プロジェクト構造の最適化 ・一機能一ファイルの原則 ・メモ自動生成、テキスト入力、保存、表示を独立化 ・共通部分の切り出し（データベース処理など） ・コンポーネントの分離で編集がしやすくなる理由 ❌ "any"との戦い - 型安全性を守る ・「any」は型安全性を放棄する「逃げ」 ・型アサーション（as）の正しい使い方と危険性 ・「経験則的にanyいっぱいは怪しい」 ・型エラーを徹底的に潰す重要性 🎯 根本解決アプローチ ・対症療法 vs 根本解決の違い ・エラーの表層だけでなく構造的な問題を解決 ・「逃げずに根本から解決して」の伝え方 ・一夜漬けのような修正がいつか破綻する理由 💡 実践テクニック ・ELI5（Explain Like I'm 5）：5歳児向けに説明してもらう ・プロジェクト構造の理解依頼 ・ESCキー2回でリストア（巻き戻し）機能 ・90%ルール：オーバーエンジニアリングを避ける 🛠️ コードレビューの実践 ・Claude Codeによる自動レビュー ・良い点と改善点の洗い出し ・コンポーネントのメモ化不足の発見 ・エラー時に画面が真っ白になる問題の解決 🔑 今回のキーメッセージ 「リファクタリングは将来の自分への贈り物」 → 今は時間がかかっても、後々の開発がスムーズになりエラーに悩まされる時間が大幅に減る 「anyの多用は型安全性を失う逃げの手法」 → 型エラーを徹底的に潰すことで、バグが起きにくい堅牢なコードが完成する 「必要な時に必要なだけ。90%ルールで進める」 → オーバーエンジニアリングを避け、実用的なレベルで止めることも大切 「コードの書き方は常に進化している」 → 数年前の書き方より、2025年の最新手法でコンパクトにスマートに書ける 「根本解決：エラーの表層だけでなく構造的に解決」 → 一夜漬けのような対症療法はいつか破綻する。根本原因を掴んで修正する ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-7-9] 生成AI基礎講座B 「開発⑤アプリ設計・開発サーバー・土台づくりの大切さ」](https://i.vimeocdn.com/video/2133770251-b77ab571514b5f382d2e05f46f4bb4edab227f486ce6cf4e7f80f00c2780480a-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 生成AI基礎講座B「開発⑤アプリ設計・開発サーバー・土台づくりの大切さ」では、アプリケーション開発で最も重要な「土台固め」の実践を解説。Claude Codeを使った開発の60-70%はリファクタリングという驚きの真実と、その理由を徹底的に学びます。華やかな機能追加よりも、地道な整理作業こそが長期的な成功の鍵となることを実例とともにお届けします。 🎯 動画トピック 📐 アプリケーション構成の可視化 ・メインページ、予測カード、手動入力の関係性を図解 ・状態管理(Hooks)の役割と配置 ・クライアント/サーバー側の役割分担を明確化 ・頭の中でイメージしながら開発する方法 ⚙️ クライアント側とサーバー側の理解 ・ブラウザ(クライアント)で行われる処理 ・バックエンド(サーバー)で行われる処理 ・サーバーアクション：OpenAI API呼び出し、過去メモの振り返り、コンテキスト作成 ・Supabaseへのメモ登録フロー 🚀 開発サーバーの起動と管理 ・npm run devによる起動方法 ・Ctrl + Cでの終了方法 ・開発サーバーのログの見方と意味 ・複数プロセスが起動している場合の対処法 💾 キャッシュとログのトラブルシューティング ・「コードを変更したのに反映されない」問題の解決 ・ブラウザの開発者ツール(F12)の活用 ・クリーンな状態での再起動の重要性 ・コンソールログの確認方法 🏗️ 土台固めの重要性 ・開発時間の60-70%はリファクタリング ・新機能追加は実は一瞬で終わる ・「足場を固める」ことで後の開発がスムーズに ・プロトタイプ開発 vs 本格的な開発の使い分け 📚 ドキュメント管理のベストプラクティス ・推奨される3つのコアドキュメント：CLAUDE.md、README.md、PROJECT_KNOWLEDGE.md ・レガシードキュメントを作らない方法 ・ドキュメント間の食い違いを即座に解消 ・「コードが最新の真実」の原則 🔄 リファクタリングの習慣化 ・一機能実装ごとにリファクタリング ・違和感を放置しない重要性 ・後からまとめてリファクタリングする困難さ ・セナリアプリの実例：絡まった糸をほぐす大変さ 🔑 今回のキーメッセージ 「開発の体感60-70%はリファクタリング」 → 新機能追加よりも、整理・確認作業に時間をかけることで品質を保つ 「違和感を放置しない」 → 「ちょっと変だな」と思ったら必ず確認。対処法がわからなければClaudeに聞く 「結び目が1つ、2つのうちにほぐす」 → 後からまとめてリファクタリングしようとすると、絡まった糸をほぐすような大変な作業になる 「コードが最新の真実」 → ドキュメントは参考情報。3つのコアドキュメントに集約し、レガシーを作らない ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-7-10] 生成AI基礎講座B 「開発⑥技術スタックを考える際のAIへの問い方」](https://i.vimeocdn.com/video/2133769645-34a27ad4178c0a85c17ded23148590e22157492c563bb74a48d4dac813bcf35c-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 AIが提案してきた「アナライザーTS」という複雑なシステムに対し、「それって本当に必要？」「2025年のベストプラクティスなの？」と問いかけることで、最適な技術選定にたどり着く過程を解説。 技術的に分からないことでも、適切な問いを立てることでAIとの対話を通じて答えが見えてくる実践例をお届けします。 🎯 動画トピック 🤔 AIの提案を鵜呑みにしない「問いの力」 ・「アナライザーTSは何をするんですか？」から始まる深掘り ・「LLMに渡すだけでいいのでは？」という本質的な問いかけ ・「2025年のベストプラクティスですか？」で時代遅れを回避 ⚖️ データ処理アプローチの比較 ・生データ丸投げ：シンプルだがトークン消費大 ・ルールベース（古い）：高速だが文脈を失う（例：「ジム辞める」を誤解） ・ハイブリッド（2025年推奨）：ベクトル化→類似検索→AIに渡す 🔍 ベクトル検索とエンベディング ・テキストを数値化して「似ている度合い」で検索する技術 ・「猫」と「子猫」を同じ意味として扱える ・AI×検索では切っても切り離せない必須技術 🛠️ Supabase + PGVectorの導入 ・既存プロジェクトがSupabaseだから導入しやすい ・PGVector：PostgreSQLの拡張機能（無料プラン内） ・OpenAI Embedding API：超安価で利用可能 ・車輪の再発明を避け、既存のベストプラクティスを活用 📦 コンテキストウィンドウとメモリ管理 ・1機能＝1コンテキストウィンドウで収まるように進める ・claude.mdがClaude Codeのメモリとして機能 ・コミットメッセージを確認して新しいセッションを開始 🤖 AIが学習する開発スタイル ・毎回コミットを指示 → AIが自動でコミットするように ・慎重に確認を繰り返す → AIも慎重に動作するように ・開発者の習慣がAIの振る舞いを変える 🔑 今回のキーメッセージ 「それって本当に必要なの？」 → AIの提案を鵜呑みにせず、問いを立てて深掘りすることで最適解にたどり着く 「開発が自分の想定範囲内にあることが大事」 → ブラックボックス化を防ぎ、ざっくりでも仕組みを理解しておく 「何度も出てくる技術は少しずつ覚えていく」 → ベクトル検索やエンベディングは繰り返し登場する。最初は言えなかった言葉もいつの間にか言えるようになる ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-7-11] 生成AI基礎講座B 「開発⑦人間の目で確認し、AIがベクトル精度を高める」](https://i.vimeocdn.com/video/2133772728-f91e1fdd0a43f4a4cbdd602246fac91ba25d1ffc9ffd34d1d358302831f75462-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ベクトル検索を実装したAIアプリで最も重要なのは「人間の目による確認」です。AIが作った機能が本当に動いているか、期待通りに機能しているかを徹底的に検証する方法と、その確認プロセス自体をAIに任せる実践テクニックを解説します。Supabaseでのベクトルデータ確認からMCPを活用した効率的なテスト手法、さらにAIとの効果的な対話テクニックまで、開発における「見える化」の重要性を具体的な実例とともにお伝えします。 🎯 動画トピック 📊 ベクトル検索の実装確認 ・Supabaseでベクトルデータの存在を確認する方法 ・人間には読めない数値データがAIにとって意味を持つ仕組み ・8件のメモのうち5件が参照対象となる実例 ・「本当に動いているのか」を疑う姿勢の重要性 🔍 AI予測精度の評価手法 ・予測ログ比較：ベクトル検索あり・なしでの結果比較 ・A/Bテスト：ユーザーグループを分けた効果測定 ・ユーザーフィードバック：Good/Badボタンの実装 ・RAG評価指標：専門的な評価スクリプト ・「誰かがすでに研究している」前提で進める開発姿勢 ✨ ソースメモの可視化実装 ・どのメモを元に予測を生成したかを表示する機能 ・類似メモ最大5件の取得と類似スコアの表示 ・開発中の可視化がなぜ品質保証につながるのか ・最終プロダクトではノイズとなる情報の取り扱い方 🤖 MCPを活用した効率的テスト ・従来の手動テストからの脱却 ・Claude CodeがSupabaseに直接アクセスしてテストデータを生成 ・複数件のデータを一括生成する実践例 ・MCP接続トラブル時の対処法（/connect/mcpでリコネクト） ・経験値で身につく「まず接続を疑う」判断力 💬 AIとの効果的な対話テクニック ・指示語（それ、あれ、その）を活用する理由 ・「1番目の方法で」より「それで」が効果的な背景 ・Anthropic推奨：文脈を重視した自然な会話 ・直近20ターンの会話を完全に記憶するAIの能力 ・新しく言い換えると「新しい要望」と解釈されるリスク 🎯 開発における可視化の重要性 ・見えない機能（ベクトル検索）こそ可視化が必要 ・開発中・テスト中・チューニング中・本番環境での表示情報の使い分け ・時間情報、場所情報など今後追加する要素の確認方法 ・「できるだけ見える化する」が品質保証の投資である理由 🔑 今回のキーメッセージ 「確認、確認、確認」 → AIが生成したコードや機能を盲目的に信じるのではなく、常に疑い、確認する姿勢が信頼性の高いアプリケーション開発の基盤となります。 「本当にワークしているのか？」 → ベクトルデータは人間には読めません。だからこそ、動作確認と可視化を徹底することで、AIの判断プロセスを理解し、品質を保証できます。 「確認作業もAIに任せる」 → 最初は手動でテストデータを入力していた作業も、MCPを活用することでAIに任せられます。これにより開発効率が大幅に向上します。 「AIとの対話は文脈を意識する」 → 指示語を使い、余計な説明を省くことで、より自然で効率的なコミュニケーションが可能に。AIは人間以上に文脈を正確に読み取っています。 「開発中の可視化は投資である」 → 最終的にはノイズとなる情報も、開発段階では品質を保証するための重要な材料。「本当に動いているのか」を常に確認できる仕組みを作ることが重要です。 ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-7-12] 生成AI基礎講座B 「開発⑧superbaseMCPを活用したテスト」](https://i.vimeocdn.com/video/2133773344-1e56f6732376192d5b0c447e789bdfde929a4608ac4c0351bdd1d3a7fb5114cc-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 Supabase MCPを使った大規模テストデータの追加、エンベディング生成、ベクトル検索の実装を通じて、エラーを出さない丁寧な開発手法を学びます。4時間におよぶ実践的な開発プロセスで、MCPの効果的な活用方法とリファクタリングの重要性を深く理解できる内容です。 🎯 動画トピック 📊 MCPによる大規模テストデータ追加 ・目標300件に対し68件のメモデータを追加（合計100件に） ・「コーヒー豆買う」「睡眠時間確保」など実用的な短文メモ ・MCPが使われていない問題と対処法 ・ユーザーIDの確認と認証エラーの解決 ・ESCキー2回で操作を戻すテクニック 🔢 エンベディング生成とベクトル検索 ・pg_vectorを使った多次元ベクトル処理 ・1.2MBのファイルサイズと処理時間の課題 ・10件ずつ6回に分けるバッチ処理の工夫 ・意味的な検索を可能にするベクトル表現 ・Supabaseへのベクトルデータ格納と検証 ⚠️ MCP実行時のトラブルシューティング ・「(MCP)」表記の確認が必須 ・指示しても使っていない場合の再指示方法 ・認証エラーとセキュリティポリシーの調整 ・データが見えない問題の原因特定 ・段階的な確認で問題を早期発見 🛡️ エラーを出さない開発の実践 ・画面にエラーを表示させない丁寧な開発プロセス ・90%のエラーを事前に潰す検証手法 ・残り10%程度が偶然出てくる理想的な状態 ・小さな単位で確認しながら進める段階的実装 ・「できました」報告を鵜呑みにせず可視化して確認 🔄 リファクタリングの必要性 ・フェーズ3完了時点での構造複雑化 ・エンベディング生成の場所が不明確になる問題 ・開発時間の60-70%はリファクタリングに使うべき ・新機能追加より土台を固めることの重要性 ・プロジェクト構造を理解することで効率化 💡 開発の本質的な学び ・「一つ一つ土台をまず固める」ことの重要性 ・丁寧に取り組むことで大規模開発も安定 ・構造を理解せずに始めると苦労する ・AIの報告を信じず、必ず証明できる形で検証 ・メモは記憶ではなくトリガー（10文字程度で十分） 🔑 今回のキーメッセージ 「開発時間の60-70%はリファクタリングに使うべき」 → 新機能を追加するよりも、土台を固めることが長期的な成功につながる 「エラーは90%事前に潰す。残り10%が偶然出てくる程度が理想」 → 画面にエラーを表示させない開発が、プロフェッショナルの証 「AIは『できました』とすぐ言う。必ず可視化して確認すること」 → 報告を信じるのではなく、証明できる形で検証する習慣が重要 「プロジェクトの構造を理解せずに始めると苦労する」 → どこで何をやっているか把握することが、効率的な開発の鍵 「MCPを使うように指示しても、使っていないことがある」 → 「(MCP)」という表記を確認し、明示的に再指示することが大切 --- ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-7-13] 生成AI基礎講座B 「UI①Claude Codeプラグインでデザイン革命」](https://i.vimeocdn.com/video/2133769596-7fbfcaf67253cb4bb5de73dabea70cd21241bb73d43cab00b74055f199cb7040-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 Claude Codeで開発したアプリが「いつも紫色のグラデーション」「白黒のシンプルデザイン」になってしまう悩みを解決。プラグイン機能を活用して、AIが生成する「いかにもAI」なUIから脱却し、プロフェッショナルなデザインを実現する実践テクニックを解説します。 🎯 動画トピック 🎨 AI生成UIの共通課題 ・紫色のきらびやかなグラデーション vs 白黒シンプルの二択問題 ・「またこの雰囲気か...」開発を重ねるほど感じる違和感 ・画像生成AIと同じく「これAIで作ったよね」と分かってしまうデザイン ・2回目、3回目と開発するうちに目が肥えてくる現象 🔌 Claude Codeプラグインの基礎 ・プラグインとは：カスタムコマンド + エージェント + MCPサーバーのパッケージ ・「隠しコマンド」「スキルセット」のような機能強化ツール ・/pluginコマンドで簡単アクセス ・公式プラグイン：セキュリティ、デザイン、データベースなど多数 ⚡ フロントエンドデザインプラグイン導入 ・/plugin → Browse & Install Plugins で一覧表示 ・「Frontend Design」プラグインを選択してEnable ・UI/UXのベストプラクティスをClaude Codeが習得 ・デザイン専門のエージェントとして機能するように 🚀 効率的な開発テクニック ・ドラッグ&ドロップでプロジェクト即座に切替（cd、ls不要） ・npm run devは別ターミナルで直接実行が効率的 ・アーキテクチャ確認で技術スタック（Supabase、OpenAI API等）を把握 ・ダークモード問題：Chrome設定で一時的にライトモードへ 💡 プラグインの構成要素 ・カスタムコマンド：/slashで始まる専用コマンド ・エージェント：特定役割に特化したサブエージェント ・MCPサーバー：外部サービスとの連携機能 ・ナレッジ：特定分野の専門知識を集約 📊 実例：データベースプラグインの場合 ・Supabase MCPの設定が自動適用 ・データベース設計のベストプラクティス実装 ・SQL最適化の知識が組み込まれる ・セキュリティ設定のガイダンス付き → プラグイン呼び出しだけでエキスパート化 🔑 今回のキーメッセージ 「AI生成UIの『紫か白黒』から脱却するには、プラグインで専門知識を注入」 → フロントエンドデザインプラグインにより、Claude Codeがデザインのベストプラクティスを理解し、より洗練された提案が可能に 「プラグインは『隠しコマンド』ではなく『パッケージ化されたスキルセット』」 → MCPサーバー、カスタムコマンド、エージェント、専門知識を一つにまとめた効率化ツール 「ドラッグ&ドロップひとつで開発速度が変わる」 → 小さな工夫の積み重ねが、大きな生産性向上につながる ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-7-14] 生成AI基礎講座B 「UI②Pinterestで理想のデザインを実現」](https://i.vimeocdn.com/video/2133772198-2e81ffe353d12d531311d9b82987bb291b84c435eeff5f164d7865bd77d35c3e-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ClaudeCodeのフロントエンドデザインスキルを活用した、UI/UX改善の実践編。 メモ帳アプリを題材に、Pinterestでビジュアルリサーチを行い、理想のデザインイメージをAIに伝えて実装する「イメージ駆動型開発」の全プロセスを公開。 細かい調整ではなく、デザイン全体を2025年らしいモダンなUIへと抜本的に刷新するアプローチを学びます。 🎯 動画トピック 🎨 UI/UX改善の出発点 ・細かい調整ではなく「抜本的な変更」を目指す考え方 ・フロントエンドデザインスキル（プラグイン）の活用 ・機能追加より先にUI刷新を優先する理由 ・2025年らしいモダンなデザインへの刷新 👤 ユーザー体験重視の設計思想 ・「次に何をするか」を即座に知りたいニーズの発見 ・アプリを開いた瞬間の体験設計 ・見る＞追加という使用頻度の分析 ・自分自身をペルソナにした設計のメリット ・実際の使用シーンを想像しながらUIを構築 🔍 Pinterestを活用したビジュアルリサーチ ・効果的な検索ワードの工夫（「メモ UI」→「メモ UI カード」） ・サジェスト機能で関連デザインを探索 ・Tinder UIなど類似パターンからの発想 ・「良いデザイン」から具体的な要素を言語化 ・検索センスとコツの実践例 🃏 カード型UIの選定プロセス ・スタック表現で「次にやるべきこと」を視覚化 ・目の前に「ドーン」と表示する設計思想 ・追加ボタンは下部配置で閲覧を邪魔しない ・単語学習アプリ風のカードめくりUIの採用 ・奥にメモが控えている感じを表現 🤖 AIへのイメージ伝達と実装の流れ ・参考画像をコピーしてClaudeCodeに提供 ・「徹底的に分析してUI/UXの言語化をお願いします」 ・AIによるデザイン要素の詳細分析（カラーシステム、ニューモフィズム、タイポグラフィー） ・「今回のプロジェクトにどう活かすか提案して」で具体的な適用案を引き出す ・フロントエンドスキルをフル活用した実装指示 💡 デザイン実装の実践的アプローチ ・大枠の方向性を先に決める柔軟性 ・色味は後から調整可能と割り切る ・画像からAIに分析・言語化させる効率性 ・専門用語（スタック表現、ニューモフィズム）での理解 ・ビジュアル→分析→実装という体系的プロセス 🔑 今回のキーメッセージ 「アプリを開いた瞬間に次の動作を知りたい」 → ユーザー体験から逆算してUIを設計することで、本当に使いやすいアプリが生まれる 「Pinterestの検索ワードが重要。気になったところから次のワードを考える」 → デザインリサーチには検索センスとコツがある。関連画像から次々と理想形を探索 「画像を見せて『このイメージに近い』と伝え、AIに分析・言語化させる」 → 自分で詳細を説明する手間を省き、専門用語での理解を得られる効率的な開発手法 「基本的に良いと思っています。色味は後からでも変えられる」 → 大枠を先に決め、細部は後から調整する段階的アプローチが開発をスムーズにする ▼ セナリ学院公式HP https://www.teleport.jp/scenari/ 今なら14日間無料！ #セナリ学院 #teleport_ai #生成AIスクール
![[B-7-15] 生成AI基礎講座B 「UI③フォントを極める」](https://i.vimeocdn.com/video/2133771842-157e0de3e96bfa4bee3f4975345aa6a4be1d1d0da4311bfa2095735e0121acd9-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ClaudeCodeを使ったフロントエンドデザインの実践講座。メモ帳アプリのUI改善を通じて、デザインコンセプトに合わせたフォント選びの重要性とGoogleフォントの活用法を学びます。「全丸ゴシック」「M+フォント」「Inter」など、プロが実際に使用する日本語・英語フォントの選定基準と、ウェイト（太さ）のバリエーション活用術まで、7分で実践的なUIデザインスキルが身につきます。 🎯 動画トピック 📐 デザインコンセプトとフォント選び ・「ソフトフォーカス」- 柔らかく優しい印象を実現するフォント戦略 ・メモ帳アプリに最適なフォント選定プロセス ・Claude Codeのプラグインが提案するフォントの活用法 ・デザインの雰囲気を決定する重要要素としてのフォント 🌐 Googleフォントの基礎知識 ・Webアプリケーションで簡単に実装できる無料フォントライブラリ ・独自フォントファイル不要で開発効率が大幅向上 ・商用利用も完全無料、豊富なバリエーション ・「Googleフォント 日本語 おすすめ」での効果的な検索方法 ・Claude Codeでの実装がスムーズな理由 🔤 日本語フォントのプロの選び方 ・全丸ゴシック：柔らかく丸みのある親しみやすい印象 ・M+フォント：デザイナーが昔から愛用する万能フォント ・ウェイト（太字具合）のバリエーションが豊富な理由と活用法 ・見出しと本文で太さを変える使い勝手の良さ ・Noto Sans JP：Googleが開発した標準的なゴシック体 🌟 英語フォントのおすすめと特徴 ・Inter：Webデフォルトで美しいとされる無難な選択肢 ・Avenir（アベニール）：超王道フォントの魅力と制限 ・ポスターや看板で頻繁に使用されるプロフェッショナルフォント ・Googleフォントに含まれるもの・含まれないものの違い ・英語フォントで「Interを使っておけば無難」な理由 🔧 フォント実装の実践ポイント ・Claude Codeプラグインによる適切なフォント提案 ・明示的なフォント指定方法 ・日本語と英語のフォントバランスの考慮 ・Webデザインでおすすめの日本語フォント24選の活用 ・デザイン統一のための戦略的アプローチ 💡 デザイナーの実践知識 ・カミー先生が実際に愛用するフォントの紹介 ・M+フォントのウェイトバリエーション活用術 ・フォント選びでアプリの印象が大きく変わる実例 ・コンセプトに合わせた最適なフォント選択のコツ 🔑 今回のキーメッセージ 「フォント選びはUIデザインの基礎であり、アプリケーション全体の印象を大きく左右する」 → デザインコンセプトに合わせた適切なフォント選択が、ユーザー体験を決定します 「Googleフォントで選ぶなら、日本語はM+フォント、英語はInterが無難で美しい」 → プロのデザイナーが実践する、失敗しないフォント選びの黄金律 「ウェイト（太字具合）のバリエーションが豊富なフォントは使い勝手が良い」 → 見出しと本文で太さを変えるなど、1つのフォントファミリーで表現の幅が広がります #生成AI #ClaudeCode #UIデザイン #Googleフォント #フロントエンド #Webデザイン #フォント選び #M+フォント #デザイン基礎 #セナリ学院 ご不明点や質問はコメント欄までどうぞ！ ┈┈┈┈┈┈┈┈┈┈ 『セナリ学院』とは？🏫✨ ┈┈┈┈┈┈┈┈┈┈ 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-7-16] 生成AI基礎講座B 「UI④AIとの徹底的な認識の擦り合わせ」](https://i.vimeocdn.com/video/2133771315-4fb012c4cb7cc9119b2f0763938c1f1de7ea7d66f42bb2070bee87b1fab1cd7b-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 ClaudeCodeでメモアプリを開発しながら、AIとの「認識の擦り合わせ」の重要性を実践的に学ぶ講座です。デザインの色味決定から、UI実装の確認、データベースとUIの整合性チェックまで、開発フェーズごとに丁寧に認識を合わせていくプロセスを解説。AIに効果的に質問し、徹底的に調査させる対話技術も実践します。「認識のズレ」を放置すると開発が誤った方向に進んでしまう―その防ぎ方を具体例とともにお伝えします。 🎯 動画トピック 🎨 デザインの色味決定とPinterestの活用 ・「シンプル UI カラー」で効率的な配色検索 ・黄色×黒の配色を選定し、AIと方向性を共有 ・参考画像をAIに渡してデザインコンセプトを伝える実践 🔍 UI実装の確認とフィードバックの技術 ・まず全体評価「悪くはない、抜本的に進化している」 ・細かい問題点の具体的な指摘「プラスがずれている」「色味が気になる」 ・一つずつ解決していく段階的アプローチ 💬 認識のすり合わせの基本プロセス ・効果的な質問の型：「〜だと思っていますが、認識あってる?」 ・単に事実を確認し、相手に考えさせるアプローチ ・人間側の期待値を明示してから確認する重要性 ・カードスタックとメモ一覧の関係性を対話で明確化 📊 データベースとUIの整合性チェック ・「削除してもメモ件数が減らない」問題の発見 ・楽観的削除（UI上だけ消えたように見せる）の問題点 ・テストデータ60件の影響を見落としていた事例 ・思い込みではなく、実際のデータを確認する重要性 ⚡ AIに徹底的な調査を依頼する技術 ・「徹底的に調べてください」でExplorer機能が働く ・「抜本的に変えたい」など副詞的表現の効果 ・認識のズレを感じたときの警告的トーン「一旦ちゃんと調べろよ」 ・バックエンドとフロントエンドを分けて調査依頼 📝 実装ロジックの理解 ・カードスタック（メインカード）= メモ配列の1件目 ・メモ一覧 = メモ配列の2件目以降 ・最新順で表示、最大10件（メイン1件+一覧9件） ・MOREボタンで追加のメモを確認できる仕様 🔑 今回のキーメッセージ 「まず自分の理解や期待を述べてから、認識あってますか?と確認する」 → この形式が最も効果的な認識擦り合わせの方法。単に質問するのではなく、人間側の考えを明示することでAIの理解を促進 「徹底的に、抜本的に、といった副詞を使うとAIが詳細に調べてくれる」 → 特に認識のズレを感じたときや、開発が誤った方向に進みそうなときに有効。Explorer機能を活用して正確な情報を引き出す 「この確認作業を丁寧にやっていくことを、開発のフェーズごとに実施することが極めて重要」 → 認識擦り合わせは一度きりではなく、継続的なプロセス。AIとの対話を通じて、お互いの理解を一致させながら開発を進める #ClaudeCode #生成AI #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-7-17] 生成AI基礎講座B 「UI⑤-デザインシステムとスワイプUI実装-」](https://i.vimeocdn.com/video/2133771684-709efd51b21c68e48734ae607665a87695a563cb39412a9439ab8592b6a9a23c-d_1920x1080?&r=pad®ion=us)
📝 今回の内容 生成AI基礎講座B「UI⑤-デザインシステムとスワイプUI実装-」 ClaudeCodeを活用したメモアプリ開発の第5回。デジタル庁やAppleの公式デザインシステムを参考に、プロフェッショナルなカラー設計とモバイルUI最適化を実践。 ボタン操作からTinder風スワイプUIへの移行で、直感的な操作性を実現するまでの開発プロセスを完全解説します。 🎯 動画トピック 🎨 デザインシステムの基礎と実装 ・プライマリーカラー・セカンダリーカラーの戦略的設定 ・グローバルCSSでのカラー変数定義 ・一貫性のあるUIを実現する設計思想 ・デザインシステムが生む「一目でわかるブランド感」 📖 一流組織の公式デザインシステムに学ぶ ・デジタル庁：ブルー900/700で信頼感を演出する行政デザイン ・Apple：ヒューマンインターフェイスガイドラインの活用 ・「青みがかったグレー」に宿るブランドアイデンティティ ・公開されているベストプラクティスを自分のプロジェクトへ応用 📱 モバイルファーストUI最適化 ・デベロッパーツール（F12）で各デバイスサイズを検証 ・iPhone 14サイズを基準にした調整 ・カードの高さを画面の50%に拡大 ・メモ一覧はコンパクトに、メインカードは大きく見やすく 👆 Tinder風スワイプUIの実装 ・ボタン操作から直感的なスワイプへ移行 ・右スワイプで完了処理（シンプルに方向は1つのみ） ・カードが画面外に飛ぶアニメーション ・スワイプ中の傾きと色変化で遊び心を演出 ・次のカードが下から浮き出る自然な表現 💬 ClaudeとのUX対話術 ・「UX視点で君の意見も聞きたい」と投げかける効果 ・「冗長な説明は不要」と伝えるだけで自動的に最適化 ・明示的に「ボタンを消して」と言わなくても理解してくれる ・AIをUXデザイナーとして尊重する対話の重要性 ⚙️ TypeScriptの型安全性とエラー対処 ・エラーの約7割は型関連が原因 ・「型安全か確認して」の一言で大半の問題が解決 ・.tsxファイルで守られる型の制約（Number型に数字のみ等） ・数ヶ月前と比べてエラーが激減した理由 🛠️ 開発者ツールの実践活用 ・エスケープキー1回で実行停止、2回でリワインド ・「会話のみ戻す」「コードと会話の両方リセット」の選択 ・フロントエンドデザインスキル（プラグイン）の効果 ・リアルタイムでUI変更を確認しながら開発 🎯 効率的な開発フローの実践 ・バックエンド機能（データベース・動作確認）を先に完成 ・UIは後から洗練させる合理的アプローチ ・「UIは無限に時間をかけられる」領域だからこそ後回し ・フロントエンドデザインスキルで比較的容易にプロ品質実現 🔑 今回のキーメッセージ 「一つ変わると一気にAI感がなくなる」 → 冗長なボタンや説明文を削除し、スワイプUIに統一するだけで、プロダクトとしての完成度が劇的に向上 「デザインシステムは一貫性を生む」 → デジタル庁の青、Appleの青みがかったグレー。細部にブランドが宿り、「あ、この会社のデザインだ」と認識される 「AIとの対話は相手を尊重すること」 → 「冗長な説明不要」とUX視点で問いかければ、Claudeは自らデザイナーとして最適解を提案してくれる 「型安全か確認して」の魔法 → TypeScriptエラーの7割は型関連。この一言でClaudeが自動チェック・修正し、開発が劇的にスムーズに 「バックエンド優先、UI後回しが正解」 → データベースと機能がしっかりしていれば、UIはいくらでも後から洗練できる。時間配分の戦略が開発効率を左右する #ClaudeCode #デザインシステム #スワイプUI #モバイルUI #TypeScript #レスポンシブデザイン #UXデザイン #生成AI #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スクール
すべての動画を表示しました
