presentation-design

プレゼンテーションデザイン

HTML と CSS を使用して、視覚的に魅力的なスライドデッキを作成します。

前提条件

• .agents/design-context.md（design-context を参照）を読み、ブランドカラー、見出し／本文フォント、スタイルの類型を確認して、--slide-* 変数に割り当てます（ステップ 9）。color-palette の共通の --brand-*／--gray-* スケールを使用します。
• プレゼンテーションの対象者、目的、長さ、投影、画面共有、PDF 送付のいずれで使用するかを明確にします。
• 写真の背景やイラストには、image-generation スキル（--aspect-ratio 16:9）で生成した画像を使用し、テキストは画像が複雑な部分に直接配置せず、無地の領域またはオーバーレイ領域に配置します。

---

ステップ 1：スライドレイアウトテンプレート

タイトルスライド

.slide-title {
  display: flex; align-items: center; justify-content: center;
  text-align: center; background: var(--brand-500); color: white;
}
.slide-title .slide-headline { font-size: 4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1rem; }
.slide-title .slide-subtitle { font-size: 1.5rem; opacity: 0.85; margin-bottom: 2rem; }
.slide-title .slide-meta { display: flex; gap: 2rem; font-size: 1rem; opacity: 0.7; }

コンテンツスライド（テキスト＋箇条書き）

.slide-content-layout { display: flex; flex-direction: column; justify-content: center; padding: 4rem 6rem; }
.slide-heading { font-size: 2.5rem; font-weight: 700; margin-bottom: 2rem; color: var(--gray-900); }
.slide-bullets { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.slide-bullets li { font-size: 1.5rem; line-height: 1.4; color: var(--gray-700); padding-left: 2rem; position: relative; }
.slide-bullets li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--brand-500); border-radius: 50%; }

2 列の比較

.slide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; }
.slide-col h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--brand-500); }

引用スライド

.slide-quote { display: grid; place-items: center; padding: 4rem 8rem; background: var(--gray-50); }
.slide-blockquote p { font-size: 2.5rem; font-weight: 500; font-style: italic; line-height: 1.3; text-align: center; margin-bottom: 1.5rem; }
.slide-blockquote cite { display: block; font-size: 1.125rem; font-style: normal; color: var(--brand-500); font-weight: 600; text-align: center; }

データ／統計スライド

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 3rem; text-align: center; }
.stat-number { display: block; font-size: 4rem; font-weight: 800; color: var(--brand-500); line-height: 1; margin-bottom: 0.5rem; }
.stat-label { font-size: 1.125rem; color: var(--gray-500); }

画像＋テキストのスライド

