adrianorafael/slides-design-skill

Slides Design Skill

あなたはエグゼクティブ向けプレゼンテーションのアートディレクターとして行動します。このスキルはナラティブ、グラフ選択、デザインのレイヤーです。ファイル操作（pptxgenjs、テンプレート編集、検証、レンダリング）は、一緒にロードする必要があるスキルpptxが担当します。デザインに関して両者が矛盾する場合、このスキルが優先されます。矛盾点は「（pptxと異なります）」とマークされています。

スキルの目次

1. 何が重要か
2. ワークフロー
3. アクションタイトル
4. グラフの選び方（質問、データ、コンテキスト）
5. カタログ：テスト済み46形式（使用するタイミングと避けるべきタイミング）
6. 知覚：ゲシュタルト、強調、ラベル、クリーンさ
7. デッキの構成
8. ビジュアルシステム
9. pptxgenjsのレシピ
10. 既知の制限
11. 営業・プリセールスでのワークコンテキスト
12. デザイナー批評
13. 概念的基盤

1. 何が重要か

エグゼクティブはスライドが注目に値するかどうかを数秒で判断します。スライドはタイトルで結論を、グラフで証拠を提供し、それ以上は何も提供しません。目を往復させなければならないもの（別途の凡例、解読が必要な軸、一般的なタイトル）はすべて、会議室で最も時間のない人にとって負担となります。

このスキルの2つのルールが矛盾する場合は、次の順序で決定します：1）データの真実性、2）メッセージの明確さ、3）ユーザー企業のブランド、4）美しさ。 データを誇張している美しいスライドは、成約を逃します。

2. ワークフロー

1. 決定。 オーディエンス、期待される決定、使用法（ライブまたは単独で読まれる）を把握します。ユーザーがそれを述べておらず、かつ同席している場合は、決定だけを尋ねます。同席していない場合は、「ライブ、役員会、次のステップの承認」と想定し、その旨を成果物に明記します。
2. アクションタイトルのみの脚本。 デザインを始める前に、タイトルを順番にリストアップします。それらを単独で読むと、ストーリーが語られ、依頼で終わります。ストーリーが語られない場合、問題は推論にあり、デザインではありません。コンテキストがセクション11にある場合は、そこで提案されているシーケンスから始めます。
3. 各スライドの設計シート（コードの前に記入）： アクションタイトル | 証明するデータ | 形式（セクション4および5） | 強調する要素 | 注釈 | 「だから何？」 「証明するデータ」または「強調」を埋められない場合、そのスライドにはメッセージがまだありません。
4. ビジュアルシステム：テンプレートモードまたはミニデザインシステムモード（セクション8）。
5. 構築 セクション9のレシピを使用。ライブラリに存在するグラフ形式にはネイティブグラフを使用。
6. 批評と修正：レンダリングし、セクション12で批評し、修正します。最低1回の修正サイクルが必要です。最初のレンダリングでは、ほとんどの場合、ラベルの衝突やタイトルの改行不良が発生します。

既存のデッキを見直すには、ステップ2から始めます。現在のタイトルを抽出し、それらを書き換え、ビジュアルに手を加える前にユーザーにBefore/Afterを表示します。既存のグラフを置き換えるには、どの形式が使用されるか、その理由を、セクション5の行を引用して説明します。

3. アクションタイトル

タイトルは結論を述べ、本文はそれを証明します。公式：主語 + 強い動詞 + 定量化された結果。

代わりに	次のように書く
ブラックフライデー中の顧客行動により売上が5%増加しました	ブラックフライデーが売上を5%押し上げた
第4四半期売上分析	第4四半期の売上は12%増加、デジタルチャネルが牽引
アプリケーション別応答時間	チェックアウトの応答は、ジャーニーの他の部分よりも3倍遅い
POCの結果	POCは根本原因を4分で特定、現在は2時間

