presentation-creator

Sentry プレゼンテーションビルダー

React + Vite + Recharts を使用して、Sentry デザインシステムでスタイルを整えた、インタラクティブでデータ駆動型のスライドを作成し、配布可能な単一の HTML ファイルとしてビルドします。

ステップ 1：要件を確認する

ユーザーに次の質問をします。

1. プレゼンテーションのトピックは何ですか？
2. スライドは何枚必要ですか（通常は 5～8 枚）？
3. 必要なデータやグラフは何ですか（時系列、比較、図、ゾーンチャートなど）？
4. どのようなストーリー展開にしますか（問題 → 解決策、導入前 → 導入後、技術的な詳細解説など）？

データの評価（重要）

スライドをデザインする前に、元のコンテンツに実際の定量データ（数値、パーセンテージ、測定値、時系列、コスト、指標）が含まれているかを評価します。実際のデータがあるスライドに限り、Recharts による可視化を作成してください。グラフを埋めるためにデータを捏造、推定、創作してはいけません。

• 実際のデータがある → Recharts のグラフ（棒、エリア、折れ線など）を使用します
• データがない → カード、表、箇条書きの列、図、引用ブロックなどのテキストベースのレイアウトを使用します。架空の数値を使ったグラフは作成しないでください。

元のコンテンツが純粋に定性的な内容（物語、意見、戦略、プロセスの説明）である場合、プレゼンテーションではグラフを一切使用しないでください。Recharts と Charts.jsx は、実際のデータを可視化するスライドが少なくとも 1 枚ある場合に限り、プロジェクトに含めてください。

ステップ 2：プロジェクトのひな形を作成する

次のプロジェクト構成を作成します。

<project-name>/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    └── Charts.jsx

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=swap" rel="stylesheet" />
    <title>TITLE</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

package.json

{
  "name": "PROJECT_NAME",
  "private": true,
  "type": "module",
  "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },
  "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", "recharts": "^2.15.3" },
  "devDependencies": { "@vitejs/plugin-react": "^4.3.4", "vite": "^6.0.0", "vite-plugin-singlefile": "^2.3.0" }
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({ plugins: [react(), viteSingleFile()] })

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './App.css'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

ステップ 3：スライドシステムを構築する

references/design-system.md を読み、Sentry のカラーパレット、タイポグラフィ、CSS 変数、レイアウトユーティリティ、アニメーションシステムをすべて確認してください。

App.jsx の構成

JSX を返す関数の配列としてスライドを定義します。

const SLIDES = [
  () => ( /* Slide 0: Title */ ),
  () => ( /* Slide 1: Context */ ),
  // ...
];

各スライド関数は、次の要素を含む <div className="slide-content"> を返します。

1. <h2> 見出し
2. 任意のサブタイトル用段落
3. メインコンテンツ（グラフ、カード、図、表）
4. フェードインを段階的に表示するアニメーションクラス：.anim、.d1、.d2、.d3

見出しの上にカテゴリタグのピルやバッジ（例：「BACKGROUND」、「EXPERIMENTS」）を追加しないでください。ありきたりな印象になり、価値もありません。見出しそのものを際立たせてください。

ナビゲーション

キーボード操作（ArrowRight/Space = 次へ、ArrowLeft = 前へ）と、前へ／次へボタン、ドットインジケーター、スライド番号を含む画面下部のナビゲーションオーバーレイを実装します。ナビゲーションに枠線や背景はありません。透明な状態で表示します。コントラストを抑えた小さな Sentry のグリフ透かしを、すべてのスライドの左上に固定して表示します。

function App() {
  const [cur, setCur] = useState(0);
  const go = useCallback((d) => setCur(c => Math.max(0, Math.min(SLIDES.length - 1, c + d))), []);

  useEffect(() => {
    const h = (e) => {
      if (e.target.tagName === 'INPUT') return;
      if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); go(1); }
      if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [go]);

  return (
    <>
      {cur > 0 && <div className="glyph-watermark"><SentryGlyph size={50} /><span className="watermark-title">TITLE</span></div>}
      <div className="progress" style={{ width: `${((cur + 1) / SLIDES.length) * 100}%` }} />
      {SLIDES.map((S, i) => (
        <div key={i} className={`slide ${i === cur ? 'active' : ''}`}>
          <div className={`slide-content${i === cur ? ' anim' : ''}`}>
            <S />
          </div>
        </div>
      ))}
      <Nav cur={cur} total={SLIDES.length} go={go} setCur={setCur} />
    </>
  );
}

