slide-deck

スライドデッキビルダー — 技術的な手順

React + Vite アプリとして、ブラウザー上で動作するプレゼンテーション用スライドデッキを作成します。目指すのは、手作り感があり、意図が伝わるスライドです。ありきたりで、AI が生成したような見た目にはしないでください。

スライドのコーディングを始める前に、プレゼンテーションの内容やトピックが提示されていない場合は、必ずユーザーに尋ねてください。 内容を作り出さないでください。先にアプリの基本構成やスタイリングの仕組みを用意してもかまいませんが、実際のスライドの内容は、すべてユーザーまたはこのディレクトリ内の slide-guidelines.md に基づく必要があります。

---

1. 技術スタック

レイヤー	選択
ビルド	Vite
フレームワーク	React 18+ と TypeScript
アニメーション	Framer Motion (motion/react)
スタイリング	Tailwind CSS v4
チャート	Recharts
アイコン	Lucide React
ルーティング	キーボード／クリックによるナビゲーション（ルーターは不要）
コードのシンタックスハイライト	（必要な場合のみ）Prism React Renderer

必要なものだけをインストールしてください。必要性が不確かなライブラリは追加しないでください。

---

2. プロジェクト構成

slides/
├── index.html
├── package.json
├── vite.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── public/
│   └── images/          # All slide images go here
├── src/
│   ├── main.tsx
│   ├── App.tsx          # Slide deck shell, navigation, keyboard controls
│   ├── index.css        # Tailwind imports + custom fonts + base styles
│   ├── slides/
│   │   ├── index.ts     # Export ordered array of all slides
│   │   ├── 01-intro.tsx
│   │   ├── 02-problem.tsx
│   │   └── ...          # One file per slide or small group of related slides
│   ├── components/
│   │   ├── SlideLayout.tsx      # Shared slide wrapper (scaling, padding, background)
│   │   ├── AnimatedText.tsx     # Reusable text entrance animations
│   │   ├── Chart.tsx            # Recharts wrapper
│   │   ├── ImageSlide.tsx       # Image display component
│   │   ├── InteractiveBlock.tsx # For custom interactive UI per slide
│   │   └── ...
│   └── lib/
│       ├── animations.ts    # Shared Framer Motion variants and transitions
│       ├── theme.ts         # Color palette, font sizes, spacing tokens
│       └── useSlideScale.ts # Hook for viewport-fitting scale

---

3. スタイルの検討 — ムードとプリセット

ステップ 1：ユーザーにムードを尋ねる

色とフォントを選ぶ前に、見る人にどのような印象を持ってほしいか、ユーザーに尋ねてください。

ムード	説明
感銘／自信	プロフェッショナルで、信頼感があり、力強い
高揚／活気	革新的で、力強く、創造的
穏やか／集中	明快で、思慮深く、ミニマル
感動／心を動かす	情緒的で、記憶に残り、優雅

ステップ 2：スタイルプリセットを選ぶ

ムードに合わせて、以下の表から 2～3 個のプリセットを提案してください。各プリセットでは、フォント、色、特徴的なビジュアル要素を定義しています。適当に組み合わせず、プリセットを 1 つ選んで全体に適用してください。

ダークプリセット

プリセット	ムード	ディスプレイフォント	本文フォント	色	特徴
Bold Signal	自信	Archivo Black (900)	Space Grotesk (400)	#1a1a1a の背景、#FF5722 のアクセントカード、白いテキスト	色付きカードを焦点にし、大きなセクション番号、グリッドレイアウト
Electric Studio	自信	Manrope (800)	Manrope (400)	#0a0a0a の背景、#4361ee のアクセントブルー、白いテキスト	2 分割の縦型レイアウト、端にアクセントバー
Creative Voltage	活気	Syne (700)	Space Mono (400)	#0066ff のプライマリーカラー、#1a1a2e のダークカラー、#d4ff00 のネオンカラー	エレクトリックブルーとネオンイエロー、ハーフトーンテクスチャ
Dark Botanical	感動	Cormorant (400) セリフ体	IBM Plex Sans (300)	#0f0f0f の背景、#d4a574 の暖色系アクセント、#e8b4b8 のピンク	抽象的でぼかしたグラデーションの円、細いアクセントライン

ライトプリセット

