マークダウン・スライド

スライドにMarkdownを使う理由

PowerPointとKeynoteはスライドデザインには優れているが、それ以外のほぼすべてが苦手だ。バージョン管理が難しく、diffが取りにくく、スマートフォンで編集しにくく、チーム全体で統一を保つのが難しく、grepができない。Markdownは「それ以外のすべて」を視覚デザインで競おうとせずに解決する。技術的なコンテンツ（コードサンプル、ターミナル出力、コマンドラインのウォークスルー、箇条書きリスト）ではGUIツールより速く作成できる。

このフォーマットはプレーンテキストなので、gitにネイティブに存在し、どのエディターでも開け、VS Codeからvim、スマートフォンのメモアプリまでどのツールでも編集でき、30年のソフトウェアの変遷を生き延びる。トレードオフ：ピクセル単位のデザインコントロールを手放す。開発者向けの全体ミーティング、カンファレンストーク、READMEウォークスルーデッキ、クラスルーム教材、ライトニングトークにはそれが良いトレードだ。セールスピッチとマーケティングデッキにはPowerPointかFigmaが引き続き有利だろう。

---の慣習

独立した行に3つのダッシュはMarkdownの水平線の既存構文で、CommonMark以来定義されており、Markdown-slidesエコシステム全体でスライド区切りとして再利用されている。reveal.js、Marp、Slidev、ほとんどの小さなツールもこれを使用する。この慣習は明確だ（本物の水平線は1枚のスライド内でも機能する；---は独立した行にある場合にのみ分割する）し、入力も簡単だ。デッキを1つの連続したMarkdownドキュメントとして書き、ツールが視覚的に再分割する。

2026年のMarkdown-Slidesエコシステム

• reveal.js（Hakim El Hattab、2011年から）：先駆的なブラウザベースのプレゼンテーションライブラリ。縦横のスライドグリッド、トランジション、スピーカーノート（Notes:構文）、data-markdown属性によるMarkdownソース。よく知られた名前で、slides.comがSaaSとしてホスティングしている。
• Marp：最も人気のある専用のMarkdown→スライドプロジェクト。CommonMarkベース、CLI、VS Code拡張機能、Marp Coreを同梱。優れたPDFエクスポート。テーマとアスペクト比のフロントマター。
• Slidev（Anthony Fu）：新しく（2021年）、Vueベース、モダン。開発者のトーク向けに設計：組み込みのコードハイライト、スライド内コード埋め込み、プレゼンタービュー、トーク中のスライドへの描画。
• remark.js（Ole Petter Bang）：ミニマル、シングルファイル埋め込み。opinionatedでないことで好まれる。
• HackMD：コラボレーティブ編集フレーバー。ブラウザベース、アカウント必要、デバイス間で同期。

このツールは別のニッチを埋める：インストール不要、アカウント不要、アップロード不要。貼り付けて、プレゼンして、タブを閉じる。借りたラップトップで5分間のライトニングトークを準備するとき、フライト中にスライドを仕上げるとき、会議室で下書きしてMarpを起動したりslides.comにサインインしたりしたくないときの適切な選択だ。

アスペクト比の説明

現代のスライドデッキはデフォルトで16:9で、過去10年に製造されたカンファレンスプロジェクターはすべて16:9サーフェスで、16:9はすべてのラップトップ画面とモダンなTVに対応する。ここのビューポートはそれに合わせて16:9でレンダリングする。古いデッキは4:3（CRTプロジェクターの元のアスペクト）を使用し；古いラップトップは16:10で出荷されることがある。PowerPointのデフォルトは2013年以来16:9；Google Slidesはデフォルトで16:9を作成；Keynoteのデフォルトも16:9だ。

一般的なユースケース

• 開発者向け全体ミーティングとデモデー。コード変更、新しいアーキテクチャ、またはインシデントの振り返りをチームにウォークスルーする。
• カンファレンスとミートアップのトーク。特にデッキがプルリクエストでクリーンにdiffが取れるコードサンプルを必要とするテクニカルオーディエンスのトーク。
• READMEウォークスルー。プロジェクトのドキュメントに埋め込まれたライブラリへの6スライドの入門。
• ライトニングトーク。セレモニーが天敵の5分間、約5スライドのトーク。
• クラスルーム教材。教えながらスライドをライブ編集；学生はノートのためにMarkdownソースをコピーできる。
• 社内トレーニング。教えるコードベースと並べてバージョン管理・コードレビューされたオンボーディングデッキ。
• ミーティング前ブリーフ。受信者がエディターでプレビューできるMarkdownとして送られる3スライドの予習資料。

Markdownでも重要なスライドデザイン原則