• 動詞を含む文、能動態、イベントまたは主体を先に。 「～があった」「～が観察された」「～という事実により」は削除します。トピックラベル（「収益」）は、人によって異なる結論を導き出す可能性があります。
• 1行が目標、2行が上限。 16:9のスライドで28ptの場合、1行あたり約58文字収まります。2行目が1語だけになる場合は、書き直します。フォントサイズを小さくしないでください。
• タイトル内に数字を1つ、キーとなる部分をハイライト色で（グラフで強調されている同じデータ）。
• 末尾にピリオドなし、左揃え、常に同じ位置。
• タイトルはグラフが示すものを正確に約束します：同じ数字、同じ単位。

誠実さのチェック。 短くすることは、内容を強めることを許容しません。「ブラックフライデーが売上を5%押し上げた」は因果関係を主張します。データが時間的な偶然のみを示す場合は、「ブラックフライデーの週に売上が5%上昇した」と書きます。推定値は推定として表示します（「R$ 210万（推定）」）。可能であればタイトル外に配置します。データポイントが少ない場合（6カテゴリの散布図など）、規則ではなく事例を述べます。「5%」と「5パーセントポイント」は異なるものです。

タイトルに収まらなかった長い説明は、発表者ノートに入れます。

4. グラフの選び方

形式は装飾ではありません。それはタイトルの視覚的な議論です。4つのステップで選択し、タイトルを証明できる最も単純な形式 にします。

ステップ1：タイトルの動詞が系列を示す

タイトルが主張すること…	系列	最初の選択肢（詳細はセクション5）
数字がそれ自体を物語っている	指標	大きな数字、数字＋ミニ棒グラフ、指標パネル
何かがより大きい、より小さい、勝った、負けた、上回った、下回った	比較	順序棒グラフ、集合縦棒グラフ、傾斜グラフ、ダンベル、ロリポップ、発散棒グラフ、ブレット、レーダー、スパークライン付きテーブル
何かが上昇した、下降した、変化した、またはある時点で発生した	時間	縦棒グラフ（期間が少ない）、領域付きまたは目標付き折れ線グラフ（ポイントが多い）、目標付き累積面グラフ、カレンダー、小規模多重グラフ、経時ランキング
ある部分が全体を支配、分割、または説明している	全体の一部	ドーナツ（最大3つまで）、100%棒グラフ、ワッフル、ツリーマップ、パレート、ウォーターフォール、100%面グラフ
大部分がある範囲内にある、変動が大きい、集中している	分布	ヒストグラム、箱ひげ図、ヒートマップ、コホート表
ある尺度が別の尺度と共に動く	関係	散布図（2尺度）、バブルチャート（3尺度）
人やトラフィックがAからBへ移動し、ある段階で離脱する	フロー	ファネル、サンキー
ある場所が際立っている	地理	グリッドマップ
システムが悪化した、インシデントが発生した、限界に達した	可観測性	パネル、ゲージ、異常バンド、状態タイムライン、サービスマップ、トレース、ハイブ、リング、エラーバジェット、イベントタイムライン
私たちはYまでにXを行うつもりだ	計画	アクションカード、ガントチャート

ステップ2：データの形式がフィルタリングする

• 1つの数字 → 大きな数字、グラフなし。
• 全体の2～3つの部分 → ドーナツまたは100%棒グラフ。4～12の部分 → 順序棒グラフ。階層（カテゴリ > サブカテゴリ）→ ツリーマップ。集中する数百の項目 → パレート。
• 2時点 × 複数項目 → 傾斜グラフ（変化）またはダンベル（基準と実績の差）。3～7期間 → 縦棒グラフ。8+ポイント → 折れ線グラフ。日 × 時間 → ヒートマップ。1ヶ月の日々 → カレンダー。
• 同じ形式の複数系列 → 小規模多重グラフ。6色の折れ線グラフは避ける。時間とともに変化する位置 → バンプチャート。
• 項目あたり2つの尺度 → 散布図。3つの尺度 → バブルチャート。
• ある尺度の多くの値 → ヒストグラム。グループの広がりを比較 → 箱ひげ図。
• 項目ごとの正と負の値 → 発散棒グラフ。
• 2つの集合間のフロー → サンキー。損失を伴う連続ステップ → ファネル。
• 2つのエンティティに対する5～8次元 → メッセージが「1つの次元で負けている（または勝っている）」場合のみレーダー。
• 経時的な複数コンポーネントの状態 → 状態タイムライン。依存関係 → サービスマップ。ネストされたステップの期間 → カスケードトレース。同種多数項目のステータス → ハイブ。
• 帯域のあるスケール上の値 → ゲージ。目標に対する複数の値 → ブレット。期待範囲のある系列 → 異常バンド。消費されるバランス → エラーバジェット（バーンダウン）。目標に対する累積 → 累積面グラフ（バーンアップ）。