プリセット	ムード	ディスプレイフォント	本文フォント	色	特徴
Notebook Tabs	整然	Bodoni Moda (700) セリフ体	DM Sans (400)	#f8f6f1 のページ、#2d2d2d の外枠、カラフルなタブ	ダークな背景に紙のカード、色付きのセクションタブ
Pastel Geometry	親しみやすい	Plus Jakarta Sans (700)	Plus Jakarta Sans (400)	#c8d9e6 の背景、#faf9f7 のカード、パステルカラーのピル	角丸カード、縦型ピル、柔らかなシャドウ
Vintage Editorial	感動	Fraunces (700) セリフ体	Work Sans (400)	#f5f3ee のクリーム色、#1a1a1a のテキスト、#e8d4c0 の暖色系カラー	幾何学模様（円＋線＋点）、太い境界線
Swiss Modern	集中	Archivo (800)	Nunito (400)	純白、純黒、#ff3300 の赤いアクセント	見えるグリッド、非対称なレイアウト、幾何学模様

特殊プリセット

プリセット	ムード	フォント	色	特徴
Neon Cyber	テック系	Clash Display + Satoshi	#0a0f1c のネイビー、#00ffcc のシアン、#ff00aa のマゼンタ	ネオンの発光、グリッドパターン、粒子状のエフェクト
Terminal Green	ハッカー	JetBrains Mono	#0d1117 のダークカラー、#39d353 のグリーン	スキャンライン、点滅するカーソル、コード風のデザイン
Paper & Ink	エディトリアル	Cormorant Garamond + Source Serif 4	#faf9f7 のクリーム色、#1a1a1a のチャコール、#c41e3a のクリムゾン	ドロップキャップ、引用文、優雅な水平罫線

ステップ 3：プリセットを適用する

選んだら、src/lib/theme.ts と src/index.css の CSS カスタムプロパティで、テーマ全体を定義します。

• プリセットのすべての色
• Google Fonts または Fontshare から読み込むフォントファミリー
• 背景、アクセント、テキストカラーの CSS 変数
• 少なくともタイトルスライドとセクションの切り替えには、プリセットの特徴的な要素を使用する

---

4. デザインシステム — AI っぽさを排除するルール

タイポグラフィ

• 選んだプリセットのフォントの組み合わせを使用します。CSS の @import で Google Fonts または Fontshare から読み込みます。
• フォントファミリーは最大 2 種類までにします。
• 見出しは大きく太字にします。本文テキストは最小限にします。
• 本文の段落は中央揃えにしないでください。 左揃えにするか、意図的に配置します。
• すべてのフォントサイズに clamp(min, preferred, max) を使用してください。固定の px/rem は使用しません。これにより、ビューポートのサイズが変わっても読みやすさを保てます。

/* Example clamp values */
--title-size: clamp(2rem, 6vw, 5rem);
--subtitle-size: clamp(0.875rem, 2vw, 1.25rem);
--body-size: clamp(0.75rem, 1.2vw, 1rem);

色と背景

• プリセットのパレットを全面的に採用します。CSS カスタムプロパティとして定義します。
• 単調な色ではなく、雰囲気を演出します。 単色の背景の代わりに CSS グラデーションを重ね、奥行きを出します。

/* Layered gradient for depth */
background:
  radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.15) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.1) 0%, transparent 50%),
  var(--bg-primary);

/* Subtle grid pattern for structure */
background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 50px 50px;

• 控えめで均等に配色されたパレットよりも、支配的な色と鮮明なアクセントのほうが効果的です。

レイアウト — 拡縮するスライドコンテナ

• スライドは固定サイズの 1280×720px コンテナです。CSS の transform: scale() でビューポートに合わせて拡縮します（reveal.js のような方式です）。コンテンツはすべて 1280×720 で作成し、均一に拡縮します。
• transform による拡縮のため、Tailwind の rem ベースの余白は画面上で小さく表示されます。 目に見える余白が必要な要素（カード、チップ、背景付きボタン）には、Tailwind のパディングクラスではなく、px 値を指定したインラインの style={{}} を使用します。
• 背景付き要素の最小パディング：横長チップは style={{ padding: '20px 48px' }}、コンテンツカードは style={{ padding: '24px 32px' }}、ボタンは style={{ padding: '16px 32px' }}。
• 余白を十分に確保します。コンテンツにはゆとりを持たせます。
• スライド領域の最大 60% までをコンテンツに使用します。 残りは意図的な余白とします。
• CSS Grid または Flexbox を使用します。装飾要素以外では絶対配置を避けます。
• SlideLayout コンポーネントが拡縮と中央揃えを処理します。

