threads-carousel

Threads カルーセルジェネレーター

テキスト投稿を、Threads、Instagram、LinkedIn、TikTok、Stories、YouTube、または単独のプレゼンテーション用デッキに使えるビジュアルカルーセルスライド一式に変換します。3つの独立したスタイル軸（フォント × 色 × 用途）と12種類のスライドタイプを備えた、組み合わせ可能なデザインシステムです。

呼び出し方法

/threads-carousel <post text>
/threads-carousel path/to/post.md

フォーマットプリセット（対象プラットフォームを選択）

プリセット	サイズ	プラットフォーム
threads-4x5 (デフォルト)	1080×1350	Threads、Instagramフィード（縦向き）
instagram-square	1080×1080	Instagram、Facebook、LinkedInフィード
linkedin-square	1080×1080	LinkedInドキュメント投稿（PDF）
tiktok-9x16	1080×1920	TikTokフォトモード、Reels、Shorts
story-9x16	1080×1920	Instagram Stories、Threads Stories
wide-16x9	1920×1080	プレゼンテーション、YouTube、デスクトップデッキ

スライドタイプ（12種類）

タイプ	用途	必須フィールド
hook	冒頭スライド — 最も目を引く一文	text
body	タイトル＋段落	title、text
body（ポイント）	✓/✗ SVGアイコン付きの長所・短所リスト	title、points[]（textの代わり）
list	番号付き項目（順序付きリスト）	title、items[]
stats	ラベル付きの大きな数値	title、stats[]
quote	大きく配置した引用	text、author
checklist	チェックマーク付き箇条書き	title、items[]
process	接続線付きの番号付き手順	title、steps[]
comparison	2列の比較（VS／変更前・変更後）	leftLabel、leftItems[]、rightLabel、rightItems[]
cta	最後の行動喚起	text、handle
image	タイトル＋スクリーンショット／写真＋任意のキャプション	imageSrc、任意のtitle、imageCaption
emoji	大きな絵文字のイラスト＋タイトル＋テキスト	emoji、任意のtitle、text
number	大きく目立つ数値／文字列＋タイトル＋テキスト	bigNumber、任意のtitle、text

pointsの形式：Array<{ type: "plus" | "minus"; text: string }> — plusには緑色の✓、minusには控えめな色の✗を表示します。項目数と最長行に応じてサイズ（44～62px）を自動調整します。

すべてのタイプで、以下のフィールドも任意で指定できます。

• badge — タイトルの上に表示する小さな枠付きタグ（例："01"、"TIP"）
• highlight — text／title内の単語またはフレーズ。プリセットのハイライト色（ダークテーマでは黄色）で着色します
• highlightStyle: "italic-box" — ハイライトした単語を、単色ではなく色付きの長方形上にPlayfairのイタリック体で表示します

スライド内の画像

imageスライドでは、Next.jsが/public/配下で配信するパスをimageSrcに指定します。ユーザーからローカルファイルを受け取った場合のワークフローは次のとおりです。

1. ユーザーが/Users/me/Desktop/screenshot.pngのようなファイルパスを指定します（または、チャット経由でファイルを渡します）。
2. 安全な小文字のファイル名を付けてtemplate/public/images/にコピーします。例：cp "$USER_PATH" template/public/images/screenshot.png。
3. slides.tsでimageSrc: "/images/screenshot.png"として参照します（/public/からの絶対パス）。

同一オリジンで配信することで、PNGのエクスポート処理中にCORSエラーが発生するのを防げます。外部URLは使用しないでください。html-to-imageでは画像が表示されないことがよくあります。

背景の装飾（8種類）

プレビューのツールバーから切り替えられます。デフォルト：glow。

タイプ	内容
none	単色の背景
blobs	有機的な色付きの図形
grid	ドットのグリッドパターン
lines	斜線パターン
paper	罫線と左マージン（文学的な雰囲気にするには、paper／light／whiteの色と組み合わせます）
noise	SVGの粒状オーバーレイ（オーバーレイ合成）
bignumber	透かしとして表示する大きなスライド番号（01、02…）
glow (デフォルト)	交互の隅に配置する柔らかな放射状グラデーション

