SlideKit に「スライド構成レビューアプリ」を追加しました

SlideKit は論文PDFやMarkdownから学会発表スライドを自動生成できるツールですが、今回、HTML生成の前にスライドの中身を確認・編集できる「レビューアプリ」を追加しました。

この記事では、レビューアプリの画面と使い方を紹介します。

---

どういうツールか

ブラウザで開くだけで使えるHTMLファイル（slide_reviewer.html）です。

SlideKitが生成するJSON（スライドの構成データ）を読み込んで、スライドごとに以下を確認・編集できます。

• 左側: 見出し・本文テキストの直接編集
• 右側: 挿入する画像のプレビューと差し替え

編集が終わったらJSONを保存して、そのままSlideKitに渡せばHTMLスライドが生成されます。

---

画面の構成

レビューアプリを開くと、まずトップ画面が表示されます。

トップ画面

既存のJSONファイルを読み込むか、新規作成するかを選べます。

• JSONを開く: slide_plan.json または slide_content.json をドラッグ＆ドロップ、もしくはファイル選択で読み込み
• 新規作成: 空のスライド構成を1から作成

メイン編集画面

JSONを読み込むと、3つのエリアに分かれた編集画面が表示されます。

ヘッダー（上部）

• モード切替（構成モード / 素材モード）
• メタ情報編集ボタン
• スライド追加ボタン
• JSON保存ボタン

画像バナー（ヘッダー直下）

• 画像フォルダを一括指定するエリア
• フォルダを選択すると、JSON内の画像パスを自動で解決してプレビューに反映
• 「4/4 画像すべて解決済み」のように状況が表示される

サイドバー（左）

• スライド一覧が番号順に並ぶ
• クリックで表示スライドを切り替え
• 構成モードではスライドタイプ（テキストのみ、2カラム等）のバッジが表示される
• 素材モードでは画像枚数が表示される

エディタ（中央〜右）

• 左パネル: 見出しと本文のテキストエリア。直接書き換え可能
• 右パネル: 画像プレビュー、パス表示、キャプション入力、画像の選択・削除ボタン

テキストと画像が並んで表示され、その場で内容を書き換えられます。

メタ情報編集

「メタ情報」ボタンを押すと、プレゼン全体の設定を編集できます。

• タイトル、サブタイトル
• 著者、所属
• テーマ（academic-blue / medical-teal / modern-minimal）
• 日付、プレゼンタイプ、言語

---

2つのモード

レビューアプリには2つのモードがあり、ヘッダーのトグルで切り替えられます。

構成モード（slide_plan.json）

各スライドに「タイプ」が設定されています（タイトル、テキストのみ、2カラム、画像メイン、テーブル等）。タイプを変更するセレクタが表示され、スライドごとのレイアウトを事前に指定できます。

builder CLIでそのままHTML生成する場合に使います。

素材モード（slide_content.json）

タイプの指定がなく、見出し・本文・画像だけのシンプルな構成です。1スライドに複数の画像を追加できます。

/slidekit-create に渡して、AIにレイアウトを任せる場合に使います。内容と素材だけ整えておいて、デザインはAIに考えてもらう、という分業ができます。

---

画像の取り扱い

画像の読み込みには2つの方法があります。

一括読み込み（バナー）

画像バナーの「フォルダを選択」ボタンで、画像が入っているフォルダを丸ごと指定します。JSON内の画像パス（images/fig_001.png 等）とファイル名を自動でマッチングして、プレビューに反映します。

SlideKitの出力フォルダをそのまま指定すればOKです。

個別選択（スライドごと）

各画像スロットの「選択」ボタンで、1枚ずつ画像ファイルを指定できます。画像をドラッグ＆ドロップで追加することもできます。

---

使い方の流れ

パターン1: builder で自動生成 → レビュー → 再生成

1. python -m builder paper.pdf --export-plan

→ slideplan.json と slidecontent.json が出力される

2. slide_reviewer.html をブラウザで開く

→ JSON を読み込み、画像フォルダを指定

3. スライドの内容を確認・編集

→ テキストの修正、画像の差し替え、スライドの追加・削除・並べ替え

4. JSON を保存（Ctrl+S）

5. python -m builder slide_plan.json

→ 編集済みの構成でHTMLスライドを生成

パターン2: レビューアプリで素材をつくる → AIに渡す

1. slide_reviewer.html で「新規作成」を選択

2. メタ情報を入力（タイトル、著者、所属等）

3. スライドを追加しながら、見出し・本文・画像を入力

4. 「保存」で slide_content.json をダウンロード

5. /slidekit-create で slide_content.json を参考ファイルとして指定

→ AIが43パターンからレイアウトを選び、高品質なスライドを生成

パターン3: Claude に構成設計してもらう → レビュー → 生成

1. /slidekit-build で論文PDFを渡す

→ Claude が内容を読み取り、slide_plan.json を設計

2. 「レビューアプリで確認する」を選択

3. slide_reviewer.html で内容を確認・編集

4. そのまま生成、または slide_content.json に切り替えて

/slidekit-create で別デザインに作り直し

---

スライド操作

各スライドの下部に操作ボタンがあります。

• 上へ / 下へ: スライドの順番を入れ替え
• 複製: 同じ内容のスライドをコピー
• 削除: スライドを削除
• + スライド追加（ヘッダー）: 現在のスライドの次に空のスライドを追加

キーボードショートカットも使えます。

• ↑ / ↓: スライド切り替え
• Ctrl+S: JSON保存

---

まとめ

レビューアプリは、スライド自動生成の「中間地点」として使えるツールです。

AIに丸投げするのではなく、構成データの段階で中身を確認して、必要な修正を入れてからHTMLを生成する。あるいは、自分で素材を整えてからAIにデザインを任せる。

そういう使い方ができるようになりました。

SlideKit のリポジトリ: GitHub