slides は何をしますか？
プレゼンテーションのためのデザインシステム。すべてのデッキ（社内向け、クライアント向け、公開用）に適用されます。
以下のパレット、タイポグラフィ、ロゴの値はデフォルト値です。プロジェクトに独自のブランドガイドラインがある場合は、それを先に読み（パレット、ロゴ、フォント）、これらの値を置き換えてください。レイアウト、ルール、ナラティブ構造はそのままです。
プレゼンテーションを生成するには、3つのスキルが連携します。
brand-system：アイデンティティ（パレット、タイポグラフィ、グラデーション、ロゴ、トーン）を提供します。インストールされている場合は、これを最初に読み込んでください。そのトークンが以下のデフォルト値を上書きします。slides（本スキル）：ナラティブ構造と15種類のレイアウトを提供します。pptx（Anthropicのスキル、別途インストールが必要）：.pptxファイルの技術的な生成を提供します。.pptx作成時にはこのスキルを参照してください。
1. デザイントークン
メインパレット
| 役割 | Hex | スライドでの使用法 |
|---|---|---|
| ロゴブルー | #295FEC | ロゴのみ |
| プライマリーブルー | #3D65E8 | アクセント、サブタイトル、CTA、上部ボーダー、タイムラインドット |
| オフホワイト背景（グラデーション） | #F8F9FB | グラデーションを使用するスライドの基本背景 |
| 明るいコンテンツ背景 | #EBEFF7 | トランジションスライド、代替背景 |
| 表面/カード | #FFFFFF | コンテンツブロック、カード |
| 薄い表面ブロック | #F0F2F7 | 3～6ブロックのグリッド内のカード |
| メインテキスト | #111827 | タイトル、本文 |
| マイルドテキスト | #6B7280 | ラベル、キャプション、フッター |
背景グラデーション（ソフトブルー）
明るい背景スライド、淡いカバー、タイトルスライドに適用：
- PPTXの場合：スライド背景 #F8F9FB、放射状グラデーション、右上隅、色 #B4D7F5 透明度55%から透明へ。
- 対称バリエーション（長いデッキ用）：左下隅にもグラデーション、#B4D7F5 透明度25%。
- グラデーションは常に柔らかく控えめに。強い彩度は避けてください。一目見ただけでは気づかれないようにする必要があります。
タイポグラフィ
| 使用法 | フォント | ウェイト | 目安サイズ |
|---|---|---|---|
| スライドタイトル | Inter | Black 900 または ExtraBold 800 | 36-56pt |
| ヒーロータイトル（大きなタイトル） | Inter | Black 900 | 72-96pt |
| サブタイトル/キャプション | Inter | SemiBold 600 | 20-24pt |
| サブタイトル/セクションラベル | Inter | SemiBold 600 | 10-12pt、大文字、#3D65E8 |
| 本文 | Inter | Regular 400 | 14-16pt |
| ラベル/メタデータ | Inter | Regular 400 | 10-12pt、マイルド |
代替フォント：Public Sans（https://fonts.google.com/specimen/Public+Sans）。 システム代替フォント：Geist、SF Pro、Helvetica Neue。セリフ体は使用禁止。
アイコン
Phosphor Icons（https://phosphoricons.com/）または Lucide（https://lucide.dev/）。 Regular または Light。絵文字は使用禁止。
2. スライド内のロゴ
アセット：プロジェクトのブランドシンボルとロゴタイプ（シンボル＋名前）、SVGまたはPNG形式。このスキルにはロゴは付属しません。
標準配置
- カバー（プライマリーカラー背景）：ロゴタイプを左上に、高さ36-40px。白バージョンがあればそれを使用。なければシンボルのみ。
- コンテンツスライド（明るい背景）：フッター左下、20pxの丸いシンボル＋名前をInter Regular 10pt マイルド #6B7280で表示。
- トランジションスライド：同じフッター、またはロゴなし（ミニマル）。
標準フッター構成
[シンボル 20px] 名前 メールアドレス | Webサイト | LinkedIn [ページ番号]
フッターはベースラインに揃え、タイポグラフィは10ptマイルド。連絡先要素の間は|で区切ります。スライド番号は右揃え。
3. レイアウトカタログ
リファレンスシート：references/mises-en-page.png（および.svg）は、15のレイアウトを並べて、下記のように番号を付けて表示しています。レイアウトを選択する前にそれを確認し、その後で各レイアウトの説明を読んでください。
普遍的なルール
1スライドにつき1つのアイデア。十分な余白。1つの支配的な要素。テキスト/ビジュアル比率：テキストは最大60%。肯定的で具体的なタイトル。
レイアウト01 — カバー
構成：
- 背景：デッキのトーンに応じて、ブルー #3D65E8 またはオフホワイトグラデーション背景
- ロゴワードマークを左上に
- サブタイトル（クライアント名やコンテキスト）：大文字、Inter SemiBold 12pt、白またはブルー
- メインタイトル：Inter Black 900、48-56pt、白または #111827、最大2行
- サブタイトルまたはキャッチフレーズ：Regular 18pt、マイルドまたは白の70%
- フッター：連絡先情報（メール、Webサイト、LinkedIn）、10pt、左下
グラデーション背景バリエーション（コンセプトデッキ用）：背景 #F8F9FB + 右上放射状グラデーション、タイトルは #111827、アクセントは #3D65E8。
レイアウト02 — 大きなタイトル（セクション、トランジション、強いアイデア）
構成：
- 背景： #EBEFF7 またはオフホワイトグラデーション
- 上部ボーダーライン：3px ソリッド #3D65E8、全幅
- タイトルのみ：Inter Black 900、56-72pt、#111827、左揃え、高さの40%
- オプションのサブタイトル：SemiBold 600、20pt、マイルド
- ミニマルなロゴフッター
使用法：チャプターの開始、問題提起、衝撃的な統計。
レイアウト03 — ビッグアイデア（1フレーズ、全画面）
構成：
- 背景：純白 #FFFFFF またはグラデーション
- 1フレーズのみ、Inter Black 900、64-96pt
- キーワードを #3D65E8 でカラーリング（選択的、最大1～2語）
- フッター以外の要素はなし
- 配置：デッキのリズムに応じて左揃えまたは中央揃え
使用法：ピッチ、キーノート、ナラティブの転換点。
レイアウト04 — タイトル＋本文（標準）
構成：
- 背景：グラデーション付き #F8F9FB または #EBEFF7
- 大文字のブルー11ptサブタイトルを左上に
- タイトル：Inter Black 900、36-44pt
- 本文：2～4段落または箇条書き、Regular 400、14-16pt
- 右側に十分なマージン（幅の少なくとも15%）
- ロゴフッター
レイアウト05 — 半分テキスト / 半分メディア
構成：
- 背景：グラデーション付き #F8F9FB
- 左カラム（50%）：タイトル＋本文または箇条書き、左揃え
- 右カラム（50%）：画像、スクリーンショット、モックアップ、または図
- 区切り：白いスペースのみ（線や異なる背景は使用しない）
- 右側の画像：角丸12-16px、ソフトシャドウ
使用法：インターフェース、ケーススタディ、ビジュアル比較の提示。
レイアウト06 — 1/3テキスト + 2/3デバイスモックアップ
構成：
- 背景：グラデーション付き #F8F9FB
- 左カラム（33%）：サブタイトル＋タイトル＋2～3のキーポイントまたは短い説明
- 右カラム（67%）：デバイスモックアップ（iPad、Mac、iPhone）とその内部のUI
- モックアップ：細いフレーム #F0F2F7、モバイルは非常に角が丸く、Mac/iPadは長方形
- 内部のUIは実際のスクリーンショットまたは忠実なモックアップ
- デバイスはマージンからわずかにはみ出してもよい（微妙なブリード）
使用法：製品コンセプト、プロトタイプ、新機能のプレゼンテーション。
レイアウト07 — 3カラム
構成：
- 背景：グラデーション付き #F8F9FB または #FFFFFF
- スライドタイトルを左上に
- 3つの等しいカラム、ギャップ24-32px
- 各カラム：SemiBoldタイトル＋コンテンツ＋下部のリンクまたはラベル
- カラムの表面：#F0F2F7、border-radius 12px、十分なパディング
- カラム間の目立つボーダーはなし
使用法：3つのコンセプト、3つのオプション、3つのケース、3つのツールの比較。
レイアウト08 — 3ブロック
レイアウト07と同様ですが、縦方向の構成またはより明確な階層ラインを持つ。ブロックの表面はより大きく、ブロックごとにより密度の高いコンテンツが可能。
レイアウト09 — 4ブロック（2×2）
構成：
- 背景：グラデーション付き #F8F9FB
- スライドタイトルを左上に
- 2×2グリッド、ギャップ20px
- 各ブロック：表面 #F0F2F7、border-radius 12px、SemiBoldタイトル＋Regular本文
- ブロックの幅と高さは均等
使用法：4つのサービス、4つのステップ、4つのキーポイント。
レイアウト10 — 6ブロック（2×3または3×2）
構成：
- 背景：#FFFFFF または #F8F9FB
- スライドタイトルを左上に、オプションの説明的サブタイトル
- 3列×2行または2列×3行のグリッド（コンテンツによる）
- ブロック：表面 #F0F2F7、border-radius 12px、SemiBold 14ptタイトル＋Regular 12pt本文
- 各ブロックの下部にコンテキストラベルまたはタグ、ブルー #3D65E8、やや彩度の高い背景（#E8EEF8）
使用法：ツールボックス、方法論、機能、スキル。
レイアウト11 — タイムライン
構成：
- 背景：#FFFFFF、上部に3pxのブルーボーダーライン
- タイトルを左上に、説明的サブタイトル14ptマイルド
- 左側の垂直軸：細い線 #E5E7EB
- 各エントリ：左側にマイルドな日付/年＋ブルードット #3D65E8（12px）＋Boldタイトル＋Regularサブタイトル＋イタリックマイルドの詳細
- エントリ間の十分な垂直方向の間隔（圧縮しない）
使用法：経歴、プロジェクト履歴、過去/現在のロードマップ。
レイアウト12 — ロードマップ
構成：
- 背景：グラデーション付き #F8F9FB
- タイトルを左上に
- 水平軸：線 #E5E7EB、期間ごとにマーカーまたはブロック
- 期間：Q1/Q2... または 月1/2... または フェーズ1/2...
- アイテムのブロック：表面 #FFFFFF または #F0F2F7、border-radius 8px、タイトル＋ステータスラベル
- ステータス：色付きドットまたはバッジ（ブルー＝進行中、グリーン＝完了、グレー＝未着手）
- ロゴフッター
使用法：ミッションプランニング、プロダクトロードマップ、マイルストーン。
レイアウト13 — テーブル
構成：
- 背景：#FFFFFF または #F8F9FB
- タイトルを左上に
- カラムヘッダー：背景 #3D65E8、白テキスト、Inter SemiBold 12pt
- 交互の行：#FFFFFF / #F0F2F7（可読性のため）
- セル：Regular 400、13pt、パディング12px
- 太いボーダーはなし。細い水平区切り線 #E5E7EB のみ。
レイアウト14 — 全幅/全高ビジュアル
構成：
- 画像またはスクリーンショットがスライド背景全体をカバー（完全ブリード）
- 上に表示するコンテンツに応じて、暗いまたは明るいグラデーションオーバーレイ
- オーバーレイ内のタイトル：Inter Black 900、白または #111827、左下または中央下
- スライドの装飾は一切表示しない（背景、ボーダー、フッターはなし。ページ番号のみ控えめに表示）
使用法：劇的なトランジション、セクションの導入、ポートフォリオ、ヒーロースクリーンショット。
レイアウト15 — 全幅デバイス＋UIモックアップ
構成：
- 背景：グラデーション付き #F8F9FB
- デバイス（Mac、iPad、iPhone）を中央またはやや右に配置、高さの70-80%
- 内部のUI：実際のスクリーンショットまたは高忠実度モックアップ
- 左側に浮かぶタイトルまたはラベル：Inter SemiBold 20pt、#111827
- デバイスの下にドロップシャドウ：柔らかく、不透明度15-20%
- デバイスの周りに追加のフレームはなし
使用法：ヒーローコンセプト、製品ショーケース、フル解像度プロトタイプ。
デバイスモックアップの規則：
- iPhone：アンスラサイトまたは白の細いフレーム、非常に角が丸い
- iPad：アルミニウムの細いフレーム、コンテンツに応じて縦向きまたは横向き
- MacBook：開いたアルミフレーム、画面中央、ベースは控えめ
- メーカーのアスペクト比を維持
4. レイアウトの原則
- スライドごとに支配的なタイトル：読者は本文を読まなくてもアイデアを理解できる。
- 余白を十分に取る：表面の70%以上を埋めない。
- 強い階層：スライドごとに「最初に目に入る」要素を1つだけ。
- デッキ全体の背景として純白 #FFFFFF を使用することは禁止。 #F8F9FB を推奨。
- コンテンツスライドでのテキスト中央揃えは禁止（カバーとレイアウト03 ビッグアイデアのみ中央揃え可能）。
- フォントの混在は禁止。
- タイトルの下の装飾線は禁止。
- 同じレイアウトを3スライド以上連続して繰り返さない。
5. 構造スライド
| タイプ | 背景 | テキスト | レイアウト |
|---|---|---|---|
| カバー | #3D65E8 またはグラデーション #F8F9FB | 白または #111827 | レイアウト01 |
| トランジション / チャプター | #EBEFF7 + 上部ボーダー | #111827 | レイアウト02 |
| 標準コンテンツ | グラデーション付き #F8F9FB | #111827 | レイアウト04～15 |
| ビッグアイデア | #FFFFFF またはグラデーション | #111827 + ブルーアクセント | レイアウト03 |
| 結論 / CTA | #3D65E8 | 白 | レイアウト01のバリエーション |
推奨構成（サンドイッチ）：ブルー背景のカバー、グラデーション付きの明るいコンテンツスライド、ブルー背景の結論。
6. ナラティブの規則
デッキのアーク
- 現状（クライアントの現実へのアンカリング）
- 緊張または特定された問題
- 介入の角度とメカニズム
- 成果物、マイルストーン、または提案された解決策
- 次の具体的なステップ
スライドのタイトル
- 具体的で肯定的に：「テストにより3つの重大な摩擦点が明らかに」、ではなく「テスト結果」。
- タイトルだけを読んだ読者がデッキの論理を理解できるようにする。
- 禁止：「はじめに」、「背景」、「結論」、「目次」。
データとメトリクス
- 統計のコールアウトは中央に：非常に大きな数字、その下に小さなラベル。
- 各メトリクスには、そのコンテキスト（前後比較、期間、出典）を付記。
- 可視化やコメントなしの生のテーブルは禁止。
7. デッキの構成
営業用デッキ / 提案書
- カバー：ブルー背景 #3D65E8、ミッションタイトル、クライアント名
- 最大8～12スライド
- 目次スライドはなし
- 次の具体的なステップ（日付、アクション、連絡先）で締めくくる
ケーススタディデッキ
- カバー：ブルー背景 #3D65E8＋タイトル＋年
- 構成：背景、決定、結果、学び
- 主要メトリクスには統計コールアウト
- 専用スライドに全幅スクリーンショット（レイアウト14または15）
UXデザイントレーニングデッキ
- トランジションスライド（レイアウト02）付きのチャプター
- 演習は視覚的に差別化（背景をわずかに変更）
- オープニングスライドにセッションのタイムライン
- スライドごとに1つの概念、系統的な図解
ピッチ / キーノート
- 最大10スライド
- スライドごとに1つの統計または強いアイデア
- 箇条書きは禁止：視覚的なナラティブのみ
- ビッグアイデア（レイアウト03）とビジュアル（レイアウト14または15）を交互に配置
8. 避けるべきアンチパターン
- 視覚的な構造なしに白背景に密度の高い箇条書き
- コンテンツスライドでのテキスト中央揃え
- フォントの混在
- 絵文字アイコン
- タイトルの下の装飾線（AI特有の署名）
- 同じレイアウトを3スライド以上連続して繰り返す
- 全体の背景として純白 #FFFFFF を使用
- 彩度が高すぎる、または一目でわかるグラデーション
9. 納品前の確認
- ロゴの存在：カバーにロゴタイプ、コンテンツスライドのフッターにシンボル。
- パレットがプロジェクトのブランドガイドラインに準拠していること（デフォルト：ロゴは #295FEC、アクセントは #3D65E8、背景は #F8F9FB）。
- 明るい背景のスライドにグラデーションが適用されていること。
- フォントはInterのみ、ウェイトの階層が守られていること。
- スライドごとに1つの支配的な要素、余白が確保されていること。
- 肯定的で具体的なタイトル。
- タイトルだけを読んでナラティブアークが理解できること。
- 絵文字、emdash、タイトル下の装飾線は一切なし。 ...