コンテンツ密度の上限（必ず守ること）

すべてのスライドを 1280×720 のコンテナ内に収めます。コンテンツがはみ出す場合は、複数のスライドに分割します。詰め込んだり、スクロールさせたりしてはいけません。

スライドの種類	コンテンツの上限
タイトルスライド	見出し 1 つ ＋ サブタイトル 1 つ ＋ 任意のタグライン
コンテンツスライド	見出し 1 つ ＋ 箇条書き 4〜6 項目、または見出し 1 つ ＋ 短い段落 2 つ
特徴一覧	見出し 1 つ ＋ 最大 6 枚のカード（2×3 または 3×2）
グラフスライド	見出し 1 つ ＋ グラフ 1 つ
引用スライド	引用文 1 つ（最大 3 行）＋ 出典
画像スライド	見出し 1 つ ＋ 画像 1 枚（スライドの高さの最大 60%）
インタラクティブスライド	見出し 1 つ ＋ インタラクティブ要素（操作項目は最小限にする）

ビジュアルルール — 背景と枠線

• テキストコンテンツを背景付きカードで囲まないでください。 テキストはスライドの背景に直接配置します。ボックスではなく、余白とタイポグラフィで階層を表現します。
• 背景を重ねないでください。 色付きのボックスの内側に別の色付きボックスを配置してはいけません。
• 要素に背景が必須の場合（インタラクティブなボタン、チップ、タグ）は、bg-white/5 と border border-white/10 を使用します。単色のサーフェスカラーは使用しません。
• 枠線は控えめにします。 左側のアクセントには border-l border-muted/20 を使用し、border-l-2 は使用しません。コンテナには border border-white/10 を使用します。
• ドロップシャドウは、デザイン上の意図があるハードシャドウ（オフセットあり、ぼかしなし）を除き、使用しないでください。
• グラデーション背景の丸いバッジは使用しないでください。
• 装飾的なブロブ、波形、メッシュグラデーションは使用しないでください。
• 幾何学的なアクセントは使用できます。線、点、シンプルな図形などです。

使用禁止 — AI らしさが強く出るパターン

カテゴリ	禁止事項
フォント	Inter、Roboto、Arial、ディスプレイ用のシステムフォント。また、どのデッキでも Space Grotesk に頼るのは避け、選択に変化をつけてください。
色	#6366f1（ありがちなインディゴ）、白地に紫のグラデーション、パステルカラーの虹、均等に配色した「無難な」パレット
レイアウト	すべてを縦に積み重ねて中央揃えにする、同一のカードグリッド、ありきたりなヒーローセクション
装飾	写実的なイラスト、必要のないグラスモーフィズム、目的のないドロップシャドウ、グラデーションメッシュの背景

AI っぽさをなくすポイント

• 非対称なレイアウト（すべてを縦に積み重ねて中央揃えにしない）
• 強調には大きな文字を使う
• ネガティブスペースを意図的に活用する
• ありきたりな埋め草ではなく、主張や切れ味のあるコンテンツにする
• 一貫性を保ちながら単調さを避ける — デッキ全体でスライドレイアウトに変化をつける
• プレースホルダーのイラストではなく、実際の画像やデータを使う
• 見る人を驚かせる — デッキごとに、予想外のレイアウトを少なくとも1〜2か所取り入れる

---

5. アニメーション — 感情を動きで表現する

ムードに合わせたアニメーション

印象	アニメーションスタイル	視覚的な手がかり
ドラマチック／シネマティック	ゆっくりとしたフェードイン（0.8〜1.2秒）、大きなスケール遷移（0.9→1）	暗い背景、スポットライト効果
テッキー／未来的	ネオングロー、テキストのスクランブル／表示効果	グリッドパターン、等幅フォントのアクセント、シアン／マゼンタ
遊び心／親しみやすさ	弾むイージング（穏やかなスプリング）、浮遊する動き	角丸、明るい色
プロフェッショナル	控えめで素早いアニメーション（200〜300ms）、すっきりしたスライド	正確な間隔、データビジュアライゼーション重視
落ち着き／ミニマル	非常にゆっくりとした控えめな動き、穏やかなフェード	余白を多く取り、落ち着いたパレット、セリフ体
エディトリアル	テキストを順番に表示、画像とテキストの組み合わせ	明確な文字の階層、引用文、グリッドを崩すレイアウト

Framer Motion のデフォルト設定

