Marpのカスタムテーマを作成するときのTips
2025.08.22こんにちは、リテールアプリ共創部の戸田駿太です。
前回「【AIスライド作成】クラスメソッド社内用のMarpテーマを作ってみた！」というブログを書きました。
今回はクラスメソッドMarpテーマを作るときのTipsについてご紹介します。
クラスメソッドMarpテーマとは？
クラスメソッド社内用に作成したMarpテーマです。
マークダウンから社内用のスライドデザインを作成できます。
詳しくはこちらのブログをご覧ください。
Marpのカスタムテーマを作るのに必要なこと
Marpのカスタムテーマを作成するには↓の3ステップ必要です。
- Marpを利用する環境を作成する
- テーマのCSSを作成する
- テーマのCSSをカスタムテーマとして読み込ませる
クラスメソッド社内用のMarpテーマを利用するときのセットアップガイドはこちらです。
クラスメソッドMarpテーマのTips
ここからカスタムテーマを作るときのTipsをご紹介します。
基本的にAIと一緒に作り上げていくことを前提に、より扱いやすくなるようにしています。
HTMLは極力書かなくてもいいようにする
MarpとAIでスライド作成する最大のメリットはマークダウンで書けることです。
マークダウン内ではHTMLが利用できますが、HTMLを書いてしまうとマークダウンの可読性が下がり、Marpのメリットの手軽さやシンプルさが失われてしまいます。
このデメリットは手作業はもちろん、AIに書かせるときに大きく影響します。
AIにHTMLとCSSを一緒に書かせてしまうと、カスタムテーマに従ったレイアウトではなく、HTMLとCSSによるレイアウトの方式に展開してしまいがちです。
それを防ぐためにもHTMLは極力書かずに済むようにカスタムテーマを作成することをオススメします。
対策
デフォルト状態のスライドデザインを決める
クラスメソッドMarpテーマでは一番よく使われるであろうスライドをデフォルトのスライドデザインとして作成しています。
---
# 基本のレイアウト
基本のレイアウトを使用する際は必ずスライドタイトルに h1 を利用してください
# 最初のh1以外でもh1を使うことができます
スライドタイトルの下に一本の線が引かれるのでタイトルと内容がハッキリと区別できます
---
クラスメソッドMarpテーマではh1をスライドタイトルとして利用しています。
本来のHTMLであればタイトル部分をタグで囲みたくなりますが、グッと堪えてマークダウンをそのまま利用できるようにしました。
これによりマークダウンの可読性を保ちつつ、スライドを作成することができます。
スライドの上部に一行だけクラスを追加する
よく使われる手法としてセクション間にセクション用などの特殊なスライドを挟むことがあります。
これらはスライドの上部にクラスを追加することで実現しています。
---
<!-- _class: section -->
<!-- _paginate: false -->
## レイアウト：中扉・セクション
テキストは左寄せの中央に配置、背景色はグレーになります
---
このようにsectionクラスを追加してこのスライドがセクション間を表すスライドということを示しています。（<!-- _paginate: false -->はMarpのデフォルト機能のページ番号を非表示にするためのコメントです）
Marpではこのようにスライド上部にコメントでクラスを記載することで、スライドを表すsectionタグにクラスを追加することができます。
これを利用してCSSのスタイルを当てることで、背景色やテキストの配置を変えています。
上記で説明した通り、HTMLを極力書きたくないため、CSSのセレクターで頑張ってスタイルを当てています😬
デフォルトのテーマをimportする
クラスメソッドMarpテーマではMarpのデフォルトのテーマをimportしています。
これによりデフォルトのテーマのスタイルを利用することができます。
もしこれがないと既存のスタイルが当てられず、全てのスタイルを自分で設定する必要があります。
さらにコードブロックの色が一色になってしまい、コードの可読性が下がってしまいます。
対策
Marpのデフォルトのテーマをimportする
以下のようにデフォルトのテーマのスタイルをimportするだけで細かくて辛いCSSを書かなくてもよくなります！
@import 'default';
@auto-scaling trueを設定する
カスタムテーマの上部に@auto-scaling trueを設定することで、はみ出そうなコードブロックのサイズを自動で調整してくれます。
これができるのはエンジニアにとって嬉しいのではないでしょうか？
個人的には必須級の設定です。
| 短いコード | 長いコード |
|---|---|
 |
 |