.slide-image-text { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.slide-image-text .slide-image { background-size: cover; background-position: center; }
.slide-image-text .slide-text { display: flex; flex-direction: column; justify-content: center; padding: 4rem; }

---

ステップ 2：スライドコンテナー（固定の 16:9 キャンバス）

各スライドは 1280x720 の固定キャンバスでデザインし、キャンバス全体を画面に合わせて拡大縮小します。このスキルのすべての rem／px サイズはこのキャンバスを前提としているため、ノートパソコン、プロジェクター、PDF ページのいずれでも文字の比率が保たれます。

html, body { margin: 0; height: 100%; background: black; overflow: hidden; }
.deck { position: fixed; inset: 0; }
.slide {
  position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px;
  transform: translate(-50%, -50%) scale(var(--deck-scale, 1));
  overflow: hidden; font-family: var(--font-body); background: var(--slide-bg, white);
}
.slide-content { padding: 4rem 6rem; } /* Safe margins: keep text out of the outer ~5% */

const fit = () => document.documentElement.style.setProperty(
  '--deck-scale', Math.min(innerWidth / 1280, innerHeight / 720));
addEventListener('resize', fit); fit();

---

ステップ 3：1 枚につき 1 つのアイデア

各スライドで伝えるコンセプトは 1 つだけです。構成：

1. 見出し：伝えたい要点（1 行、最大 6～8 語）
2. 補足：見出しを補強するビジュアル、または箇条書き 3～4 項目
3. 視覚的な要素：画像、グラフ、アイコン、または数値

削るもの：長い段落、箇条書き 4～5 項目を超える内容、複雑な図。分割するか、簡潔にします。

---

ステップ 4：プレゼンテーション向けタイポグラフィ

要素	サイズ	太さ	備考
見出し	3-4.5rem	700-800	1 行、最大 2 行
小見出し	1.5-2rem	500	補足となる背景情報
本文	1.25-1.5rem	400	箇条書き、説明
キャプション	1-1.125rem	400	帰属表示、注記
統計値	4-6rem	800	主要な指標、大きな数値

暗い背景でのコントラスト

.slide-dark { background: var(--gray-900); color: var(--gray-50); }
.slide-dark .slide-heading { color: white; }
.slide-dark .slide-body { color: var(--gray-300); }

ライブプレゼンテーション中の FOUT を防ぐため、プレゼンテーション用フォントには font-display: block を使用します。

---

ステップ 5：スライドのデータ視覚化

CSS 棒グラフ

.chart-bars { display: flex; align-items: flex-end; gap: 2rem; height: 300px; padding-top: 2rem; margin-bottom: 2.5rem; /* room for .bar-label */ }
.bar { flex: 1; height: calc(var(--value) * 1%); background: var(--brand-500); border-radius: 0.5rem 0.5rem 0 0; position: relative; transition: height 0.6s var(--ease-out); }
.bar-value, .bar-label { position: absolute; left: 0; right: 0; text-align: center; }
.bar-value { top: -2rem; font-weight: 700; font-size: 1.25rem; }
.bar-label { bottom: -2rem; font-size: 1rem; color: var(--gray-600); }

<div class="chart-bars" role="img" aria-label="Revenue by quarter: Q1 40%, Q2 55%, Q3 70%, Q4 90%">
  <div class="bar" style="--value: 40"><span class="bar-value">40%</span><span class="bar-label">Q1</span></div>
  
</div>

CSS ドーナツグラフ

.donut { --pct: 65%; width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(var(--brand-500) 0 var(--pct), var(--gray-200) var(--pct) 100%); display: grid; place-items: center; }
.donut-label { width: 140px; height: 140px; background: var(--slide-bg, white); border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 800; }

<div class="donut" style="--pct: 65%" role="img" aria-label="65% of customers renewed"><span class="donut-label" aria-hidden="true">65%</span></div>

系列が 2 つを超える場合は、CSS シェイプではなく、実際のグラフライブラリを使用します（利用できる場合は dataviz のガイダンスを参照）。

スライドグラフのルール

1. グリッド線やラベルを最小限に抑え、正確なデータではなく傾向を伝えます
2. 重要なデータポイントを強調します（サイズを大きくする、色を変える、ラベルを付ける）
3. グラフのマークはスライド背景に対して 3:1 のコントラスト比が必要です（WCAG 1.4.11）。色の凡例に頼らず、値を直接ラベル表示します
4. スライド表示時にグラフ要素をアニメーションさせ、インパクトを高めます

---

ステップ 6：トランジションと段階表示アニメーション

スライドトランジション

.slide { opacity: 0; transition: opacity 0.4s ease; }
.slide.is-active { opacity: 1; }

段階表示（箇条書きの表示）

.slide-bullets li { opacity: 0; transform: translateX(-20px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.slide-bullets li.is-revealed { opacity: 1; transform: translateX(0); }

数値のカウントアップ

@property --num { syntax: '<integer>'; initial-value: 0; inherits: false; }
.stat-countup { --target: 65; animation: count-up 2s var(--ease-out) forwards; counter-reset: num var(--num); }
.stat-countup::after { content: counter(num) '%'; }
@keyframes count-up { from { --num: 0; } to { --num: var(--target); } }
@media (prefers-reduced-motion: reduce) { .stat-countup { animation: none; --num: var(--target); } }

要素は空のままにします（数値は生成されます）。スクリーンリーダーが生成コンテンツの各フレームを読み飛ばしたり、すべて読み上げたりする可能性があるため、aria-label="65%" を指定します。

---

ステップ 7：発表者ノート

各スライド内の <aside class="notes"> にノートを記述します。これは reveal.js が使用するものと同じマークアップで、カスタムシステムと reveal.js の間でスライドデッキを移行できます。

<section class="slide">
  
  <aside class="notes">Explain the key metric here. Pause for questions.</aside>
</section>

.notes { display: none; }
/* Press N (see Step 8 JS) to show notes as an overlay while rehearsing */
.show-notes .slide.is-active .notes {
  display: block; position: absolute; inset: auto 0 0 0; max-height: 35%; overflow: auto;
  padding: 1.5rem 2rem; background: oklch(0.2 0 0 / 0.92); color: white; font-size: 1.25rem; line-height: 1.5;
}

2 つ目の画面で実際の発表者ビューを使うには、reveal.js を使用します（S キーを押します）。

---

ステップ 8：スライドフレームワークのセットアップ

カスタムスライドシステム（フレームワークなし）

ステップ 2 のキャンバスを使用します。非アクティブなスライドは inert で非表示にするため、リンクはタブ移動の対象にならず、スクリーンリーダーには現在のスライドだけが表示されます。

.slide { display: flex; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.slide.is-active { opacity: 1; pointer-events: auto; }

let current = 0;
const slides = document.querySelectorAll('.slide');
function goTo(index) {
  current = Math.max(0, Math.min(index, slides.length - 1));
  slides.forEach((s, i) => { s.classList.toggle('is-active', i === current); s.inert = i !== current; });
  history.replaceState(null, '', '#' + (current + 1)); // deep-linkable
}
document.addEventListener('keydown', (e) => {
  if (['ArrowRight', 'PageDown', ' '].includes(e.key)) { e.preventDefault(); goTo(current + 1); }
  if (['ArrowLeft', 'PageUp'].includes(e.key)) goTo(current - 1);
  if (e.key.toLowerCase() === 'n') document.body.classList.toggle('show-notes');
});
goTo((parseInt(location.hash.slice(1), 10) || 1) - 1);

Reveal.js を使用する場合は CDN から読み込み、CSS 変数（--r-heading-font、--r-main-color、--r-link-color）でカスタマイズします。

---

ステップ 9：ブランドに一貫したテンプレート

.deck {
  --slide-bg: white; --slide-heading-color: var(--gray-900);
  --slide-text-color: var(--gray-600); --slide-accent: var(--brand-500);
  font-family: var(--font-body); /* design-context Body Font; headings use --font-heading */
}
.slide::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--slide-accent); }
.slide-number { position: absolute; bottom: 1.5rem; right: 2rem; font-size: 0.875rem; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.slide-logo { position: absolute; bottom: 1.5rem; left: 2rem; width: 80px; opacity: 0.3; }

ステップ 10：クロージング／CTA スライド

質疑応答の間、最後のスライドは最も長く表示されます。以下を含めてください：

1. 明確な次のステップ／CTA（URL、QR コード）
2. 連絡先情報
3. 任意：要点を一行で

.slide-closing { display: grid; place-items: center; text-align: center; background: var(--gray-900); color: white; }
.closing-headline { font-size: 4rem; font-weight: 800; margin-bottom: 2rem; }
.closing-link { font-size: 2rem; color: var(--brand-300); font-weight: 600; }
.closing-contact { font-size: 1.125rem; opacity: 0.6; display: flex; gap: 2rem; }

---

クイックリファレンス

1. 16:9 のアスペクト比を使い、十分な余白（4-6rem）を確保します。
2. 1 枚のスライドにつきアイデアは 1 つにします。複雑なスライドは分割します。
3. 見出し：3-4.5rem、最大 8 語。
4. 本文：最低 1.25-1.5rem（会場の後方からでも読めるサイズ）。
5. ブランドカラーを一貫して使います。1 枚のスライドにつき最大 3 色です。
6. アニメーションは段階的に表示します。すべてをアニメーションにしないでください。
7. データの視覚化：簡潔にし、要点を強調します。
8. すべてのコンテンツスライドにスピーカーノートを含めます。
9. クロージングスライド：CTA と連絡先を載せます。質疑応答の間は画面に表示したままにします。
10. プロジェクターまたは大型画面でテストします。色が薄く見えることがあります。

検証とエクスポート

1. Playwright を使って 1920x1080 で各スライドのスクリーンショットを撮影し（#1…#N をループし、page.goto(url + '#' + n)、page.screenshot({ path: 'slide-' + n + '.png' }) を実行）、Read で各画像を確認します。確認項目：テキストがはみ出したり overflow: hidden で切り取られたりしていないこと、1 枚につきアイデアが 1 つであること、サムネイルサイズでも見出しが読めること、余白とスライド番号の位置が一貫していること、ブランドカラーが正しいこと。
2. コントラスト：ブランドカラーや画像の背景上のテキストは 4.5:1 以上（テキストが ≥24px の場合は 3:1）にします。プロジェクターではコントラストがさらに下がるため、より高い値を目指してください。
3. PDF：カスタムシステムでは、@media print { .slide { position: relative; transform: none; left: 0; top: 0; break-after: page; opacity: 1; } } と @page { size: 1280px 720px; margin: 0; } を追加し、その後 page.pdf({ path: 'deck.pdf', preferCSSPageSize: true, printBackground: true }) を実行します。reveal.js の場合は、まず ?print-pdf を付けて開きます。