| name | exploratory-slides |
| description | Exploratory セミナー用スライドのデザインガイド。Exploratoryのセミナープレゼンテーションを作成する際に、このスキルを参照してデザインの一貫性を保つ。タイトルスライド、アジェンダ、コンテンツスライド、デモ説明、まとめなどの本編スライドに適用する。自己紹介・登壇者プロフィール・告知スライドは対象外。最終的にKeynoteで編集・プレゼンするため、Keynote互換性を考慮した設計になっている。 |
Exploratory セミナー スライドデザインガイド
このガイドは pptx スキルの汎用デザインガイドラインより常に優先される。
pptx スキルの Design Ideas セクション（色パレット、フォントペアリング、レイアウト提案等）は無視し、このガイドに従うこと。
このガイドは、Exploratoryセミナー用プレゼンテーションのデザイン標準を定義する。4つのサンプルプレゼンテーション（AI関数、5-Analytics-Survey、How-to-write-LaTeX、Session_Parameter）から抽出したデザインパターンに基づく。
対象: セミナー本編スライド（タイトル、アジェンダ、コンテンツ、デモ説明、まとめ）
対象外: 自己紹介・登壇者プロフィール・告知・宣伝スライド
絶対に守るべきルール（最重要）
- 背景は白（
#FFFFFF） — スライド1のタイトルスライドのみ写真背景(ダーク)を許可。セクション区切りスライドを含む、それ以外のすべてのスライドは必ず白背景
- テキストは黒/ダークグレー — 見出しは
#000000、本文は #2D3436
- 色はグリーン（
#4CA872）のみアクセントに使用 — 赤、青、オレンジ等のカラフルな色は図表の注釈以外で使わない
- 装飾は最小限 — 丸数字アイコン、カラフルなバッジ、グラデーション背景、色付きボックスは使わない
- フォントは Hiragino Sans / Helvetica Neue のみ — Calibri、Georgia、Impact等は使用禁止
- シンプルな箇条書きが基本 — 中黒（•）で箇条書き。アイコン付きリスト、番号付き丸アイコンは使わない
- 余白を十分に確保 — 詰め込みすぎない。ミニマリストなデザイン
カラーパレット
プライマリカラー
| 用途 | カラー | Hex |
|---|
| ブランドアクセント | Exploratory グリーン | #4CA872 |
| 背景（コンテンツ） | ホワイト | #FFFFFF |
| 見出しテキスト | ブラック | #000000 |
| 本文テキスト | ダークグレー | #2D3436 |
| 補足テキスト | ミディアムグレー | #636E72 |
| ページ番号・罫線 | ライトグレー | #95A5A6 |
| テーブル罫線 | 薄グレー | #DFE6E9 |
| 微妙な背景 | オフホワイト | #FAFAFA |
タイトルスライド用カラー（写真背景上）
| 用途 | Hex |
|---|
| テキスト | #FFFFFF（白） |
| 夜空ベース | #1A2942 〜 #2C3E57 |
アクセントカラー（図表・注釈用）
| 用途 | Hex |
|---|
| 赤矢印・強調 | #E74C3C |
| チャート青 | #3498DB |
| ハイライトオレンジ | #F39C12 |
タイポグラフィ
フォント
| 要素 | フォント |
|---|
| 日本語 | ヒラギノ角ゴ ProN（Hiragino Sans） |
| 英数字 | Helvetica Neue |
| コード・数式 | Consolas / Menlo |
サイズ・ウェイト
| 要素 | サイズ | ウェイト |
|---|
| タイトルスライド メインタイトル | 72-96pt | Bold |
| タイトルスライド サブタイトル | 36-48pt | Regular |
| セクションタイトル | 44-52pt | Bold |
| スライドタイトル | 36-44pt | Bold |
| サブヘッダー | 28-32pt | Bold |
| 本文・箇条書き | 20-28pt | Regular |
| キャプション・補足 | 16-20pt | Regular |
| ページ番号 | 16-18pt | Regular |
テキストルール
- 見出しは左揃え（タイトルスライドのみ例外的に中央揃え可）
- 本文・箇条書きは常に左揃え
- 行間: 本文は1.6〜1.8
- カラー: 見出しは
#000000、本文は #2D3436、補足は #636E72
スライドタイプ別デザイン
1. タイトルスライド
背景: 全面写真（星空と湖畔の風景）
テキスト: すべて白（#FFFFFF）
┌─────────────────────────────────────────────┐
│ 🔭 Exploratory セミナー (左上) │
│ │
│ 2026年2月20日(木) 12:00 PM (日付) │
│ │
│ ████████████████ │
│ ████ メインタイトル ████ (大文字) │
│ ████████████████ │
│ │
│ サブタイトルテキスト (中文字) │
│ │
│ │
└─────────────────────────────────────────────┘
- Exploratoryロゴ（望遠鏡アイコン）＋「Exploratory セミナー」を左上に配置
- 日付はロゴの下、18-20pt
- メインタイトルは画面中央〜やや上、72-96pt Bold
- サブタイトルはその下、36-48pt Regular
- マージン: 左端から約60-80px
2. アジェンダスライド
背景: ホワイト
┌─────────────────────────────────────────────┐
│ │
│ 今日のアジェンダ │
│ │
│ 1. セクション名 │
│ 2. セクション名 │
│ 3. セクション名 │
│ 4. セクション名 │
│ 5. セクション名 │
│ │
│ [NN] │
└─────────────────────────────────────────────┘
- タイトル: 44-52pt Bold、左揃え
- 番号付きリスト: 24-28pt Regular
- 項目間: 50-70px
- タイトルからリストまで: 120-150px
3. セクション区切りスライド
背景: 必ずホワイト（#FFFFFF） — ダーク背景は使わない（タイトルスライドのみダーク背景可）
┌─────────────────────────────────────────────┐
│ │
│ │
│ │
│ セクションタイトル (大文字) │
│ │
│ │
│ [NN] │
└─────────────────────────────────────────────┘
- セクション名: 44-52pt Bold、黒（
#000000）、中央配置
- サブテキスト: 20-24pt Regular、ミディアムグレー（
#636E72）
- 左上にグリーンのアクセントバーを置く場合もあるが、なくてもよい
4. コンテンツスライド（箇条書き）
背景: ホワイト
┌─────────────────────────────────────────────┐
│ │
│ スライドタイトル │
│ │
│ • 箇条書き項目1 │
│ • 箇条書き項目2 │
│ • 箇条書き項目3 │
│ - サブ項目 │
│ • 箇条書き項目4 │
│ │
│ [NN] │
└─────────────────────────────────────────────┘
- タイトル: 36-44pt Bold
- 箇条書き記号: 中黒（•）または丸（●）
- テキスト: 20-28pt Regular
- バレットインデント: 左マージンから80px
- テキストインデント: 左マージンから120-140px
- 項目間: 50-70px
5. 2カラムスライド
背景: ホワイト
┌─────────────────────────────────────────────┐
│ │
│ スライドタイトル │
│ │
│ ┌──────────────┐ ┌──────────────────┐ │
│ │ │ │ │ │
│ │ テーブル │ │ 箇条書き or │ │
│ │ or 図 │ │ 説明テキスト │ │
│ │ │ │ │ │
│ └──────────────┘ └──────────────────┘ │
│ │
│ [NN] │
└─────────────────────────────────────────────┘
- カラム比: 約1:1 または 1.2:1
- カラム間: 60-80px
- テーブル罫線:
#DFE6E9、1px
- テーブルフォント: 18-20pt
6. スクリーンショットスライド
背景: ホワイト
┌─────────────────────────────────────────────┐
│ │
│ スライドタイトル（省略可） │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ │ │
│ │ スクリーンショット │ │
│ │ （ほぼ全幅） │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
│ [NN] │
└─────────────────────────────────────────────┘
- スクリーンショットはコンテンツエリアのほぼ全幅
- 薄いドロップシャドウ:
0 4px 8px rgba(0,0,0,0.1)
- 赤矢印（
#E74C3C）で注目箇所を示す場合あり
- タイトルがある場合は上部に配置
7. 吹き出し・会話形式スライド
┌─────────────────────────────────────────────┐
│ │
│ 🧑 ┌──────────────────────────────┐ │
│ │ 質問や発言内容 │ │
│ │ │ │
│ └──────────────────────────────┘ │
│ │
│ │
│ [NN] │
└─────────────────────────────────────────────┘
- グリーンの人物アイコン（80-100px）を左に配置
- 吹き出し: 角丸（border-radius 8-12px）、グレーボーダー2-3px
- 背景: 白
- パディング: 30-40px
8. フロー・プロセス図スライド
- 角丸長方形のボックス（border-radius 8-12px）
- ボーダー: 2-3px、グリーン（
#4CA872）またはグレー（#636E72）
- 背景塗り: 薄いティント（例:
#E8F5E9）
- 矢印: グリーン（
#4CA872）、中太
- ボックス間: 適切な余白
9. まとめスライド
- アジェンダスライドと同様のレイアウト
- 学んだポイントを箇条書きまたは番号付きリスト
- 「次のステップ」セクションを含む場合あり
- 参考リソースのリンクを記載する場合あり
スペーシング標準
マージン
| 位置 | サイズ |
|---|
| 左右マージン | 80-100px（0.8-1.0 inch） |
| 上マージン | 80-100px |
| 下マージン | 80-100px（＋ページ番号分40px） |
| グリーンサイドバー使用時の左マージン | 320px〜 |
要素間スペーシング
| 要素間 | サイズ |
|---|
| タイトル→コンテンツ | 120-150px |
| 箇条書き項目間 | 50-70px |
| セクション間 | 80-100px |
| カラム間 | 60-80px |
共通ビジュアル要素
ページ番号
- 位置: 右下
- サイズ: 16-18pt
- カラー:
#95A5A6
- 端からの距離: 約40px
Exploratoryロゴ
- 望遠鏡アイコン＋「Exploratory」ワードマーク
- タイトルスライド: 白、左上配置、約35-45px
- コンテンツスライドでは通常使用しない
グリーンアクセントバー
- 幅: 275-300px
- カラー:
#4CA872
- 用途: セクション区切りのラベル表示
- バー内テキスト: 白、24-28pt
全体的なデザイン原則
- ミニマリスト: 白背景を基本とし、余白を十分に確保
- 色の抑制: グリーンアクセント＋モノクロが基本。多色使いしない
- 一貫性: 同じスライドタイプには同じレイアウトを適用
- 読みやすさ: フォントサイズのコントラスト（見出しと本文で明確な差）
- ビジュアル必須: テキストだけのスライドは避け、図表・スクリーンショット・アイコンを活用
- 左揃え基本: タイトルスライド以外は左揃え
Keynote 互換性ルール
最終的にKeynoteで編集・プレゼンするため、以下のルールを厳守する。
フォント
- 安全なフォント（Keynoteで確実に表示される）:
- Helvetica Neue
- ヒラギノ角ゴ ProN（Hiragino Sans）
- Arial
- Consolas / Menlo（コード用）
- 避けるフォント:
- Calibri、Cambria（Microsoft Office専用フォント → Keynoteで置換される）
- カスタムWebフォント（Keynoteでは利用不可）
- MS Gothic、MS PGothic（macOSでの表示が不安定）
避けるべき機能（Keynoteで正しく変換されない）
| 避ける機能 | 代替方法 |
|---|
| SmartArt | 個別のシェイプで手動作成 |
| ワードアート | 通常テキスト＋フォーマット |
| 複雑なアニメーション | シンプルなフェード・スライド |
| EMF/WMFメタファイル | PNG/SVG画像 |
| OLEオブジェクト（埋め込みExcel等） | 静的な画像またはテーブル |
| グラデーション塗りの複雑なパターン | 単色またはシンプルな2色グラデーション |
| テキストの3D回転・変形 | 使用しない |
| マスタースライドの複雑なプレースホルダー | シンプルなテキストボックス |
画像形式
- 推奨: PNG（スクリーンショット、図表）、JPEG（写真）
- 避ける: EMF、WMF、BMP
- 解像度: 150dpi以上（Retinaディスプレイ対応）
レイアウトの注意点
- テキストボックスのサイズは余裕を持って設定（Keynoteでフォントメトリクスが微妙に異なるため）
- 自動調整（AutoFit）に頼らず、固定サイズのテキストボックスを使う
- グループ化はシンプルに保つ（深いネストのグループは崩れやすい）
- スライドサイズ: 16:9（ワイドスクリーン、13.333 x 7.5 inches）
テスト手順
PPTXを作成したら、Keynoteで開いて以下を確認:
- フォントが正しく表示されているか
- レイアウトがずれていないか
- 画像が正しく表示されているか
- ページ番号の位置が正しいか
Visual QA チェックリスト（このデザイン固有）
pptx スキルの汎用 QA に加え、以下のチェックを必ず行うこと:
背景色チェック（最重要）
カラーチェック
タイポグラフィチェック
レイアウトチェック
日本語テキスト折り返しチェック
スペーシングチェック
PptxGenJS でこのデザインを実装する際の注意
pptx スキルと組み合わせて使う場合:
const COLORS = {
brand_green: '4CA872',
white: 'FFFFFF',
black: '000000',
dark_gray: '2D3436',
mid_gray: '636E72',
light_gray: '95A5A6',
border_gray: 'DFE6E9',
off_white: 'FAFAFA',
red_accent: 'E74C3C',
blue_chart: '3498DB',
orange_highlight: 'F39C12',
};
const FONTS = {
japanese: 'Hiragino Sans',
latin: 'Helvetica Neue',
code: 'Menlo',
};
pptx.defineSlideMaster({
title: 'CONTENT',
background: { fill: 'FFFFFF' },
slideNumber: {
x: '92%', y: '95%',
fontSize: 10, color: '95A5A6',
fontFace: 'Helvetica Neue',
},
});
charSpacing は PptxGenJS では1/100ポイント単位（例: 100 = 1pt）- 色指定は
# なしの6桁hex文字列
- フォント名は Keynote で利用可能なもののみ使用
- シャドウの
offset は ポイント単位（ピクセルではない）
よくあるレイアウト問題と対策
| 問題 | 原因 | 対策 |
|---|
| 2カラムで1-2文字の孤立行 | テキストボックス幅に対してフォントサイズが大きすぎる | フォントサイズを16pt以下に下げるか、カラム幅を広げる |
| デモスライドのタイトルとステップの間に大きな空白 | ステップのY座標が低すぎる | ステップのY座標をタイトルから0.8-1.0"下に配置 |
| セクション区切りの2行タイトルとサブタイトルが近すぎる | タイトルが2行に折り返されてもサブタイトルの位置が固定 | サブタイトルのY座標をタイトルの高さに応じて調整するか、タイトルボックスの高さに余裕を持たせる |
| 最下部の箇条書きがページ番号と衝突 | コンテンツの量に対してY座標が低すぎる | フォントサイズを小さくするか、Y座標を上に移動。ページ番号との間隔を0.5"以上確保 |
| XMLタグ等のコード例がHiragino Sansで表示される | サブ箇条書きがコードフォントを指定していない | コード・XML例は fontFace: 'Menlo' を明示的に指定する |