ステップ 4：グラフを作成する（データがある場合のみ）

重要：元のコンテンツに実際の具体的なデータがあるスライドに限り、グラフを作成してください。 スライドの内容が定性的なもの（戦略、学び、プロセスの説明、意見）であれば、代わりにテキストベースのレイアウト（カード、表、箇条書き、列）を使用してください。数値を捏造したり、パーセンテージをでっち上げたり、グラフ用の合成データを生成したりしてはいけません。データが実際のものか推測によるものか判断できない場合は、グラフを作成しないでください。

グラフが必要なスライドがない場合、このステップ全体を省略してください。Charts.jsx を作成したり、Recharts をインポートしたりしないでください。

実際のデータがある場合は、references/chart-patterns.md を読み、軸の設定、色の定数、グラフの種類、データ生成の手法など、Recharts コンポーネントのパターンを確認してください。

すべてのグラフコンポーネントを Charts.jsx に記述します。主なパターンは次のとおりです。

• 高さを明示して ResponsiveContainer を使用します
• 最大幅 920px の .chart-wrap div で囲みます
• データ生成には useMemo を使用します
• 色のルール：データ系列やグループを区別するには、Tableau を参考にしたカテゴリ別パレット（CAT[]）を使用します。意味上の色（SEM_GREEN、SEM_RED、SEM_AMBER）は、色自体が意味を持つ場合（良い／悪い、成功／失敗、警告）に限り使用します。
• よく使われるグラフ：Area／Line を積み重ねた ComposedChart、BarChart、カスタム SVG 図
• グラフ内のすべてのデータポイントは、元のコンテンツに由来していなければなりません。 グラフの見栄えを良くするために、数値を補間、外挿、丸めてはいけません。

Step 5: Sentry デザインシステムでスタイルを設定する

デザインシステムのリファレンスにある CSS をすべて適用します。主な要素は次のとおりです。

• フォント：Google Fonts の Rubik
• 色：UI の外枠には CSS 変数（--purple、--dark、--muted）を使用します。意味を色で伝える場合に限り、セマンティック CSS 変数（--semantic-green、--semantic-red、--semantic-amber）を使用します。それ以外のデータ可視化には、カテゴリー別パレット（CAT[]）を使用します。
• スライド：絶対位置指定と不透明度のトランジション
• アニメーション：遅延を段階的に設定した fadeUp キーフレーム
• レイアウト：.cols のフレックス行、.cards のグリッド、.chart-wrap コンテナー
• タグ：スライドのラベルには .tag-purple、.tag-red、.tag-green、.tag-amber を使用します
• ロゴ：公式 SVG を references/sentry-logo.svg（フルワードマーク）または references/sentry-glyph.svg（グリフのみ）から読み込みます。近似したものをハードコードしてはいけません。必ずこれらのファイルにある正確な SVG パスを使用します。

Step 6: よくあるスライドのパターン

タイトルスライド

ロゴ（references/sentry-logo.svg または references/sentry-glyph.svg）＋ h1 ＋サブタイトル＋作成者／日付情報。

課題／背景スライド

タグ＋見出し＋アイコン付きヘッダーを備えた 2 列のカードグリッド。

データ比較スライド

タグ＋見出し＋横並びのグラフ、または変更前／変更後の比較表。

技術的な詳細解説スライド

タグ＋見出し＋全幅のグラフ＋下部の注釈付き箇条書き。

まとめ／意思決定スライド

タグ＋見出し＋カテゴリー見出しと箇条書きを備えた 3 列のレイアウト。

Step 7: 反復して改善する

初期の骨組みを作成した後：

1. npm install && npm run dev を実行して開発サーバーを起動します
2. グラフのデータモデルとビジュアルデザインを反復して改善します
3. アニメーション、色、レイアウトの間隔を調整します
4. 最終成果物をビルドします：npm run build により、dist/ に単一の HTML ファイルが生成されます

出力要件

次の要件を満たす、動作する React + Vite プロジェクトです。

• キーボードで操作できるスライドデッキとして表示される
• Sentry のブランディング（色、フォント、アイコン）を使用する
• ソースコンテンツに実際の定量データがあるスライドに限り、Recharts の可視化を含める。データを捏造しない
• 実際のデータがあるスライドがない場合は、Charts.jsx と Recharts の依存関係を完全に省く
• 配布可能な単一の HTML ファイルにビルドされる
• スライド切り替え時に滑らかなフェードインアニメーションがある