• デフォルトの長さ：0.4〜0.6秒。 0.8秒を超えるアニメーションは避けてください（シネマティックなムードの場合を除く）。
• デフォルトのイージング：[0.25, 0.1, 0.25, 1]（滑らかに減速する、ease-out-expo 相当）
• 子要素の表示間隔は 0.08〜0.12秒 にし、それ以上にしないでください

スライドの遷移

• スライド切り替えには AnimatePresence と mode="wait" を使う
• スライドの登場：フェードイン＋控えめな translateY（20px）または translateX（30px）
• スライドの退場：素早くフェードアウト（0.2秒）
• スライド遷移に3D変形、回転、弾むスケールを使わないでください

コンテンツのアニメーション（スライド内）

• 見出し：最初にフェードイン＋translateYで表示
• 補足コンテンツ：見出しの後に順番にフェードイン
• チャート／画像：0.95から1への控えめなスケール変化を伴ってフェードイン
• アニメーションを連携させるには variants パターンを使う：

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] } }
};

段階的な表示

• コンテンツを段階的に表示するスライドも用意する（スライド内でクリックして進める）
• 必要に応じて、スライドごとに step の状態を管理する
• 現在のステップに応じて項目の出入りをアニメーションさせる
• 複数のステップがあるスライドでは、控えめな進行状況インジケーター（ドットまたは細いバー）を表示する

避けること

• 弾みの強い spring は使わない（減衰が不足したスプリングはおもちゃのように見えます）
• テキストに rotate アニメーションを使わない
• 継続的にループするアニメーションは使わない（インタラクティブ要素のごく控えめなパルスを除く）
• スライド内で視差スクロールを使わない
• すべての要素にアニメーションをつけない — そのまま表示しておく要素も必要です
• スライドごとに緻密に演出された登場をひとつ使うほうが、細かな動きを散りばめるより効果的です

prefers-reduced-motion のサポート

動きを抑える設定への対応を必ず含めてください。アニメーションのバリアントを次のようにラップします：

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const item = prefersReducedMotion
  ? { hidden: { opacity: 0 }, show: { opacity: 1 } }
  : { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.5 } } };

---

6. スライドの種類とコンポーネント

タイトルスライド

• clamp(2.5rem, 6vw, 5rem) を使った大きな見出し
• サブタイトル（任意）
• 日付または発表者名（任意）
• ミニマルでドラマチックなレイアウト
• プリセットを象徴する要素を使う（色付きカード、分割パネル、幾何学模様など）

コンテンツスライド（テキスト）

• 見出し＋短い箇条書き2〜5項目、または短い段落
• 箇条書きは順番にアニメーション表示する
• テキストは左揃えにし、右側には補助的なビジュアルを配置できます
• 箇条書きは最大4〜6項目まで。 超える場合は2枚のスライドに分けてください。

画像スライド

• 全面表示または大きく配置した画像
• 画像はユーザーが public/images/ に配置します
• /images/filename.ext として参照します
• 画像の最大高さ：スライドの高さの60％（720pxの場合は432px）
• キャプションテキストは下部に表示するか、半透明の背景を重ねて表示します
• 画像は遅延読み込みします

チャートスライド

• Recharts（BarChart、LineChart、PieChart、AreaChart）を使用します
• デッキのテーマに合わせてチャートをスタイリングします — プリセットのカスタムカラーを使用し、Recharts のデフォルトスタイルは使用しません
• Framer Motion のラッパーでチャートの表示をアニメーション化します
• わかりやすいラベルと見出しを付けます

比較スライド

• 左右に並べる、またはビフォー／アフターのレイアウトにします
• 明確な視覚的区切りを使用します（太い枠線ではなく、アクセントライン）
• 左、次に右のパネルをアニメーション表示します

引用／コールアウトスライド

• clamp(1.5rem, 3vw, 2.5rem) を使った大きなテキストを、中央揃えまたは左揃えで配置します
• アクセントカラーまたは背景を使用します
• 出典は下部に小さなテキストで表示します
• 引用文は最大3行にします。

インタラクティブスライド

• カスタム UI（投票、切り替え、デモ、ゲーム）が必要なスライドに使用します
• ローカルステートを持つ自己完結型コンポーネントとして構築します
• クリック時に誤ってスライドが移動しないよう、data-interactive 属性を追加します
• インタラクティブであることが明確に伝わる視覚的な手がかりを追加します（ホバー状態、カーソルなど）

