中島聡さん、パワポな私はダメですか？スライド資料をMarkdownで高速作成する方法。GitHubでバージョン管理も楽勝だ

ビジネスの現場についてまわるスライド資料。PowerPointやKeynoteで作成されたものがほとんどですが、「その提案資料はもう古いから、新しいファイルを探してくれる？」と上司に言われたり、「おじさん同士が握手してるこのイラスト、本当にいる？まあ、入れておくか…」と悩んでしまったり、何かと面倒クサイのも事実ですよね。そこで今回は、「仕事の早さ」に定評がある日本人エンジニアの中島聡さんが、軽量マークアップ言語の「Markdown（マークダウン）」を使って高速でスライドを作成する方法を紹介。中島さん曰く、非エンジニアだからといってこれを使わないのは「とてももったいない」そうですよ。
※本記事のタイトル・見出しはMAG2NEWS編集部によるものです

プロフィール：中島聡（なかじま・さとし）
ブロガー／起業家／ソフトウェア・エンジニア、工学修士（早稲田大学）／MBA（ワシントン大学）。NTT通信研究所／マイクロソフト日本法人／マイクロソフト本社勤務後、ソフトウェアベンチャーUIEvolution Inc.を米国シアトルで起業。現在は neu.Pen LLCでiPhone/iPadアプリの開発。

仕事のスピードを上げたいなら、スライドはMarkdownでつくろう

先日、このメルマガ（6/11号）でも触れた、私の書籍の「ビデオ講座化」のオファーですが、面白そうなので引き受けることにしました。

（メルマガ6/11号より再掲）
少し前に、とある出版社から、私の著書『なぜ、あなたの仕事は終わらないのか -スピードは最強の武器である-』をビデオ講座化したいという話がきました。最初にこの依頼を目をしたときには、手間がかかりそうなので、断ろうと考えました。しかし、ビデオ講座そのものには前から興味があったし、かと言って、自分で作るのは大変なので、悪くない話のように思えてきました。

しかし、せっかく作るとなったら、良いものを作らないともったいないので、どんな内容にしようかを考えているところです。書籍の内容だけでは密度が薄くなってしまうので、私の仕事に対する姿勢全般を話すべきかと考え、ざっくりとした目次を考えてみました。

1. ロケットスタート術
2. 80:20ルール
3. 会社にとって「頼れる人」になる方法
4. 「仕事」とは何かを考える
5. 「生涯役に立つスキル」とは
6. 「好きなこと・得意なことを仕事にする」意味
7. 「ビジョン」「パーパス」って何？
8. DXからAIXへ

どれも、このメルマガでは何度も触れている話題ですが、こうやって目次にしてみると、それなりに良い講座ができそうで、（まだ、正式に仕事として受けたわけではないのに）ワクワクしています。
（以上メルマガ6/11号より再掲）

撮影前に、スライドを用意して欲しいとのことなので、準備を開始したのですが、今回は、量も多いので（２時間ほど話さなければなりません）、Keynote（Appleのプレゼン作成アプリ。WindowsのPowerPointに相当）ではなく、Markdown(主にプログラマーが文章を書くときに使う手法)でスライドを作ることにしました。

Markdownで作れば、バージョン管理をGitHub（主にプログラムを保存・管理するサービス）で行うことが可能になります。また、「見た目」よりも「中身」にフォーカスしてスライドを作りたかったのもあります。

慣れたらパワポやキーノートより便利! スライドがサクサクつくれる

スライド作成の具体的なツールとしては、(私が普段ソースコード・エディターとして使っている) Microsoft VS Code向けのプラグイン、marpを使うことにしました。他にも選択肢があるようですが、まず最初にmarpを試したところ、私のニーズに十分応えてくれることが分かりました。

marpを使う場合、markdownファイルの最初に以下のような記述を追加します。 marp: true は、marpの機能を使うことを宣言しており、 theme: gaia は、色やフォントがセットになったテーマを指定しています。

style 以下は、見出し語のセンタリングを行なっています。

marp: true
theme: gaia
style: |
  h1, h2 {
    text-align: center;
  }

テキストのみのスライドは、以下のように記述します。 _header は、そのスライドが属する章のタイトルです。

<!-- _header: ラストスパートの問題点 -->
## ラストスタートの問題点
- やり直しが効かない
- 浮き足立った仕事になってしまう
- フィードバックを反映させる時間がない
- 丁寧に仕上げる余裕がない
- 「間に合わないこと」がギリギリまで分からない

また画像のスライドは、下のように記述します。 _class: lead の部分は、本来の使い方とは異なるようですが、画像を中央に表示するために使っています。

<!-- _class: lead -->
<!-- _header: ラストスパートの問題点 -->

![w:1024](./images/last_spart.webp)

スライドの中で使っている画像は、基本的にChatGPTに生成させたものです。必ずしも思い通りのものができないところが悩ましいところではありますが、著作権のことを気にせずに画像が使えるので、こんなときにはとても便利です。