Rip.D HTML Slidesの仕組み
PowerPoint も Canva も使わず、
ひとことで言うと ──
JSON（設計図）＋ブラウザ＝美しいスライド
サーバーでスライドを「作る」のではなく、データを読み込んで画面に「描画」する
レイアウト種別
HTMLレンダラー
＋プレゼン
ここから、なぜ作ったのか・中身の構造・使い方の順に解説していきます。
なぜ作ったのか
セミナーや勉強会の資料を、Rip.D のブランドデザイン（ゴールド×オレンジ×ダークトーン）に統一したまま、素早く作り・直し・配布したかった。PowerPoint だとデザインが崩れやすく、Canva だと細かい型の再利用が難しい。
そこで「HTML + CSS でスライドの見た目を固定し、中身だけ JSON で差し替える」仕組みを Cursor 上で一緒に構築。USP マーケターズ勉強会用の 18 枚フルデッキまで仕上げ、Vercel で本番公開しました。
Phase 1
デザイン原型（slide_prototype.html）
表紙・目次・3カラムなどの見た目を HTML/CSS で確定
Phase 2
型レジストリ + エディタ
JSON スキーマ、フォーム UI、ライブプレビュー、プレゼンモード
Phase 3
本番運用
?deck= で資料共有、Git push → Vercel 自動デプロイ
動く仕組み（3層構造）
バックエンド（PHP や Node サーバー）は不要。静的ファイルを Vercel が配信し、すべての処理はブラウザ内の JavaScriptで完結します。
資料の「中身」だけを JSON で保存。Git に commit すれば全員が同じ初期状態を取得できます。
decks/seminar-usp-2026.json
型定義・HTML生成
サイドバーフォーム
全体統合・操作
全画面プレゼン
画面の見方（エディタ UI）
編集 — スライド 3
プレビュー（960×540）
選択中スライドのテキスト・画像・背景切替を編集。変更は即プレビューに反映され localStorage に自動保存。
全スライドを縦スクロールで確認。クリックで選択、↑↓で並べ替え。プレゼン開始で全画面投影。
8種類のページパターン
各ページは type フィールドで型を指定。types.js が型ごとに HTML を生成します。新型を足すときもここに登録するだけ。
構造ページ
- 表紙
- 目次
- 扉（章タイトル）
- 裏表紙
中身ページ
- A：3カラム
- B：箇条書き
- C：左画像＋テキスト
- D：テキスト＋右画像
全ページ共通：サイドバーの「背景: 白 → 黒に変更」で、文字色込みの配色をワンクリック切替できます。
URL と資料の共有の仕組み
?deck=seminar-usp-2026
→ decks/seminar-usp-2026.json をサーバーから取得。全員が同じ内容を見る（セミナー配布用）。
→ ブラウザの localStorage（過去の編集）か、空の新規テンプレート。
decks/ に JSON が複数あっても、指定しない限り自動選択はされません。
① 編集
② git push
③ Vercel 自動デプロイ
④ URL 共有
基本的な使い方
資料を開く
?deck=ファイル名 付き URL を開く。ローカルなら python3 -m http.server 8080
編集する
左サイドバーでテキスト・画像・背景を変更。JSON 出力 → Cursor / AI で一括編集 → JSON 読込も可。
プレゼンする
「プレゼン開始」→ 全画面 960×540。← → キーでページ送り、Esc で終了。
共有する
本番 URL を配る（推奨）。HTML 出力・PDF 保存はオフライン配布用のサブオプション。
「自分も欲しい」と思ったら
このツールは フレームワーク不要・DB 不要 の静的 Web アプリです。必要なのは HTML/CSS/JS の知識と、Rip.D デザインを CSS に落とし込む時間だけ。
html-slides/
├── index.html # エディタ本体
├── css/slides.css # デザイン
├── js/types.js # 型 + レンダラー
├── decks/*.json # 資料データ
└── docs/ # この図解
自由配置のドキュメントエディタではありません。決まった型の中で中身を差し替える「型付きスライドジェネレーター」です。
毎回同じ美しいデザインで、セミナー資料を速く作り・直し・配るための専用ツール。AI（Cursor）と JSON で協業できるのが強みです。