スタイルシステム（3つの独立した軸）

最終的なスタイルは、実行時に composePreset(font, color, purpose) を使って3つの軸から組み立てられます。

フォント軸（DEFAULT_FONT）、書体は5種類です。

Id	Font	印象
minimal (デフォルト)	Unbounded（本文＋フック）	幾何学的なディスプレイ書体、大胆、個性的
editorial	Playfair Display	クラシックなセリフ体、文学的
clean	Inter	ニュートラルなサンセリフ体、最も標準的
mono	JetBrains Mono	等幅、テクノロジー／開発の雰囲気
condensed	Oswald	幅が狭く縦長、エディトリアルなポスター向け

サーフェス軸（DEFAULT_SURFACE）— 背景とテキストのニュートラルカラー、8種類です。

Id	Bg	Text	印象
dark (デフォルト)	#0A0A0A	white	デフォルトの大胆なスタイル
white	純粋な #FFFFFF	ほぼ黒	シャープで無機質、Apple風
light	クールなジンク #F4F4F5	ほぼ黒	ニュートラルなクールグレー、Vercel風
paper	クリーム色 #ECE2C8	温かみのある茶色	ノート／文学的で温かみのある印象
gradient	紫→ピンク→アンバー	white	明るいグラデーション
pastel	ライラック #EDE9FE	インディゴ	柔らかな印象
neon	ダークグラデーション	明るいシアン	テクノロジー系のダークスタイル
ember	黒→赤のラジアルグラデーション	ほぼ白	ドラマチック

アクセント軸（DEFAULT_ACCENT）— 強調する語句に使うポップカラー、8種類です。

Id	Hex	相性のよいサーフェス
yellow (デフォルト)	#FACC15	dark、ember
red	#DC2626	鮮やかな赤 — white、light、paper
teal	#14B8A6	汎用 — dark、white、light、paper
coral	#FB7185	ピンク系 — paper、light、white
orange	#F97316	パンプキン — paper、light、dark
violet	#A78BFA	dark、neon、ember
lime	#D9F056	ember、dark
blue	#3B82F6	white、light、paper、dark
fuchsia	#C026D3	pastel、white、dark
pink	#EC4899	pastel、dark、light
amber	#F59E0B	gradient、dark、paper

組み合わせは全部で、サーフェス8種類 × アクセント8種類 × フォント5種類 × 用途2種類 = 640種類の有効なスタイルです。ベースのニュートラルカラーにはサーフェス、ポップカラーにはアクセントを、それぞれ独立して選択します。

おすすめの組み合わせ（デザインリファレンスから着想）：

• dark + teal — ノワール／ミニマルなテクノロジー系
• paper + orange — 文学的で温かみのある印象
• ember + lime — ドラマチックな告知
• white + coral — シャープでエディトリアル
• light + teal — 落ち着いた情報提示

用途軸（DEFAULT_PURPOSE）：

Id	タイトル	本文	区切り線
carousel (デフォルト)	44px、ウェイト800、大文字	ウェイト600、textColor、行間1.2	表示（96×4pxのアクセントカラー）
presentation	72px、ウェイト700、文頭のみ大文字	ウェイト400、textSecondary、行間1.45	非表示

デスクトップ／YouTube向けのプレゼンテーションスライドには、purpose: "presentation" と format: "wide-16x9" を選択します。3 × 8 × 2 の組み合わせは、いずれも有効です（合計48種類）。

---

ワークフロー

ステップ1 — テキストを取得する

• インラインで渡された場合は、そのまま使用します。
• ファイルパス（.md、.txt）の場合は、読み込みます。
• テキストが長い場合（500文字超）は、計画を立てる前に全文が揃っていることを確認します。

ステップ2 — パラメーターを確認する（任意、デフォルト値の使用も可）

まとめて一度に確認します。

