はじめに
仕事の生産性（プロダクティビティ）って、どうすればもっと上げられるでしょうか？
生産性の向上と、創意工夫（クリエイティビティ向上）って、うまく両立させられないものでしょうか？
スライド作成については、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版はGitHubに置きましたので、ご参照ください
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"] { ... }では、と書いた画像をセンタリングするよう指定しています。
<!-- _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ファイルは、GitHubに置きましたので、ご参照ください
おわりに
カップヌードルを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)
↧