桜井政博氏風の「1スライド1メッセージ」な企画書を、Quartoのコピペで爆速量産する記事です。
はじめに
この記事では、ゲームクリエイター桜井政博さんが自身のyoutubeで紹介していた企画書を、vscode + Quartoで再現する方法を紹介します。
百聞は一見に如かず。まずは、こちらのスライド比較をご覧ください。
① 大カテゴリーの表紙スライド
| 【目標】本家・桜井氏のスライド | 【結果】今回Quartoで作成したスライド |
|---|---|
 |
 |
『企画書の書き方 【仕事の姿勢】』より引用
② 通常のコンテンツスライド
| 【目標】本家・桜井氏のスライド | 【結果】今回Quartoで作成したスライド |
|---|---|
 |
 |
左は、YouTubeチャンネル「桜井政博のゲーム作るには」で紹介されている、圧倒的に見やすく説得力のある企画書です。
そして右はドキュメント生成ツール「Quarto (Reveal.js)」を使い、Markdownの箇条書きだけで再現したスライドです！
🎯 目標：デザインに悩む時間をゼロにする
桜井政博氏の企画書スタイルは、以下の点でプレゼン資料として一つの完成形と言えます。
- 「1スライド・1チャート・1メッセージ」の徹底
- 左側の広大な空間を贅沢に使った視線誘導
- 右下に表示され、進行度を示す「目次（現在地）」
しかし、これをPowerPointで毎回手作業で微調整したり、HTML/CSSで一から作るのは非常に骨が折れます。
そこで本記事では、デザインと論理（執筆）を完全に分離し、「文章を書くだけで、システムが勝手に桜井政博氏風の厳格な座標にピタッと整列させてくれる」爆速テンプレートを大公開します！
🛠️ 事前準備：Quartoを超速セットアップ（所要時間：3分）
「Markdownでスライド？環境構築が面倒そう…」と思った方、安心してください。VS Codeさえあれば、以下の2ステップですぐに始められます。
Step 1: Quarto CLIのインストール
Quarto公式ダウンロードページ から、ご自身のOS（Windows / Mac）に合ったインストーラーをダウンロードし、そのままインストールします。
Step 2: VS Codeの拡張機能をいれる
VS Codeの拡張機能検索から 「Quarto」 と検索し、公式の拡張機能（提供元: Quarto）をインストールします。
これで準備は完了です！
💻 実践：このコードをまるごとコピペする
準備ができたら、適当なフォルダに presentation.qmd というファイルを作成し、以下のコードをそのまま全選択して貼り付けてください。
VS Codeの右上に出現する 「Render」ボタン(あるいはctrl + shift + Kのショートカット)を押すだけで、ブラウザが立ち上がりスライドのベースが完成します。
---
title: "【プレゼン全体のタイトル】"
author: "【ご自身の名前】"
format:
revealjs:
theme: default
transition: none # パキッとした切り替えにするためアニメーションはオフ
center: false # 独自のCSSで制御するためデフォルトの中央揃えはオフ
slide-number: true # 2/3のようにページ番号を表現
---
## 【大カテゴリーのタイトル】 {.center .category-slide}
::: {.red-line}
:::
::: {.category-sub}
【大カテゴリーのサブタイトルを記述】
:::
::: {.toc}
- 前の項目
- **【現在地のカテゴリー名】**
- 次の項目
- その次の項目
:::
---
## 【スライドのタイトル】
::: {.top-tag}
【所属するカテゴリー名】
:::
::: {.image-box}
:::
::: {.one-message}
【ここに一番伝えたいワンメッセージを記述】
:::
```{=html}
<style>
/* ==========================================
1. 全体共通の設定
========================================== */
.reveal h2 {
font-size: 60px !important;
font-weight: 900 !important;
/* タグとの衝突を避けるため、タイトルを少し下にずらして配置 */
margin-top: 45px !important;
margin-left: 0 !important;
text-align: center !important;
/* 画面端ギリギリにならないよう最低限の余白を確保 */
padding: 0 20px !important;
}
/* ==========================================
2. 大カテゴリー（.category-slide）専用の設定
========================================== */
section.category-slide {
height: 100% !important;
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
/* 右側に目次用の空間を確保し、残った「左側の空間」だけで中央揃えさせる */
padding-right: 320px !important;
box-sizing: border-box;
}
section.category-slide h2 {
text-align: center !important;
font-size: 90px !important;
margin: 0 !important;
letter-spacing: 5px;
width: 100%;
}
section.category-slide .red-line {
border-bottom: 5px solid #d32f2f;
width: 100%;
margin: 20px 0 !important;
}
section.category-slide .category-sub {
font-size: 32px;
text-align: center;
font-weight: bold;
width: 100%;
margin: 0 !important;
}
/* ==========================================
3. 各種UIパーツ（絶対配置）
========================================== */
/* --- 右下の目次ボックス --- */
.toc {
position: absolute;
bottom: 20px;
right: 20px;
border: 1px solid #999;
padding: 20px 40px;
background: #fff;
z-index: 10;
}
.toc ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 24px;
color: #888;
line-height: 1.6;
}
/* Markdownの太字(** **)を検知して現在地アイコン「▶」をつけるハック */
.toc strong {
color: #111;
position: relative;
}
.toc strong::before {
content: "▶";
position: absolute;
left: -30px;
color: #555;
}
/* --- 右上のカテゴリータグ --- */
.top-tag {
position: absolute;
top: 0px; /* タイトルと衝突しないよう、一番上（上空）に配置 */
right: 20px;
font-size: 20px;
color: #888;
font-weight: bold;
}
/* --- 下部のワンメッセージ --- */
.one-message {
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
text-align: center;
font-size: 36px;
font-weight: bold;
}
/* ==========================================
4. 画像エリアの完全制御
（自動生成される不要な余白をすべて貫通する）
========================================== */
/* 大枠の箱：タイトルとメッセージの間に確保したい高さを指定 */
.image-box {
height: 420px !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* Quartoが自動生成する邪魔な入れ子タグを無効化（すべてFlexコンテナに改造） */
.image-box .quarto-figure,
.image-box figure,
.image-box p {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* 画像本体：箱を突き破らないように自動ブレーキをかける */
.image-box img {
max-height: 100% !important;
object-fit: contain !important; /* 縦横比を保ったまま縮小 */
margin: 0 !important;
}
</style>
📝 執筆のコツ：基本は「スライド単位のコピペ」
ベースが動いたら、あとは増やしたいスライドの型（以下のA・B）をコピペして、【 】 の中身を書き換えていくだけです。裏側のCSSは一切いじる必要がありません。
パターンA：大カテゴリーの表紙を追加したいとき
以下のブロックをまるごとコピーして、原稿の途中に貼り付けます。
## 【大カテゴリーのタイトル】 {.center .category-slide}
::: {.red-line}
:::
::: {.category-sub}
【ここに大カテゴリーのサブタイトルを記述】
:::
::: {.toc}
- 前の項目
- **【現在地のカテゴリー名を太字にする】**
- 次の項目
:::
-
ここがハック！：右下の目次（TOC）の中で、現在地にしたい項目を
**【項目名】**（太字記法）で囲むだけで、CSSが自動検知して「▶」マークをそこに移動させます。
パターンB：通常のスライドを追加したいとき
以下のブロックをコピーして、原稿の途中にポンポンと貼り付けていきます。
## 【スライドのタイトル】
::: {.top-tag}
【所属するカテゴリー名】
:::
{fig-align="center" width="80%"}
::: {.one-message}
【ここに一番伝えたいワンメッセージを記述】
:::
💡 開発における2つの「つまずきポイント」（余談）
このレイアウトをQuartoで構築する際、2つの罠がありました。同じ現象で悩んでいる方の参考になれば幸いです。
-
謎の白紙ページが挟まる問題
👉 CSSを書いた<style>ブロックをスライドの途中に置くと、Quartoが不可視の段落と誤認して白紙ページを生み出します。<style>は必ずファイルの最後に配置してください。 -
大カテゴリーのタイトルが目次と衝突する問題
👉center: trueと目次の絶対配置がバッティングするため、大カテゴリーのスライドにだけpadding-right: 320pxを指定し、右側に目次用の透明な空間を強制確保することで衝突を回避しています。
おわりに
デザインと論理（執筆）を分離できるのがMarkdownツールの最大の強みです。このテンプレートを使って、内容を練ることだけに集中しつつ、圧倒的に伝わるプレゼン資料を量産しましょう！