1. スライド数（3～10、デフォルトは6）
2. 形式（上の表を参照。デフォルトは threads-4x5。プレゼンテーションスライドには wide-16x9 を使用）
3. 用途（carousel または presentation、デフォルトは carousel）
4. フォント（minimal／editorial／clean、デフォルトは minimal）
5. 色（8種類のパレット、デフォルトは dark）
6. CTAスライドに表示するハンドル（例：@username）

ショートカット：ユーザーが「presentation」／「презентация」／「slide deck」と言った場合は、デフォルトで purpose: presentation、format: wide-16x9、font: clean、color: white を設定します。

ユーザーが「your call」と言った場合は、デフォルト値を適用し、確認を求めずに進めます。

ステップ3 — スライドの構成を計画する

生成前に、プレビューリストをユーザーに表示します。

Slide 1 (hook): "Headline..."  [highlight: "word"]
Slide 2 (body): badge 01 — "Title" / "Text..."
Slide 3 (list): badge 02 — "iOS stack" / 3 items
Slide 4 (stats): badge 03 — "Growth" / 3 stats
Slide 5 (quote): "Quote..." — Author
Slide 6 (cta): "Final message" @username

テキストをスライドに分割するルール

1. フック = 投稿の中で最も興味を引く一文。短い行を1～3行。サムネイル単体でも成立する内容にします。
2. 本文スライド = 1枚につきアイデアは1つ。最大40語。最大5行。「and」で2つのアイデアをつなげてはいけません。
3. スライドの種類を組み合わせて視覚的な変化をつけます。列挙には list、数値には stats、直接話法には quote、VS／変更前後には comparison を優先します。すべてのスライドを body にしてはいけません。
4. CTA = 結論＋アカウントのフォローを促す文。中央揃えで、短くします。

ステップ4 — 生成

作業用コピーを準備する

WORK_DIR="/tmp/carousel-$(date +%s)"
rsync -a --exclude=node_modules ~/.claude/skills/threads-carousel/template/ "$WORK_DIR/"
ln -s ~/.claude/skills/threads-carousel/template/node_modules "$WORK_DIR/node_modules"
cd "$WORK_DIR"

node_modules をシンボリックリンクにすると、実行ごとに350MBコピーする必要がなくなります。

src/slides.ts にコンテンツを挿入する

