おいでよMarkdown界隈へ -生成AIでスライド作り-
はじめに
私はMarkdownで文章を書くのが好きです。もちろんこの記事もVSCodeを開いてMarkdownで書いています。
おそらくエンジニアであればMarkdownとの出会いはGitHubにReadMeを書くことなんじゃないかなと思います。
私もプログラミングを勉強しはじめたとき、
簡単なデータベースの関係図を書くのが課題だったような気がします。
ご存じの通りMarkdownは文字だけで表が書けたりして
h2やh3などの見出しを#の数で表現できたり自分の中ではかなり感動したのを覚えています。
今現在は生成AIでの出力にMarkdownが使われているので
エンジニア以外にもすっかり馴染んだと思いきや...
意外とまだまだMarkdownが知られていないなと感じることがありました。
この記事ではまだMarkdownの魅力に気がついていない人に向けて
自分なりのMarkdown愛を語っていこうと思います。
Mardownで書くと生産性が爆上がり！
先ほども言った通り、この記事はVSCodeでMarkdonw形式で書いています。
こんな感じ
---
title: "おいでよMarkdown界隈へ -生成AIでスライド作り-"
emoji: "🎹"
type: "idea" # tech: 技術記事 / idea: アイデア
topics: [Markdown, AI, 生成AI]
published: true
---
# はじめに
私はMarkdownで文章を書くのが好きです。もちろんこの記事もVSCodeを開いてMarkdownで書いています。
おそらくエンジニアであればMarkdownとの出会いはGitHubにReadMeを書くことなんじゃないかなと思います。
VSCodeで書くと何が良いのかとうと
- 文章を書くのがとても早くなる
- 一括で同じ言葉の修正ができる
- バージョン管理できる
これだけでももう十分良いですね。すぐにZennをVSCodeから書きましょう！！！(圧)
私は何度もNoteやNotionで文章を書こうとトライしてみましたが
結局Markdownの快適さに叶わずに何度も移行に失敗して今に至ります。
AIとかけ合わせるとスライドが作れちゃう
そんな便利なMarkdownですがAIと組み合わせるとさらに化けます。
Markdownの親戚みたいなものにMarpという形式が存在します。
私は生成AI文脈で知ったのですが前からMarpでスライドを作っているエンジニアはいたようです。
私も自分で作った原稿をAIで「Marp形式にして」とスライドが作れる形式に直してもらいました。
これがかなり驚きでした。
Marpを知ってみよう！
Markdownを使ってMarpで便利なプレゼンテーションスライドを作成する方法をまとめちゃいます
Marpの主な特徴と利点
- Markdownから簡単にプレゼンテーションスライドを作成できる
- Visual Studio Codeの拡張機能として利用できる
- デザインとコンテンツを分離し、文書構造に集中できる
- 既存のMarkdownドキュメントを再利用しやすい
- Git等でバージョン管理ができる
- HTML、PDF、PowerPointなど複数の形式でエクスポート可能
基本的な使い方
-
VS CodeにMarp for VS Code拡張機能をインストール
https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode -
新規Markdownファイルを作成し、先頭に以下のYAML Front Matterを追加します
--- marp: true --- -
Markdown記法でスライド内容を記述します
-
---で区切ってスライドを分割します -
VS Codeのプレビュー機能でリアルタイムに確認できます
便利な機能
-
テーマの適用:
--- marp: true theme: gaia --- -
画像の挿入と配置:
 -
CSSによるカスタムスタイル適用
-
ヘッダーやフッターの設定:
--- marp: true header: 'ヘッダー' footer: 'フッター' ---
Marp形式をブラウザで確認できるサイトがあるので貼ってみてください！
生成AIにMarpを書かせよう
Marpのことが分かったところでAIに書いてもらいましょう。
今回はMarpについての説明をAIに書いてもらってそれをMarp形式に直してもらいました(ややこしい)
コピペでできるMarpテンプレート
最後にAIで作った見栄えのするMarpスライドコードを貼っておきます！
ぜひアレンジして使ってみてくださいね！
---
marp: true
theme: uncover
size: 960px 1280px
---
<style scoped>
section {
padding: 40px;
box-sizing: border-box;
background: linear-gradient(135deg, #E1F5FE 0%, #B3E5FC 100%);
border: 20px solid;
border-image: linear-gradient(45deg, #4FC3F7, #29B6F6) 1;
}
h1 {
font-size: 48px;
margin-bottom: 30px;
background: linear-gradient(45deg, #0277BD, #0288D1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
table {
width: 100%;
border-collapse: collapse;
font-size: 22px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
th, td {
border: 1px solid #4FC3F7;
padding: 8px;
text-align: left;
}
th {
background: linear-gradient(90deg, #29B6F6, #4FC3F7);
color: white;
}
</style>
# リモートワークの10大メリット 🏠💻
| # | メリット | 詳細 |
|:-:|----------|------|
| 1 | 通勤時間ゼロ 🚶♂️ | ・満員電車とはサヨナラ<br>・朝のイライラ解消 |
| 2 | 自由な時間割 ⏰ | ・夜型も朝型も大歓迎<br>・柔軟な休憩時間 |
| 3 | コスト削減 💰 | ・通勤費の節約<br>・食費の削減 |
| 4 | 住む場所自由 🌍 | ・地方移住も可能<br>・海外からの勤務も |
| 5 | 環境にやさしい 🌳 | ・CO2排出削減<br>・ペーパーレス化 |
| 6 | 集中力アップ 🧠 | ・オフィスの雑音なし<br>・作業環境のカスタマイズ |
まとめ
MarkdownとMarpが好きすぎて
この感動を記事に残したいと思ってずっと書けていませんでしたがやっと書けました(ほ)
みなさんも良いMarkdownライフをお過ごしください！！！
こんな感じでXで生成AIの実践について発信しているのでぜひフォローを！
解説系AITuberチャンネルもやっているのでぜひ登録してみてくださいね！
Discussion