SlideKit ビジュアルエディタ — AI生成スライドをブラウザだけで微調整する

結論から

学会スライドの「ここだけ直したい」を、PowerPointなしでブラウザ上で完結できるようにした。AI自動生成 → GUI修正 → 発表まで、全部ブラウザだけで回る。

---

何が変わるのか

学会発表のスライド準備、こんな流れになっていませんか？

1. AIにスライドを自動生成させる
2. 「タイトルの位置をもうちょっと上に…」
3. HTMLを手で書き換える or PowerPointに変換して修正

この2→3のステップが面倒だった。特に非エンジニアの医療従事者にとってHTMLの直接編集はハードルが高い。

今回のSlideKitビジュアルエディタは、生成されたHTMLスライドをそのままブラウザ上でGUI編集できる。保存もブラウザからそのまま上書き。

---

主な機能

スライドサムネイル一覧（左パネル）

フォルダを開くと、左側に全スライドのプレビューが並ぶ。クリックで即切り替え。15枚あっても一覧で俯瞰できる。

要素の移動

テキストや図形をドラッグで自由に移動できる。他の要素のレイアウトを壊さない設計（transform方式）。矢印キーで1pxずつ微調整も可能。

カード背景のリサイズ

Alt+クリックで背景カードを選択 → リサイズハンドルで拡大縮小。スライドによくある「白いカード型の背景」を自由にサイズ変更できる。

図形の挿入

ツールバーから以下を追加:

• テキストボックス
• 画像（ドラッグ&ドロップ対応）
• 矩形 / 円 / 三角 / 線

回転

選択した要素の上に表示される回転ハンドルをドラッグ。Shift押しで15度単位にスナップするので、45度や90度の回転もぴったり決まる。

プロパティパネル

右側のパネルで数値入力による精密な調整:

• 位置（X, Y）
• サイズ（W, H）
• 回転角度
• フォントサイズ・色・太さ
• 背景色・透明度・角丸・枠線

その他

• Ctrl+Z / Ctrl+Y: 元に戻す / やり直し
• Ctrl+S: 上書き保存（File System Access API対応ブラウザ）
• Shift+クリック: 複数選択
• ダブルクリック: テキスト直接編集
• グリッド表示: 位置揃えの補助

---

使い方

1. slide_editor.html をブラウザ（Chrome推奨）で開く
2. 「フォルダ」ボタンでスライドフォルダを選択
3. 左パネルで編集したいスライドを選ぶ
4. クリック・ドラッグ・Alt+クリックで編集
5. Ctrl+S で保存

これだけ。インストール不要、ブラウザだけで完結する。

---

技術的なポイント（興味ある人向け）

• フロー非破壊移動: 要素の移動に transform: translate() を使用。position: absolute に変換しないため、Tailwindのflexやgridレイアウトが維持される
• File System Access API: Chromeのネイティブファイルアクセスで、開いたファイルに直接上書き保存が可能
• 単一HTMLファイル: 外部依存なし。slide_editor.html 1ファイルだけで動作する

---

まとめ

「AIが生成したスライドの微調整にPowerPointを開く」という地味なストレスがなくなった。

学会発表のワークフロー:

1. 論文PDFを入力 → AIがスライド自動生成
2. ビジュアルエディタで微調整
3. ブラウザでそのまま発表（or PDF保存 or PPTX変換）

全部ブラウザ内で完結する。非エンジニアの医療従事者でも使える設計を意識した。

---

SlideKitは学会スライド自動生成ツールのオープンソースプロジェクトです。