presentation-design

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

ライブプレゼンテーション向けに最適化された、大胆でミニマルなプレゼンテーションのビジュアルデザインガイドです。

基本スタイル

テーマ： ダークモードを基本とし、高コントラストでミニマル（ライトモードにも対応） 雰囲気： モダン、自信に満ちた、テクノロジーを感じさせる

要素	仕様
背景	黒（#000000）または黒に近い色。ライトモード：#fafafa
メインテキスト	白（#FFFFFF）。ライトモード：#09090b
セカンダリテキスト	グレー（#9CA3AF）
アクセント	セクションごとの色（下記参照）
タイポグラフィ	サンセリフ（例：Geist Sans）、大きなサイズでは細いウェイト
字間	狭め（-0.035em～-0.015em）

タイポグラフィの階層

インパクトを生むのは太さではなくサイズです。非常に大きなサイズでは、細字または標準のウェイト（400～600）を使用します。

SECTION LABEL     Small caps, section color, tracked wide
                  Example: "THE PROBLEM" | "WHAT WORKS"

Headline          Massive, primary color, light weight (400-500)
                  Fluid sizing via container queries
                  1-5 words per line typical

Subtitle          Smaller, secondary/muted color, regular weight
                  1-2 lines maximum

Body/Bullets      Medium size, primary or secondary color
                  Bold lead-ins (600 weight) when used

テキストのコントラスト階層

4段階のコントラストを使って奥行きを生み出します。

レベル	用途	例
Primary	見出し、重要なコンテンツ	白 / #FFFFFF
Secondary	サブタイトル、補足テキスト	明るいグレー
Muted	ラベル、メタデータ	中間のグレー
Faint	背景要素	暗いグレー

セクションカラー

プレゼンテーションの主要な各セクションに、それぞれアクセントカラーを設定します。これにより構成が明確になり、聴衆が現在の位置を把握しやすくなります。

色	Hex（ダーク）	主な用途
ティール	#14b8a6	オープニング、枠組みの提示、振り返り
赤	#f87171	問題、課題、緊張感
紫	#a78bfa	解決策、機能、ツール
アンバー	#fbbf24	データ、現実の確認、注意事項
緑	#34d399	ベストプラクティス、効果的なこと
青	#60a5fa	技術、実装
ピンク	#f472b6	ハイライト、特別な注目箇所

セクションカラーは、セクションラベル、グラデーション背景、プログレスバー、アクセント要素に使います。

レイアウトパターン

全面ステートメント（最も一般的）

┌─────────────────────────────────────────┐
│ SECTION LABEL                           │
│                                         │
│ Massive                                 │
│ Headline                                │
│ Here                                    │
│                                         │
│ Subtitle text in muted color            │
│                                 [ref] ↗ │
└─────────────────────────────────────────┘

大型ステートメント（最大限のインパクト）

┌─────────────────────────────────────────┐
│ SECTION LABEL                           │
│                                         │
│                                         │
│       Even Bigger                       │
│       Statement                         │
│                                         │
│                                         │
└─────────────────────────────────────────┘

分割レイアウト

┌─────────────────────────────────────────┐
│ SECTION LABEL                           │
│                                         │
│ Headline        │  • Point one          │
│ Here            │  • Point two          │
│                 │  • Point three        │
│ Subtitle        │  • Point four         │
└─────────────────────────────────────────┘

セクション区切り（グラデーション付き）

┌────────────────────┬────────────────────┐
│                    │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│ Section            │▓▓▓ Gradient ▓▓▓▓▓▓▓│
│ Title              │▓▓▓ Background ▓▓▓▓▓│
│                    │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│ Subtitle           │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
└────────────────────┴────────────────────┘

コードスライド

┌─────────────────────────────────────────┐
│ SECTION LABEL                           │
│ Headline                                │
│ Subtitle                                │
│                                         │
│ ┌─────────────────────────────────────┐ │
│ │ // syntax-highlighted code block    │ │
│ │ const result = await generate()     │ │
│ │                                     │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘

データ／指標

┌─────────────────────────────────────────┐
│        ┌────────┐ ┌────────┐ ┌────────┐ │
│        │  $10M  │ │  ~10%  │ │  NPS   │ │
│        │  ARR   │ │ GROWTH │ │   90   │ │
│        └────────┘ └────────┘ └────────┘ │
│ SECTION LABEL                           │
│ Headline                                │
│ Subtitle                                │
└─────────────────────────────────────────┘

人物／写真のグリッド

┌─────────────────────────────────────────┐
│ Headline                                │
│ Subtitle                                │
│                                         │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐        │
│ │photo│ │photo│ │photo│ │photo│        │
│ │Name │ │Name │ │Name │ │Name │        │
│ │TITLE│ │TITLE│ │TITLE│ │TITLE│        │
│ └─────┘ └─────┘ └─────┘ └─────┘        │
│                                         │
│ Photo style: Rounded, B&W or consistent │
└─────────────────────────────────────────┘

スライドの種類 → レイアウトの対応

スライドの種類	レイアウト
タイトル	全面ステートメント、中央揃え
セクション区切り	グラデーション付きの分割レイアウト、セクションカラー
ステートメント	全面ステートメント、左揃え
大型ステートメント	大型ステートメント、最大サイズ
質問	全面ステートメント、中央揃え
目標／アジェンダ	分割レイアウト、右側に箇条書き
データ	上部に指標ボックス
コード	見出し＋シンタックスハイライト付きブロック
引用	中央揃え、大きな引用符
人物	写真のグリッド
振り返り	分割レイアウト、ラベル付きの箇条書き
リソース	セクションごとにまとめた参考リンク
次のステップ	タイムラインまたはラベル付きの箇条書き

埋め込みコンテンツ

スライドには、見出しとともにリッチメディアを埋め込めます。

• コードブロック — シンタックスハイライト付き、ダークな背景
• ターミナル出力 — ANSIカラー対応の等幅フォント
• ツイートカード — アバターと出典情報を添えたスタイル付き引用カード
• 動画プレビュー — 再生ボタン付きサムネイル
• 記事プレビュー — タイトルと説明を含むリンクカード

ビジュアル要素

• セクションラベル： 左上、すべて大文字、セクションカラー
• プログレスバー： 下端、セクションカラー、細め（3px）
• 参考情報： クリック可能なURLを含む下部フッター
• グラデーション： セクションカラーを使ったオーロラ風の背景効果
• アイコン： シンプルな線画アイコン。白またはアクセントカラーで、控えめに使用

避けること

• テキストの密度が高い段落
• 箇条書きが4～5項目を超えること
• クリップアートやストック画像
• 見出しに太いフォントウェイトを使うこと（代わりにサイズを使う）
• 互いに競合する複数の焦点
• 目的のないアニメーション