Marpのカスタマイズテーマで、ワークショップ用のスライドをいい感じにつくれました

10243 ワード
Markdown CSS Marp VSCode CSS テキストリンク

はじめに

仕事の生産性（プロダクティビティ）って、どうすればもっと上げられるでしょうか？
生産性の向上と、創意工夫（クリエイティビティ向上）って、うまく両立させられないものでしょうか？

スライド作成については、Marpをつかうことで、きもちよく、たのしく、スピーディにできるような気がしてきました。

この一年ぐらい、こつこつとノウハウを溜め、CSSファイルをカスタマイズしてきました。そして、100ページ近いボリュームの、ワークショップ用スライドをつくってデリバーできるようになりました。

まだまだ60点レベルですが、ちょっとはいい感じになってきましたので、途中経過として共有させていただきます。

前提

アウトプットに関する想定

スライド例↓

  • スライド内に、コード記述はない想定です
  • 見出し/キーメッセージ/説明テキスト/図やチャートから構成されているスライドを想定しています

作成環境に関する想定

  • VS Codeで、Marp for VS code機能拡張をもちいて、Markdownファイルを編集・プレビューする想定です
  • Markdownファイルのtheme:にて、カスタムCSSファイルを指定します
  • カスタムCSSファイルは、Markdownファイルに対して./.marp-theme/custom.cssのように配置します
  • カスタムCSSファイルは、VS Codeでの設定 > Marp: Themesで指定します

本記事で詳説はいたしません。下記などのすばらしい記事をご参照ください。
Marpで目指す脱パワポ職人 - Qiita　←　VS Codeの導入
Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る - Qiita　←　CSSの設定

Markdown、カスタムCSS、アウトプット

だいたいどういうスライドをつくれるのかの典型的な例と、サンプルコードを共有いたします。

スライドイメージ

PDF版はこちらをご覧ください

Markdownコード

MarkdownコードもGitHubに置きましたので、よろしければご参照ください

冒頭部分のみ、若干補足いたします。

---
marp: true
theme: gaia_gd_noncode
size: 4:3
paginate: true
header: 'header text'
footer: 'footer text ex: 2022-mm-dd AAAAAAAA Inc.'

スライド全体の共通項目の設定です。

  • theme: gaia_gd_noncodeで、カスタムCSSを指定しています。
  • paginate: trueで、ページ番号を振っています。
  • header: /footer: で、ヘッダとフッタ（上下の小さい文字）を指定しています。
style: |
    section {
        font-size: 22px; }
    section strong {
        color: LightCoral; }
    section cite {
        font-style: normal;
        font-size: 50%;
        line-height: calc(0.25rem * 4);
        float: right;
        color: #628EC8; }
    section footnote {
        font-style: normal;
        font-size: 80%;
        color: #628EC8; }
    img[alt~="center"] {
      display: block;
      margin: 0 auto; }
---

この部分は、「このファイルだけに適用する」スタイルの指定です。

  • section { font-size: 22px; }で、フォントサイズを指定しています。ここを変えると、スライド全体のフォントサイズが変わります。
  • section strong { color: LightCoral; }で、強調（**〜**）をピンク色にしています。
  • section cite { ... }では、<cite>〜〜</cite>で囲んだ部分のスタイルを指定しています。
  • section footnote { ... }では、<footnote>〜〜</footnote>で囲んだ部分のスタイルを指定しています。
  • img[alt~="center"] { ... }では、![center](...)と書いた画像をセンタリングするよう指定しています。
<!-- _class: gaia lead -->
<!-- _paginate: false -->
<!-- _header: '' -->
<!-- _footer: '' -->

# h1: ドキュメントの標題

1枚目のスライドです。

  • _xxxx: は、「このページだけに指定します」という意味になります
  • _class: で、このページのクラスを変えています
  • _pagenate: falseで、このページだけページ番号を消しています
  • _header: ''で、このページだけヘッダを消しています
  • _footer: ''で、このページだけフッタを消しています

このあたりのスタイル指定以外は、ふつうのMarkdownに近いとおもいます。

カスタムCSS

カスタムCSSファイルは、GitHubに置きましたので、よろしければご参照ください

もともとのgaiaテーマに対して、色を変えているのと、下記のコードを加えています。

    section.inside-title {
        background-color: #A3C6E5; }
    section.FYR {
        background-color: #DFECF6; }
    section.FYR code {
      background: #d1d8e1;
      color: #2962AD; }

inside-titleは中表紙用、FYRは参考スライド用です。

また、読みやすい＝理解しやすい　Webの組版を整理してより良い文章を届けよう - Qiitaという、めちゃくちゃ素晴らしい記事がありまして、これを参考にして

  • バーティカルリズムを揃える
  • 段落間の余白をあける
  • 見出しをツメる

を適用しています（うまくできているのかな）。

実際のワークショップのスライド作例

実際にデリバーした、2日間にわたるワークショップのスライド（全89ページ）です。

作成途中では120ページぐらいになっていましたので、ハンドリングが用意で、ワークショップの進行に合わせて柔軟に修正ができるMarkdown + Marpで作業ができてとても助かりました。

上記画像のPDFファイルは、こちらをご覧ください

おわりに

カップヌードルを100回つくっても、お湯が沸かせるようになるだけです。
サッポロ一番みそラーメンを100回つくれば、もしかすると簡単な料理ができるようになり、さらに先には本格的な料理への道がひらけているかもしれません。

パワーポイントをたくさんつくっても、そのさきの広がりには欠けるようにおもわれます。
Marpでスライドをつくれば、初期の学習コストは高いかもしれませんが、エディタ、Markdown、テキスト処理ツール、CSS、html、Gitなど、歴史と蓄積がある技術を習得する道がひらけているとおもいます。

なににせよ、Marp + Markdown + CSSでは、構造と一貫性のある（多少は）美しいスライドが作れます。スライドが美しいと創意工夫の意欲もわき、気分がよいと生産性もあがります。もちろん偉大なる先人が磨き上げたテキスト処理ツールはぜんぶ使えますから、柔軟性も生産性も世界最高峰を追求できます（じっさいに実現できるかどうかは別問題ですが😢）。

とにかく作業プロセスがずっとたのしくて気分がよいので、Marpでのスライドづくり、これからも継続的なカイゼンを積み重ねていきたいとおもいます。

環境

  • VS Code 1.66.0
  • Marp for VS Code v1.5.0
  • Obsidian 0.14.2
  • macOS Monterey 12.2.1
  • MacBook Pro (14-inch, 2021)