初心者でも簡単！Markdown スライド作り方と活用術：Webプレゼンテーションの最先端ガイド - マークダウン入門ナビ

はじめに

Webブラウザだけなら、パワーポイントやKeynoteに縛られる必要はありません。Markdown を使ってスライドを作ると、テキストは簡潔で編集しやすく、バージョン管理もしやすいので、個人ブログやチームのプレゼン資料に最適です。

このガイドでは、初心者でもすぐに実践できる Markdown スライド作りの手順を紹介し、さらに実際にウェブ上で発表を行う際の活用術までまとめました。

以下のセクションを順に読むことで、

どんなツールを選べばよいか
Markdown でスライドを書く方法
スライドにデザインやインタラクションを加えるノウハウ
生成したスライドを配布・発表する手順

の全貌が掴めます。

1. Markdown スライドの基本概念

1-1. Markdown とは？

Markdown はテキストベースの軽量マークアップ言語です。

見出し：#、##、### で階層化
リスト：-、*、+
画像、リンク：![alt](url)、[text](url)
コードブロック：“`で囲む

Markdown には多くの派生（GitHub Flavored Markdown など）がありますが、スライド用に扱う上では「行末に ---」でスライド区切りを加えるだけで十分です。

1-2. スライド作りのワークフロー

ステップ	役割	ツール
1	Markdown でスライド本文を書く	VSCode、Markdownエディタ
2	Markdown をHTMLに変換	reveal.js, remark.js 等
3	HTML をホスティング	GitHub Pages など
4	発表時にブラウザで表示	Chrome/Firefox
5	共有・公開	スライドURL、埋め込みコード

2. スライド生成ツール選び

初心者におすすめのツールを4つ紹介します。

2-1. Reveal.js

特徴：豊富なテーマ、アニメーション、拡張機能
利点：data- 属性で簡単にアニメーション制御
短所：セットアップが若干複雑

おすすめ：初めてでも「スライドを貼り付けてみよう」感覚で始められる

2-2. Remark.js

特徴：Markdown ファイルをそのまま読み込み
利点：シンプルで、サーバー構築不要
短所：高度な演出やテーマは限定的

おすすめ：ローカル環境で即座にプレビューしたい方向け

2-3. Deck.js

特徴：シンプルかつ軽量、プラグインで拡張可
利点：初心者にとって扱いやすい
短所：テーマの数が少ない

おすすめ：デザインを最小限に抑えたい時

2-4. MDX Deck

特徴：React + Markdown + JavaScript の組み合わせ
利点：インタラクティブコンポーネントを埋め込み可
短所：Vite/Next.js 環境の構築が必要

おすすめ：Web 開発者やフロントエンド技術者に最適

3. はじめに書く：Reveal.js の実装手順

今回は初心者向けに Reveal.js を例に詳細な作業手順を紹介します。ほかのツールに移行したい場合も、同様のステップで可能です。

3-1. 環境構築

Node.js（npm）をインストール

# macOS / Linux
brew install node
# Windows なら公式サイトからインストーラー

リポジトリ初期化

mkdir my-slide
cd my-slide
npm init -y
npm install reveal.js

3-2. プロジェクト構成

my-slide/
├─ index.html
├─ reveal.js/   ← npm パッケージ
├─ slides.md    ← Markdown ファイル
├─ css/
│   └─ custom.css
└─ img/         ← 画像フォルダ

3-3. `index.html` の雛形

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Markdown スライド</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="node_modules/reveal.js/dist/reveal.css">
    <link rel="stylesheet" href="node_modules/reveal.js/dist/theme/solarized.css" id="theme">
    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <!-- Markdown を自動で読み込む -->
        <section data-markdown src="slides.md" data-separator="^\n---\n"></section>
      </div>
    </div>

    <script src="node_modules/reveal.js/dist/reveal.js"></script>
    <script>
      Reveal.initialize({
        hash: true,
        // スプリット区切りの正規表現
        markdown: {
          smartypants: true
        },
        plugins: [ RevealMarkdown ]
      });
    </script>
  </body>
</html>

data-separator で --- をスライド区切りにしています。
RevealMarkdown プラグインは Reveal.js 付属のものを使います。

3-4. Markdown スライド (`slides.md`)

# タイトルスライド  
あなたの名前 | 日付

---

## Agenda  
- イントロ  
- Markdown でスライド作る  
- Reveal.js の設定  
- まとめ

---

## Markdown の書き方  
1. 見出し  
   ```markdown
   # 見出し1
   ## 見出し2

リスト
```
- 要素1
- 要素2
```
コードブロック
```
console.log('Hello');
```

Reveal.js の設定

theme → black, solarized, white
transition → slide, convex, fade
カスタム CSS でフォント/レイアウトを変更

まとめ

Markdown でスライドを書くのは、テキストだけならわずか数行。

メリット：軽量、変更しやすい
デメリット：ビジュアル効果はコードで補完必要


