HTMLスライド管理ツールです。フォルダを1つ指定すると、その中（サブフォルダ含む）のHTMLスライドを探し、サムネイルで並べます。あとは使うものを集めて並べ替えるだけ。画像込みの1つのHTMLとして書き出せます。開くと矢印キーでめくれ、印刷からPDFにもできます。
フォルダを1つ選ぶと、配下のHTMLスライドを探し、実際に表示した状態でサムネイルにします。記事ページなどは対象外です。並びはフォルダの階層どおりで安定しています。左のフォルダ一覧で絞り込み、ファイル名・見出しでの検索もできます。
使いたいスライドを、画面右の「出力トレイ」へドラッグします。＋ボタンやダブルクリックでも入ります。別々のファイルから拾ったスライドが1つのトレイに並び、あとから順番を入れ替えられます。
集めたスライドを、1つのHTMLファイルとして書き出します。元が別々のファイルでも見た目が壊れません。画像もファイルの中に入るので、画像フォルダを一緒に持ち歩かずに済みます。開くと矢印キーでページ送り、PDFにもできます。
サムネイルをクリックすると大きく開きます。直したい部分をクリックやドラッグで選び、「こう直して」と日本語で書くと、元のHTMLのその部分が書き換わります。質問だけして、回答を得ることもできます。編集のたびに前後の状態が残り、あとから戻せます（Claude Code CLI が別途必要）。
右クリックからデザイン一覧を開き、クリックすると中央のスライドがその場で切り替わります。気に入ったら確定すると、そのスライドに配色が入ります。他のスライドには影響しません。試着で見えている見た目が、そのまま適用されます。
42種類の飾りを、本文が入らない余白に置けます。色はそのスライドの配色に合わせて選ばれ、基本は文字に被りません。増やす・減らす・引き直しもできます。
ふだんの資料フォルダでも、同じように使えます。別シリーズをまたいで拾い、並べ替えや割り込みも同じ操作です。
次の4つの作りに対応します。スライドの目印がないHTML（記事の転載やPDF変換ページなど）は、はじめから対象外です。大きさは実寸で測るので、1つのファイルにサイズの違うスライドが混ざっていても扱えます。
| 形式 | 構造 | canvas 例 |
|---|---|---|
| Template A | deck-stage + section | 1920×1080 ／ 1080×720 |
| Template B | #deck-viewport + .slide | 1080×720 |
| class-slide | div.slide を縦に並べたもの | 960×540 など |
| page | 上記の目印はあるが、区切りが判別できないもの | 実寸を計測 |
署名済みアプリの配布はありません。macOS と Node.js 18 以上が必要です。一覧・収集・書き出しだけならこれで足ります。AI編集・デザイン変更・装飾を使う場合だけ、Claude Code CLI が別途必要です。
git clone https://github.com/GridJapan/gjHtmlSlideComposer.git
cd gjHtmlSlideComposer
npm install
npm startAI編集・デザイン変更・装飾は、コピーではなく元のHTMLを書き換えます。Git などで管理された場所での利用を推奨します（アプリ側も編集前後の状態を残します）。
プレビューが file:// の画像やフォントを読むためです。出所の分からないHTMLスライドは開かないでください。
macOS専用です。配布はソースのみで、npm start で起動します。