はじめに
この記事ではVScodeとそのアドオンを使って、手軽にスライドを作成する方法を紹介します。
最初に導入、テンプレートを用意するのに少しかかりますが一度用意できれば今後markdownで中身を用意するだけでサクッとスライドを作成することが可能なため、スライドを多様する仕事の方には非常に効率的になるかと思います。
必要なもの
- Visual Studio Code
- Marp for VS code
- Markdown記法への知識
Marpって？
- VScode上でmarkdownで書いたものをスライドのPDFに変換することができるアドオン
- デフォルトのスタイルならすぐに使えます
- CSSを使った細かなスタイルの指定も可能です
大まかな流れ
- VScodeにMarpをインストール
- ファイルを作成
- ざっくりMarkdown形式でスライド内容をまとめる
- テーマ（スライドのデザイン）を決める
a. そのまま使う場合：デフォルトテーマ（default, gaia, uncover）を指定
b. 自分で細かく設定したい場合：styleファイルを作成 - 必要に応じてMarkdownの内容を調整
- 用途に応じた形式でエクスポート
1. VScodeにMarpをインストールします
VScodeの左メニュー、アドオンからmarpで検索して出てきたものをインストールします
2. ファイルを作成
VScodeの新しいウインドウを開いて、新しいファイルを選択すると、画像のように Marp Markdown という選択肢が出てくるので、これを選択します。
開いたウインドウの右上の虫メガネのマークをクリックします。
以下のようにプレビューが開けます。
これで記事を書くとリアルタイムでスライドの形に変換されたものがプレビューできるようになります。
3. Markdown形式でスライド内容をまとめる
- ページの区切りは
---を使う。 - 画像を使用する場合は、
~.mdを保存したルート上に画像フォルダを用意し、そこを参照する。 - 他は基本的に通常のmarkdown記法と大きい差はないため、markdown記法でスライド内容を記載していきます。
4. テーマ（スライドのデザイン）を決める
スライドの内容の記載が終わったらスライドのデザインであるテーマを決める、もしくは作成しましょう。
急ぎでスライドが必要だったりする場合はデフォルトテーマがおすすめです。
他にも、有志が作成したテーマもあるためそれを使用することもできますし、それらはCSSによって構成されている為、自らで１から作ったり、自由に調整することも可能です。
以下の記事ではMarpで扱えるデザインが紹介されている為、参照ください
Marpのスライドデザインまとめ
4.1 デフォルトテーマを使用する
デフォルトテーマを使用する場合
- 作成したmarkdownファイルの先頭
marp: trueの後にtheme:gaiaを追記する。 - defaultもあるが、こちらはデフォルトなので追記の必要はない
- uncoverは特殊で、1ページ毎に別のデザインを適用したい場合に使用する。
4.2 有志の作成テーマを使用する
デフォルト以外のテーマを使用する場合
- 上記の記事などを参照して有志が作成したテーマを探してくる
- VScode右下の歯車から
設定を開いてmarpと入力する。Markdown › Marp: Themesに公開されているテーマのURLを入力する。 - 4.1と同様に
marp: trueの下にthemeを指定する。
4.3 自分でテーマを作成する
自分でテーマを作成する、もしくは既存のテーマを編集して使用する場合
- ルート上にcssファイルを作成する
- 例：styles/{任意のファイル名}.css
- stylesの部分も任意で構わない
- 4.2と同様に、
Markdown › Marp: Themesを開き、そこに上記で作成したcssファイルを指定する。
4.3-1 自分でテーマを作成する
/* @theme custom */
@import "default";
section {
font-size: 24px;
}
-
上記をはじめに
~.cssに記載し、追記していく。 -
/* @theme custom */の部分は必須であり、customは自由に指定する。 -
指定したものを
theme: customのように .mdファイルに記述する。 -
@import "default";はなくても良いが、あるとデフォルトデザインがある状態から上書きして指定する形になるので少し楽。 -
ページは
.sectionで区切られている。 -
ページ毎にclassを付与することもできる。
- その場合、
~.mdの方に以下を記載する <!-- class: {任意のclass名} -->
- その場合、
5. 必要に応じてMarkdownの内容を調整していく
classを付与した場合や画像の配置を調整した場合
- markdownの内容も調整する
- markdownの通常の記法以外にも、Marp独特なものが存在する
5-1. 画像を記載する
前述の方法で格納した画像を記載する方法
inline要素で掲載する
- この方法だと、inline要素で画像が表示される。
- []の中に centerなどを入れることで表示位置(
text-align相当)を指定できる。
背景要素で掲載する
- 背景要素として表示される
- 位置や横幅を指定することで、他の要素（テキスト）などが回り込む。
5-2. ページ単位でレイアウトを変える
<!--
_backgroundColor: orange
_color: white
-->
- 上記のコードの場合は該当ページだけが背景オレンジ、文字色が白になる。
- 各スライドの頭に
<!-- -->を指定することで設定を記載できる -
_を頭につけると対象のスライドのみ設定を適用 -
_を頭につけないと、以降のスライド全てに設定が適用されるので注意
6. エクスポートする
- プレビューボタンの右にある三角のボタンをクリックし
Export Slide Deckをクリックすると、以下の形式でエクスポートできる。- HTML
- PowerPoint Documents
- PNG
- JPG
さいごに
個人的にあらゆるドキュメントをmarkdownで記載している為、スライド作成をmarkdownでまとめられるのはとても便利。Qiitaもmarkdownですし、そういう方も多い筈。
他にはmarkdownで書いて、AIにスライドの形でアウトプットしてもらうこともできるそうですが、デザイナーとして色々調整の効いてかつ早くできるこちらの方が扱いやすいかもしれません。