Marpの記法を理解する
今更ですが、Marpの公式ドキュメントをよく読んで記法を理解しましょう。
あなたが実装したいデザインはすでにMarpチームによって叶えられているかもしれません。
実際にカスタムテーマを作成していて気づかなかったポイントも多くあります。
例えば文字の色を変えたいときに元々は複数のクラスを利用してゴリ押ししてました。（赤色の文字は今もゴリ押し）
よくよく調べてみると見出しに対して太字を適用すると（本来はmdでは意味のない記法）1色だけ色を変えることができます。
これを見つけてからよく使いがちな青色の文字を変えるときのクラスが要らなくなりました。
## 見出しの一部を**青色のアクセントカラー**にする
どうしても必要なところだけ<div>で囲む
クラスメソッドMarpテーマには要素を横並びにして配置するデザインがあります。
普段からスライドを作る際に比較として横並びにしたいケースは多くあると思います。
これに対応するための方法を考えましたがMarpの制約上、スライド上部のclassだけではどうしても実装することができませんでした。
そんな悩みの中、横並びのスライドのみ<div>で囲むことで実現しています。
---
<!-- _class: column-layout -->
# 横並びレイアウト（column-layout）
<div class="column">
## 左カラム
- ポイント1
- ポイント2
- ポイント3
</div>
<div class="column">
## 中央カラム
1. 手順1
2. 手順2
3. 手順3
</div>
<div class="column">
## 右カラム
1. 方法1
2. 方法2
3. 方法3
</div>
---
Marpはリンクでも画像を表示できることを意識する
Marpは内部的にHTMLを利用しているため画像のリンクを貼ることで表示することができます。
カスタムテーマのサンプルスライドをそのままコピペしても表示できるので利用者にやさしい設計になります。
ロゴなどは画像をダウンロードしなくても、リンクを貼るだけの表示にして楽をしましょう！
---
<!-- _class: title -->
<!-- _paginate: false -->
# このページはタイトルに適しています
20XX/XX/XX ここには日付や執筆者の名前など
必要な情報を入力して下さい
---
要素の大きさを決めるクラスは細かく設定する
要素の大きさはAIにとって認識しづらいものです。
よくあるのが画像の大きさが大きすぎる、小さすぎるというケースです。
これらはMarpの記法を利用して手動で調整するのがいいでしょう。
w:100 幅100pxで表示
h:100 縦100pxで表示
オリジナルなスライドで要素がはみ出してしまう場合は、クラスで細かく設定できるようにしてあげるのがいいと思います。
この例では右側の画像はMarpの記法により制御し、左側のテキスト領域はcontent-xxにより制御しています。
このように細かく設定することで、要素のはみだす問題を防ぐことができます。
---
<!-- _class: content-image-right -->
<!-- 幅を変えたい場合の設定「content-image-right content-60」など -->
# 文章と図を横並びに表現(図が右側)
- content-image-rightクラスは、右側に画像を配置するレイアウトを提供
- デフォルトでは右側50%の幅になります
- `content-xx`で左側のテキスト領域の幅を調整できます
- content-30: テキスト領域30%
- content-40: テキスト領域40%
- content-60: テキスト領域60%
- content-70: テキスト領域70%
- content-80: テキスト領域80%
---
GitHub Pagesで公開する（どこでも可）
クラスメソッドMarpテーマはGitHub Pagesで公開しています。
その理由としていくつかあります。
1. リモートのCSSファイルを直接Marpのテーマとして読み込むことができるから
普通のCSSファイルを読み込む場合は、ローカルのCSSファイルを読み込む必要があります。
テーマを作成したファイルをリモートに配置することで、テーマのCSSをダウンロードすることなく利用できます。
2. リモートのCSSを更新すればそのテーマのリンク利用者は全員アップデートが適用される
逆に破壊的な変更はできなくなりますが、ちょっとしたバグの修正のためにわざわざCSSをダウンロードして更新する必要は無くなるので利用する価値はあると思います。
3. サンプルやセットアップのスライドを一緒に公開できる
リモートにCSSを配置するのと一緒にMarpをHTMLにして公開しちゃいましょう！
社内に展開するときにリンクを貼るだけでサンプルやセットアップ方法を確認ができます。
さらに自分で作るスライドを作成して発表するのと同じ体験ができるので、実際に発表するときの想像ができます。
GitHub Pageにした理由は楽だったからです（それだけ）
サンプルスライド
セットアップスライド
まとめ
Marpのカスタムテーマを作成するのは難しいことも多いですが、一度作成してしまえばその後のスライド作成が楽になります。
ぜひこのTipsを参考にして、カスタムテーマを作成してみてください！
前回のブログ
GitHub
セットアップスライド
サンプルスライド
Marp公式ドキュメント
