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

## はじめに

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

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

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

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

## 前提

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

スライド例↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/3013eb1e-0e2f-7500-691a-5aac4dc3e6a4.png" width=60%>

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

### 作成環境に関する想定

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

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

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

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

### スライドイメージ

<img src="https://github.com/hnsol/marp-custom-theme/raw/main/images/SS_gaia_gd_noncode.png" width=60%>

PDF版は[こちらをご覧ください](https://drive.google.com/file/d/1I36a-qQC1BjsT4CFiA2pT4A7O4jcjWtJ/view?usp=sharing)


### Markdownコード

Markdownコードも[GitHubに置きましたので、よろしければご参照ください](https://raw.githubusercontent.com/hnsol/marp-custom-theme/main/example/typical-slides-and-codes.md)

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

```yaml
---
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: `で、ヘッダとフッタ（上下の小さい文字）を指定しています。


```css
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](...)`と書いた画像をセンタリングするよう指定しています。

``` markdown
<!-- _class: gaia lead -->
<!-- _paginate: false -->
<!-- _header: '' -->
<!-- _footer: '' -->

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

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

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


### カスタムCSS

カスタムCSSファイルは、[GitHubに置きましたので、よろしければご参照ください](https://github.com/hnsol/marp-custom-theme/blob/main/gaia_gd_noncode.css)

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

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

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

また、[読みやすい＝理解しやすい　Webの組版を整理してより良い文章を届けよう - Qiita](https://qiita.com/xrxoxcxox/items/206b223844e3c42dc86f)という、めちゃくちゃ素晴らしい記事がありまして、これを参考にして

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

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

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

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

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

![SS 2022-04-01 21.41.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/b643b658-8b3d-717d-b986-f324b60fe8c8.png)

上記画像の[PDFファイルは、こちらをご覧ください](https://drive.google.com/file/d/1VayW0wmknoIkzEmMeaaYmE7KCdjcGbmM/view?usp=sharing)



## おわりに

カップヌードルを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)