リンク参照

• 外部 URL：新しいタブで開くスタイル付きリンクとして表示します（target="_blank"）
• ローカルフォルダーへのリンク：フォルダーアイコン付きの file:/// プロトコルリンクとして表示します
• リンクはそれとわかるスタイルにします — デフォルトの青色ではなく、下線とアクセントカラーを使用します

---

7. ナビゲーションとコントロール

• キーボード： 右矢印／Space／Enter ＝ 次へ、左矢印 ＝ 前へ
• クリック／タップ： 右半分をクリック ＝ 次へ、左半分をクリック ＝ 前へ（data-interactive、button、input を持つ要素は除外）
• プログレスバー： デッキ内の位置を示す細いバーを下部に表示します
• スライドカウンター： 右下に小さな「3 / 28」インジケーターを表示します
• 次のスライドに進む前に、スライド内の step サブナビゲーションをサポートします
• Escape キー： 概要モード（スライドサムネイルのグリッド）を切り替えます — あると便利ですが、v1 では必須ではありません

---

8. コンテンツガイドライン

このディレクトリにある slide-guidelines.md を参照して、教育的な構成を確認してください。

• 問題 → 議論 → 概念 → 例 → 要点のサイクル
• 1スライドにつき1つのアイデア
• ビジュアルを優先し、テキストは最小限に
• 短い見出し（6～8語）
• 複雑な情報は段階的に表示します
• ビジュアル中心のスライドを60～70％、チャート／図を10～15％、テキストによる説明を15～20％にします

スライドを作成する前に、実際のコンテンツ／トピックを必ずユーザーに確認してください。 上記のコンテンツガイドラインは構成を説明するものであり、スライドに含める内容を示すものではありません。

---

9. ビルドと実行

npm create vite@latest . -- --template react-ts  # Only if starting fresh
npm install
npm run dev

アプリは npm run dev で実行でき、localhost で表示できる必要があります。ビルドエラーや TypeScript エラーがないこと。

---

10. 品質チェックリスト

スライドをまとめて納品する前に、次の項目を確認してください。

• npm run dev がエラーなしで起動する
• TypeScript が問題なくコンパイルされる（npx tsc --noEmit）
• npx vite build が成功する
• すべてのアニメーションが60fpsでスムーズに動作する
• スライドが1280×720に収まり、コンテンツのはみ出しやスクロールがない
• スライドの種類ごとのコンテンツ密度の上限を守っている
• 「Lorem ipsum」や「Your content here」のようなプレースホルダーテキストがない
• カラーパレットに一貫性があり、選択したプリセットに合っている
• Google Fonts／Fontshare のフォントが正しく読み込まれている
• スライドで参照している画像が public/images/ に存在する
• インタラクティブな要素にホバー／フォーカス状態がある
• ナビゲーションが機能し、キーボード、クリック、プログレスバーが同期している
• 背景付きのカードでテキストコンテンツを囲まない — テキストはスライドに直接配置する
• 背景を入れ子にしない（ボックスの中にボックスを置かない）
• 背景のある要素には、インラインの style={{}} を使って十分なパディングを設ける。Tailwind クラスは使用しない
• 枠線は控えめにする — border-white/10、border-muted/20 を使用し、単色のサーフェスカラーは使用しない
• すべてのフォントサイズに clamp() を使用する — テキストに固定の px/rem を使用しない
• 背景に奥行きを持たせる — 単色ではなく、複数のグラデーションやパターンを重ねる

---

11. ワークフロー

1. ユーザーに雰囲気とコンテンツを尋ねる — どんな雰囲気にしたいですか？ テーマは何ですか？ モジュールはいくつ必要ですか？
2. スタイルプリセットを選ぶ — 雰囲気に合わせて2〜3案を提案し、ユーザーに選んでもらいます
3. アプリの骨組みを作る — Vite、Tailwind、Framer Motion、プロジェクト構成、プリセットを使ったテーマ、共通コンポーネントを設定します
4. スライドをまとめて作成する — 一度に5〜10枚を実装し、その後レビューを依頼します
5. 反復する — フィードバックに基づいて調整します
6. 画像 — スライドに画像が必要な場合は、必要な画像と配置場所（public/images/）をユーザーに伝えます。ファイル名を記載したプレースホルダーを表示し、不足しているものがわかるようにします。

アプリは常に実行可能な状態に保ちます。インポートエラーやファイルの不足を決して残さないでください。