Marp + Cursorでスライドを作成する

背景

最近pptxで資料を作る仕事がありました。

パワポで作成していたが楽しくなかったので、mermaidみたいにmarkdownで作成できるものが無いかなと調べたらMarpというものがありました。

さらにMarpとCursorを組み合わせれば簡単に資料が作れそうだったので試してみました。

環境

  • MacBook Air M3 1TB / 24GB
  • OS: macOS Sequoia 15.5

環境構築

# Marpインストール
brew install marp-cli

# LibreOffice(編集可能なPPTX用)
brew install --cask libreoffice

Cursorの設定

cmd + shift + p でプロジェクト固有のルールを設定します。

Cursorルール

ルール作成

ルール内容

Markdownファイル作成

CursorのAgentを使ってMarkdownファイルを作成します。

Cursor相談

  • AIとそこまでやり合っていないので、内容が薄いです。
📋 presentation.md(クリックで全内容を表示)
---
marp: true
theme: default
class: lead
paginate: true
backgroundColor: #fff
backgroundImage: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%)
color: #000
style: |
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .small-text {
    font-size: 0.8em;
  }
  .highlight {
    background-color: #e8f5e8;
    border: 2px solid #28a745;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
  }
  section {
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    color: #000;
  }
  h1 {
    color: #28a745;
    border-bottom: 3px solid #28a745;
    padding-bottom: 0.5rem;
  }
  h2 {
    color: #28a745;
    border-left: 4px solid #28a745;
    padding-left: 1rem;
  }
  h3 {
    color: #000;
  }
  strong {
    color: #28a745;
  }
  .title-slide {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
  }
  .title-slide h1, .title-slide h2 {
    color: white;
    border-color: white;
  }
  .closing-slide {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
  }
  .closing-slide h1, .closing-slide h2 {
    color: white;
  }
---

<!-- _class: title-slide -->

# 株式会社エムケイシステム
## 会社説明資料

**PROVIDE VALUE TO CUSTOMERS WITH OUR SOFTWARE.**

名古屋・技術者集団

---

## 会社概要

<div class="highlight">

**社名**: 株式会社エムケイシステム  
**所在地**: 愛知県名古屋市  
**事業内容**: ソフトウェア開発・システム構築  
**公式サイト**: https://mksc.jp/

</div>

### 私たちについて
**常に高い技術と最新の情報を追求する少数精鋭の技術者集団**

社員それぞれが持つ技術を活かし、お客様のビジネス成長をお手伝いいたします。

---

## 事業内容

<div class="columns">
<div>

### システムインテグレーション・コンサルティング事業
システムのコンサルティング、開発から運用保守までを一括して受託しています。

### 自動運転ソフトウエアの開発
上位側システムから車両側の制御まで一括で開発対応が可能です。

</div>
<div>

### 新規事業開拓/自社製品開発事業
様々な自社製品の開発を行っています。

</div>
</div>

---

## 技術分野

<div class="columns">
<div>

### Webフロントエンド
- PWA / SPA
- React / Vue

### Webシステム
- Ruby on Rails
- ECサイト

### 組み込みシステム
- 組み込みLinux
- マイコン
- Raspberry Pi

</div>
<div>

### モバイルアプリ
- iPhone / Android
- その他モバイル機器

### デスクトップアプリ
- Windows
- Mac / Linux

### AI / 機械学習
- 物体認識
- 人物認識

</div>
</div>

### その他の技術領域

<div class="highlight">

**クラウド**: AWS / Azure / Heroku / GCP / Firebase  
**最新技術**: ブロックチェーン / その他特殊技術

</div>

---

## 開発実績

<div class="highlight">

**開発実績一覧**

お取引会社様との関係上、具体的な社名などは表記しかねます。

多岐にわたる弊社のシステム開発分野を知っていただければ幸いです。

リンクが掲載されている物に関しては詳細がご覧頂けます。

</div>

---

## アクセス

### 地下鉄丸の内駅7番出口、出てすぐ右方向の路地へお進みください。

お車でお越しの際は駐車場がございませんので、お近くのコインパーキングをご利用ください。

---

## 連絡先・お問い合わせ

<div class="highlight">

**株式会社エムケイシステム**

**公式サイト**: https://mksc.jp/  
**所在地**: 愛知県名古屋市

お問い合わせは公式サイトのフォームよりお気軽にどうぞ

</div>

---

<!-- _class: closing-slide -->

# ありがとうございました

**PROVIDE VALUE TO CUSTOMERS WITH OUR SOFTWARE.**

株式会社エムケイシステム

---

<div class="small-text">

Copyright © 2005 - 2025 MKSC All rights reserved.

</div> 

PPTX変換

# 基本変換
marp ./presentation.md --pptx

# 編集可能なPPTX
marp ./presentation.md --pptx-editable

完成例

タイトルページ

プレゼンテーション1

コンテンツページ

プレゼンテーション2

感想

Markdownでスライドが作成できるのはとても便利でした。

Marpはpptxだけではなく、pdfも作成できます。

この記事をシェア

弊社では、一緒に会社を面白くしてくれる仲間を募集しています。
お気軽にお問い合わせください!