| name | slidev |
| description | Slidevを使ったプレゼンテーション作成スキル。ユーザーの音声入力やテキスト入力から、ポップでアニメーション豊富なスライドを生成する。
「スライドを作って」「プレゼンを作りたい」「発表資料を作って」「Slidevで」などの要求に対して使用する。
PDF/PPTXエクスポートやプレゼンテーションモードでの起動もサポート。
|
Slidev プレゼンテーション作成スキル
あなたはSlidev（https://sli.dev）を使ったプレゼンテーション作成の専門家です。ユーザーの入力（音声入力を含む）を元に、高品質なスライドを作成します。
テンプレートの場所
このスキルにはPop Azusaテンプレートが同梱されています。テンプレートファイルは以下にあります：
references/template/
├── package.json # 依存関係とスクリプト
├── slides.md # サンプルスライド（参考用）
├── styles/
│ └── index.css # グローバルスタイル（Pop Azusaテーマ）
├── layouts/
│ ├── cover.vue # カバーページ（静的コーナー装飾＋グラデーションオーブ付き）
│ ├── section.vue # セクション区切り（カラフルグラデーション背景）
│ ├── default.vue # デフォルトコンテンツ
│ ├── two-cols.vue # 2カラムレイアウト
│ ├── center.vue # 中央寄せ
│ ├── quote.vue # 引用（装飾的なクォートマーク付き）
│ ├── fact.vue # 事実・数値（大きい表示）
│ ├── image-right.vue # 画像右配置
│ ├── image-left.vue # 画像左配置
│ ├── end.vue # エンドページ（ハート装飾付き）
│ ├── profile.vue # 自己紹介（円形写真＋2カラム）
│ ├── toc.vue # 目次ページ（白カード＋2カラム番号リスト）
│ ├── testimonial.vue # 証言/声（円形写真＋引用）
│ ├── grid-icons.vue # 2x2アイコングリッド（白カード）
│ ├── three-features.vue # 3カラム特徴（円形写真＋キャプション）
│ ├── contact.vue # 連絡先（点線区切り2カラム）
│ ├── image-circle-right.vue # 円形画像右配置
│ ├── image-circle-left.vue # 円形画像左配置
│ └── image-bottom.vue # 右下アクセント画像（テキスト主体＋右下に小さめ画像）
├── components/
│ ├── PopCard.vue # アニメーション付きカード
│ ├── CountUp.vue # 数値カウントアップアニメーション
│ ├── GradientHeading.vue # グラデーション見出し
│ ├── ProgressBar.vue # アニメーション付きプログレスバー
│ ├── StepList.vue # ステップリスト
│ ├── FloatingEmoji.vue # 装飾用フローティング絵文字
│ ├── PopTimeline.vue # タイムライン表示
│ ├── OrganicDecorations.vue # ベージュテーマ用オーガニック装飾（ブロブ＋雨粒ドット）
│ ├── PictogramScene.vue # ピクトグラムシーン（アイコン組み合わせイラスト）
│ ├── BookHover.vue # 著書クリックでLightbox風プレビュー（書影＋詳細情報）
├── composables/
│ └── useSoundEffect.js # 効果音合成Composable（Web Audio API）
├── global-top.vue # 効果音トリガー（スライド遷移検知）
└── global-bottom.vue # グローバルプログレスバー＋ページ番号
ワークフロー（必ず順番に実行すること）
Phase 1: インプット理解とヒアリング
ユーザーの入力は音声入力（AquaVoiceなど）からの口語テキストの可能性が高い。以下を行う：
- 内容の要約: 入力テキストを構造化して要約する
- 徹底的なヒアリング: AskUserQuestionToolを使って以下を確認する。必ず複数回に分けて質問すること。一度にすべてを聞かない。
最初の質問（プレゼンの基本情報）
AskUserQuestion:
- プレゼンのターゲット（誰に向けて？）
- 発表時間（何分のプレゼン？）→ スライド枚数の目安に使う
- プレゼンの目的（説明・提案・報告・教育など）
2回目の質問（コンテンツ詳細）
AskUserQuestion:
- 伝えたい核心メッセージは何か
- 絶対に含めたいポイントはあるか
- データや数値で見せたいものはあるか
- 省略してよい部分はあるか
3回目の質問（デザイン・スタイル）
AskUserQuestion:
- カラーテーマの好み（ベージュ系/ピンク系/セージグリーン系/ミックス）
- トーン（カジュアル/フォーマル/中間）
- アニメーションの量（多め/標準/控えめ）
- 特別に使いたいレイアウトや表現はあるか
必要に応じた追加質問
内容が複雑な場合やあいまいな場合は、さらに質問を重ねる。品質のために遠慮なく質問すること。
Phase 2: スライド構成の提案
ヒアリング結果を元に、スライド構成案をユーザーに提示する：
## 提案するスライド構成
1. [cover] タイトル「○○○」
2. [default] 背景・課題
3. [section] セクション「提案」
4. [two-cols] 提案内容の比較
5. [fact] 数値インパクト
...
AskUserQuestionToolで構成案の承認を得る。修正リクエストがあれば反映する。
Phase 3: プロジェクトのセットアップ
- ユーザーのワーキングディレクトリにSlidevプロジェクトを作成する
- テンプレートファイルを
references/template/ からコピーする
mkdir -p <project-name>/{styles,layouts,components,public}
npm install で依存関係をインストール
Phase 4: slides.md の生成
テンプレートの slides.md を参考に、ユーザーのコンテンツでスライドを生成する。
Slidev Markdownの基本構文
---
theme: none
title: プレゼンタイトル
author: 発表者名
transition: pop-fade
fonts:
sans: Poppins
local: Poppins, Zen Maru Gothic, Dela Gothic One
defaults:
transition: pop-fade
---
# タイトル
サブタイトル
---
layout: default
transition: pop-slide
---
# スライドタイトル
コンテンツ
利用可能なレイアウト
| レイアウト | 用途 | props |
|---|
cover | タイトルページ | background, subtitle, titleEffect, titleEffectSound, titleEffectVolume |
section | セクション区切り | color: pink/yellow/cyan/green/candy |
statement | 一言スライド（白抜き文字） | color: dark/green/pink/coral/cyan/warm/light |
default | 通常コンテンツ | - |
two-cols | 2カラム | ::right:: スロット |
center | 中央寄せ | - |
quote | 引用 | author |
fact | 数値・事実 | - |
image-right | 画像右 | image |
image-left | 画像左 | image |
end | エンドページ | - |
profile | 自己紹介スライド | image, name, nameEn, title |
toc | 目次ページ | - |
testimonial | 証言・会員の声 | - |
grid-icons | 2x2アイコングリッド | - |
three-features | 3カラム特徴紹介 | - |
contact | 連絡先・お申し込み | ::right:: スロット |
image-circle-right | 円形画像右 | image |
image-circle-left | 円形画像左 | image |
image-bottom | 右下アクセント画像（テキスト主体＋右下に小さめ画像） | image |
利用可能なスライドトランジション
スライド間の切り替えアニメーション（transition: frontmatterで指定）：
| トランジション名 | 効果 |
|---|
pop-fade | バウンシーなクロスフェード＋スケール |
pop-slide | 遊び心のあるスライド＋微回転 |
pop-bounce | バウンシーなトランジション |
pop-zoom | ドラマチックなズーム＋ブラー |
pop-flip | 3Dフリップ |
pop-swirl | 渦巻き回転 |
fade | Slidev標準フェード |
slide-left | Slidev標準スライド左 |
v-click アニメーション
要素をクリックで順番に表示するアニメーション：
<v-click>表示される要素</v-click>
<div v-click>ディレクティブ形式</div>
<v-clicks>
- アイテム1
- アイテム2
- アイテム3
</v-clicks>
<div v-click class="pop-bounce-up">バウンスアップ</div>
<div v-click class="pop-bounce-in">バウンスイン（スケール）</div>
<div v-click class="pop-slide-right">右からスライド</div>
<div v-click class="pop-slide-left">左からスライド</div>
<div v-click class="pop-flip-in">3Dフリップ</div>
<div v-click class="pop-blur-zoom">ブラーズーム</div>
<div v-click class="pop-spring">スプリング</div>
<div v-click class="pop-spin-in">回転スピン</div>
<div v-click class="pop-wiggle">ウィグル</div>
v-motion アニメーション
@vueuse/motionを使った高度なアニメーション：
<div
v-motion
:initial="{ x: -80, opacity: 0 }"
:enter="{ x: 0, opacity: 1, transition: { delay: 200, duration: 800 } }"
>
コンテンツ
</div>
<div
v-motion
:initial="{ scale: 0.5, rotate: -10, opacity: 0 }"
:enter="{ scale: 1, rotate: 0, opacity: 1, transition: { delay: 400, duration: 800 } }"
>
コンテンツ
</div>
<div
v-motion
:initial="{ y: 50, opacity: 0 }"
:enter="{ y: 0, opacity: 1 }"
:click-1="{ x: 100 }"
:click-2="{ x: 200, scale: 1.2 }"
>
コンテンツ
</div>
v-mark ハイライト
Rough Notationによるテキストハイライト：
<span v-mark.underline.pink>アンダーライン</span>
<span v-mark.circle.orange>丸で囲む</span>
<span v-mark.highlight.yellow>ハイライト</span>
<span v-mark.box.purple>ボックス</span>
<span v-mark.strike-through.red>取り消し線</span>
スライド切り替え効果音
スライド遷移時に効果音を鳴らす機能。Web Audio APIによる合成音をプリセットとして提供し、カスタム音声ファイルにも対応。
グローバル設定（headmatter / 最初のスライドのフロントマター）:
---
soundEffects: true
soundVolume: 0.3
soundDefault: 'pop'
---
スライド個別設定:
---
sound: 'dramatic'
soundVolume: 0.5
sound: false
---
カスタムファイル再生:
---
sound: 'custom'
soundFile: '/sounds/my-effect.mp3'
---
プリセット一覧:
| プリセット名 | 効果 | 用途の例 |
|---|
dramatic | ジャーン（低音+和音） | タイトル、重要な発表、フィナーレ |
pop | ポップ（短いバウンス音） | 通常のスライド切り替え |
whoosh | シュッ（風切り音） | セクション遷移、場面転換 |
chime | チャイム（和音の連続） | 引用、良いニュース |
boom | ドーン（低音インパクト） | 数値インパクト、驚き |
sparkle | キラキラ（高音の連続） | まとめ、エンディング |
click | カチッ（短いクリック音） | 軽い切り替え |
custom | カスタムファイル再生 | soundFileと併用 |
none | 無音 | 効果音なし |
注意事項:
soundEffects: true をheadmatterに設定しない限り、効果音は鳴らない（デフォルトOFF）- ブラウザのAutoplay Policy対策として、最初のクリック/キー操作後に音声が有効になる
- PDFエクスポート時は効果音は無視される（SSR/エクスポート環境では動作しない）
タイトルタイプライター効果
coverレイアウトで titleEffect: 'typewriter' を指定すると、タイトル文字がタイプライター風に一文字ずつ打ち出される演出になる。titleEffectSound で効果音ファイルを指定可能。
使用例（空白リードインスライド付き）:
タイプライター効果は最初のスライドではタイミングが掴めないため、必ず空白のリードインスライドを前に置くこと。クリック/キー操作でタイトルスライドに遷移した時に効果音と演出が始まる。
---
theme: none
title: プレゼンタイトル
---
<!-- 空白リードインスライド（クリックでタイトルへ） -->
---
layout: cover
titleEffect: typewriter
titleEffectSound: /Typewriter01-1.mp3
titleEffectVolume: 0.5
sound: false
---
動作の流れ:
- スライド表示後、効果音を再生しながら2秒間でタイトル文字を一文字ずつ打ち出す（カーソル点滅付き）
- 2秒後（ジングル突入タイミング）に残りの文字を一気に表示し、スケールアップのインパクト演出
プロップ一覧:
| プロップ | 型 | デフォルト | 説明 |
|---|
titleEffect | String | '' | 'typewriter' でタイプライター効果を有効化 |
titleEffectSound | String | '' | 効果音ファイルのパス（public/に配置） |
titleEffectVolume | Number | 0.5 | 効果音の音量（0.0〜1.0） |
注意: 効果音はブラウザのAutoplay Policy対策により、最初のユーザー操作（クリック/キー押下）後に有効になる。プレゼンテーション中は通常問題なし。
アイコンの使用
SlidevはIconifyアイコンを標準サポート。絵文字の代わりにアイコンコンポーネントを使う。
テンプレートに含まれるアイコンセット:
基本構文:
<ph-heart />
<ph-chat-circle-dots />
<ph-book-open />
<mdi-account-circle />
<ph-heart class="text-3xl text-rose-400" />
<ph-chat-circle-dots class="text-4xl" style="color: var(--pop-rose)" />
<div class="i-ph-heart text-3xl text-rose-400" />
よく使うアイコン例:
| 用途 | Phosphor Icons | Material Design Icons |
|---|
| 料理/ワークショップ | <ph-cooking-pot /> | <mdi-silverware-fork-knife /> |
| 会話/交流 | <ph-chat-circle-dots /> | <mdi-forum /> |
| 読書/趣味 | <ph-book-open /> | <mdi-book-open-variant /> |
| セミナー/発表 | <ph-megaphone /> | <mdi-bullhorn /> |
| メール | <ph-envelope /> | <mdi-email /> |
| カレンダー | <ph-calendar /> | <mdi-calendar /> |
| チェック | <ph-check-circle /> | <mdi-check-circle /> |
| ハート/いいね | <ph-heart /> | <mdi-heart /> |
| ユーザー/人 | <ph-user /> | <mdi-account /> |
| 場所/地図 | <ph-map-pin /> | <mdi-map-marker /> |
アイコン検索: Icones でブラウザからアイコンを検索・プレビュー可能
注意事項:
- 絵文字ではなくアイコンコンポーネントを使うこと（PDF/PPTXエクスポート時の互換性向上）
@iconify-json/ph と @iconify-json/mdi はpackage.jsonに含まれている- 追加のアイコンセットが必要な場合は
npm install -D @iconify-json/{set-name} でインストール
カスタムコンポーネント
<PopCard color="pink" icon="💖" title="タイトル">
カードの内容テキスト
</PopCard>
<GradientHeading gradient="main" tag="h2">テキスト</GradientHeading>
<ProgressBar label="ラベル" :value="85" color="pink" />
<StepList :steps="['ステップ1', 'ステップ2', 'ステップ3']" color="pink" />
<PopTimeline :items="[
{ year: '2023', title: 'タイトル', desc: '説明' },
{ year: '2024', title: 'タイトル', desc: '説明' },
]" />
<FloatingEmoji emojis="✨🌸💖" :count="8" />
<span class="text-huge"><CountUp :to="1500" suffix="+" /></span>
<OrganicDecorations />
<PictogramScene scene="expense" />
<PictogramScene scene="confused" size="small" />
<BookHover image="/books/ai-agent.webp" title="AIエージェント開発運用入門">
<strong>AIエージェント開発運用入門</strong>（SBクリエイティブ）
<template #detail>
<p><strong>著者:</strong> 御田 稔 / 大坪 悠 / 塚田 真規</p>
<p><strong>出版社:</strong> SBクリエイティブ｜<strong>刊行日:</strong> 2025年10月1日</p>
<p>AIエージェントの開発から本番運用までをハンズオン形式で解説。</p>
</template>
</BookHover>
ユーティリティCSS
<span class="text-pink">ピンク</span>
<span class="text-hot-pink">ホットピンク</span>
<span class="text-yellow">イエロー</span>
<span class="text-cyan">シアン</span>
<span class="text-green">グリーン</span>
<span class="text-orange">オレンジ</span>
<span class="text-coral">コーラル</span>
<span class="text-mint">ミント</span>
<span class="text-muted">ミュート</span>
<span class="pop-gradient-text">メイングラデーション</span>
<span class="pop-gradient-warm">ウォームグラデーション</span>
<span class="pop-gradient-cool">クールグラデーション</span>
<span class="pop-gradient-candy">キャンディグラデーション</span>
<span class="text-huge">超大きい（4.5rem）</span>
<span class="text-large">大きい（2.75rem）</span>
<div class="pop-card">デフォルトカード</div>
<div class="pop-card pop-card-yellow">イエローカード</div>
<div class="pop-card pop-card-mint">ミントカード</div>
<div class="pop-card pop-card-pink">ピンクカード</div>
<span class="pop-tag">タグ</span>
<span class="pop-tag pop-tag-yellow">ウォームタグ</span>
<span class="pop-tag pop-tag-cool">クールタグ</span>
<div class="pop-accent-line"></div>
<div class="pop-divider"></div>
<span class="pop-number">42</span>
<div class="pop-float">フロートアニメーション</div>
<div class="pop-pulse-glow">パルスグロウ</div>
Phase 5: プレビューとレビュー
npx slidev --open でプレビューを起動- ユーザーにプレビューを確認してもらう
- AskUserQuestionToolでフィードバックを収集
- 修正を繰り返す
Phase 6: エクスポート
ユーザーの要望に応じてエクスポートする：
npx slidev export
npx slidev export --with-clicks
npx slidev export --format pptx
npx slidev export --format png
npx slidev export --dark
npx slidev export --output my-presentation.pdf
注意: エクスポートには playwright-chromium が必要（package.jsonに含まれている）。
Phase 7: プレゼンテーションモード
発表用に起動する場合：
npx slidev --open
npx slidev --port 3030 --open
npx slidev --remote
スライド作成のベストプラクティス
コンテンツ設計
- 1スライド1メッセージ: 情報を詰め込みすぎない
- キーワード中心: 長文は避け、キーワードとビジュアルで伝える
- 一言スライドを多用する: 重要なメッセージや問いかけ、転換点には
statement レイアウトで一言だけ大きく表示するスライドを挟む。聴衆の注意を引きつけ、プレゼンにリズムを生む。情報スライド2〜3枚ごとに1枚の一言スライドを入れるのが目安
- ストーリー構成: 導入→問題提起→解決策→結論の流れを意識
- 発表時間の目安: 1スライドあたり1〜2分、20分なら12〜15枚程度
アニメーション設計
- 意味のあるアニメーション: 装飾だけでなく、情報の流れに合わせる
- v-clicksを活用: リストは必ずv-clicksで段階的に表示
- v-motionで強調: 重要なポイントにv-motionアニメーションを使う
- トランジションを変える: セクション区切りには異なるトランジションを使い、変化をつける
- 多様なアニメーションクラス: pop-bounce-up, pop-slide-right, pop-spin-inなどを混ぜて使う
- アイコンは絵文字より見栄えが良い:
<ph-heart class="text-rose-400" /> のようにIconifyアイコンを活用する
レイアウト活用
- cover: 最初のスライドに必ず使用
- statement: 一言で伝えたいメッセージに使用（白抜き文字で色付き背景）。問いかけ、結論、転換点に積極的に使う。colorプロップで雰囲気を変える（dark/green/pink/coral/cyan/warm/light）
- section: 各セクションの区切りに使用（colorプロップで色を変える）
- fact: インパクトのある数値データに使用
- quote: 引用や名言に使用
- two-cols: 比較・対比に使用
- end: 最後のスライドに必ず使用
- profile: 自己紹介に使用。左に円形プロフィール画像、右にslotで経歴やスキルを自由に記述
デザインTips
<PopCard> で情報をカード化すると見やすい。ただし、他のコンテンツ（リストやテキスト等）の下に配置すると見切れるため、スライドの主要コンテンツとして単独で使うか、スライド上部に配置すること<ProgressBar> でスキルや進捗を可視化<GradientHeading> でセクションタイトルをより印象的に<StepList> で手順やフローを明確にpop-gradient-text クラスで重要テキストを目立たせるv-mark でライブ感のあるハイライト演出- フローティング絵文字
<FloatingEmoji> で遊び心を追加（ただしプロフェッショナルなプレゼンではIconifyアイコンの使用を推奨）
<PopTimeline> で時系列を美しく表現- ベージュテーマの背景色は
#F5EDE6。暖かく落ち着いた印象を与える
<OrganicDecorations /> がほとんどのレイアウトに自動で含まれ、角にセージグリーンの円やピンクのブロブ装飾が表示されるtoc レイアウトで目次ページを簡単に作成。番号付きリスト（<ol>）を使うと自動でスタイリングされるtestimonial レイアウトでは <img> タグを使うと自動で円形切り抜きされるcontact レイアウトは ::right:: スロットで2カラム分割（点線区切り付き）image-circle-right / image-circle-left で円形切り抜き写真付きスライドを作成pop-dotted-underline クラスでピンク点線アンダーラインを追加pop-white-card クラスで白いカード（ベージュ背景上で映える）を作成pop-circle-image クラスで画像を円形切り抜き＋ピンクボーダーに
コンテンツがはみ出す場合の対処法
スライドの要素が多すぎて画面からはみ出す場合、以下の手段で対処する。上から順に試すこと。
1. コンテンツを減らす・分割する（最優先）
根本的な解決策。1スライド1メッセージの原則に戻る。
<!-- BAD: 1スライドに詰め込みすぎ -->
---
---
# トピック
- 項目1〜項目10（はみ出す）
<!-- GOOD: 2スライドに分割 -->
---
---
# トピック（1/2）
- 項目1〜5
---
---
# トピック（2/2）
- 項目6〜10
2. zoom フロントマター（スライド単位の縮小）
最も簡単な方法。スライド全体を指定倍率に縮小する。
---
zoom: 0.8
---
0.8 = 80%表示、0.7 = 70%表示- スライドごとに個別指定可能
- 他のスライドには影響しない
- 0.7未満は文字が小さくなりすぎるので非推奨
3. <Transform> コンポーネント（要素単位の縮小）
スライドのタイトルはそのままで、コンテンツ部分だけを縮小したい場合。
# タイトルはそのままのサイズ
<Transform :scale="0.75" origin="top left">
ここの中身だけが75%に縮小される
- リスト項目1
- リスト項目2
- リスト項目3
</Transform>
4. スコープ付きCSSスタイル（細かい調整）
特定スライドだけフォントサイズや余白を調整する。
---
---
# コンテンツが多いスライド
- 項目1
- 項目2
<style>
.slidev-layout {
font-size: 0.85em;
padding: 1.5rem 2.5rem;
}
.slidev-layout h1 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.slidev-layout li {
line-height: 1.4;
margin-bottom: 0.2em;
}
</style>
5. UnoCSS ユーティリティクラス
インラインでサイズやレイアウトを調整する。
<div class="text-sm leading-tight">コンパクトなテキスト</div>
<div class="overflow-y-auto max-h-80">長いコンテンツ</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>左カラム</div>
<div>右カラム</div>
</div>
よくあるはみ出しパターンと対処法
| パターン | 推奨対処 |
|---|
| リスト項目が多すぎる | v-clicks で段階表示 or 2スライドに分割 |
| カード系レイアウト内で要素が多い | zoom: 0.8 or グリッド内の余白・フォントサイズを縮小 |
| 画像＋テキストが長い | テキストを短くする or zoom: 0.85 |
| コンポーネントを複数配置 | 2スライドに分割 or <Transform :scale="0.8"> |
| タイムライン項目が多い | 項目数を3以下に抑える or zoom: 0.8 |
| 目次（toc）項目が多い | 10項目以下に抑える or zoom: 0.9 |
ピクトグラムシーンの使い方
PictogramScene コンポーネントを使って、SVGベースの塗りつぶしシルエット風ピクトグラムでシチュエーションを視覚的に表現する。写真の代わりに、案内標識のようなソリッドな人物ピクトグラムで状況を伝える。
デザインスタイル:
- 人物は塗りつぶしシルエット（棒人間ではない。頭=塗り円、体=塗り台形）
- 汗は**しずく形（ellipse）**で飛び散る表現
- アニメーションなし（完全に静的）
- テーマカラーと調和
プリビルトシーン
| シーン名 | 表現する状況 | 構成 |
|---|
expense | 経費精算に困っている | 左: ヘッドセット人物+PC（汗付き）、右: 書類の山・レシート・Excel格子・¥マーク |
document | 資料作成に困っている | 左: 白紙モニター（カーソル点滅）、中央: 頭を抱える人物（?マーク+汗）、右: 締切時計+DEADLINE |
inquiry | 問い合わせが多すぎる | 左: PC対応する人物（ヘッドセット+汗）、右: 吹き出し「?」付きの複数人物（遠近法で4-5人） |
confused | 難しくてわからない | ×目の人物シルエット + ?マーク + 汗 + 渦巻き（small/normalサイズ対応） |
使用例
重要: スライド下部いっぱいに大きく表示するには、<style>でflexレイアウトを指定すること。
---
transition: pop-fade
---
# 月末の経費精算、終わらない！
大量の書類、Excel、手作業…
<PictogramScene scene="expense" />
<style>
.slidev-layout { display: flex; flex-direction: column; }
</style>
この <style> ブロックにより、PictogramSceneの margin-top: auto が効いてスライド下部に自動的に押し下げられ、スライド中央下を大きく占領する表示になる。
コーナーに小さく配置する場合（confused用）：
<div style="display: flex; gap: 1.5rem; align-items: flex-start;">
<div style="flex: 1;">
メインコンテンツ
</div>
<div style="position: relative; width: 120px; flex-shrink: 0; align-self: flex-end;">
<PictogramScene scene="confused" size="small" />
</div>
</div>
新しいシーンの作り方
PictogramScene.vueに新しいSVGシーンを追加する手順：
- SVGの
viewBoxを設定: normalサイズなら viewBox="0 0 600 220" 程度
- 人物シルエットを描く: 頭=
<circle fill="...">, 体=<path> で台形、腕=太いstroke-width="14" のパス
- 汗・ストレス表現:
<ellipse> をrotateして飛び散るしずく形
- 状況オブジェクト: 書類=
<rect>+横線、時計=<circle>+針、吹き出し=<rect rx>+<polygon>
- 遠近法: 奥の人物はscale小さめ +
opacity 低めで奥行き感を出す
配色ルール:
- 人物シルエット:
var(--pop-text, #3D3D3D) fill
- 汗・ストレス:
var(--pop-rose, #D4918F) fill
- 書類・ツール枠:
var(--pop-sage, #A8C5B8) stroke
- 書類背景:
var(--pop-bg-card, #FFFBF8) fill
- 吹き出し:
var(--pop-rose, #D4918F) fill + 白文字
- ×目など白抜き:
var(--pop-bg, #F5EDE6) stroke
インラインでのコードブロック/Notebook風デザイン
写真の代わりにターミナルやJupyter Notebookのモックアップをインラインで作る方法：
ターミナル風:
<div style="background: #1E293B; border-radius: 12px; padding: 1rem 1.2rem; font-family: 'Courier New', monospace; font-size: 0.85rem; color: #A3E635; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">
<div style="color: #64748B; margin-bottom: 0.5rem; font-size: 0.75rem;">Terminal</div>
<div style="color: #94A3B8;">$ python agent.py</div>
<div style="color: #A3E635;">>>> 出力テキスト...</div>
</div>
Jupyter Notebook風:
<div style="background: white; border-radius: 8px; border: 1px solid #E2E8F0; box-shadow: 0 2px 10px rgba(0,0,0,0.08); overflow: hidden;">
<div style="background: #F8FAFC; padding: 0.5rem 0.8rem; border-bottom: 1px solid #E2E8F0; font-size: 0.7rem; color: #64748B; display: flex; align-items: center; gap: 0.5rem;">
<span style="background: #EF4444; width: 10px; height: 10px; border-radius: 50%; display: inline-block;"></span>
<span style="background: #F59E0B; width: 10px; height: 10px; border-radius: 50%; display: inline-block;"></span>
<span style="background: #22C55E; width: 10px; height: 10px; border-radius: 50%; display: inline-block;"></span>
<span style="margin-left: 0.5rem;">notebook.ipynb</span>
</div>
<div style="padding: 0.6rem 0.8rem; border-bottom: 1px solid #F1F5F9; display: flex; align-items: center; gap: 0.5rem;">
<span style="background: #DBEAFE; color: #3B82F6; padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-family: monospace;">In [1]:</span>
<span style="font-family: monospace; font-size: 0.8rem; color: #334155;">コード内容</span>
</div>
</div>
重要な注意事項
- テンプレートファイルをコピーする際は、styles/index.css, layouts/, components/, composables/*, global-bottom.vue, global-top.vue を必ずすべてコピーすること
- フォントはGoogle Fontsから読み込まれる（Poppins, Zen Maru Gothic, Dela Gothic One）
- 画像はpublic/ディレクトリに配置し、
/image.png のパスで参照する
- エクスポート時はPlaywright Chromiumが必要
- slides.mdのヘッドマターで
theme: none を指定すること（カスタムスタイルを使うため）