すべてのコンテンツとデフォルト値は src/slides.ts にあります。エンジン（src/app/CarouselApp.tsx、src/lib/*）には触れないでください。SLIDES 配列と5つのデフォルト定数を編集します。

挿入の完全な例：

import type { SlideData, BgType, FormatId, FontId, ColorThemeId, PurposeId } from "./lib/types";

export const SLIDES: SlideData[] = [
  { type: "hook", text: "Line one\nline two", highlight: "two" },
  { type: "body", badge: "01", title: "Title", text: "Body text...", highlight: "key" },
  { type: "body", badge: "02", title: "Pros & Cons", points: [
    { type: "plus",  text: "One click to register" },
    { type: "plus",  text: "Works on any background" },
    { type: "minus", text: "Requires provider setup" },
  ]},
  { type: "list", badge: "03", title: "Steps", items: ["First", "Second", "Third"] },
  { type: "stats", title: "Numbers", stats: [
    { value: "10×", label: "Faster" },
    { value: "50%", label: "Smaller" },
  ]},
  { type: "quote", text: "Big idea\nin few words", author: "Someone", role: "2026" },
  { type: "checklist", title: "Pre-flight", items: ["One", "Two", "Three"] },
  { type: "cta", text: "Last word", handle: "@username" },
];

export const DEFAULT_FONT: FontId = "minimal";
export const DEFAULT_COLOR: ColorThemeId = "dark";
export const DEFAULT_PURPOSE: PurposeId = "carousel";
export const DEFAULT_BG: BgType = "glow";
export const DEFAULT_FORMAT: FormatId = "threads-4x5";

プレビューを起動してエクスポートする

bun dev --port 3333

ユーザーに http://localhost:3333 を開くよう伝えてください。次の操作ができます。

• ツールバーの行から フォーマット／モード／フォント／色／背景 をリアルタイムで切り替える
• 右上でUI言語 RU / EN を切り替える
• PDF をクリックして、すべてのスライドを1つのファイルでダウンロードする（JPEG圧縮、10枚で約5～8 MB）
• PNG（「Export All」とも呼ばれます）をクリックして、各スライドを 01-hook.png、02-body.png、…としてダウンロードする
• 個々のスライドのサムネイルをクリックして、そのスライドだけをPNGでエクスポートする

エクスポート後、開発サーバーを停止します。

カルーセルの並列実行

複数のカルーセルを同時に作成する場合は、作業ディレクトリを複数作成し、ポート3333、3334、3335で起動します。競合することなく並行して実行できます。

---

デザインシステム

標準の外観（font: minimal、color: dark、purpose: carousel）：

• 見出し用書体： Unbounded（Google Fonts）。フック用で、フォント軸に hookFontFamily が指定されている場合にのみ適用されます
• 本文用書体： Space Grotesk（minimal）／Playfair（editorial）／Inter（clean）。それ以外には preset.fontFamily を使用します
• カラーパレット（ダーク）： #0A0A0A の背景、#FFFFFF のテキスト、#FACC15 の強調色
• レイアウト： パディング80px、左揃え、スライド番号を下部中央に配置
• タイトルのルール： カルーセル用 — タイトル → 96×4pxのアクセント区切り線 → 本文。本文の上には64px以上の余白を設けます。プレゼンテーション用 — 区切り線なし、センテンスケース、72px。
• フックのサイズ： 104～140px。文字数や行数に応じて調整します
• 本文テキストのサイズ： 48～88px。状況に応じて調整します
• テキストのバランス： フックとタイトルに textWrap: "balance" を設定します（単語が1つだけ次の行に残らないようにします）

タイポグラフィの表（カルーセル用）

presentation 用の設定では、タイトルは72px／700／センテンスケース、本文は400／textSecondary／行の高さ1.45に上書きされます。

要素	サイズ	ウェイト	フォントソース
フック	104～140px	800	hookFontFamily ?? fontFamily
タイトル	44px	800、大文字	fontFamily
本文	48～88px	600	fontFamily
ポイント（メリット／デメリット）	44～62px	600	fontFamily
バッジ	26px	800、大文字	fontFamily
統計値	140～170px	900	fontFamily
統計ラベル	32px	500、大文字	fontFamily
引用	62px	600	fontFamily
リスト項目	46px	600	fontFamily（数字は48px）
チェックリスト項目	44px	600	fontFamily
プロセスのステップタイトル	36px	700	fontFamily
アカウント名	36px	500	fontFamily

よくある間違い

間違い	修正方法
スライドにテキストを詰め込みすぎる	最大40語、最大5行にします
1枚のスライドに2つのアイデアを入れる	2枚のスライドに分けます
すべてのスライドが body タイプ	視覚的な変化をつけるため、list、stats、quote、checklist を組み合わせます
1枚目にフックがない	1枚目には最も目を引く一文を入れます
最後のスライドにCTAがない	N枚目はアカウント名または行動喚起で締めくくります
強調語が長すぎる	強調はフレーズ全体ではなく、1～2語にします
バッジの文字数が多すぎる	最大2～4文字にします（01、TIP、NEW）

今後の作業／TODO

• Satori によるサーバーサイドエクスポート — CLI エクスポート（bun run export → out/*.png）では、ブラウザベースの html-to-image を Satori + Resvg に置き換えます。ヘッドレス実行が可能になります。参考として Slashgear/linkedin-carousel-gen をご覧ください。
• スライドごとの背景の上書き — 現在、DEFAULT_BG はグローバルです。スライドごとに bg フィールドを受け取れるようにすれば、1 つのデッキ内で装飾を使い分けられます。
• キリル文字に最適化した適応型サイズ調整 — 現在のしきい値はラテン文字向けに調整されています。同じフォントサイズでも、ロシア語のテキストは通常 20～30% 長くなります。
• Pencil MCP モード — 以前のスキルバージョンには Pencil による手動デザインモードがありましたが、現在のテンプレートには実装されていません。