ステップ3：コンテキストが洗練度を決定する

• エグゼクティブへのライブ：よく知られた形式（棒グラフ、縦棒グラフ、折れ線グラフ、大きな数字、ドーナツ）。特殊な形式（サンキー、レーダー、箱ひげ図、ハイブ、コホート）は、それなしではメッセージが伝わらない場合のみ使用し、読み方をサブタイトルに記述します（「箱ひげ図 = 配送の中央半分」）。
• 事前読み取り用：密度を高めることができます（スパークライン付きテーブル、コホート、小規模多重グラフ）。すべてのスライドに「だから何？」を記載します。
• 技術系オーディエンス（IT、SRE、アーキテクト）の場合、可観測性の形式は母国語です。それでも、アクションタイトルとスライドあたり1つの強調が必要です。
• 同じデッキ内：スライドごとに形式を変えます。同じ形式が3枚続くと飽きさせ、話題の変化を隠します。

ステップ4：構築前にテストする

• グラフ内のタイトルの数字を指し示せますか？
• 強調は1つの要素に集中していますか？
• 凡例なしで機能しますか？
• より単純な形式でも証明できますか？「はい」の場合、より単純な方を使用します。

ほとんどの場合に改善される置き換え

代わりに	次のようにする
6つのセグメントの円グラフ	順序棒グラフ
6色の折れ線グラフ	小規模多重グラフ、または1本の線を強調し残りをグレーに
2年間×8カテゴリの集合縦棒グラフ	傾斜グラフまたはダンベル
生の数字のテーブル	ヒートマップ、コホート、または棒グラフとスパークライン付きテーブル
2つの値軸	2枚のスライド、またはインデックス（基準値100）
複数のゲージを並べて	ブレット（目標対実績）
多くの層を持つ積み上げグラフ	小規模多重グラフ、または最大3層までの100%積み上げグラフ
大きな州が読解を支配する地理データマップ	グリッドマップ

5. カタログ：テスト済み46形式

各形式には次のものが含まれます：使用（質問とデータ）、避ける（代わりに使用するもの）、モデルタイトル（47枚のスライドからなるデッキでテスト済み）、強調、構築（概要、コードはセクション9）。「ネイティブ」= PowerPointの編集可能なグラフ。「図形」= 図形で描画、正確なジオメトリだがデータシートはなし。

指標

• 大きな数字。 使用： 単独の数字がタイトルを証明する場合（POCの結果、節約、納期）。避ける： 意味をなすために比較が必要な数字（数字＋ミニ棒グラフが適切）。モデルタイトル： 「POCは根本原因を4分で特定、現在は2時間」。強調： 数字。構築： 単独で60～72ptのテキスト、または列内で44～50pt、下に1行のコンテキスト。
• 大きな数字＋ミニ棒グラフ。 使用： 前期と比較した2～4つのKPI。避ける： 4つを超えるKPI（パネルになる）。モデルタイトル： 「ブラックフライデーがEコマースでR$ 4,820万の収益、32%増」。強調： タイトルのKPI。構築： 図形：値44～50pt。その下に2本の細い比例棒（当期と前期）、直接ラベル付き（「2025 +32%」、「2024 R$ 3,650万」）。
• 指標パネル（stat）。 使用： 一緒に悪化または改善した3～5つの運用指標。技術セクションの開始に適しています。避ける： 「だから何？」の翻訳がないビジネスのみのオーディエンス。モデルタイトル： 「チェックアウトがSLOを下回る：可用性99.58%」。強調： タイトルのパネル。構築： 暗いスライド上の図形：darkCardカード、値42pt、制限付きコンテキスト行（「SLO：99.9%」）、制限が破線で「16時間…24時間」とラベルされたpolyスパークライン。

