<p data-line="0" class="code-line">みなさん LT スライドってどうやって作っていますか？</p>
<p data-line="2" class="code-line">最近サークル内などで LT をする機会があり、「スライドどうやって作っているの？」と聞かれることがあったため、私の LT スライド作りを支える技術をまとめておこうと思います。</p>
<p data-line="4" class="code-line">直近で作ったスライドの例 ↓</p>
<p data-line="6" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f1a6bfcf0094e" src="https://embed.zenn.studio/card#zenn-embedded__f1a6bfcf0094e" data-content="https%3A%2F%2Fslides.su8.run%2F241129-sdd%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://slides.su8.run/241129-sdd/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://slides.su8.run/241129-sdd/</a></p>
<h2 id="%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%92-markdown-%E3%81%A7%E6%9B%B8%E3%81%8F" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%92-markdown-%E3%81%A7%E6%9B%B8%E3%81%8F" aria-hidden="true"></a> スライドを Markdown で書く</h2>
<p data-line="10" class="code-line">タイトルにもある通り「爆速で」作るためには、テキストベースで作っていくのが最適だと考えています。<br>
パワポや Canva など WYSIWYG エディターでスライドを作ることも可能ですが、LT を聞きながら自分の LT のスライドを作るような場面では、GUI で凝っている余裕はありません。</p>
<p data-line="13" class="code-line">そして HTML を書くのは大変なので、軽いマークアップ言語としてまず出てくるのは Markdown だと思います。<br>
Markdown からスライドを作成できるツール・サービスはいろいろありますが、私はスライド作成ツールとして Marp を、そしてその CLI として <code>marp-cli</code> を使用しています。</p>
<p data-line="16" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__68560d1a4fe91" src="https://embed.zenn.studio/card#zenn-embedded__68560d1a4fe91" data-content="https%3A%2F%2Fgithub.com%2Fmarp-team%2Fmarp-cli" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/marp-team/marp-cli" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/marp-team/marp-cli</a></p>
<p data-line="18" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ca598ca752e52" src="https://embed.zenn.studio/card#zenn-embedded__ca598ca752e52" data-content="https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40marp-team%2Fmarp-cli" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.npmjs.com/package/@marp-team/marp-cli" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.npmjs.com/package/@marp-team/marp-cli</a></p>
<p data-line="20" class="code-line">似たような CLI からスライドを作るツールとして Vue.js ベースの <a href="https://sli.dev/" target="_blank" rel="nofollow noopener noreferrer">Slidev</a> などもありますが、HTML ベースの Marp のほうが薄くてうれしいと思っています（後述のカスタマイズ性もある）。</p>
<h2 id="%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%92-git-%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%92-git-%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B" aria-hidden="true"></a> スライドを Git 管理する</h2>
<p data-line="24" class="code-line">そしてこの <code>marp-cli</code> を利用するための環境を丸ごと Git 管理しています。</p>
<p data-line="26" class="code-line">これにより、複数の端末で編集内容を引き継ぐことを可能としています。それに、せっかくテキストベースで作るなら Git 管理もしたいですよね？</p>
<p data-line="28" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2cc8851d8eab2" src="https://embed.zenn.studio/card#zenn-embedded__2cc8851d8eab2" data-content="https%3A%2F%2Fgithub.com%2Fsu8ru%2Fslides" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/su8ru/slides" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/su8ru/slides</a></p>
<p data-line="30" class="code-line">Git 管理するということは、GitHub に push できます。すると、公開も簡単にできるというわけです 👇</p>
<h2 id="%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%92%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%92%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B" aria-hidden="true"></a> スライドをデプロイする</h2>
<p data-line="34" class="code-line"><code>marp-cli</code> はスライドを静的な HTML として生成できます。私はこれに画像を加えて、<a href="https://www.cloudflare.com/ja-jp/developer-platform/products/pages/" target="_blank" rel="nofollow noopener noreferrer">Cloudflare Pages</a> にデプロイしています。<br>
（ビルドプロセスの詳細はここでは省きます。さっきのリポジトリの package.json とかを見ると参考になるかも）</p>
<p data-line="37" class="code-line">このようにして slides.su8.run がデプロイされているというわけです。</p>
<p data-line="39" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__634f330bbc93e" src="https://embed.zenn.studio/card#zenn-embedded__634f330bbc93e" data-content="https%3A%2F%2Fslides.su8.run" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://slides.su8.run" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://slides.su8.run</a></p>
<p data-line="41" class="code-line"><em>いまはこのトップページスライドを手作業で更新しているので、いつか自動化したい。というかトップページはスライドじゃないほうがうれしいよね……</em></p>
<hr data-line="43" class="code-line">
<p data-line="45" class="code-line">デプロイするメリットとしては、</p>
<ol data-line="47" class="code-line">
<li data-line="47" class="code-line">スライドを簡単に公開できる　というか自動的に公開されている</li>
<li data-line="48" class="code-line">自分の端末じゃない環境でもパッとスライドを開いて喋れる</li>
<li data-line="49" class="code-line">スライドを作っているときの見た目のまま公開できる</li>
</ol>
<p data-line="51" class="code-line">などがあると感じています。</p>
<p data-line="53" class="code-line">Git に載せないと公開できないのが不便なこともあるんですが、これはあんまりデプロイのデメリットではないかなと思います。</p>
<h2 id="%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B" data-line="55" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%81%AE%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B" aria-hidden="true"></a> スライドの見た目をカスタマイズする</h2>
<p data-line="57" class="code-line">Marp は大人気ツールなので、そのまま使うと「よくある」見た目になりがちです。</p>
<p data-line="59" class="code-line">デフォルトテーマもシンプルな見た目でよいのですが、ここではカスタムの方法を紹介していきます。</p>
<h3 id="css-%E3%82%92%E3%81%8C%E3%82%93%E3%81%B0%E3%82%8B" data-line="61" class="code-line">
<a class="header-anchor-link" href="#css-%E3%82%92%E3%81%8C%E3%82%93%E3%81%B0%E3%82%8B" aria-hidden="true"></a> CSS をがんばる</h3>
<p data-line="63" class="code-line">大体のことは CSS でなんとかなります。</p>
<p data-line="65" class="code-line">また、<a href="https://github.com/orgs/marp-team/discussions/533" target="_blank" rel="nofollow noopener noreferrer">Marp v4 でスライドが display: block; になった</a>ので、大胆なレイアウトも組みやすくなったと感じています。</p>
<p data-line="67" class="code-line">（このために Marp v4 に上げましたが、VSCode プラグインが未対応で悲しい。私はブラウザプレビューを駆使して頑張っています）</p>
<p data-line="69" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__0f0b988118129" src="https://embed.zenn.studio/github#zenn-embedded__0f0b988118129" data-content="https%3A%2F%2Fgithub.com%2Fsu8ru%2Fslides%2Fblob%2Fmain%2Fsrc%2F241129-sdd%2Findex.md%23L16-L24" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/su8ru/slides/blob/main/src/241129-sdd/index.md#L16-L24" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/su8ru/slides/blob/main/src/241129-sdd/index.md#L16-L24</a></p>
<h3 id="%E3%83%86%E3%83%BC%E3%83%9E%E3%82%92%E4%BD%9C%E3%82%8B" data-line="71" class="code-line">
<a class="header-anchor-link" href="#%E3%83%86%E3%83%BC%E3%83%9E%E3%82%92%E4%BD%9C%E3%82%8B" aria-hidden="true"></a> テーマを作る</h3>
<p data-line="73" class="code-line">自分用のテーマを作るのも楽しくておすすめです。</p>
<p data-line="75" class="code-line">イチから全部作るのは大変なので、デフォルトテーマをベースにしたほうが楽ではあります。</p>
<p data-line="77" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__0bb844cff9b2c" src="https://embed.zenn.studio/github#zenn-embedded__0bb844cff9b2c" data-content="https%3A%2F%2Fgithub.com%2Fsu8ru%2Fslides%2Fblob%2Fmain%2Fsrc%2Fthemes%2Fsu8ru.css" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/su8ru/slides/blob/main/src/themes/su8ru.css" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/su8ru/slides/blob/main/src/themes/su8ru.css</a></p>
<p data-line="79" class="code-line">👆 は最近作り直した自分用テーマですが、最近知った OKLCH という色空間をふんだんに活用していて、メンテしやすく見やすいテーマを作れたと思っています。</p>
<p data-line="81" class="code-line">このサイトで数値いじってるだけで楽しい。</p>
<p data-line="83" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__eadb43dcd13b9" src="https://embed.zenn.studio/card#zenn-embedded__eadb43dcd13b9" data-content="https%3A%2F%2Foklch.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://oklch.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://oklch.com/</a></p>
<hr data-line="85" class="code-line">
<p data-line="87" class="code-line">また、こういったユーティリティ系のクラスも定義しておくと便利です。これは 2 columns にするやつ。</p>
<p data-line="89" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__42fe7d473a15b" src="https://embed.zenn.studio/github#zenn-embedded__42fe7d473a15b" data-content="https%3A%2F%2Fgithub.com%2Fsu8ru%2Fslides%2Fblob%2Fmain%2Fsrc%2Fthemes%2Fsu8ru.css%23L56-L65" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/su8ru/slides/blob/main/src/themes/su8ru.css#L56-L65" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/su8ru/slides/blob/main/src/themes/su8ru.css#L56-L65</a></p>
<p data-line="91" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__878e945f57fd8" src="https://embed.zenn.studio/github#zenn-embedded__878e945f57fd8" data-content="https%3A%2F%2Fgithub.com%2Fsu8ru%2Fslides%2Fblob%2Fmain%2Fsrc%2F241129-sdd%2Findex.md%23L193-L261" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/su8ru/slides/blob/main/src/241129-sdd/index.md#L193-L261" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/su8ru/slides/blob/main/src/241129-sdd/index.md#L193-L261</a></p>
<h3 id="markdown-it-%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%81%99%E3%82%8B" data-line="93" class="code-line">
<a class="header-anchor-link" href="#markdown-it-%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%81%99%E3%82%8B" aria-hidden="true"></a> markdown-it をカスタムする</h3>
<p data-line="95" class="code-line">CSS だけではどうにもならないこともあります。例えばコードブロックのカラーテーマを変えるとか。</p>
<p data-line="97" class="code-line">CSS だけでなんとかしようと試みましたが、どうにもならなかったので markdown-it のプラグインを用いて変更しています。</p>
<p data-line="99" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__75c54d616b8dc" src="https://embed.zenn.studio/github#zenn-embedded__75c54d616b8dc" data-content="https%3A%2F%2Fgithub.com%2Fsu8ru%2Fslides%2Fblob%2Fmain%2Fengine.mjs" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/su8ru/slides/blob/main/engine.mjs" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/su8ru/slides/blob/main/engine.mjs</a></p>
<p data-line="101" class="code-line">実行時に <code>--engine</code> としてファイルを指定するのを忘れずに。</p>
<p data-line="103" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__e7bcb02bee205" src="https://embed.zenn.studio/github#zenn-embedded__e7bcb02bee205" data-content="https%3A%2F%2Fgithub.com%2Fsu8ru%2Fslides%2Fblob%2Fmain%2Fpackage.json%23L7" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/su8ru/slides/blob/main/package.json#L7" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/su8ru/slides/blob/main/package.json#L7</a></p>
<p data-line="105" class="code-line">（この方法は <a href="https://zenn.dev/re_taro" target="_blank">@re_taro</a> に教わりました。Special Thanks!）</p>
<h2 id="%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A" data-line="107" class="code-line">
<a class="header-anchor-link" href="#%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A" aria-hidden="true"></a> こだわり</h2>
<p data-line="109" class="code-line">最後に、スライドを作るうえで、時間がない中でも自分がこだわっていることを明文化してみようと思います。</p>
<h3 id="%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7%E3%81%AF%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AB%E6%92%AE%E3%82%8B" data-line="111" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7%E3%81%AF%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AB%E6%92%AE%E3%82%8B" aria-hidden="true"></a> スクショはきれいに撮る</h3>
<p data-line="113" class="code-line">スライドで画像を使う場面は、その画像を「魅せる」ことが目的であることが多いと思います。せっかく入れるなら、きれいなスクショを使いたいですよね？</p>
<ul data-line="115" class="code-line">
<li data-line="115" class="code-line">スライドのテーマが明るめならスクショも明るく揃える</li>
<li data-line="116" class="code-line">ブラウザの拡大機能で文字を大きめにしてスクショを撮る</li>
</ul>
<p data-line="118" class="code-line">など、細かな工夫で見やすいスライドが作れると思っています。</p>
<h3 id="%E6%96%87%E5%AD%97%E3%81%AF%E5%A4%A7%E3%81%8D%E3%81%8F%E3%81%99%E3%82%8B" data-line="120" class="code-line">
<a class="header-anchor-link" href="#%E6%96%87%E5%AD%97%E3%81%AF%E5%A4%A7%E3%81%8D%E3%81%8F%E3%81%99%E3%82%8B" aria-hidden="true"></a> 文字は大きくする</h3>
<p data-line="122" class="code-line">Markdown としてはあるまじき行為ですが、基本的に h2 や h3 を使っています。<br>
スライドは話してる内容の補助という役割に立ち返ると、あんまり細かく書いても読めないし……</p>
<p data-line="125" class="code-line">列挙するときも順序付きリストや箇条書きを用いて見やすくすることを心がけています。</p>
<h3 id="%E5%9B%B3%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B" data-line="127" class="code-line">
<a class="header-anchor-link" href="#%E5%9B%B3%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B" aria-hidden="true"></a> 図を入れる</h3>
<p data-line="129" class="code-line">LT スライドで図を作るのは時間が掛かって大変ですが、ないよりあったほうがわかりやすいと思っています。</p>
<p data-line="131" class="code-line">Excalidraw はシンプルな作図ツールでラフな図を作れるのでお気に入り。</p>
<p data-line="133" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__27e2676b37a64" src="https://embed.zenn.studio/card#zenn-embedded__27e2676b37a64" data-content="https%3A%2F%2Fexcalidraw.com" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://excalidraw.com" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://excalidraw.com</a></p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="135" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p data-line="137" class="code-line">大言壮語なタイトル・書き出しから始まりましたが、蓋を開けてみればあまり大それたことはしていないことがおわかりいただけたのではないかなと思っています。</p>
<p data-line="139" class="code-line">ぜひ marp-cli で快適な LT スライド作りを、そして自分用テーマ作りの沼を楽しんでください！</p>
<hr data-line="141" class="code-line">
<p data-line="143" class="code-line">この記事は <a href="https://qiita.com/advent-calendar/2024/huit" target="_blank" rel="nofollow noopener noreferrer">HUIT Advent Calendar 2024</a> の 10 日目（になるはずの記事）でした！<br>
今日は 12/27 ……なんとかアドカレ投稿期間に間に合わせようとしましたが、それも叶わず大幅遅れでごめんなさい 🙇</p>
<p data-line="146" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4e7f211c432cf" src="https://embed.zenn.studio/card#zenn-embedded__4e7f211c432cf" data-content="https%3A%2F%2Fqiita.com%2Fadvent-calendar%2F2024%2Fhuit" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/advent-calendar/2024/huit" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/advent-calendar/2024/huit</a></p>


爆速できれいな LT スライド作りを支える技術

スライドの見た目をカスタマイズする

Discussion