### 3-5. ローカル起動  
```bash
python -m http.server 8080

ブラウザで http://localhost:8080 を開くとスライドが表示されます。

3-6. 発表時に使うショートカット

← / →：前/次スライド
S：スライド全体をスロウモーション
M：マーカー
Q：アウトライン

4. スライドデザインを洗練させる

Markdown だけでは「見た目が淡白」になりがちです。以下に CSS と Reveal.js の機能を使ったカスタマイズ例を示します。

4-1. カスタム CSS の書き方

css/custom.css に書くだけで、Reveal.js 本体のスタイルを上書きできます。

/* フォント全体を大きく */
.reveal h1, .reveal h2, .reveal h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
}

/* 画像を中央揃えかつ最大幅 */
.reveal img {
  margin: 0 auto;
  max-width: 80%;
  border-radius: 8px;
}

/* コードブロックに背景カラー */
.reveal pre {
  background: #2d2d2d;
  color: #c8c8c8;
}

/* 自己紹介スライドで円形プロフィール画像 */
.profile-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

使用例（slides.md）：

## 自己紹介  
![プロフィール](img/profile.jpg .profile-img)

「あなたの名前」  
ポジション、趣味、スキルの簡潔紹介

4-2. アニメーションやトランジション

4-2-1. reveal.js のデフォルトトランジション

Reveal.initialize({
  transition: 'slide',    // slide, fade, convex, concave, zoom
});

4-2-2. `data-` 属性でリストのアニメーション

- 項目1 <span data-fragment-index="0"></span>
- 項目2 <span data-fragment-index="1"></span>
- 項目3 <span data-fragment-index="2"></span>

各項目が右クリックのアノテーションで一つずつ表示されます。

4-2-3. キーイベントでスライド分岐

Reveal.on('slidechanged', event => {
  const slide = event.currentSlide;
  if (slide.classList.contains('special')) {
    // 特殊スライドの処理
  }
});

これにより、特定のスライドだけ背景色を変更するなどの条件付き演出が可能です。

5. 画像・メディアの埋め込み

5-1. 画像の挿入

![Alt テキスト](img/diagram.png)

img/ フォルダを同じリポジトリに。
GitHub Pages でホストする際は GitHub のリポジトリに PNG などをアップロードします。

5-2. 動画の埋め込み

注意：多くのブラウザは動画を自動再生をブロックします。

<video controls width="640">
  <source src="video/demo.mp4" type="video/mp4">
  対応していないブラウザ用
</video>

5-3. GIF とアニメーション

軽量 GIF は簡単に埋め込めます。

![アニメーション](img/animation.gif)

ただし、ファイルサイズに注意してください。

6. スライドの共有・公開

6-1. GitHub Pages で公開

リポジトリ https://github.com/USERNAME/my-slide を作成
上記のプロジェクトファイルを push
Settings → Pages → Branch を main、フォルダを /root に設定
URL（例：https://USERNAME.github.io/my-slide/）でアクセス

GitHub Pages は無料でホスティングでき、Markdown スライドを Web で閲覧可能にします。

6-2. Netlify でデプロイ

Netlify は GitHub と連携して自動デプロイに便利です。

Netlify アカウントで「New site from Git」を選択
同じリポジトリを選び、Build command と Publish directory を設定
デプロイ完了後、URLで共有

6-3. 埋め込みコードでブログに貼り付け

<iframe src="https://USERNAME.github.io/my-slide/"
        width="100%" height="600px" frameborder="0"
        allowfullscreen></iframe>

これを WordPress や Notion などの HTML ブロックに貼り付ければ、記事内でスライドを全画面表示できます。

7. 発表時のベストプラクティス

7-1. スライドを軽量化する

画像は圧縮ツール（TinyPNG, ImageOptim）で 50% 以内に抑える
コードブロックは必要最小限に、行数が多い場合は外部ファイル参照（include 機能可）

7-2. スライドの順番を決める

Hook → Problem → Solution → Demo → Summary
という「論理的ストーリー」の流れが視聴者の関心を保ちます。

7-3. フォントと配色の統一

Google Fonts を使うと読みやすいフォントが揃う
カラーパレットを決め、HSL で統一すると編集が楽

7-4. スライドを事前に確認

Safari / Edge でプレビューし、文字化け・画像崩れがないか確認
ブラウザ拡張 Reveal.js Remote Control で遠隔操作も可能

7-5. 発表後のフィードバック収集

スライド URL を共有してオンラインでコメントをもらう
スライドの最後に「ご意見・ご質問はこちら」などリンクを置く
アンケートを Google フォームで作成し、URL を添付

8. よくある質問（FAQ）

質問	回答
Markdown でアニメーションが動かない	Reveal.js では `data-fragment-index` を使ってリストの項目を一つずつ表示させます。JS ライブラリが有効であることを確認してください。
画像が全く表示されない	画像パスが `assets/` 等正しいか、GitHub Pages のキャッシュが古い可能性があります。GitHub Actions でキャッシュをクリアしてみてください。
スライドのサイズがブラウザに合わせていない	`width` / `height` を CSS で明示的に設定すると調整がしやすくなります。`reveal.css` の `.reveal` セレクタに `max-width: 90%` 等を追加。
埋め込みスライドがクリックで止まらない	`<iframe>` に `allowfullscreen` を付与し、`autoplay` が有効な場合は `muted` にする必要があります。
Markdown で記した箇条書きがすべてひとつのスライドにまとまる	`data-separator` の設定が間違っている場合、デフォルト（blank line）で区切りを探しに行きます。`---` を明示的に書くと確実です。

9. まとめ

Markdown はテキスト編集とバージョン管理の両方に優れ、スライド作成に最適。
Reveal.js は豊富な機能とサンプルテーマが揃うので、初心者向けには最適のフレームワーク。
カスタム CSS と data- 属性を組み合わせることで、プロフェッショナルな見た目と演出が簡単に実装可能。
GitHub Pages や Netlify を使えば、無料でいつでもどこでも共有できる。
発表前後のチェックとフィードバックを組み合わせて、インタラクティブで説得力のあるプレゼンテーションに仕上げましょう。

Markdown スライドを使うことで、編集が楽で拡張が容易なプレゼンテーションが実現できます。これらを活用し、ぜひ自分だけの「軽量で美しい」スライドデッキを公開し、視聴者にインパクトを与えてみてください！