爆速できれいな LT スライド作りを支える技術
みなさん LT スライドってどうやって作っていますか？
最近サークル内などで LT をする機会があり、「スライドどうやって作っているの？」と聞かれることがあったため、私の LT スライド作りを支える技術をまとめておこうと思います。
直近で作ったスライドの例 ↓
スライドを Markdown で書く
タイトルにもある通り「爆速で」作るためには、テキストベースで作っていくのが最適だと考えています。
パワポや Canva など WYSIWYG エディターでスライドを作ることも可能ですが、LT を聞きながら自分の LT のスライドを作るような場面では、GUI で凝っている余裕はありません。
そして HTML を書くのは大変なので、軽いマークアップ言語としてまず出てくるのは Markdown だと思います。
Markdown からスライドを作成できるツール・サービスはいろいろありますが、私はスライド作成ツールとして Marp を、そしてその CLI として marp-cli を使用しています。
似たような CLI からスライドを作るツールとして Vue.js ベースの Slidev などもありますが、HTML ベースの Marp のほうが薄くてうれしいと思っています（後述のカスタマイズ性もある）。
スライドを Git 管理する
そしてこの marp-cli を利用するための環境を丸ごと Git 管理しています。
これにより、複数の端末で編集内容を引き継ぐことを可能としています。それに、せっかくテキストベースで作るなら Git 管理もしたいですよね？
Git 管理するということは、GitHub に push することができます。すると、公開も簡単にできるというわけです 👇
スライドをデプロイする
marp-cli はスライドを静的な HTML として生成することができます。私はこれに画像を加えて、Cloudflare Pages にデプロイしています。
（ビルドプロセスの詳細はここでは省きます。さっきのリポジトリの package.json とかを見ると参考になるかも）
このようにして slides.su8.run がデプロイされているというわけです。
いまはこのトップページスライドを手作業で更新しているので、いつか自動化したい。というかトップページはスライドじゃないほうがうれしいよね……
デプロイするメリットとしては、
- スライドを簡単に公開できる というか自動的に公開されている
- 自分の端末じゃない環境でもパッとスライドを開いて喋れる
- スライドを作っているときの見た目のまま公開できる
などがあると感じています。
Git に載せないと公開できないのが不便なこともあるんですが、これはあんまりデプロイのデメリットではないかなと思います。
スライドの見た目をカスタマイズする
Marp は大人気ツールなので、そのまま使うと「よくある」見た目になりがちです。
デフォルトテーマもシンプルな見た目でよいのですが、ここではカスタムの方法を紹介していきます。
CSS をがんばる
大体のことは CSS でなんとかなります。
また、Marp v4 でスライドが display: block; になったので、大胆なレイアウトも組みやすくなったと感じています。
（このために Marp v4 に上げましたが、VSCode プラグインが未対応で悲しい。私はブラウザプレビューを駆使して頑張っています）
テーマを作る
自分用のテーマを作るのも楽しくておすすめです。
イチから全部作るのは大変なので、デフォルトテーマをベースにしたほうが楽ではあります。
👆 は最近作り直した自分用テーマですが、最近知った OKLCH という色空間をふんだんに活用していて、メンテしやすく見やすいテーマを作れたと思っています。
このサイトで数値いじってるだけで楽しい。
また、こういったユーティリティ系のクラスも定義しておくと便利です。これは 2 columns にするやつ。
markdown-it をカスタムする
CSS だけではどうにもならないこともあります。例えばコードブロックのカラーテーマを変えるとか。
CSS だけでなんとかしようと試みましたが、どうにもならなかったので markdown-it のプラグインを用いて変更しています。
実行時に --engine としてファイルを指定するのを忘れずに。
（この方法は @re_taro に教わりました。Special Thanks!）
こだわり
最後に、スライドを作るうえで、時間がない中でも自分がこだわっていることを明文化してみようと思います。
スクショはきれいに撮る
スライドで画像を使う場面は、その画像を「魅せる」ことが目的であることが多いと思います。せっかく入れるなら、きれいなスクショを使いたいですよね？
- スライドのテーマが明るめならスクショも明るく揃える
- ブラウザの拡大機能で文字を大きめにしてスクショを撮る
など、細かな工夫で見やすいスライドが作れると思っています。
文字は大きくする
Markdown としてはあるまじき行為ですが、基本的に h2 や h3 を使っています。
スライドは話してる内容の補助という役割に立ち返ると、あんまり細かく書いても読めないし……
列挙するときも順序付きリストや箇条書きを用いて見やすくすることを心がけています。
図を入れる
LT スライドで図を作るのは時間が掛かって大変ですが、ないよりあったほうがわかりやすいと思っています。
Excalidraw はシンプルな作図ツールでラフな図を作れるのでお気に入り。
おわりに
大言壮語なタイトル・書き出しから始まりましたが、蓋を開けてみればあまり大それたことはしていないことがおわかりいただけたのではないかなと思っています。
ぜひ marp-cli で快適な LT スライド作りを、そして自分用テーマ作りの沼を楽しんでください！
この記事は HUIT Advent Calendar 2024 の 10 日目（になるはずの記事）でした！
今日は 12/27 ……なんとかアドカレ投稿期間に間に合わせようとしましたが、それも叶わず大幅遅れでごめんなさい 🙇
Discussion