• スライド1枚にアイデア1つ。クラシックなルール。スライドに2つの考えがあれば分割する。
• テキストは少なく、構造は多く。スライドが段落のように読めるなら、スピーカーがスライドを読んでいる。箇条書きに削減してスピーカーに散文を補完させる。
• 思うより大きいフォント。Markdownスライドのデフォルトは本文テキスト約24〜32px相当。~18px以下はカンファレンス会場の後列から読めない。
• スライド1枚にH1一つ。同じスライドに複数のトップレベル見出しは視覚的な混乱を生む。
• コードブロックを短く保つ。6行が16:9スライドでの快適な最大行数だ。長いスニペットは分割するか、チャンクでハイライトして表示する必要がある。
• すべての画像に存在理由を持たせる。装飾的なストック写真はフィラーだ。ダイアグラム、スクリーンショット、データビジュアライゼーションがシグナルだ。

プライバシー

スライドデッキは機密性が高いことが多い：ピッチデッキ、社内戦略、財務数値、ローンチ前の製品デモ。このツールはすべてブラウザ内で実行される：Markdownはtextareaに留まり、レンダリングはローカルで行われ、フルスクリーンプレゼンテーションは同じメモリ内の状態から読み取る。何もアップロードされず、アカウントも必要なく、タブを閉じるとすべてが消える。サーバーホスト型の代替（slides.com、HackMD、GitPitch）はオペレーターのデータ取り扱いポリシーへの信頼を必要とする；これは問いかけ自体を排除する。

よくある間違い

1. 段落全体を1枚のスライドに貼り付ける。聴衆が読んでいたらスピーカーの話を聞いていない。箇条書きに分割する。
2. 一貫性のない見出しレベル。H1でタイトルされたスライドの次がH2だと雑に見える。スライドタイトルのレベルを選んで統一する。
3. プロジェクターには長すぎるコードブロック。30行のスニペットは後列から読めない。関連する5〜10行だけ表示し、残りは// ...で置き換える。
4. スピーカーノートがない。スライドは聴衆の記憶補助であり、スピーカー自身のためではない。スピーカーノート（対応ツールで）がトーキングポイントを保持する。
5. プロジェクターのアスペクト比を忘れる。16:10のラップトップで作成し、会場が4:3プロジェクターを使用している場合、コンテンツが切り取られる。
6. スライドのトランジションが多すぎる。スライド間のアニメーションはデモでは洗練された感じがするが、30分のトークでは退屈になる。デフォルトはトランジションなし、またはシンプルなフェードにする。
7. 会場のマシンで壊れる凝ったフォントを使う。システムフォントに固執する。本文にはサンセリフ、コードにはモノスペース。

よくある質問

スライドをPDFとしてエクスポートできるか？

はい。フルスクリーンモードに入り、ブラウザの印刷機能（Ctrl/Cmd + P）を使用してPDFとして保存を選ぶ。ほとんどのブラウザはレンダリングされたスライドをPDFページごとに1枚印刷する。結果はクリーンなテキストPDF（画像ではない）なので、小さくて検索可能だ。

コードのシンタックスハイライトはどうか？

フェンスコードブロックはモノスペースとわずかに暗い背景でレンダリングされ、暗いフルスクリーンテーマで読みやすい。言語ごとのシンタックスハイライト（Pythonキーワードを1色、文字列を別の色）はreveal.jsやSlidevのようなより複雑なスライドフレームワークが必要だ。短いライトニングトークでは滅多に不足しない；コードが多い長形式のトークにはそれらのツールが適している。

画像を埋め込むにはどうするか？

標準のMarkdown画像構文：![alt text](https://your-image-url.png)。画像はパブリックウェブから到達可能である必要がある（またはfile:// URLを介してローカルマシンから、ただしファイルURLは一部のブラウザでブロックされる場合がある）。機密画像にはトーク中にタイニーなローカルウェブサーバーから提供するローカルファイルへのMarkdownのリンク構文を使用する。

オフラインで動作するか？

ページが読み込まれたら、はい。Markdownレンダリングとスライドナビゲーションはローカルで実行される。外部画像はネットワークなしでは読み込めないため、オフラインでプレゼンする場合は画像をデータURIとして埋め込むかローカルでホストする。

トーク中にキーボードを使えるか？

はい。矢印キー/スペースバーで進み、バックスペースで戻り、Escでフルスクリーンを終了、Fでフルスクリーンを切り替える。ほとんどのプレゼンターリモコン（標準のLogitech製ワイヤレスプレゼンターなど）は同じ矢印キーをエミュレートするため、設定なしで動作する。

何かサーバーに送信されるか？

いいえ。Markdownレンダリング、スライドの分割、フルスクリーンプレゼンテーション、すべてブラウザ内で行われる。デッキのコンテンツはアップロードされず、ログに記録されず、サーバー側のどこにも保存されない。タブを閉じるとtextareaの内容が消える。