おいでよMarkdown界隈へ -生成AIでスライド作り-

はじめに

私はMarkdownで文章を書くのが好きです。もちろんこの記事もVSCodeを開いてMarkdownで書いています。

おそらくエンジニアであればMarkdownとの出会いはGitHubにReadMeを書くことなんじゃないかなと思います。

私もプログラミングを勉強しはじめたとき、
簡単なデータベースの関係図を書くのが課題だったような気がします。

ご存じの通りMarkdownは文字だけで表が書けたりして
h2やh3などの見出しを#の数で表現できたり自分の中ではかなり感動したのを覚えています。

今現在は生成AIでの出力にMarkdownが使われているので
エンジニア以外にもすっかり馴染んだと思いきや...

意外とまだまだMarkdownが知られていないなと感じることがありました。
https://x.com/hayakawagomi/status/1814931227184668990

この記事ではまだ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の快適さに叶わずに何度も移行に失敗して今に至ります。

https://zenn.dev/zenn/articles/connect-to-github

AIとかけ合わせるとスライドが作れちゃう

そんな便利なMarkdownですがAIと組み合わせるとさらに化けます。

Markdownの親戚みたいなものにMarpという形式が存在します。
私は生成AI文脈で知ったのですが前からMarpでスライドを作っているエンジニアはいたようです。

私も自分で作った原稿をAIで「Marp形式にして」とスライドが作れる形式に直してもらいました。
これがかなり驚きでした。
https://x.com/yasun_ai/status/1811024426307310041

https://x.com/yasun_ai/status/1807035936687161626

https://x.com/yasun_ai/status/1811028517741875251

https://x.com/yasun_ai/status/1811181315871670506

Marpを知ってみよう！

Markdownを使ってMarpで便利なプレゼンテーションスライドを作成する方法をまとめちゃいます

Marpの主な特徴と利点

• Markdownから簡単にプレゼンテーションスライドを作成できる
• Visual Studio Codeの拡張機能として利用できる
• デザインとコンテンツを分離し、文書構造に集中できる
• 既存のMarkdownドキュメントを再利用しやすい
• Git等でバージョン管理ができる
• HTML、PDF、PowerPointなど複数の形式でエクスポート可能

基本的な使い方

1. VS CodeにMarp for VS Code拡張機能をインストール
   https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

2. 新規Markdownファイルを作成し、先頭に以下のYAML Front Matterを追加します

   ---
   marp: true
   ---
   

3. Markdown記法でスライド内容を記述します

4. ---で区切ってスライドを分割します

5. VS Codeのプレビュー機能でリアルタイムに確認できます

便利な機能

• テーマの適用:

  ---
  marp: true
  theme: gaia
  ---
  

• 画像の挿入と配置:

  ![bg right:40%](image.jpg)
  

• CSSによるカスタムスタイル適用

• ヘッダーやフッターの設定:

  ---
  marp: true
  header: 'ヘッダー'
  footer: 'フッター'
  ---
  

Marp形式をブラウザで確認できるサイトがあるので貼ってみてください！
https://web.marp.app/

生成AIにMarpを書かせよう

Marpのことが分かったところでAIに書いてもらいましょう。
今回はMarpについての説明をAIに書いてもらってそれをMarp形式に直してもらいました(ややこしい)

https://x.com/yasun_ai/status/1812804158430593390

https://x.com/yasun_ai/status/1812805284215321057

コピペでできる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の実践について発信しているのでぜひフォローを！
https://twitter.com/yasun_ai

解説系AITuberチャンネルもやっているのでぜひ登録してみてくださいね！
https://www.youtube.com/@sns-university