比較

• 順序水平棒グラフ。 使用： 4～12項目のランキングまたはシェア。長い名前。避ける： 時間（縦棒グラフまたは折れ線グラフが適切）。モデルタイトル： 「エレクトロニクスが今週の収益の46%を生み出した」。強調： 引用された棒。構築： ネイティブ BAR barDir:"bar"、catAxisOrientation:"maxMin"、並べ替えられたデータ、端に値、ポイントごとに1色。
• 集合縦棒グラフ。 使用： 2期間またはグループ × 2～4カテゴリ。絶対値が重要な場合。避ける： 4カテゴリ以上（傾斜グラフまたはダンベルが適切）。モデルタイトル： 「平均チケットは全チャネルで上昇、アプリで最も顕著：+11%」。強調： 引用された縦棒。構築： 図形。ライブラリは複数系列の1つの点に色を付けられないため：前期mute、当期mid、引用accent。各縦棒に値、ペアの上に変化率、下に年、年の下にグループ。
• 傾斜グラフ（slope）。 使用： 3～8項目の2時点間の変化。避ける： 3時点以上（折れ線グラフが適切）。モデルタイトル： 「アプリだけが昨年よりコンバージョンが良かった」。強調： 最も変化した線。構築： ネイティブ LINE、2カテゴリとマーカー付き。左に名前＋値、右に値。軸はゼロより上から開始可能。
• ダンベル。 使用： 項目ごとの2つの値の差（目標対実績、約束対実行、POCの前後）。避ける： 時間的な方向性がメッセージの場合（傾斜グラフが適切）。モデルタイトル： 「北東部では、配送が平均3.1日遅延」。強調： 最も離れたペア。構築： 図形：中空の点（基準）と塗りつぶしの点（実績）を3ptのsegで接続。項目を差で並べ替え。右に差「(+3.1)」。垂直ヘアライングリッド hair。
• ロリポップ。 使用： 基準制限に対するランキング（ページ読み込み時間、SLA）。避ける： 制限がない場合、棒グラフで十分。モデルタイトル： 「モバイルでは、商品ページの読み込みに4.1秒かかった」。強調： 制限外の項目。構築： 図形：ゼロから値までのseg + dot。良好範囲にtint帯とラベル（「良好：最大2.5秒」）。
• 発散棒グラフ。 使用： 項目ごとの正と負のバランス（段階別NPS、承認率、±変動）。避ける： 正の値のみ（棒グラフで十分）。モデルタイトル： 「配送だけが推進者より批判者を多く持っていた」。強調： 引用された項目の負の側。構築： ネイティブ BAR 積み上げ、左に負の値、catAxisLabelPos:"low"、引用項目のみの追加系列。絶対値を重ねて表示。上部に「←批判者」と「推進者→」、ゼロライン。
• 目標対実績（ブレット）。 使用： 目標に対する複数の指標。避ける： 1つの指標のみ（大きな数字またはゲージで十分）。モデルタイトル： 「期限内配送が唯一未達成の目標だった」。強調： 失敗したもの。構築： 図形：tintレール、実績バー、100%の垂直線、0～120%のスケール。
• レーダー。 使用： 2つのエンティティに対する5～8次元。メッセージが「1つの次元で負けている（または勝っている）」場合。避ける： 3つ以上のエンティティ、または正確な値の読み取りが必要な場合（ダンベルまたは棒グラフが適切）。モデルタイトル： 「ACMEは納期のみ競合に劣る」。強調： 次元のギャップ。構築： 図形

…（翻訳のため省略）