ClaudeとMarpで業務用スライドを作る方法

TL;DR

Claudeに資料の内容とMarp形式での作成を指示し、生成されたコードをVS CodeのMarp拡張機能へ貼り付ければ、統一感のあるスライドを作成できる。崩れた配置や構成はClaudeへの再指示とコードの置換で直し、PDFやHTMLなどへ書き出す。

Transcript

はいこんにちはケトです今回はですね いきなりなんですけどえクロードっていう AIツールを使ってめちゃくちゃ クオリティの高い資料をですね一発で作る 方法紹介していきたいと思います今までも ですねクロドで資料を作る方法ってまあっ たと思うんですけどま一旦これをですね見 ていただきたいですはいこんな感じでま 資料にしたい内容を送るとはいえマープ 形式と言われるえものを使ってですね こんな感じでコードを書き出しこのコード をコピーしてTに貼り付けるとなんと資料 の完成ですはい今回はですねこれのやり方 マープで簡単資料作成っていうことで こちらのやり方をですね具体的に紹介して いきたいと思いますでこのやり方はですね えSNSでめちゃくちゃなんか流行ってる らしいですはい僕もですねえXで見かけた やり... Read More

Key Insights

• Marpはマークダウンでプレゼンテーションを記述し、VS Codeの拡張機能としてプレビューや書き出しができる仕組みである。
• 基本手順はClaudeへ内容とMarp形式を指定し、出力されたコードを拡張子「.md」のファイルへ貼り付ける流れである。
• Marpの利点はシンプルで統一されたデザイン、軽量なテキスト形式、迅速な編集、バージョン管理のしやすさである。
• Marpの制約は複雑なグラフィックや複数人での同時編集に向かず、デザインの自由度や直接編集できる範囲が限られる点である。
• 生成品質を安定させる方法は、配色、無料画像の使用、配置、見出しサイズ、出力例などの具体的な条件を事前に指示することである。
• 初回生成の崩れはClaudeへの追加指示だけでなく、VS Codeの検索と置換による不要タグの一括削除やコードの直接修正でも直せる。
• 情報構成を整える方法は「1フレーズにつき1スライド」のように分割単位を明示し、各フレーズの解説を個別に求めることである。
• 完成したスライドはPDFやHTMLなどへ書き出せ、PDFをCanvaへ取り込めば装飾を追加できるが、フォントや配置の再調整が必要になる場合がある。

Questions & Answers

Q: ClaudeとMarpでスライドを作成する方法は？

Claudeへ資料にしたい内容を渡し、Marp形式でインフォグラフィックス風のスライドを作るよう指示します。出力されたコードをコピーし、Marp拡張機能を入れたVS Codeの「.md」ファイルへ貼り付け、プレビューで確認してから希望の形式へ書き出します。

Q: Marpとは何ですか？

Marpはマークダウンを使ってプレゼンテーションを作成する仕組みです。動画で紹介された方法ではVS Codeの拡張機能として利用し、テキストでスライドの内容や見た目を記述します。完成した資料はHTML、PDF、PowerPoint、PNG、JPEGへ変換できます。

Q: VS CodeでMarpを使う準備の方法は？

MicrosoftのVS Codeをダウンロードして開き、左側のサイドバーから拡張機能の画面へ進みます。検索欄に「marp」と入力し、「Marp for VS Code」をインストールします。その後、新しいテキストファイルを作成し、「test.md」のように拡張子を「.md」にして保存します。

Q: Claudeにはどのような指示を出せばよいですか？

資料化する具体的な内容に続けて、「Marp形式を使用して魅力的でリッチなインフォグラフィックスのスライドを作成してください」と指示します。配色や背景画像にも条件がある場合は、無料で利用できるUnsplash画像を必ず表示するなど、必要な要件を同時に伝えます。

Q: 生成されたスライドの配置崩れを直す方法は？

問題点を具体的に列挙してClaudeへ修正を依頼します。例えば、コンテナを中央に配置する一方でテキストは左揃えにする、見出しを小さくする、背景画像を追加する、不要な数字リストやタグを削除する、といった形で見た目と対象要素を明示します。

Q: 不要なHTML風タグを一括削除する方法は？

VS Codeで削除したいタグをコピーし、検索機能を開いて置換欄を表示します。検索対象にタグを入力し、置換先を空欄にしたまま全件置換すれば、一括で削除できます。開始タグと終了タグが別々に残っている場合は、それぞれについて同じ操作を行います。

Q: スライドの情報が混在した場合の直し方は？

Claudeへ情報の分割単位を明確に伝えて再生成します。動画の例では、複数のテクニックと説明が混ざったため、「1フレーズにつき1スライドにし、各フレーズを解説してください」と指示しました。構成から作り直すことで、各要素とその説明を対応させやすくなります。

Q: Marpのスライドを保存する方法は？

VS Code上のMarp用アイコンからスライドの書き出し機能を選び、PDF、HTML、PowerPoint、PNG、JPEGの中から形式を指定します。PDFは文書として利用でき、HTMLはWeb上で動くスライドとして表示できます。動画ではPDFとHTMLが実用的な選択肢として紹介されています。

Q: PDFを書き出した後にCanvaで編集できますか？

PDFをCanvaのアップロード画面へ取り込めば、画像や飾りなどの要素を追加して編集できます。ただし、動画の実例では取り込み後にフォントが統一されず、要素の位置も一部ずれていました。そのため、Canva上で配置や書体を確認しながら最終調整する必要があります。

Q: Marpによる資料作成のメリットとデメリットは？

メリットは、統一されたシンプルなデザインを作りやすく、テキストベースなので内容の追加や変更が速いことです。一方、複雑なグラフィック、複数人での同時編集、細かな直接編集には向かず、マークダウンに不慣れな人には難しく感じられる場合があります。

Summary & Key Takeaways

• まずClaudeへ資料化したい内容を渡し、「Marp形式を使用して魅力的でリッチなインフォグラフィックスのスライドを作成してください」と指示する。生成されたマークダウン形式のコードを利用するため、MicrosoftのVS Codeを導入し、拡張機能の検索画面から「Marp for VS Code」をインストールする。

• VS Codeで新しいテキストファイルを作り、拡張子を「.md」にして保存した後、Claudeが出力したコードを貼り付ける。プレビューを開けばスライドを確認できる。必要に応じて、無料で利用できるUnsplash画像の使用、配色、見出しの大きさ、配置などをClaudeへの指示に含める。

• 初回出力では、文字の配置、背景画像、タグ、リスト、スライド構成が崩れる場合がある。Claudeへ修正を依頼するほか、VS Codeの検索と置換で不要なタグを一括削除し、背景画像やフッターを直接直す。完成後はPDF、HTML、PowerPoint、PNG、JPEGへ書き出せ、PDFはCanvaへ取り込んで装飾できるが、表示崩れには調整が必要である。