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）

code

┌─────────────────────────────────────────────┐
│ 🔭 Exploratory セミナー          (左上)     │
│                                              │
│ 2026年2月20日(木) 12:00 PM       (日付)     │
│                                              │
│ ████████████████                             │
│ ████ メインタイトル ████          (大文字)   │
│ ████████████████                             │
│                                              │
│ サブタイトルテキスト              (中文字)   │
│                                              │
│                                              │
└─────────────────────────────────────────────┘

•Exploratoryロゴ（望遠鏡アイコン）＋「Exploratory セミナー」を左上に配置
•日付はロゴの下、18-20pt
•メインタイトルは画面中央〜やや上、72-96pt Bold
•サブタイトルはその下、36-48pt Regular
•マージン: 左端から約60-80px

2. アジェンダスライド

背景: ホワイト

code

┌─────────────────────────────────────────────┐
│                                             │
│  今日のアジェンダ                              │
│                                             │
│  1. セクション名                              │
│  2. セクション名                              │
│  3. セクション名                              │
│  4. セクション名                              │
│  5. セクション名                              │
│                                             │
│                                        [NN] │
└─────────────────────────────────────────────┘

•タイトル: 44-52pt Bold、左揃え
•番号付きリスト: 24-28pt Regular
•項目間: 50-70px
•タイトルからリストまで: 120-150px

3. セクション区切りスライド

背景: 必ずホワイト（#FFFFFF） — ダーク背景は使わない（タイトルスライドのみダーク背景可）

code

┌─────────────────────────────────────────────┐
│                                             │
│                                             │
│                                             │
│  セクションタイトル              (大文字)       │
│                                             │
│                                             │
│                                        [NN] │
└─────────────────────────────────────────────┘

•セクション名: 44-52pt Bold、黒（#000000）、中央配置
•サブテキスト: 20-24pt Regular、ミディアムグレー（#636E72）
•左上にグリーンのアクセントバーを置く場合もあるが、なくてもよい

4. コンテンツスライド（箇条書き）

背景: ホワイト

code

┌─────────────────────────────────────────────┐
│                                             │
│  スライドタイトル                              │
│                                             │
│  • 箇条書き項目1                              │
│  • 箇条書き項目2                              │
│  • 箇条書き項目3                              │
│    - サブ項目                                │
│  • 箇条書き項目4                              │
│                                             │
│                                        [NN] │
└─────────────────────────────────────────────┘

•タイトル: 36-44pt Bold
•箇条書き記号: 中黒（•）または丸（●）
•テキスト: 20-28pt Regular
•バレットインデント: 左マージンから80px
•テキストインデント: 左マージンから120-140px
•項目間: 50-70px

5. 2カラムスライド

背景: ホワイト

code

┌─────────────────────────────────────────────┐
│                                             │
│  スライドタイトル                              │
│                                             │
│  ┌──────────────┐  ┌──────────────────┐     │
│  │              │  │                  │     │
│  │  テーブル     │  │  箇条書き or       │     │
│  │  or 図       │  │  説明テキスト       │     │
│  │              │  │                  │     │
│  └──────────────┘  └──────────────────┘     │
│                                             │
│                                        [NN] │
└─────────────────────────────────────────────┘

•カラム比: 約1:1 または 1.2:1
•カラム間: 60-80px
•テーブル罫線: #DFE6E9、1px
•テーブルフォント: 18-20pt

6. スクリーンショットスライド

背景: ホワイト

code

┌─────────────────────────────────────────────┐
│                                             │
│  スライドタイトル（省略可）                      │
│                                             │
│  ┌─────────────────────────────────────┐    │
│  │                                     │    │
│  │         スクリーンショット             │    │
│  │         （ほぼ全幅）                  │    │
│  │                                     │    │
│  └─────────────────────────────────────┘    │
│                                             │
│                                        [NN] │
└─────────────────────────────────────────────┘

•スクリーンショットはコンテンツエリアのほぼ全幅
•薄いドロップシャドウ: 0 4px 8px rgba(0,0,0,0.1)
•赤矢印（#E74C3C）で注目箇所を示す場合あり
•タイトルがある場合は上部に配置

7. 吹き出し・会話形式スライド

code

┌─────────────────────────────────────────────┐
│                                             │
│  🧑 ┌──────────────────────────────┐        │
│     │ 質問や発言内容                 │        │
│     │                              │        │
│     └──────────────────────────────┘        │
│                                             │
│                                             │
│                                        [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 に加え、以下のチェックを必ず行うこと:

背景色チェック（最重要）

• スライド1（タイトル）のみダーク背景であること
• スライド2以降がすべて白背景であること（セクション区切り・デモ・Q&Aスライドも含む）

カラーチェック

• アクセントカラーが #4CA872 のみであること
• 赤・青・オレンジ・紫等が図表注釈以外で使われていないこと

タイポグラフィチェック

• フォントが Hiragino Sans / Helvetica Neue / Menlo のみであること
• Calibri、Meiryo、Georgia 等が混入していないこと

レイアウトチェック

• 装飾（丸数字アイコン、カラフルなバッジ、グラデーション、色付きボックス）がないこと
• 箇条書きが中黒（•）のシンプルなスタイルであること

日本語テキスト折り返しチェック

• 2カラムレイアウトで1-2文字だけが次の行に折り返されていないか（例:「アレ/ンジ」「共/有」）
• 対策: フォントサイズを下げる（18pt→16pt）、カラム幅を広げる、テキストを短縮する

スペーシングチェック

• セクション区切りの2行タイトルとサブタイトルの間隔が十分か
• デモスライドのタイトルとステップリストの間隔が広すぎないか
• 最下部のコンテンツとページ番号が衝突していないか

PptxGenJS でこのデザインを実装する際の注意

pptx スキルと組み合わせて使う場合:

javascript

// カラー定義（# なしの6桁hex）
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',  // Keynote互換
  latin: 'Helvetica Neue',     // Keynote互換
  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'` を明示的に指定する

Exploratory セミナー スライドデザインガイド

絶対に守るべきルール（最重要）

カラーパレット

プライマリカラー

タイトルスライド用カラー（写真背景上）

アクセントカラー（図表・注釈用）

タイポグラフィ

フォント

サイズ・ウェイト

テキストルール

スライドタイプ別デザイン

1. タイトルスライド

2. アジェンダスライド

3. セクション区切りスライド

4. コンテンツスライド（箇条書き）

5. 2カラムスライド

6. スクリーンショットスライド

7. 吹き出し・会話形式スライド

8. フロー・プロセス図スライド

9. まとめスライド

スペーシング標準

マージン

要素間スペーシング

共通ビジュアル要素

ページ番号

Exploratoryロゴ

グリーンアクセントバー

全体的なデザイン原則

Keynote 互換性ルール

フォント

避けるべき機能（Keynoteで正しく変換されない）

画像形式

レイアウトの注意点

テスト手順

Visual QA チェックリスト（このデザイン固有）

背景色チェック（最重要）

カラーチェック

タイポグラフィチェック

レイアウトチェック

日本語テキスト折り返しチェック

スペーシングチェック

PptxGenJS でこのデザインを実装する際の注意

よくあるレイアウト問題と対策

Exploratory セミナースライドデザインガイド