こんにちは、テツメモです。
最近、AIを活用したスライド作成の新しい方法として、「Marp×Cursor×Claude」の組み合わせが話題になっています。この方法を使えば、プログラミングの知識がなくても、美しくて効率的なスライドを作成できるんです。
話題のAI × Marpの資料作成フローが秀逸すぎた！
KEITO💻AIディレクター @keitowebai
AIだけで作る資料作成手法で一番クオリティ高いと思います。Web上に公開したからリプ欄から見てみて。 pic.twitter.com/B4f0g3CTZz— KEITO💻AIディレクター (@keitowebai) July 29, 2024
3/スマホでスライド作成
木内翔大＠SHIFT AI代表「日本をAI先進国に」𝕏 @shota7180
Markdownでプレゼンテーションスライドを作成できるMarp(https://t.co/1jrbXawmZY)に以下のプロンプトの出力結果をコピー&ペーストでスライドが完成します。
プロンプト例
'''
marp形式でインフォグラフィクスなスライドを作成してください… pic.twitter.com/hAZO4kKyBR— 木内翔大＠SHIFT AI代表「日本をAI先進国に」𝕏 (@shota7180) July 6, 2024
【保存版】スライドをAIで高速作成する方法
チャエン | 重要AIニュースを毎日発信⚡️ @masahirochaen
今話題のAIスライド生成をサクッと1分解説
①ClaudeなどのAIにて「Marp」で生成してと指示
②Cursor or VS codeにてMarp拡張機能のインストール
※Marp for VS Codeがおすすめ
③生成したMarpのコードを貼り付け
これで完成。…pic.twitter.com/fdCG4Bx7yI— チャエン | 重要AIニュースを毎日発信⚡️ (@masahirochaen) July 28, 2024
今回のニュースレターでは、この新しいスライド作成法について詳しく解説していきます。
と、その前に・・高性能なマルチAIエディタ「Cursor」と、高性能AI「Claude」について以下の記事を一読いただくと本記事の内容がよりわかりやすくなります♪
| 【AI×Cursor】ビジネスパーソンのためのコーディング革命！ |
|
||
|
| AI革命の次なる一手！ClaudeのProjects機能で生産性が爆上がり |
|
||
|
🔗Marp
💡重要★Tips💡
今回説明するMarkdown形式やMarp形式の基本を詳しく説明しますが、詳細に覚える必要はありません。
後半の章ではテーマとターゲットを入力するだけでmarp形式の美しいスライドを仕上げてくれるプロンプトをシェアします。
重要なのは、今までMarkdown形式やMarp形式を覚える必要がありましたが、生成AIのおかげでプロンプトを入力だけで仕上げることができます。その画期的な変化を感じていただきたいです。
また、微調整をする場合はコードの理解が必要になる場合もあるので、その際はこの記事をリファレンスとしてお使いください。
💡 なぜCursor×Markdown×Marpなのか？
従来のPowerPointやGoogle Slidesと比べて、この方法には以下のようなメリットがあります：
- 高品質なコンテンツを素早く生成できる
- デザインも自動で整えられる
- テキストベースなので編集が簡単
- バージョン管理がしやすい
しかも、Markdown形式でメモを取りながら、プレゼン資料も同時に完成させられるんです。これはかなり画期的！
このMarkdown形式でとったメモ帳が：
Marp形式に変換してと依頼するだけでスライド化されます：
📝Cursorは凄いメモ帳
テツメモ｜AI図解×検証｜Newsletter @tetumemo
流れはReadmeの修正プロセスと似ています。
- メモを取る
- 内容についてAIと対話しながら加筆・修正
- プレゼン形式に変換したいときは「Marpに変換」と指示
- 見た目が一瞬で変換
便利すぎて手放せません！https://t.co/hEISKCSU17 https://t.co/Cw81GygrErpic.twitter.com/QTCrHLN1Q6— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) August 3, 2024
💻️ Markdown形式について
「Markdownの記述方法を覚えるの大変だ～！」と考えている方、安心してください。
普通にテキストで書いたメモ帳をChatGPTに投げて「Markdown形式で出力してください」と指示すればOKです。慣れてくれば「Cursor」上のAIを使って一括変換も可能です。
Markdown記述についてはPerplexity ProのPageでまとめましたので参考にしてみてください。
🛠️ 必要なツール
今回使用するツールは以下の3つです：
では早速、Marpについて詳しく見ていきましょう！
🎨 Marpって何？
Marp（Markdown Presentation Ecosystem）は、Markdownを使ってプレゼンテーションスライドを作成できるツールです。日本人開発者のYuki Hattori（@yhatt）さんが開発しました。
Marpの特徴
- 簡単なテキスト形式（Markdown）でスライド作成
- プログラミング知識不要で誰でも使える
- Visual Studio Code（VSCode）の拡張機能として利用可能
- PDF、PowerPointなど様々な形式で出力可能
Marpを使えば、内容作成に集中しながら、見栄えの良いスライドを効率的に作れます。デザインに悩む時間が大幅に減らせるのが魅力です。
次のセクションでは、実際にMarpを使い始めるための準備について説明していきます。Cursorとの連携方法も含めて、詳しく解説しますね。
🔧 VS Code（Cursor）へのMarp導入方法
Marpを使うには、まずVisual Studio Code（VS Code）or CursorにMarpの拡張機能をインストールする必要があります。ここではその手順を詳しく説明します。
💡Tips💡
CursorはVSCodeのAI搭載版と理解するとわかりやすいです。ぜひCursorをダウンロードして設定していきましょう！
以下の記事の「3.4 Cursorの導入」で拡張機能のインストール含め、詳しく説明しています。
| 【AI×Cursor】ビジネスパーソンのためのコーディング革命！ |
|
||
|
Marp for VS Code拡張機能のインストール
- VS Code（Cursor）を起動
- 左側のサイドバーにある拡張機能アイコン（四角が4つ並んだアイコン）をクリック
- 検索バーに「Marp for VS Code」と入力
- 検索結果に表示された「Marp for VS Code」の「Install」ボタンをクリック
導入の確認
インストールが完了すると、「Install」ボタンが「Uninstall」に変わります。これでMarp for VS Codeの導入は完了です！
Marpの設定
Markdown > Marp: Enable HTMLのチェックを入れておきましょう。
これで全てのHTML要素を有効にすることができ、プレビュー画面でも正しく表示されます。
念の為、VSCodeやCursorの拡張機能に「Live Preview」をインストールしておかないとプレビューできませんので導入をお願いします：
🖋️ ClaudeとMarpを使ったスライド作成の基本手順
さて、ツールの準備ができたところで、実際にスライドを作成してみましょう。ここではClaudeとMarpを組み合わせた基本的な手順を紹介します。
💡Tips💡
後半で紹介するプロンプトを活用すれば、1回の指示で画像のようなスライドが仕上がります。
- プロンプトの作成 Claudeに指示を出すための文章を考えます。
'''
marp形式でインフォグラフィクスなスライドを作成してください。画像ソースはUnsplashを使用してください。
''' - Claudeによる内容生成 作成したプロンプトをClaudeに入力し、スライドの内容を生成してもらいます。
- 内容の確認と編集 生成された内容をチェックし、必要に応じて修正します。
- Marpでのファイル作成 VS Codeで新規ファイルを作成し、拡張子を`.md`にします。
- スライド内容の記述 Claudeが生成した内容をMarpの書式に合わせて記述します。
- プレビューの確認 VS Code（Cursor）の「プレビュー」機能で、実際のスライド表示を確認します。
この手順を覚えておけば、AIの力を借りながら効率的にスライドを作成できますよ。
次は、Marpの基本設定について詳しく見ていきましょう。ここを押さえておけば、よりスムーズにスライド作成を進められます！
🎛️ Marpの基本設定：YAMLフロントマター
Marpでスライドを作成する際、まず重要なのが「YAMLフロントマター」の設定です。これはMarkdownファイルの先頭に記述する特別な設定部分で、スライド全体の基本設定を行います。この指示がないとスライド化されません。
※生成AIにMarp形式での出力を依頼すれば自動的に記載されます。
YAMLフロントマターの基本
以下が、最も基本的なYAMLフロントマターの例です：
---
marp true
theme default
---
この3行で何を設定しているのか、簡単に説明しましょう：
- `---`： YAMLフロントマターの開始と終了を示します。
- `marp: true`： このファイルをMarpスライドとして扱うことを指定します。
- `theme: default`： スライドのテーマを指定します。
さらに便利な設定オプション
基本設定以外にも、いくつか便利なオプションがあります：
---
marp true
theme gaia
paginate true
header "Marpで作る素敵なスライド"
footer "© 2024 テツメモ"
---
# スライド1
これは1枚目のスライドです。
- `theme: gaia`： デフォルト以外のテーマを使用します。
- `paginate: true`： ページ番号を自動で追加します。
- `header`： 各スライドの上部に表示される文字列を設定します。
- `footer`： 各スライドの下部に表示される文字列を設定します。
これらの設定を使いこなすことで、より洗練されたスライドを簡単に作成できます。
スライドの区切り方
YAMLフロントマターの設定後、実際のスライド内容を書いていきます。スライドの区切りは、以下のように`---`（ハイフン3つ）で行います：
# スライド1
これは1枚目のスライドです。
---
# スライド2
これは2枚目のスライドです。
このように、シンプルな記法でスライドを作成できるのがMarpの魅力です。
その他各種設定一覧
次の章では、これらの基本を踏まえた上で、より高度なテクニックや、ClaudeとCursorを組み合わせた効率的なスライド作成方法について解説していきます。
🎨 Marpの基本的な使い方
Marpでスライドを作成する際の基本的な書き方と、よく使う機能を紹介します。
見出しと本文
Markdownの標準的な記法を使用します：
# これはスライドのタイトル
## これはサブタイトル
これは本文です。
- 箇条書き1
- 箇条書き2
1. 番号付きリスト1
2. 番号付きリスト2
強調とリンク
テキストの強調やリンクの挿入も簡単です：
**太字** や *イタリック* で強調できます。
[リンクテキスト](https//example.com)
画像の挿入と配置
画像の挿入は以下の形式で行います：
Marpでは、画像の配置やサイズ調整に特殊な記法があります：
- `bg`：背景画像として設定
- `right:40%`：右側に配置し、幅を40%に
- `width:600px`：画像の幅を600pxに設定
※imgフォルダを作成し、「top.png」の画像を格納しています。
スライドのスタイル変更
特定のスライドにのみスタイルを適用する場合：
<!--
_backgroundColor lightblue
_color black
-->
# 青背景のスライド
このスライドは背景が水色で、文字が黒色になります。
実践的なサンプルスライド
これらの要素を組み合わせた実践的なサンプルスライドを作成してみましょう。以下のコピペで上記のスライドが一瞬で完成します。：
---
marp true
theme gaia
paginate true
header "AIとMarpで作る次世代プレゼン"
footer "© 2024 テツメモ"
---
# AIとMarpで作る次世代プレゼン
## 効率的で美しいスライド作成術
---
# Marpとは？
Marpは**Markdown**でプレゼンテーションを作成できるツールです。
主な特徴：
- シンプルな記法
- 高速な作成
- 美しいデザイン
---
# Marpの利点
1. **効率的な作成**：テキストベースで素早く作成
2. **バージョン管理**：Gitで簡単に管理可能
3. **カスタマイズ性**：CSSで自由にデザイン可能
---
# 従来の方法 vs Marpを使う方法
| 従来の方法 | Marpを使う方法 |
|------------|----------------|
| 複雑な操作 | シンプルな操作 |
| デザインに時間がかかる | デザインは自動で整形 |
| 共同編集が難しい | テキストベースで共同編集しやすい |
---
<!--
_backgroundColor #f8f8f8
_color #333
-->
# まとめ
Marpを使えば、**効率的**で**美しい**スライドが簡単に作成できます！
次回のプレゼンでは、ぜひMarpを試してみてください。
[Marp公式サイト](https//marp.app)
このサンプルコードを使って、実際にスライドを作成してみてください。VS Code（Cursor）でMarpプレビューを開くと、リアルタイムでスライドの見た目を確認できます。
画像の挿入や配置、表レイアウト、個別スライドのスタイリングなど、様々な要素を組み合わせることで、見栄えの良いスライドを簡単に作成できることがわかると思います。
PDFへのエクスポート
手順は簡単です。
- 三角アイコンをクリック
- Export Slide を選択
で完了です。デフォルトがPDFなのでそのまま保存でOKです。
ファイル形式の変更
次の章では、これらの基本を踏まえた上で、ClaudeとCursorを活用したより効率的なスライド作成方法について解説していきます。
🎨 CursorとAIを使ってスライドをオシャレにカスタマイズ
前章で作成したベーシックなスライドを、CursorのAI機能を活用してよりスタイリッシュにアップグレードしていきましょう。ここでは、画像の挿入、CSSのインライン記述、レイアウト変更、内容の充実化などを行います。
Cursorでのスライド編集の基本
- Cursorを起動し、前章で作成したMarkdownファイルを開きます。
- エディタ上で`Cmd+K`（MacOS）または`Ctrl+K`（Windows）を押してAIプロンプトを開きます。
- 全体を指示する場合はエディタ上で`Cmd+L`（MacOS）または`Ctrl+L`（Windows）を押してAIプロンプトを開きます。
画像の挿入とレイアウト変更
まず、Unsplashから適切な画像を挿入し、レイアウトを改善します。Cursorのエディタ上で以下のようなプロンプトを入力します：
スライドに、Unsplashから取得したAIとプレゼンテーションに関連する画像を背景として挿入し、レイアウトを改善してください。
結果、画像が差し込まれ、ダイナミックなレイアウトに変更：
内容の充実化
次に、スライドの内容をより具体的で実用的なものに充実させます。以下のようなプロンプトをCursorのAIに入力します：
Marpの主な特徴を表形式でオシャレなデザインでまとめて結果、見栄えの良い表形式にまとめ、内容も拡充してくれました：
AIの提案を基に、新しいスライドを追加したり、既存のスライドの内容を拡充したりします。
最終調整
最後に、全体の一貫性を確認し、必要に応じて微調整を行います。以下のようなプロンプトを使用します：※Ctrl+Lで実行
スライド全体の一貫性を確認し、必要事項があれば加筆修正し、色使いやフォントスタイルなどを統一してください。修正後は全体のスタイルが統一されました：
これらの手順を踏むことで、基本的なスライドから、より洗練されたプレゼンテーション資料へと進化させることができます。Cursorの内蔵AIを活用することで、デザインの知識がなくても、プロフェッショナルなスライドを作成できるようになります。
次の章では、テーマとターゲットを入力するだけでmarp形式の美しいスライドを仕上げてくれるプロンプトをシェアします。
指示：
30代のビジネスパーソン向けに、Perplexityを使いリサーチ業務を行う方法
結果：
重要なのは、今までMarkdown形式やMarp形式を覚える必要がありましたが、生成AIのおかげでプロンプトを入力だけで仕上げることができます。その画期的な変化を感じていただきたいです。
また、微調整をする場合はコードの理解が必要になる場合もあるので、その際はこの記事をリファレンスとしてお使いください。
| ここから先は有料コンテンツです |
| |
| この続き：2729文字 / 画像7枚 |