WEB TOUCH MEETING #123

Transcript

1. WEB TOUCH MEETING #123 ノンエンジニアこそ使ってほしい Cursor活用術 2025/09/20
2. みなさん AIエージェント使ってますか?
3. 目次 Cursor とは Vibe Coding やってみよう Cursor とはなにか 簡単にご紹介 イベントサイトのリニューアルを実際にやってみます。 3分間クッキング方式の完成例から、さらに追加指示でブラッシュアップしていきます。 AI活用のポイントまとめ データソースのツール運用とガバナンスが重要。 企業導入時はコスト予測やプライバシーポリシーの一括管理も検討が必要です。 マネジメント業務に 使ってみよう 分散した情報の収集や追跡、課題の整理や計画、レポート作成などの 管理業務にもAIエディタは役立ちます。
4. 　　　　　　　　　　　とは
5. Cursor とは AI統合機能 AIベンダーニュートラルで、コード生成、リファクタリング、デバッ グ支援が可能。自然言語でのコード説明や質問応答にも対応。 インテリジェントなコード補完 コンテキストを理解した高精度な補完を実現。複数行のコード生 成や、プロジェクト全体の理解に基づく提案が可能。 チャット機能 エディタ内でAIとリアルタイム対話ができる。コードの説明、改善 提案、エラー解決、プロジェクト全体に関する質問対応が可能。 VS Code互換性 VS Codeの拡張機能がそのまま利用でき、既存のワークフロー を維持しながらAI機能を追加。慣れ親しんだインターフェース。
6. エディタ(メモ帳) AIとチャット
7. Vibe coding やってみる
8. Vibe coding やってみよう https://osh-web.github.io/
9. Vibe coding やってみよう オープンセミナー広島 のイベントサイトをリニューアルしたいです。 最終的にAIエージェントを活用して開発を行いたいと考えているため、 そのためのVibe Coding用のプロンプトを作成してください。 # 参考リンク - https://osh-web.github.io/ - https://osh.connpass.com/event/355425/ リニューアル後の主な目的は、情報の見やすさ、モバイル対応、参加者増加で す。 想定している新機能や改善点は、セッション一覧、登壇者紹介、スポンサー紹 介、スポンサーのジョブ(採用募集)紹介、過去イベントのアーカイブです。 申し込み機能は別サービス（Connpass）の利用を前提としています。 デザインの雰囲気はお任せしますので、イベント趣旨に合うデザインでお願いし ます。 ブランドカラーは #E63C08 です。 使用したい技術スタックは、React(Next.js) + Typescript + TailwindCSS を想定しています。 WordPressのようなCMSは使用せず、Github Pages または Firebase Hosting 等を利用して静的ページのホストのみを想定しています。 Vibe Codingで重視したいポイントは、ユーザビリティ、アクセシビリティ、 SEO対策です。 主催者がITエンジニアのコミュニティのため、「さすがはエンジニア」と思わせ るようなコンテンツにしたいです。 調査した内容をもとにVibe Codingのためのプロンプト作成をお願いしま す。
10. Vibe coding やってみよう ※ 画像はイメージです
11. Live coding with Vibe coding
12. マネジメント業務に使ってみよう
13. エンジニアリング マネージャー向けの内容 生成AIの本質的な良さ AIエージェント連携の前提 今回紹介する内容は、 登壇者の経験に基づいているた め、エンジニアリングマネージャー のような業務やツールが中心とな ります。 他の業務やツールに置き換えても本 質的な部分は変わらないのが生成 AIの良さだと思うので、 「自分だったらこのツールでこんな業 務を任せたいかも」 と考えながら聞いてください AIエージェントの連携を強化するた めのModel Context Protocolを使用 する前提の内容となっています。 ※ 今回MCPサーバーの細かい設定方法等の 　 説明は割愛します ※ 最近はチャットサービス自体に連携機能が 　 追加されているケースもあります はじめに
14. マネージャーの業務フロー バージョンアップなど 必要な作業 課題の発生 事業戦略 顧客要望 チーム内からの 改善提案 課題の起票 課題の リファインメント 課題のアサイン メンバーの 進捗管理 成果物のレビュー リリース
15. 認知負荷 • メール、チャット、ミーティングなど複数チャネルで社内外とやりとり • タスクに対するメンバーからの提案や質問への回答、意思決定 • 情報量が多く、優先順位付けや判断が求められる場面が多い • バックログ全体の定期的な棚卸し、次スプリントのタスク準備 • 課題の起票、着手可能な状態にするための詳細化 • レビュー、リリースのとりまとめ • 日々のタスク管理や進捗確認も重要な役割 作業負荷 マネジメントにおける負荷
16. Cursor x コミュニケーションツール で認知負荷を軽減 今なにすればいい?
17. Cursor x コミュニケーションツール で認知負荷を軽減 今なにすればいい?
18. Cursor x Github で 認知負荷を軽減
19. Cursor x Jira で 課題のリファインメント
20. Cursor x Jira で 課題のリファインメント Before • マネージャーとメンバーで分担して主要な課題の内容整理や調査を実施 • 忘れた頃に調査に着手する場合もあり、思い出す時間がかかる 　→ 思い出して調査するのが面倒なので調査も込みでアサイン 　　　→ 事前に工数/優先度の見積りが難しく進捗管理ができない After • Cursorにすぐお願いできるので、忘れないうちに課題の詳細化が可能 　→ 類似チケットも探して関連付けさせることでセットで対応 • 「OKそうだからチケットに対応方針記載してそのまま実装しといてー」
21. Cursor x Jira で 次スプリントの計画 After • 各課題の優先度スコアリングができるようになったことで、 次のスプリントで取り組むべき課題の抽出が容易に
22. Cursor x Jira で リリースノートの作成
23. 成果 ❖ 複数ツール間の情報収集時間が削減 ➢ ボトルネック具合が可視化され、助けを求めやす くなった ➢ 「今日重要ななにかを忘れている気がする...」 を気軽に何度でも聞ける ❖ AIと人間のハイブリッドで業務フローを最適化 ➢ 突発/差込チケットは人間がFlagを付け、 それ以外はAIの優先度判定で整理 ❖ 定型的な情報収集/準備/報告作業からより戦略的な意思 決定業務へシフト 良かった点 改善/検討が必要な点 ❖ AIの判定精度の向上 ➢ 業務知識の蓄積により精度向上を図る ▪ 優先度スコアリング ▪ 提案内容の品質 ➢ プロンプトの継続的改良が必要 ▪ コミュニケーションツールからの情報収 集 ❖ 個人から組織への移行･浸透方法の検討
24. 今後取り組みたいこと あー、◯◯もついでに やっちゃいたいねー Engineer @Cursor ◯◯の対応お願い Cursor 対応を開始します... 今日もよろしくおねがいしますー チケット起票 / 内容記載 PR作成 Engineer Approved
25. まとめ データソースの運用や コンテキストの集約が重要 • AIエージェントの効果を最大化するには、連携するデータソース(Jira 等)を 人間がきちんと運用している必要がある • タイトルのみで内容をほぼ記載していないチケットはAIも人間も困る • 作業に必要な業務知識や業務フローに関するドキュメントを整備する • AIエージェントが認識できる場所に格納し、必要に応じて誘導する ガバナンスと企業導入時の 検討事項 • 個人利用と企業導入では考慮すべき点が大きく異なる • コスト予測、プライバシーポリシーの一括管理、セキュリティ要件の整理が必要 • 能動的かつ活発に活用してくれるチームや個人のモチベーションを下げることなく、 あまり活用できていない方へ知見や成功体験を共有する施策も必要 継続的な学習と適応 • AI界隈は日々進化しており、「これを使えばOK」という絶対解は存在しない • 今日発表した内容もCursorじゃなくてもできるものが多い • まずは小さく始めて、AIに向いている業務と向いていない業務を見極めることが大切 • 利用事例をそのまま適用してもうまくいかないケースが多いため、 自分の業務に合わせた試行錯誤が重要
27. Have a good 　　　　　　　　　　life!