Cursor × Marp 勉強会

CursorとMarpを利用してLLM以前では現実的ではなかったスライド作成方法を紹介する社内勉強会で使った資料

Transcript

1. Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 1
2. 今日の内容 対象の方々 Markdown の基本を知っている方 Cursor を愛用している方 MARP に興味を持っている方 今日のゴール Markdown でスライド作りを楽しめるようになる AI の力で素早くスライドを組み立てられる 会社カラーを取り入れて、実用的なスライドが作れる Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 2
3. Marp ってなに？ Markdown がスライドになる便利ツール .md を書くだけでプレゼンの完成 使い方はシンプル --- でページを区切る Markdown の記法でページを作る CSS で細かいデザインを調整できる Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 3
4. 準備するもの 以下をダウンロードしてください！ Cursor 公式サイトからダウンロード 必要な拡張機能（VSCode 拡張機能） Marp for VS Code Markdown All in One Markdown Preview Mermaid Support Draw.io Integration Path Intellisense Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 4
5. 最初のスライドを作る 1. スライドの雛形をコピー <!-- Marpの設定 --> --- marp: true title: サンプルスライド theme: default --- # スライドタイトル - これはサンプルです - `---` で次のスライドへ --- ## 2枚目のスライド 1. 箇条書き(番号付き) 2. これだけで立派なスライド 2. AI にお願いする カレーの作り方.md を新規作成して、こう聞いてみ ましょう： おいしいカレーの作り方のスライドをつくって あっという間に、美味しそうなカレースライドの 完成！ Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 5
6. 画像も使える --- marp: true --- # 画像サンプル  <!-- 手元の画像を使うなら  --> Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 6
7. 表も使える 表も簡単に追加できます： | 項目 | 内容 | |-----|-----| | A | Sample A | | B | Sample B | こんな感じに表示されます： 項目 内容 A Sample A B Sample B Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 7
8. オリジナルテーマを作る my-theme.css を新規作成して、AI にお願い： Marpのカスタムテーマを作って または手動で入力： /* @theme my-theme */ @import 'default'; section { font-family: '游ゴシック', sans-serif; background-color: #fafafa; color: #333; } h1, h2, h3 {color: #1f5faa;} Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 8
9. テーマを適用する theme を設定するだけで、オリジナルテーマの完成です。 --- marp: true theme: my-theme title: 会社テンプレサンプル --- # 会社のロゴ入りテンプレ Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 9
10. 細かいところもAI にお願いすればなんとかなる 気になったらまずお願いしてみよう。できないよ、って言われてから考える。 スライドを左右に分ける 文字サイズを調整する 文字色を変更する 参考デザインをもとに作成 mermaid で図を描く drawio の図を挿入する 会社ロゴを配置する Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 10
11. ここから先はMarp の限界を探った現在地 © 2025 EXPLAZA Inc. 11
12. もっと便利なコンポーネント機能 EXPLAZA のテーマを使うとこんなスタイリングも可能です！ グリッドレイアウト 複数カラムに情報を分けられます <div class="grid"> <div>左側コンテンツ</div> <div>右側コンテンツ</div> </div> カードとコールアウト 重要なポイントはカードで強調 特に注意が必要な情報はこのように目立たせる Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 12
13. アクションステップも表現できる 1 準備 Marp の基本を理解する 必要な拡張機能をインストールする 2 実践 自分のスライドテーマを作成する コンポーネントを活用して表現力を高める 3 共有 PDF/HTML でエクスポートする チームで再利用可能なテンプレートにする Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 13
14. Cursor への効果的な話しかけ方 基本的な指示の出し方 具体的に指示する 「カレーの作り方のスライドを作って」 修正を依頼する 「2枚目にイラストを追加して」 書式の指定 「2カラムのレイアウトにして」 上級テクニック 参考資料の提示 「explaza.mdを参考にスライド作成」 段階的な指示 「タイトル→ 目次→3つの章に分けて」 デザインの指定 「タイトルを青色にして背景追加」 Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 14
15. 5 段階レベル表示 Cursor × Marp 勉強会 レベル5 ：変革段階 特徴: 組織・業界への影響 / スキル: 戦略的思考と実行 / 成果: イノベーションの創出 レベル4 ：指導段階 特徴: 他者への指導・育成 / スキル: ナレッジの共有 / 成果: プロジェクト主導 レベル3 ：熟練段階 特徴: 自律的な業務遂行 / スキル: 専門領域の深い理解 / 成果: 効率的な問題解決 レベル2 ：応用段階 特徴: 基礎知識を実践で活用 / スキル: 実践的なスキル獲得 / 成果: チーム内での貢献 レベル1 ：基礎段階 特徴: 基本的な知識や技術の習得 / スキル: 初歩的な概念理解 / 成果: 基本ツールの操作 © 2025 EXPLAZA Inc. 15
16. アクション項目リスト 1 プロジェクト計画の立案 目標設定と優先順位付け リソース配分と役割分担 2 現状分析の実施 既存システムの評価 ユーザーニーズの把握 3 要件定義の作成 機能要件の明確化 非機能要件の設定 4 設計・開発の実行 アーキテクチャ設計 実装とコードレビュー 5 テスト・評価の実施 品質検証の実行 フィードバックの収集と反映 Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 16
17. 要件定義 設計 開発 テスト リリース プロジェクト管理 課題発見 フィードバック プロジェクト開発ワークフロー Draw.io で図を挿入する 基本的な使い方 1. .drawio ファイルを作成 2. Draw.io エディタが開く 3. 図を作成して保存 4. Marp スライドに挿入 図の更新方法 1. .drawio ファイルを開く 2. 編集して保存 3. 自動的に PNG も更新される Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 17
18. まとめ Marp で、Markdown からスライドが簡単に作れます Cursor の賢いAI と組めば、効率よく作業できます 会社カラーを取り入れて、オリジナルテーマも作れます 面倒な調整はAI に任せて、アイデアに集中できます Cursor × Marp 勉強会 © 2025 EXPLAZA Inc. 18