【プロンプト解説】ChatGPTとVScodeの拡張機能(Marp)でプレゼン用のスライドを作る方法

2023年4月5日
作業効率アップ全般

以下の流れで素早く簡単にスライドを作成できます。

①VScodeやMarpのインストール

②この記事で紹介するプロンプトをChatGPTに使う

③結果をVScodeに貼り付ける。

④できたスライドをダウンロード

1 1.はじめに
- 1.1 1-1.VScodeとは
- 1.2 1-2.Marpとは
2 2.準備
- 2.1 2-1.VScodeのインストール
- 2.2 2-2.Marp拡張機能のインストール
3 3.コンテンツ作成
4 4.まとめ

1.はじめに

1-1.VScodeとは

Visual Studio Code（VScode）は、Microsoftが開発したオープンソースのコードエディタであり、プログラミング言語のサポートやデバッグ機能、Gitの統合など、多機能を備えた開発環境として広く利用されています。軽量でありながら高い拡張性を持ち、様々な拡張機能を追加することで、開発者のニーズに応じた環境を構築できます。プログラミングだけでなく、ドキュメントやプレゼンテーション資料の作成にも活用されており、今回紹介するMarp拡張機能は、VScode上でスライドを作成するための一例です。

1-2.Marpとは

Marpは、Markdown記法を使用してプレゼンテーションスライドを簡単に作成できるツールです。Markdownは、簡素な記法でリッチなテキスト文書を記述するための軽量マークアップ言語で、多くの開発者やライターによって好まれています。Marpは、VScodeの拡張機能として提供されており、インストールすることでVScode上で直接スライドを作成、プレビュー、エクスポートすることができます。また、Marpでは、デフォルトのテーマをはじめ、カスタムテーマやスタイルも適用できるため、見栄えの良いプレゼンテーションを手軽に作成することが可能です。

2.準備

2-1.VScodeのインストール

VScodeを使用するためには、まず公式ウェブサイトからインストールする必要があります。VScodeはWindows、macOS、Linuxの各OSに対応していますので、お使いのコンピュータに合わせたバージョンをダウンロードしてください。インストールが完了したら、起動してウェルカム画面が表示されることを確認しましょう。これで、VScodeの基本的なインストールが完了し、拡張機能を追加する準備が整いました。

2-2.Marp拡張機能のインストール

VScodeにMarp拡張機能をインストールするには、以下の手順に従ってください。

VScodeを開き、左側のメニューバーにある拡張機能アイコン（四角形が重なったマーク）をクリックします。
検索バーに「Marp」または「Marp for VS Code」と入力し、検索結果に表示された「Marp for VS Code」の拡張機能を見つけます。
Marp for VS Codeの右側にある「Install」ボタンをクリックしてインストールを開始します。
インストールが完了すると、「Install」ボタンの代わりに「Uninstall」ボタンが表示されます。これで、Marp拡張機能のインストールが完了しました。

これでMarpがVScodeに追加され、Markdownを使ってスライドを作成し、リアルタイムでプレビューすることができます。次に、ChatGPTで生成したコンテンツをVScode上のMarpで使用してスライドを作成していきましょう。

3.コンテンツ作成

3-1.プロンプトの作成

以下のようにプロンプトを作成しましょう。

赤字の部分を必要なスライドに合わせてカスタマイズしてください。

ChatGPTのモデルは4.0で検証済みです。

#命令書:
あなたは、プロのプレゼンテーターです。
以下の要望を元に、制約条件と出力条件を厳密に守って最高のプレゼンテーションのためのスライド作成をお願いします。スライドはMarp for VS Codeで作成するため対応したMarkdownを出力してください。

#要望
・題名は「[スライドのタイトル]」としてください。
・内容は「[スライドの内容]」としてください。
・分量は[プレゼン時間]分以内で説明できる内容としてください。
・ターゲット（プレゼンの相手）は[プレゼンの相手]です。

#制約条件:
・目次を付けてください。
・視認性が良い配色とし、カッコいいと感じるデザインとしてください。
・誰にでもわかりやすくしてください。
・重要なキーワードを入れてください。
・画像や図形を用いて説明してください。

#出力条件:
Marp for VS Code対応のMarkdownを作成してください。

プロンプトの例

#命令書:
あなたは、プロのプレゼンテーターです。
以下の要望を元に、制約条件と出力条件を厳密に守って最高のプレゼンテーションのためのスライド作成をお願いします。

#要望
・題名は「chatGPTとMarpforVScodeでスライドを作る方法」としてください。
・内容は「chatGPTとMarpforVScodeでスライドを作る方法を解説する」としてください。
・分量は5分以内で説明できる内容としてください。
・ターゲット（プレゼンの相手）は非エンジニアです。

#制約条件:
・目次を付けてください。
・視認性が良い配色とし、カッコいいと感じるデザインとしてください。
・誰にでもわかりやすくしてください。
・重要なキーワードを入れてください。
・画像や図形を用いて説明してください。

#出力条件:
Marp for VS Code対応のMarkdownを作成してください。

ChatGPTの回答

3.2 Mark for VS Codeでスライド作成

Visual Studio Codeを開きます。
左上のメニューバーから File を選択し、 New File をクリックします。または、Ctrl+N (Windows/Linux) または Cmd+N (Mac) キーを押して新しいファイルを作成します。
3.1で作ったプロンプトの回答を貼り付けます。
左上のメニューバーから File を選択し、 Save As... をクリックします。または、Ctrl+Shift+S (Windows/Linux) または Cmd+Shift+S (Mac) キーを押して名前を付けて保存ダイアログを開きます。
保存ダイアログで、保存先フォルダを選択し、ファイル名を入力します。ファイル名の末尾に .md 拡張子を付けてください。例: my_document.md。
Save をクリックしてファイルを保存します。

画面右上の、以下のような画像のボタンを押して、スライドを確認できます。

スライドが思ったようなものではなかった場合は、プロンプトをカスタマイズしてみてください。

3.3作成したスライドをエクスポート

PDF形式でエクスポート:

VS Codeを開いて、Marpで作成したスライドのMarkdownファイルを開きます。
メニューバーから View を選択し、 Command Palette をクリックします。または、Ctrl+Shift+P (Windows/Linux) または Cmd+Shift+P (Mac) を押してCommand Paletteを開きます。
Command Paletteで Marp: Export slide deck... と入力し、該当するコマンドを選択します。
エクスポート形式を選択する画面が表示されるので、PDF を選択します。
保存先フォルダとファイル名を選択し、Save をクリックします。これでPDF形式でエクスポートされます。

HTML形式でエクスポート:

VS Codeを開いて、Marpで作成したスライドのMarkdownファイルを開きます。
メニューバーから View を選択し、 Command Palette をクリックします。または、Ctrl+Shift+P (Windows/Linux) または Cmd+Shift+P (Mac) を押してCommand Paletteを開きます。
Command Paletteで Marp: Export slide deck... と入力し、該当するコマンドを選択します。
エクスポート形式を選択する画面が表示されるので、HTML を選択します。
保存先フォルダとファイル名を選択し、Save をクリックします。これでHTML形式でエクスポートされます。

4.まとめ

このようにChatGPTとVScodeの拡張機能「Marp」を組み合わせることでスライドを素早く簡単に作成することができました。

クオリティを上げるために画像の挿入やデザイン調整が必要かとは思いますが、ここまで作ってくれるだけでもかなり生産性は上がると思います。プロンプトをカスタマイズすることでも、より理想に近いスライドを作成することができるでしょう。

皆さんもぜひ試してみてください。